p_ebox

Forum Replies Created

Viewing 1 replies (of 1 total)

  • To try to answer your question, I created a detailed example for you in case it helps you and others also. Here it is:

    I will describe how using the plugin “Wp-D3” in wordpress we can obtain the bar chart in https://bl.ocks.org/mbostock/3885304 .

    1. Create in your Desktop a new folder and name it: “d3-example-mbostock-3885304”. The creation of this folder and the naming does not really matter, but it is for the sake of organizing the d3 examples in case you would like to experiment with some more in the future.

    2. Visit https://github.com/mbostock/d3 and click on the file “d3.min.js” and then select Raw to get the content of d3.min.js. Carefully copy the code (or ctrl + A) and paste (ctrl + V) the code in a file named d3.min.js and save this file to the folder you created in step 1. Validate that you have the correct file inside the folder (just try to edit the file you just copied in the folder and inspect it). If you use a text editor to create the d3.min.js file, make sure that you delete the txt extension the editor might append because your file must have .js extension. Step two is very important to ensure you have the latest version of d3 javascript.

    3. Vistt https://bl.ocks.org/mbostock/3885304 , scroll down a little bit and copy the code of #index.html and paste the code in a new txt file named “d3-code.txt”. Save this file in the folder you created in step 1.

    4. From https://bl.ocks.org/mbostock/3885304 scroll down a little bit more and copy the code of #data.tsv and paste the code in a new txt file named “data.tsv”. Save this file in the folder you created in step 1.

    5. Edit “d3-code.txt” in your folder from step 1 and copy the part of the code that lies between the tags <style> …… </style>. Create a new file named “style.css” and paste what you copied inside this file (do not paste the tags <style> and </style>, paste only what was inside the tags). Save and close the file “style.css”.

    Resuming so far: You have on your Desktop a folder named “d3-example-mbostock-3885304” and inside this folder you have the following files: “d3-code.txt”, “d3.min.js”, “data.csv” and style.css .

    6. Edit again “d3-code.js” and starting from the beginning of the file
    (the beginning is “<!DOCTYPE html>“) select until the first appearance of the word “var” (this part you selected contained the style of the bar chart that we placed in the css file, contained the two tags (<style> and </style>) we didn’t need and the <!DOCTYPE html> declaration). Delete what you just selected. Finally move to the end of the file and erase the tag </script>.
    Save the file.

    7. Open “d3-code.js” and keep it on a window opened. Move to wordpress and add a new page named “d3-example-mbostock-3885304”. On this new page go to the Visual editor and press the “Wp-D3” button. Select everything in the “d3-code.js” from the open window that you have, and paste it to the window appeared in your screen that reads “Wp-D3 Chart Manager” (This window opened when you pressed the Wp-D3” button on the Visual editor of wordpress. When you paste the content of “d3-code.js” inside notice if there are any exclamation marks in the code found by the Manager and correct them. Press Save and then press Close.

    8. Press button “Add Media” in the wordpress page editor and the “Insert Media”dialogue screen will appear. On that screen select “Upload Files”. Navigate to folder “d3-example-mbostock-3885304” created in step 1. and upload the files data.csv, style.css and d3.min.js. You will see the files downloaded and added in the library. Now select one of these uploaded files and while selected look at the “ATTACHMENT DISPLAY SETTINGS” area (bottom right corner of the screen) where there is a link (for example in my PC the link for the “data.tsv” file read: “https://localhost/wordpress/wp-content/uploads/2014/08/data.tsv “) and copy that link. Save that link in a draft notepad file. Do the same for the rest of the files you uploaded. Close the “Insert Media” wordpress screen.

    9. In the visual editor of the wordpress page you just created in step 7. press the Wp-D3 button to enter the “Wp-D3 Chart Manager” and press the include button, then press the add new url button and insert one of the links you just copied in step 8. Do the same for the rest of the links.
    For my case the links I added in this way where:
    https://localhost/wordpress/wp-content/uploads/2014/08/data.tsv
    https://localhost/wordpress/wp-content/uploads/2014/08/j3.min.js
    https://localhost/wordpress/wp-content/uploads/2014/08/style.css

    Press save and then close the include URL resources window.

    10. Move now to the main content of the Wp-D3 Chart Manager and do the following:

    10.A — locate the line that reads: “d3.tsv(“data.tsv”, type, function(error, data) {“
    delete data.csv and replace it with https://localhost/wordpress/wp-content/uploads/2014/08/data.tsv . In this way you make sure that d3 will find your tab separated values file that contains your data, which you have uploaded locally in your wordpress media library.

    10.B — locate the line that reads: “var svg = d3.select(“body”).append(“svg”)”
    delete the word body and replace it with the literal .wpd3-xyz-k
    where xyz-k are numbers that appear on top left corner of your open Wp-D3 Chart Manager window. Do not forget that there is a dot (.) in front of wpd3-xyz-k. Now press Save and then press “Insert” and then again press “Save”.

    11. Press Save Draft on the wordpress editing screen and then press preview. If you followed all the steps then the bar chart of https://bl.ocks.org/mbostock/3885304 should appear also in your wordpress post.

Viewing 1 replies (of 1 total)