Beyond Pie Charts: Add Mind-blowing Visualizations To WordPress

When it comes to embedding graphs and charts in your WordPress posts, there are quite a few options in the plugin repository.

But what if you want to go beyond pie-charts and bar-graphs? What if you want to add the kind of interactive, data-visualizations that will leave your visitors’ minds well and truly blown?

Then you need to strap on the D3 javascript library and take a leap into data-driven documents.

Collage of D3 visualizations
It can be a lot of work but the results of D3 visualizations are truly mind-blowing

If you thought that charts and graphs began and ended with pie-charts and bar-charts then you are in for treat because integrating the D3 library with WordPress brings a whole new level of charting sophistication.

But be warned, this is not for the faint-hearted.

So what is D3? The official website says:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Before we do anything, go to the D3 examples page and try out some of the examples.

This is not a tutorial on how to use D3 (Data-Driven Documents) but merely how to integrate D3 into WordPress. You’ll need to build the visualizations yourself but such is the range of available examples that you should be able to find something similar to what you need and modify it yourself.

Let’s get started.

Embedding A D3 Visualization In A WordPress Post

What we are going to do is add the Force-Directed Graph example to a WordPress post. Like most of the more complicated D3 examples, this visualization loads the data in from an external file, so the steps to embed it in a post are:

  1. Install the WordPress-d3.js Plugin
  2. Upload the visualization data file
  3. Insert the visualization javascript into a post
  4. Tweak the javascript to work with the plugin

Step 1: Install the WordPress-d3.js Plugin

Download this plugin from the WordPress repository (or search for it in your Add New plugin panel), install and activate it.

The plugin adds a new button to the Visual Editor to allow the insertion of D3 javascript (via a shortcode) as well as adding the D3 library to the <head> of the blog post.

Step 2: Upload the Visualization Data File

D3 can use a variety of data formats including comma separated values (CSV), tab separated values (TSV) and JSON formatted. This example uses JSON formatted data: download the file ( miserables-json.txt ) and upload it into your media library.

(Note: even though it is JSON formatted, the file uses the .txt extension as the default install of WordPress won’t allow the uploading of a .json file.)

Cut and paste the URL somewhere handy, as we’ll need it in the next step.

Step 3: Insert the Visualization Javascript

Either create a new post or open an existing post in the Visual Editor and click on the WPD3 button in the toolbar. This screen will pop-up:

Screenshot of the WordPress-d3.js plugin pop-up dialog
Just add your visualization’s javascript. Or copy someone else’s.

Go to the example page and scroll down to the code. Copy and paste the javascript code but excluding the <script> tags.

Step 4 : Tweak the Javascript

For the example to work, we just need to change a couple of lines in the javascript:

  1. how the svg element is initially created
  2. the location of the data file
Screenshot of the pop-up dialog with javascript
Just a couple of tweaks are required to fully integrate the demo

Changing How The SVG Element Is Created

If you look in the left-hand corner of the pop-up dialog you’ll see a tab with a label which is wpd3-{post-id}-{tab id}. When the shortcode is processed a div with this class is created and so we’ll create the svg element as a child of this div rather than as a child of the body element which is how the example javascript works.

Look for this code:

{code}

var svg = d3.select(“body”).append(“svg”)

{/code}

and replace body with the tab label, for example:

{code}

var svg = d3.select(“.wpd3-1-0”).append(“svg”)

{/code}

Don’t forget the . before the tab label; this is replicating the CSS class selector and won’t work otherwise.

Changing The Location Of The Data File

With all the examples, the file is usually just listed as data.csv or data.tsv or, in this case, miserables.json and you need to change this to your locally hosted file name.

For this example, look for the following code:

{code}

d3.json(“miserables-json.txt”, function(error, graph) {

{/code}

and replace the miserables-json.txt with the location of your data file relative to the root (e.g. /wp-content/uploads/2014/04/miserables-json.txt).

Click on Save and then on Insert then on Close. You should see a shortcode has been added to your post that looks something like:

[d3-source canvas=”wpd3-79-0″]

Save or Update the post and View it.

If all has gone to plan you should see something like this:

Screenshot of the Force-Related Grpah demo
A simple example that gives a hint of the power of the D3 library

You can drag the nodes and when you mouseover you’ll get a tooltip with a Les Miserables character name.

Unlimited Mind-blowing Potential

Whilst this example is pretty simple, it shows the potential of the D3 library, particularly for interactive visualizations. I’d encourage you read the tutorials and play with some of the other examples to really get a feel for this library because its potential is vast.

If you’ve used the D3 library with WordPress already, post a link a below.

Note: I would love to have included the real examples on the blog but due to obvious constraints on the plugins we can install this wasn’t possible.