Actually Drawing Something!
Learn how to draw elements, such as lines and axes on your graph.
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.
Press + to interact
// Add the valueline path.svg.append("path").data([data]).attr("class", "line").attr("d", valueline);
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 ...