Line Generator
Explore how to create a line generator using D3's d3.line() function to calculate coordinates and draw connected points in a line chart. Understand how the generator works with scales and data accessors to produce SVG path elements and how to render this path with proper attributes for styling.
We'll cover the following...
We are going to draw the line for our line chart. We need a way to calculate the coordinates for the points in the line. Then, we need to connect the points. We have years worth of data. There is a lot of points that need to be drawn. D3 comes with something it calls generators.
What are generators?
In D3, generators are functions that can generate a path. The value produced by a generator can be used with the d attribute of the <path> element. The <path> element is our best bet for drawing a line chart because of how many points will need to be drawn. There is not another shape available that can accomplish our needs for drawing a line chart.
However, the <path> element is a very complex shape to work with, so D3 introduces generators to make it easy for working with the path shape. There is a generator for producing a line. Let’s look at how we can use this generator to help us draw our line chart.
D3 shape
There is a package called D3 shape. You can find it here:
https://github.com/d3/d3-shape
This package comes ...