Tutorials > Intro to D3.js

10. D3.js: SVG Paths

September 25, 2013 | 3 minutes | By Scott Becker

SVG Paths are used to draw more complex shapes, like the ones you see in line charts, pie charts, and maps. We'll learn how paths work, break down the path data command language, line and curve commands, and D3's Path Data Generators.

Watch Preview



Path Example

Triangle Path

<path d="M 100 100 L 300 100 L 200 300 Z">
  • M 100 100: Move to 100x, 100y
  • L 300 100: Draw a line to 300x, 100y
  • L 200 300: Draw a line to 200x, 300y
  • Z: Close the path

To access full notes, download code and videos for offline viewing: