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:
In addition, these tutorials from d3noob were a great help too:
All of the documentation I referenced to build this chart:
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 bl.ocks.org. 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 (
stock_data.csv in my case).
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.