Wp-D3 tutorial: adding D3 snippet to a WordPress post

WARNING: although this post contains valid information to add D3 code using Wp-D3 1.x , the new version 2.0 provides a easier way to handle it: http://figurebelow.com/2014/01/19/wp-d3-v2-features/

This is a short tutorial to show how to use wp-d3 wordpress plugin and add successfully a D3 snippet into your posts (as this).
We are going to add a simple pie chart as an example, extracted from bl.ocks.org, and seen above these lines.
The first step is to edit the post and add the d3-link tags.
This tag contains a list with any needed auxiliary data file (i.e. javascript or css) needed.
The link is the text returned when selecting Add Media -> (select the file) -> Insert into Post.
For example in this post, the pie values are read from a csv:


Then the code is pasted between d3-source tags. The div where inserting the snippet can be specified by means of the canvas attribute (by default it will look for “canvas” if not provided):


Notice that the csv file path has been replaced with the path in the wordpress installation, and the div where attach the canvas (called “chart” in this case) has the same name as the canvas attribute of the tag.

And that’s it.

Comments 32

  • Hi Ruben,
    Thank you for the tutorial an the plugin!
    However, I don’t quite get it to work. Could you clarify the part with the canvas attribute? The way I understand it you have to enter the D3-Code as follows:


    [d3-source canvas="something"]

    Is that right?

    • Hi,

      The id you provide as canvas (‘chart’ in this case) must be the same that you define inside your d3 script as target to paset your d3 code (like the line in the picture: d3.select(“.chart”).append(“svg”)).

      By means of this you are specifying that the ‘envelope’ div (generated by the plugin) must be identified as ‘chart’ so you can latter find it in the DOM and append the d3 script.
      I admit that choosing ‘chart’ as id was somewhat confusing 🙂

  • Yikes. WordPress stripped the HTML out of my post. After [/d3-source] there should be a div-Tag with class=”something”.

  • […] iframes behelfen. Ruben von figurebelow hat nun aber ein simples Plugin geschrieben, das das Einbetten von D3js-Scripts in Posts […]

  • Hi ruben, i need help, i put this code in post, but don’t work in my website, i have some error?


    [d3-source canvas="chart"]
    var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    var arc = d3.svg.arc()
    .outerRadius(radius - 10)

    var pie = d3.layout.pie()
    .value(function(d) { return d.population; });

    var svg = d3.select("chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.csv("http://localhost:8888/wordpress/wp-content/uploads/2013/05/data.csv", function(error, data) {
    data.forEach(function(d) {
    d.population = +d.population;

    var g = svg.selectAll(".arc")
    .attr("class", "arc");

    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });

    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.data.age; });

    I need do something else?
    Thanks for your time

    • sorry but the copy paste put the link in the part of d3-link… whatever, the href have the link to “http://localhost:8888/wordpress/wp-content/uploads/2013/05/data.csv”

    • Hi,
      the line: d3.select(“chart”), should be d3.select(“.chart”) (notice the point).
      I made this mistake with some of my charts too (btw I already updated the post with this tricky detail, thanks!).
      That should resolve your problem.

  • Hi ruben,

    thank’s for the plugin.
    Could you provide a minimal working example or provide the code of the above example as text so we can copy and paste it?

    I can’t make d3 work with your plugin, d3.js seems not to be loaded at all, as my console reports ‘d3 is not defined’ when I try to preview the following post:

    [d3-source canvas="canvas"]
    d3.select("canvas").append("p").text("New paragraph!");

    What am I missing here?

    • Hi,

      it seems you forgot to include the “d3-link” tags, even if you don’t have any extra .css or .js they are needed to include the d3 library.
      Thanks for the feedback!


  • Hi, I’m having problems. I tried Ruben’s simple example including the [d3-link][/d3-link] and no luck. The source produced has this:

    d3.select(“canvas”).append(“p”).text(“New paragraph!”);

    A couple of questions:
    – Is it necessary to have a copy of d3.v3.js on my server, and not just point to d3js.org?

    – what are the rules for what goes into d3-link? Does it need to be data or can it be anythingIwant?

    – I don’t really understand why one needs to include the data in the [d3-link] anyways. As long as the d3-source points to a valid URL, as in
    d3.csv(“http://figurebelow.com/wp-content/uploads/2013/03/data.csv”, function(error, data)

    – can I include multiple [d3-source] snippets (with different canvas names?

    • Hi,
      – Is it necessary to have a copy of d3.v3.js on my server, and not just point to d3js.org?

      No, the plugin comes with a copy of the last d3 library.

      – what are the rules for what goes into d3-link? Does it need to be data or can it be anythingIwant?

      The initial idea of the d3-link tag is to use it to include any extra css or third-parties libs that you want to use inside your d3 script. Internally it just generates an include tag for each one of the declared css or js links.

      – I don’t really understand why one needs to include the data in the [d3-link] anyways. As long as the d3-source points to a valid URL, as in
      d3.csv(“http://figurebelow.com/wp-content/uploads/2013/03/data.csv”, function(error, data)

      The point is that the d3-link is used to include the d3.js library as well so it is necessary to include even if it’s empty (I know this should be improved ;-))

      – can I include multiple [d3-source] snippets (with different canvas names?

      Sure, you can include multiple snippets as in this post. Each chart is a different canvas (that's the main reason for having an option to declare the canvas name).

  • Grr.. my post had HTML snippits in it that are not being displayed.

    I published my non-working example here if it helps at all

  • Hi . I am trying out the wp-d3 plugin on wordpress.

    I am trying to display this D3js in the wordpress post for starters – http://bl.ocks.org/mbostock/1062544.

    I followed the example above e.g

    [d3-source canvas="chart"]
    "code from http://bl.ocks.org/mbostock/1062544"

    Can you let me know where I am going wrong with this?


    • Hi,
      at a first glance I’d say you need to change the following line in your code from mbstock:

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


      var svg = d3.select(“.chart”).append(“svg:svg”)
      (because “chart” is the id provided in the d3-source tag).

  • Hi Ruben. Thanks for your reply. I tried changing it as you mentioned but it doesnt come out in wordpress.

    This is exactly what I am pasting into the wordpress post


    [d3-source canvas="chart"]
    var w = 960,
    h = 500,
    z = d3.scale.category20c(),
    i = 0;

    var svg = d3.select(".chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .style("pointer-events", "all")
    .on("mousemove", particle);

    function particle() {
    var m = d3.svg.mouse(this);

    .attr("cx", m[0])
    .attr("cy", m[1])
    .attr("r", 1e-6)
    .style("stroke", z(++i))
    .style("stroke-opacity", 1)
    .attr("r", 100)
    .style("stroke-opacity", 1e-6)

    Am I missing any other things here?

    • Hi,
      the problem seems to be the double quote characters you are using (”), are parsed as invalid by the brower.
      You should use (“) instead. In fact I`ve seen this a couple of times with code from mbostock.

      Also debugging your example I’ve seen that the function d3.svg.mouse(…) doesn’t exist anymore and should be replaced by d3.mouse(…).

      Changing all this, it works like a charm 🙂

  • Thanks for your suggestion. I tried another D3 sample animation but for some reason, the animation is not working. The generated rounded rectangle appears. I was testing out the following code – found under http://bl.ocks.org/mbostock/1123639. Is the the issue with ” again ?

    • Hi,
      I don’t think so. I’ve realized there is a new version of d3 (d3.v3.2) different from the d3 shipped with the wp-d3 plugin (d3.v3.) so I think it’s time for an update 😉 because there are some changes in the API regarding the mouse events (that’s probably the reason why your example runs only partially).
      Regarding the double quote problem (and similar issues), it can be easily spotted if you run Firebug or similar in your browser and look for error messages in the console. That is what I usually use to debug javascript files.
      Thanks for the feedback!.

  • […] is made much easier with the wp-d3 plugin by  Ruben Alfonso. Ruben's site has a useful guide to getting your d3 vis into a post, and I've followed his example using Mike Bostock's simple pie chart. This took me three tweaks to […]

  • […] wordpress pulg-in WP-D3 developed by @figurebelow. If you go to his site you can find a nice example on how to use it. So, rather than explaining here how to use it, I'll give you some tips that can […]


  • […] This example pie chart shows the relative size of various age groups. It was adapted to work in WP-D3 v. 2.1.1 from the original located at http://figurebelow.com/2013/03/13/wp-d3-tutorial-adding-d3-snippet-into-a-wordpress-post/ […]

Leave a Reply

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