Actually Drawing Something!
Learn how to draw elements, such as lines and axes on your graph.
We'll cover the following...
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.
// 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 ...