D3 Based Paths (or Lines) Embedded in an HTML Page

This example is meant to act as a tutorial that helps understand how to use and work with D3 paths, within an HTML document. It attempts to segment each example into small and contained HTML div elements, while trying to show different traits and utilizations for the d3.svg.line() path generator. Hopefully, you'll find it useful in your attempts to learn and use D3.

If you'd like to understand the code, simply open up the source for the HTML page and search for the title of the HTML div section that you're interested in. The page source is partitioned into four (4) distinct areas... 1) The data, in the form of coordinate objects; 2) The D3 Javascript code/functions; 3) The HTML Body that includes each HTML div element; and 4) The Javascript function calls that correlate with each appropriate HTML div element.

NOTE: The examples on this page are intended to grow and improve, over time, so please always feel free to check back for and provide feedback on improvements.

Simple Linear Path

This example creates a simple diagonal line, where the origin is the upper left of the diagonal and the end point is the lower right of the diagonal.

Calling Simple Linear Path Function Twice in One HTML Div

Notice how a second SVG canvas gets created and appended at the bottom.

D3 Multi-Point Path Examples With Different Interpolation Types

The following group of examples represents what a multi-point line or path ( one that has more than two points associated with it) looks like after applying different interpolation types.

Multi-Point Path With Interpolation Type = "bundle"