Drawing the line
We learn about path SVG elements and how to construct a string for their d attribute.
Drawing the line#
The timeline itself will be a single path SVG element. path elements take a d attribute (short for data) that tells them what shape to make. If you've ever played a learn-to-program game for kids, creating a d string is similar.
The d attribute will take a few commands that can be capitalized (if giving an absolute value) or lowercased (if giving a relative value):
M will move to a point (followed by x and y values)
L will draw a line to a point (followed by x and y values)
Z will draw a line back to the first point
For example, let's draw this path:
We can see a new shape at the top of our chart.
More d commands exist, but thankfully we don't need to learn them. d3's module d3-shape has a
d3.line() method that will create a generator that converts data points into a d string.