This video is available to students only

Digging in

We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data

Digging in#

Our code for this chapter is a very bare bones React app. You should see an empty dashboard with three placeholders — one for a timeline, one for a scatter plot, and one for a histogram.

When we're finished, our dashboard will look like this:

Finished dashboard

Within the src folder, we have an App component that is loading random data and updating it every four seconds — this will help us design our chart transitions.

Our chart-making plan has four levels of components:

  1. App, which will decide what our dataset is and how to access values for our axes (accessors),

  2. Timeline, ScatterPlot, or Histogram which will be re-useable components that decide how a specific type of chart is laid out and what goes in it,

  3. Chart, which will pass down chart dimensions, and

  4. Axis, Line, Bars, etc., which will create individual components within our charts.

 

This page is a preview of Fullstack D3 Masterclass

Please select a discussion on the left.