This video is available to students only

Drawing the line

We learn about path SVG elements and how to construct a string for their d attribute.

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.

Coding turtle via

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.

d shape example

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.

Our generator needs two pieces of information:


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.