4

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.

1
  • I'm voting to close this because there's not really a general answer. In the first place, it's probably easiest to put the data in the same place as the code. Dec 7, 2013 at 11:18

5 Answers 5

5

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.

2
  • 2
    while providing links to external sites it's better to provide the minimum steps here, because you never know when content on the web changes
    – davejal
    Nov 19, 2015 at 3:23
  • Thanks for the comment, I expanded my answer Nov 19, 2015 at 3:43
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.

1

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
0
0

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"/>
0

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.