From the course: D3.js Essential Training

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Challenge: Line chart from scratch scales and generators

Challenge: Line chart from scratch scales and generators - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Challenge: Line chart from scratch scales and generators

“

(lively upbeat music) - [Instructor] So welcome to this challenge, which focuses on data. So for this challenge, I want you to create a line chart from scratch. And that means first that you need to go and get flatData.csv as your URL. And because that's a CSV, the first thing you're going to need to do in your JavaScript file is transform the data. So the string dates will need to become JavaScript date objects and the string numbers will need to become proper numbers. And once you've done that, you can declare your scales. You will need a timescale for your x-axis and a linear scale for your y-axis. And once you've done that, you can add a path element to the page using those scales and using the d3.line() generator. Now this is bringing together a lot of the things that we have learned, and therefore this challenge is likely to take you a bit longer. I would allow you yourself at least 10 minutes for this challenge. And if you get stuck, don't worry. Just check out the solution…

Contents