Actually Drawing Something!
Explore how to render line graphs in D3 by joining data arrays to SVG path elements and drawing axes with various orientations. Understand how to position axes and apply styles using D3 methods to create simple, clear visualizations.
We'll cover the following...
Up until now, we have spent a lot of time defining, loading, and setting up. Good news though; we’re about to finally draw something!
Drawing the line
We jump lightly over some of the code that we have already explained and land on the part that draws the line.
This area occurs in the part of the code that has the data loaded (via the d3.csv block), and it’s ready for action.
Line 2 adds a new path element. A path element represents a shape that can be manipulated in many different ways.
Line 3 joins our array of data (confusingly, the array is called data) to the path element. We could have used an alternative method here with a line that read ...