D3 and WordPress

I am currently learning how to use a Javascript library called D3, and I had to do a bit of wrestling with WordPress to get the two to play nicely together (with the intent of creating nice WordPress posts explaining internals of D3). I ended up using an iframe to wrap D3 scripts, and I’ll explain how using this post.

The Problem

I’ve been putting together some example posts on how to use D3, but my primary platform is WordPress, which is less than ideal for embedded Javascript. The official WordPress-endorsed approach (covered here http://codex.wordpress.org/Using_Javascript) is to shove all your Javascript into a single file that wraps everything in a function, and then call that function. To test this method, I created a new user specifically for posting javascript, and for this user the rich text editor was disabled. I was then able to test a simple hello_world.js script:

<script type="text/javascript" src="/js/hello_world.js"></script>
<script type="text/javascript">
<!--
hello();
//--></script>

Not only is it cumbersome to create a separate Javascript file with all my code wrapped in a function, but the above is also really awkward syntax. What’s worse, if you try and include multiple Javascript files in the WordPress post, a la:

<script type="text/javascript" src="/js/useful_library.js"></script>
<script type="text/javascript" src="/js/another_useful_library.js"></script>
<script type="text/javascript" src="/js/hello_world.js"></script>
<script type="text/javascript">
<!--
hello();
//--></script>

none of them will be picked up (and, because Javascript is weird, there’s no way to include one Javascript file in another, the way you can just say “include(‘this file’)” in PHP; if anyone can explain the logic behind that, please enlighten me). Furthermore, if you’re using CSS to style your D3 plots, you’ll run into more restrictions. You can include the CSS above the <script> tag in your WordPress post, but then WordPress will <p> all over it. It may work, if you format the CSS just right, but it probably won’t. To make matters worse, your footer can disappear, or you can end up with your D3 plot buried at the bottom of the page (after your footer).

My point here is: this approach sucks.

The Workflow

I want a WordPress workflow that is compatible with my D3 workflow. To run D3, I’m running a local Python HTTP server via:

python -m SimpleHTTPServer 8888 &

and then working on live D3 examples embedded in HTML files. In order to have everything appear precisely the way I want it to, I’m best off just linking to that HTML page. But then it doesn’t put the D3 plot in the post itself. Another option might be to abandon WordPress, but that option is off the table. The last option is to directly transclude the D3 HTML page into the WordPress HTML page. This can be done using an <iframe>.

The Solution

The <iframe> transcludes an HTML page into another HTML page without changing anything about the transcluded page. It’s a bit like a television, that way. The WordPress page is the living room, and the couch, and the television dials and knobs. The D3 HTML page being transcluded is what’s playing on TV.

The <iframe> tag can be inserted by turning off the rich text editor in WordPress (via Users > Your Profile > Disable the visual editor when writing, as of WordPress 3.4.1). This will allow you to enter HTML tags directly.

The final product will look something like this, in your WordPress post:

<iframe style="border: 0px;" scrolling="no"  width="650px"  height="450px"
src="/js/parallel/simple_parallel.html">
</iframe>