Online interactive fun, please visit RowleyGames.com for the interactive experience.
I am testing various techniques of including D3.js script within WordPress posts and pages. As I research these techniques, I am also reviewing currently existing WordPress plugins which can help keep pages loading quickly using D3.js and other required libraries in page headers.
D3.js is a JavaScript library that allows savy web authors to quickly map data to website elements, and to direct your document-flow based upon your data. Mike Bostock has been a driving force behind creation of this library, and he has created some very admirable internet graphical content and demonstrations with it.
I have found a helpful and free plugin was already created, WP-D3, for allowing D3 JavaScript code snippets to be inserted into pages and posts with the use of an editor in the administration area of WordPress. This plugin is good for managing the proper JavaScript code inserts we desire in any page or post, as well as for handling either the D3 version 3 or the version 4 library headers for us site-wide.
Edit Nov 10, 2016: That plugin was found to be slightly limited, in that your script is not centralized within the site, and is pasted separately into each post or page where scripted content is desired. I found a tool that I like to use better with D3.js and custom CSS or JavaScript in general, is the CSS-JavaScript Toolbox WordPress plugin. This recommended plugin allows WordPress site administrators to set up your script in centralized code blocks and code templates and link or reference them from pages or posts where desired. This was found to be helpful for me to create separate code-blocks to contain JavaScript versus the HTML framework to host the content and set up my SVG container or whatever is needed by the script. I can then insert the JavaScript code into the page headers where I might need it, and insert the HTML framework code block into pages or posts as I like.
I hope to build a few fun and simple interactive games or creative works for our Play | Fun pages using this combination of plugin and the D3js library.
Cheers,
James Rowley
http://www.RowleyGames.com
Move the mouse to repel dots, or tap on mobile. Ported to D3js v4.5 from Mike Bostock's original.