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.

// 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 ...