Dog breed size, intelligence, and popularity

It's time to build something cool.

We're going to build a dashboard. A few scatterplots combining 3 different datasets. Hovering a point highlights it in other charts.

You already built two components we'll use! A scatterplot and an axis. 💪

We're using the code-along approach 👇

1. Swizec explains what we're going to do
2. Swizec codes a part of it and makes a commit
3. You fill in the blanks
4. Swizec shows you how to fill in the blanks

The following is an outline of what we're doing to help us keep on track.

We're going to copypasta a lot of data manipulation code from my original repo. Writing all tthat isn't fun and is often the most time consuming part of building a dataviz project.

Clone starter repo

I've prepared a starter repo that comes with

• dataset
• data helper functions
• stubbed out components and files
• all necessary dependencies

dogs dashboard starter repo

final solution

live example

$ cd
$ yarn/npm install

You now have everything you need to get started.

Walk through data loading and parsing

Copypasta scatterplot implementation

Add scatterplot titles

Add datapoint highlighting

Tie plots together with React.Context

Add descriptive header copy