Digging in

[00:00 - 00:06] Okay, so this is our code base for this chapter. It's a fairly bare bones React application.

[00:07 - 00:32] If we look at the folder structure, we have a basic index.html, and then all of this configuration that helps our code sandbox or for running locally, our local server to bundle all this content and serve it up. This is turning React components into normal HTML CSS JavaScript files.

[00:33 - 00:42] So the main things we're concerned about will be in this source folder. So the root of our app is app.jsx.

[00:43 - 01:00] This is importing timeline scatterplot histogram, and then creating these accessor functions and passing them through to these three charts. So we can see over here there's space for all three of those charts.

[01:01 - 01:11] This top one's the timeline, and then the scatterplot and the histogram. At any point, if you want to see how these look finished, I left these imports with completed code up at the top.

[01:12 - 01:34] So if we comment out, the code will be working on and comment in these completed versions. It should update with the completed version, which will have a timeline, a scatterplot, and a histogram.

[01:35 - 01:47] What we're doing is we're generating dummy data. So all the way at the bottom here, on an interval, we're grabbing dummy data, and I think that happens every four seconds.

[01:48 - 02:03] So once this boots up, we should see here's our timeline. Every four seconds it's going to have new data, and this will help us create charts that will update whenever your data updates , which is really handy.

[02:04 - 02:15] So it helps us get into those different use cases that come up when you're creating real live dashboards. All right, so let's uncomment those for now.

[02:16 - 02:30] I guess we are not finished yet. So the basic structure of our application is we have FJS, we have these three different charts, so that's timeline, scatterplot, and histogram.

[02:31 - 02:52] And then in this chart folder, we have this chart component, which handles the basic chart outline, like handling dimensions and passing data down, and then it deals with what do we need in the chart. So in timeline, we're also going to render a line and some axes.

[02:53 - 03:06] For the scatterplot, we want these circles and the axes, and for the bar chart, we have bars and the axes. So this is kind of a nice way to build up that chart library with these different components that are a little bit more generic.

[03:07 - 03:28] So this helps with building out based on these more custom components in the future. And also for your coworkers, if they're also going to be in this code base, but don't necessarily know SVG or D3 very well, they can maybe add a line without knowing how to create that line D attribute.

[03:29 - 03:42] So the first step we're going to do is to create our accessor functions and grab our data. So we're already kind of doing the heavy lifting in this app.jsx file.

[03:43 - 03:49] We're creating our data accessor, temperature accessor, community accessor. And then we're passing these.

[03:50 - 04:06] So for timeline on the x axis, we want the date, the y axis, we want the temperature. And so now when we're working on the timeline component, which is where we're going to start, we have already our x and y-accessors, and we just need to focus on drawing the timeline.

[04:07 - 04:27] So we're already kind of set with these accessor functions, and the responsibility lies on the parent component, because the timeline just needs to be passed some data and some accessor functions. And we want this to be a little bit more generic so that we could create timelines in different places in our application.

[04:28 - 04:37] Our timeline also has these imports that aren't being used yet. We'll go ahead and start using those as we walk through this tutorial.

[04:38 - 04:47] And up next, we go on to the next step of our chart checklist, which is creating our dimensions.