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:
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:
App, which will decide what our dataset is and how to access values for our axes (accessors),
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,
Chart, which will pass down chart dimensions, and
Axis, Line, Bars, etc., which will create individual components within our charts.
This page is a preview of Fullstack D3 Masterclass
