How do I use D3js in Wordpress?

Question

I have installed wordpress as well as the plugin for d3js. Now, what is the best way to upload the data so that I can make and serve graphs on the fly?

• If I upload the csv files directly, where do I store it? Does it matter?
• If I want to store the data in a third party site, what can I use? Preferably free service.

I have made graphs in my localmachine and I want to publish those graphs now.

Answer 1

Actually, if you are running your own instance of wordpress, you probaby don't need any plugin (there are limitations on wordpress.com sites).

1. As ekatz says, upload your files in the media library: the data (csv or json) and an html page containing the d3.js visualization (embedding the javascript in the html can be a good idea) Note the URL of the html, something like: www.yourwebsite.com/wp-content/uploads/2015/11/d3page.html

Be careful on how your javascript refers to your data. If uploaded in the same directory, import with relative path d3.csv("file.csv") 2. In the post/page edition, use HTML mode and create an iFrame:

`<iframe
  style="border: 0px;"
  src="www.yourwebsite.com/wp-content/uploads/2015/11/d3page.html"
  scrolling="no"
  width="100%"
  height="500px">
</iframe>`

Scrolling option and border style are used to make it look like it is part of the post.

Once you preview or publish you should see the visualization.

See more details there: http://www.datamaplab.com/posts/embedding-javascript-visualization-wordpress/

Regarding external services to store data, you can use http://www.fledit.io/ for json data, it is free and open source.

Answer 2

Include your data file in the WP media library, then copy the associated link.

Insert the link where your data file name would normally appear in your code, but do not include the data link in the urls that you include.