CODEWITHSUNDEEP
javascriptwordpressgraphd3.jsvisualization
Geekuna Matata
Geekuna Matata

Reputation: 1439

How do I use D3js in Wordpress?

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?

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

Upvotes: 4

Views: 6485

Answers (5)

David Gladson
David Gladson

Reputation: 557

After going through lot of websites, youtube videos, here's my solution:

  1. Install File Manager plugin
  2. Add a folder for your d3 projects (ex: d3-projects/project_1), this should be inside public_html folder along with wp-admin, wp-content
  3. Ensure that javascript code is embedded in your index.html page
  4. Add index.html & css file to the project_1 folder
  5. Preview your D3js chart at your_site_url/project_1

Upvotes: 1

John Burrett
John Burrett

Reputation: 39

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.

Upvotes: 2

Fabian Dubois
Fabian Dubois

Reputation: 221

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.

Upvotes: 5

ekatz
ekatz

Reputation: 1070

The method I'm using implements an iframe. This works with the pageview plugin. Upload the html file (with all dependent csvs/tsvs etc.) to your usual wordpress media library. Then get the link to the html, and add that to the file path of the pageview:

[pageview url="/wp-content/uploads/2014/01/wpload.html" height="400px" border="yes']

There's also this: http://wordpress.org/plugins/wp-d3/

This is a plugin specifically for d3 and wordpress, but I haven't had much success with this.

Upvotes: 0

Phuoc Do
Phuoc Do

Reputation: 1344

You can use vida.io embed feature in WordPress. It is free for public visualization. For example:

<iframe src="http://vida.io/embed/SodotqYWppo6NWK9m" style="width: 100%; height: 350px" frameBorder="0"/>

Upvotes: 0

Related Questions