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

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.