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.

Using line and area generators

Using line and area generators - D3.js Tutorial

From the course: D3.js Essential Training

Start my 1-month free trial Buy for my team

Using line and area generators

“

- [Instructor] So far, we've been creating paths by hand, which is fine for a few points, but not practical for real-world data. Now we're going to see how D3's shape generators can automatically turn large datasets into smooth, scalable lines and areas with just a few lines of code. So, in the exercise file for this video now, there is now some data. And this is an array of objects, and each object has an x and y property. Now, if you notice, the x properties are sequential, and that will help us because we're going to effectively draw a line chart. So, what you do is you write a line function, and we'll give it a name. const line = d3.line. And we have .x and .y. Now, this is what we call a generator function, so it's going to generate data for us. It will not add a line for us, okay? It just takes some data and outputs some different data. So, we're saying, when you get an x value, when you get a data point rather, I want you to extract the x property. And I'm actually going to…

Contents