Adding d3 visualizations to WordPress

Did you know you can include your interactive d3.js visualizations in your WordPress blog? This post explains how, with a practical example included.

Disclaimer: this is not a typical post, rather a sandbox/playground for me while I tried to add (interactive) d3.js visualizations to the blog. I might update this post over time as I move along and learn more!

Installing the plugin

First, I installed the WordPress-d3.js plugin. This plugin can be found under the name ‘Wp-D3’, the official site is https://wordpress.org/plugins/wp-d3/. I installed version 2.2, the installation proceeded without issues. Apparently there are no settings to be chosen or modified, however the plugin does add a button to the visual editor:

Wp-D3 button in the visual editor

When we click it, a popup screen appears:

Wp-D3 popup screen

Okay, that looks promising! Could it be as simple as typing in a few lines of code?

Our first rectangle

Let’s give it a try by placing a very simple svg object and drawing a rectangle in it:

Wp-D3 popup with lines of code

 

The only tricky part here is which part of the page to .select() to .append() our svg to, but thanks to this helpful post I learned to look at the name in the tab: wpd3-{post-id}-{tab-id}. Yes, you can include multiple visualizations in the same post by creating multiple tabs.

By clicking Save and Insert, a shortcode is included in the post:

wp-d3 shortcode

whose output looks like this:

Hurray, a rectangle! Exactly what we were looking for! Okay, it looks ugly and unstyled, it has no meaning, but hey, it’s a “Hello, world!”: if we can do this, 50% of the work is done, right?

Reading data

Time for step number 2: reading data from a file. This could be a .tsv, .csv, .json,… file. Let’s say we have a .csv file with the temperature of every day in 2015 (in the Netherlands, because unfortunately the weather data in Belgium is not open source 🙁 ). It looks like this (the temperature data is in .1°C):

date,temperature
20150101,57
20150102,104
20150103,68
20150104,78
20150105,54
20150106,73
20150107,76
20150108,92
20150109,116
...

Let’s upload this temperatures.csv file to our media library and take a note of the file location:

http://baryon.be/blog/wp-content/uploads/2016/03/temperatures.csv

Now, can we read data from this file? We can try this in just a few simple lines:

Getting data from a csv file using d3 in wordpress

We open the data file using the d3.csv() function. In the callback function, we add a text object to the svg for every row in the csv file. These text objects display the temperature on a certain day, and they are positioned below each other:

It’s not very pretty, and the data is running below the bottom border of the svg, but we have proven our point: we can read data from a .csv file and bind it to svg elements, hurray!

Interactivity

So what about interactivity? Can we do hover effects, for example? To investigate this, let us first make our data a little bit prettier by drawing circles in stead of text, and rearranging them around a large ring (that’s the way I picture the days of the year in my head – how about you?). I won’t bother you with all the details, but feel free to have a look at the JS Fiddle I created.

Okay, awesome. Now our days are arranged in a large ring, with the Mondays on the outer side of the ring, and the Sundays on the inside. January is on top, in dark blue, and we go clockwise up to December, in light brown. The circles scale with temperature, and we can clearly see that the hottest days were located in the first week of July (the large red circles).

Now, for the hover effect, we add the following lines of code:

circles.on("mouseover", function(d) {
   svg.append("text")
     .attr("id", "tooltip1")
     .attr("x", width / 2)
     .attr("y", height / 2 - 10)
     .attr("text-anchor", "middle")
     .attr("font-family", "sans-serif")
     .attr("font-size", "18px")
     .attr("fill", "black")
     .text(d.dayname + ", " + d.monthname + " " + d.day + ", 2015");
   svg.append("text")
     .attr("id", "tooltip2")
     .attr("x", width / 2)
     .attr("y", height / 2 + 20)
     .attr("text-anchor", "middle")
     .attr("font-family", "sans-serif")
     .attr("font-size", "24px")
     .attr("font-weight", "bold")
     .attr("fill", "black")
     .text(d.temp+"°C");
  })
  .on("mouseout", function(d) {
     d3.select("#tooltip1").remove();
     d3.select("#tooltip2").remove();
  });

In other words: we create two tooltips in the center of the ring, which display the date and temperature when we hover over any of the circles. When we leave the circle, the tooltips disappear again. The final result looks like this (make sure to hover over the circles!):

Phew, that was quite a trip! Who's a happy data visualization blogger now?

Some issues that I'd still like to tackle:

  • Styling the elements using css in stead of using d3 code? Is it useful, feasible?
  • Scalability: the svg-elements are not responsive and break the layout on small screens 🙁

 

2 thoughts on “Adding d3 visualizations to WordPress”

  1. Hi,

    Nice review!
    in the d3.select statement you can also use the “WPD3_CHART_ID” string, i.e. d3.select(“WPD3_CHART_ID”) , and the plugin will generate an id for the chart.

  2. Hi
    Good stuff here. I am having two challenges with D3.js and WordPress, using the WPD3 plugin.

    First, tooltips are not appearing. They work fine in my html environment but not on my WordPress site.

    Second, many existing visualizations set up the “chart” function, etc, before the script tag (at which you begin copying your script to insert into the WPD3 form).

    Have you found work arounds for this?

Leave a Reply

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