Multi-series d3 line chart

D3 multi-line chart

Check out the full chart and code here.

The data for this chart shows stock prices, not the market cap, of selected technology companies from 2000 to present day. Of course, it doesn’t mean a great deal to compare different company stock prices like this without the volume of shares issued too. This was an exercise in creating interactive, multi-series line charts using d3, so the data was only for illustration purposes, it could just have well been house prices in different cities, or astronauts in space for that matter.

Some reference notes on the process

Useful examples and tutorials

I’m indebted to the following line chart examples from the creator of d3, for helping me figure this out:

Single line chart from Mike Bostock
Multi-series line chart from Mike Bostock
X Value Mouseover from Mike Bostock

In addition, these tutorials from d3noob were a great help too:

Multi-line graph with automatic legend and toggling show/hide lines
Show/hide an element by clicking on another element


All of the documentation I referenced to build this chart:

d3 line
d3 time formatting
d3 datum
d3 bisector
d3 values formatter
d3 line interpolate
d3 keys
d3 min, max and extent
d3 CSV
Javascript sort array
d3 linear invert function
SVG Stroke properties

Hosting a live version of chart with Blocks and Gist

Another exercise I was keen to try was setting up a live version of this chart on I created a Gist on GitHub to host my file in the cloud, which then automatically creates a bl.ock using the same Gist number. This article has more information on how to setup a block, including using gistup to upload your files to Gist (index.html and stock_data.csv in my case).

Note, you can’t upload folders to Gists, only files, as explained in this twitter chat between GitHub devs. Remember, Repos for folders, Gists for files. So I put my Javascript chart code inline, rather than in a separate file, and I linked to a cloud hosted version of d3 from cloudflare.

Embedding your d3 chart into a WordPress post

I used this wp-d3 plugin which enables you to embed d3 charts into your WordPress blog. The following two tutorials were helpful figuring out how to use this plugin: Beyond Pie Charts: Add Mind-blowing Visualizations To WordPress, and Embedding d3 visualization into WordPress.

However, it didn’t work right out the box for me. It’s only tested to work with versions of WordPress up to 4.1.7 and this blog is running off 4.2.4, so I wonder if that’s why I had to do a few extra steps?

I opened console but couldn’t find a link to d3 in the <head></head> section of the page, so I added this myself. Second I added a <div id="d3test"></div> tag with an id, and then selected this element to append my d3 chart to.

Leave a Reply

Your email address will not be published. Required fields are marked *