Check out a free preview of the full Data Visualization for React Developers course
The "Creating Line Charts Exercise" Lesson is part of the full, Data Visualization for React Developers course featured in this preview video. Here's what you'd learn in this lesson:
In this exercise, the D3 line API is utilized to create a line chart.
Transcript from the "Creating Line Charts Exercise" Lesson
[00:00:00]
>> Shirley Wu: The exercises right here. I think the scales should be pretty much the same, so figure out the min and max of the dates, min and max of the high temperature, sorry, min and max of yes, I believe the high temperature. And then,
>> Shirley Wu: Create a line generator, d3.line, to generate a string for the d attribute of each of the paths, and return then the rate of two objects.
[00:00:32]
One to draw the path for the high temperature and the other to draw the path for the low temperature. And this time around, I want to make sure to give you d3.line is under the module d3shape. And here is the API for it. So this is basically
>> Shirley Wu: The example.
[00:01:09]
So read through that if need be. And then please create two lines for the line chart. You create this line generator and you tell it how to get the x position and the y position for each of these data points. And what this line generator is doing underneath the hood, once it gets pass in the data, it loops through each of the data points.
[00:01:40]
So it goes through this first data point, calculates the x, calculates the y, goes to the next one, calculates the x, calculates the y, and draws the line in between them. That makes sense, right? Cool. And that's all it's doing and then it's outputting this path string. And you put this into the d attribute of your path.
[00:02:04]
>> Shirley Wu: So here is the exercise. Again, the JavaScript code can go in here and then, if you return the right array, it should draw the line charts right here and spoiler. This is the D3 code that draws it right here.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops