{"id":82,"date":"2013-06-09T19:03:43","date_gmt":"2013-06-10T00:03:43","guid":{"rendered":"http:\/\/natkale.com\/?p=82"},"modified":"2016-07-23T13:27:35","modified_gmt":"2016-07-23T18:27:35","slug":"making-d3-js-and-wordpress-play-nice","status":"publish","type":"post","link":"https:\/\/natkale.com\/?p=82","title":{"rendered":"Making D3.js and WordPress Play Nice"},"content":{"rendered":"

WordPress is a great, flexible blogging platform, but it can make things that are easy in straight HTML, like simple Javascript, kind of a pain. Slightly more complicated things, like showing demos of neat D3.js<\/a> tricks, can be tough.\u00a0 This afternoon, though, I got it working.<\/p>\n

UPDATE July 2016 – while the steps below worked for me originally, this has either gotten a whole lot easier, or I was making it too complicated in the first place.\u00a0 You should be able to just do step #5 (install Raw HTML), then wrap all your javascript in the raw tag.\u00a0 Think I’ll leave this here for historical purposes, though.<\/p>\n

\n
\"D3.js<\/a>
A shot from some sample code for learning D3.js.<\/figcaption><\/figure>\n

If you want to incorporate D3 on some, but not all, of your pages in WordPress, this seems to be the way:<\/p>\n

    \n
  1. Add a custom page template<\/a> to your theme. It’s pretty straightforward – copy pages.php, then rename it. Give it a name that you’ll recognize when you make a new D3 sample page by adding the following line to the comments at the top of the page: “Template Name: D3 Page Template”. You can put whatever you want after “Template Name”, but this seemed pretty unambiguous to me.<\/li>\n
  2. Include D3 in your new template by adding the following line after the initial comments, but before “get_header()”: “wp_enqueue_script(‘d3-js’, ‘\/\/d3js.org\/d3.v3.min.js’);”. WordPress uses wp_enqueue_script<\/a> for adding javascript libraries. You can reference a local rather than hosted copy of the library, but that’s a bit more complicated; using the hosted version got me up & running faster.<\/li>\n
  3. Edit your new page template to have an element that will hold your D3 example. I created a “graph” element, but you could use a div with a specific id; it doesn’t matter. You probably want to put the element either just before or just after the line with ““.<\/li>\n
  4. Upload your template (perhaps goes without saying).<\/li>\n
  5. Install the Raw HTML<\/a> plugin for your WordPress install. If you don’t WordPress will insist on wrapping your javascript code in paragraph tags (even if you use the “Text” rather than “Visual” tab for writing your pages), and nothing will work.<\/li>\n
  6. Make a new page using the template you uploaded. To add a D3 code snippet to the page, follow the plugin instructions for wrapping your code in “raw” tags. Make sure that your code appends your SVG (or whatever) element that D3 will be working on to the empty element you created in the template.<\/li>\n<\/ol>\n

    That’s about it. Seems simple, but took me hours to figure out. Look for more D3 examples to come…<\/p>\n","protected":false},"excerpt":{"rendered":"

    WordPress is a great, flexible blogging platform, but it can make things that are easy in straight HTML, like simple Javascript, kind of a pain. Slightly more complicated things, like showing demos of neat D3.js tricks, can be tough.\u00a0 This afternoon, though, I got it working.<\/p>\n","protected":false},"author":1,"featured_media":83,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=82"}],"version-history":[{"count":12,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/posts\/82\/revisions\/141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=\/wp\/v2\/media\/83"}],"wp:attachment":[{"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/natkale.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}