There’s a lot of stuff out on the web about incorporating charts into your wordpress blog, mostly it seems to be using Google charts, but some are using D3.js.

Many articles I found didn’t really seem to give the whole story, or had poor explanations. It was hard to filter out the useful signal from the outdated noise.

Google charts might be useful I admit, but I’ve played with d3.js a bit and quite frankly, it’s awesome. Repeat, awesome.

My preference was to use it if I possibly could, but just how easy is it to incorporate d3.js charts into WordPress.

I decided to find out, using any (or all!) help that I could find with Google searches.

Result: Just 10 minutes later I had a working demo at the bottom of this post. Quite frankly, I was surprised.

First I installed Wp-D3 – a wordpress D3.js plugin, and then more or less followed Jiazhe Wang’s article on Embedding D3.js Visualization in WordPress. I don’t need to repeat the tutorial steps here.

What do you mean ‘more or less’?
I manually uploaded the zoomable_sunburst.css and flare.json via ftp rather than the wordpress media uploader, so the file extensions didn’t matter.

I did use the html, css, json and javascript code listed in the article which meant that I only had to:

  • change the link to the uploaded json file referenced in the javascript (see below)
  • change the class name of the d3 selected element to the one that my wpd3 chart manager provided (see in pink below)

As you’ll see on line 14 below – the svg class had already been added and set to d3. Where the article said “do some assistant modification, such as add the class” – that was literally it: the one class change that was already done.

Wp-D3-windowAfter that, this is what the relevant part of the preview in the wordpress visual editor looks like (below) – I left the format exactly like that because this was all about getting a working concept, not generating something pretty and meaningful.


Was that it? Preview the draft to check it out – omg it works – publish!

Well that’s nice, d3.js in my blog – the lobster is my world! The proof of concept works. Next step: actually use it for something useful – and hopefully that’s coming soon!

You’ll find the embedded chart below:

  • click any section to zoom into its own data
  • click in the middle to zoom out