Support » Plugin: Wp-D3 » WordPress-d3 For Dummies

  • I installed the plug-in on my new site and followed the installation instructions. Here a breakdown of what I did which may help you figure out why I had trouble…

    1.Upload wp-d3/ to the /wp-content/plugins/ directory
    Status: I didn’t do this but instead installed WordPress-d3 via “plug-ins->Add New” on my WordPress site. I can see 10 d3 files have been installed via the plug-in’s editor.

    2.Activate the plugin through the ‘Plugins’ menu in WordPress
    Status: Did this. Now there’s a “deactivate” option so I assume this was successful.

    3.Create a post in Visual Mode. The last toobar icon is a shortcut to the Wp-D3 Manager Editor.
    Status: I created a new “Test Page” on my site. I can see the curvy “WPD3” toolbar icon on the Visual tab for the pages editor.

    4.Paste your code into the editor.
    Status: It would be more idiot proof if this said “into the Wp-D3 Manager Editor”. I did this. (The code seems to vanish after I’m done and I don’t know where it goes or how to get it back…). Could you provide sample code that’s guaranteed-to-work-if-you-don’t-mess-with-it in the installation instructions?

    5.If you have any extra dependencies to .js or .css files upload them to your WordPress installation using the WordPress Media Library and then add their URL to the list of includes that appears when Wp-D3 Chart Manager’s ‘Include’ button is pressed.
    Status: I didn’t know if the sample code I was using had such dependencies. So I did nothing here. I tried a range of examples most of which I found on d3.org.

    6.In your D3 code, make sure that the chart is attached to a div with the same name as the current edition tab.
    Status: I didn’t understand this. I did not know what the “current edition tab” is or what it’s name is.

    7.Press ‘Insert’ to add a shortcode into the current post with the chart reference.
    Status: I clicked “Insert” and this added the text “[d3-source canvas=”wpd3-undefined-0″]” into the page’s Edit box.

    8.Press ‘Save’.
    Status: I do not know where save placed the code that I pasted into the Wp-D3 Manager Editor textbox. I was never able to “load” the code or recover it after closing the Wp-D3 Manager Editor.

    9.Preview your post and have fun!.
    Status: I’ve tried many bits of sample code. I can only get standard non-graphical text to show up, can’t get no visualization goodness.

    I’m sure this is all because I don’t have much experience but I’m willing to help out as a “really stupid” guinea pig user in the interests of making this technology more accessible to the masses. Anything you can do to help me light up my screen with visualizations would be much appreciated!

    https://wordpress.org/plugins/wp-d3/

Viewing 10 replies - 1 through 10 (of 10 total)
  • I discovered the tutorial on figurebelow at http://figurebelow.com/d3/short-tutorial-into-wp-d3-v2/ and did my best to follow it to the letter. It provided a lot of the details that the installation instructions didn’t which was great. I still wasn’t able to get d3 visualization to work in my self hosted WordPress site though. Here’s the link to my test page if that helps…

    http://www.tramfacts.com/?page_id=93

    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 http://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 http://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 http://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: “http://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:
    http://localhost/wordpress/wp-content/uploads/2014/08/data.tsv
    http://localhost/wordpress/wp-content/uploads/2014/08/j3.min.js
    http://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 http://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 http://bl.ocks.org/mbostock/3885304 should appear also in your wordpress post.

    @p_ebox, that was a great explanation

    cornmacabre

    (@cornmacabre)

    @p_ebox, this was super helpful thank you so much for the well written step-by-step. It really goes a long way for helping people like myself who are enthusiastic n00bs trying to utilize D3.JS in a practical CMS like wordpress.

    I can confirm that if you follow this step-by-step it will work. It also demystifies some of the nuance I had been struggling with for literally months (how to link data, apply custom JS & CSS at the post level, what do I select besides “body,” cuz that don’t work… etc) I suspect the link-file aspect will work for people looking to implement additional JS dependencies for their viz.

    WASP is great for debugging those issues (did that file load? if not, why?), and I can confirm everything I expected to see loaded through this plugin did everything I expected it to.

    To others: I found an annoying CSS conflict that I thankfully debugged: If you run the plugin WP Post Styling and it’s enabled for a post with D3, it will override the D3’s CSS file and cause you massive headaches. Solution: Just tick “disabled for this post” in WP Styler.

    To The Developer: Thanks so much for the great plugin. Consider using a variation of @p_ebox step-by-step in your documentation — the bone-dry explanation has left people of varying degrees of technical expertise confused.

    Plugin Author Ruben

    (@figurebelow)

    Hi Everybody,

    @p_ebox: Thanks for the detailed example, I’ll try to improve mine and eventually your post may end up somewhere in my posts at figurebelow.com 🙂

    I have been quite busy last weeks but I look forward to having more time for this and resume the development of wp-d3.

    Thanks all for your feedback!

    Ruben.

    Thanks p_ebox for the step-by-step tutorial. I installed the wp-d3 plugin, but something does not seem right.
    I followed your tutorial till step 7 and closed the wpd3 Chart Manager after saving the content.
    when I returned back to open the Wp-D3 Chart Manager in step 10, I do not see any content that I pasted earlier.

    I also tried to copy all the dependent files style.js, data.tsv, d3.min.js to the media folder. Then opened the Wp-D3 Chart Manager and pasted the javascript code and also included the above files and then clicked ‘save’, ‘insert’ and ‘close’ buttons. I see the small snippet of code inserted in the page. I clicked ‘Save Draft’ and tried to view the page. Nothing shows up.

    Another strange thing I noticed is the Wp-D3 Chart Manager opens with the class name “wpd3-undefined-0”. Does “undefined” mean anything here?
    I am not sure what is happening. Is there a better way to troubleshoot this issue?

    Any help is appreciated

    @p_ebox, thanks for your very detailed instructions. I haven’t been successful in getting anything to show up yet, but give me time. My (third) attempt is at http://www.analyzethis.net/2014/10/30/d3-example-mbostock-3885304-2/

    Two questions.

    One, the data file – is it .tsv or .csv (or doesn’t it matter)? On your site and except for steps 5 and 8 of the instructions it’s referred to as .tsv. I’ve tried it both ways. tsv makes more sense, since there are no commas in your data file.

    Two, when I drop my d3.min.js file into a text editor, it gets renamed as “d3.min_.js” – I went on my site and took out the underscore and changed the URLs to match, but it doesn’t seem to have any effect.

    Anyway, thanks again for posting this. I’m getting there.

    Dan

    Plugin Author Ruben

    (@figurebelow)

    Hi,

    You are right, .csv or .tsv doesn’t matter as long as wordpress allows you to upload the text file (some extensions are blocked).
    In the example I used tsv because as you noticed there are no commas :-).

    The d3.min.js is already included in the WpD3 plugin, in the text editor you should drop your own code.

    Hi @p_ebox,

    On the third or fourth try I got the chart to show up on my blog: http://www.analyzethis.net/2014/11/09/d3-example-mbostock-3885304-4/
    I was probably making some silly errors the previous times.

    One thing for sure: I would have been working for months, and probably would have given up, without this step-by-step tutorial. You are a prince. Thank you.

    Dan

    Hey!!

    I am hoping that one of you can help me with what I hope is a fairly simple problem I am having.

    I followed @p_ebox‘s step-by-step and everything worked perfect! Thank you so much for such a thorough guide!

    Now, I am attempting to put a D3 project I did in class up on my site. Here is the problem or at least the only one that I can think of. I am at step 10.A and I don’t have a line in my code that reads, “d3.tsv(“data.tsv”, type, function(error, data) {“.

    So, I am not exactly sure where to put the URL that links to my data that is in csv format. I have been trying to plug the URL into different spots where I think it should go to no avail.

    var svg = d3.select("#killer-data")
                    .append("svg")
                    .attr("height", 3000)
                    .attr("width", 1100);
        var current_data;
        var complete_data;
    
        function render() {
          var killers = svg.selectAll(".killer")
                            .data(current_data, function(d) {
                              return d['name'];
                            });
          var entering = killers.enter()
                                .append("g")
                                .attr('opacity', 1)
                                .attr("class","killer")
                                .attr("transform", function(d, i) {
                                   return "translate(0," + 40 * i + ")";
                                 })
                                .on('click', function(d) {
                                        console.log(d);
                                });

    Above is the area in where I think I need to plug in the URL but I am just not entirely sure where. Any help would be so appreciated.

    Also, this is my first time posting to this forum so if I am doing something erroneous please let me know!

    Thank you in advance for any help you can extend!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘WordPress-d3 For Dummies’ is closed to new replies.