(still) learning how to do D3 in wordpress…

Howdy. I’m still trying to work in my model into an interactive data driven doc (D3) in wordpress. Some thoughts on my interim blog (https://indiebio.wordpress.com/visual-data/) and once I’ve got it all down I’ll neaten it up and create it’s own page.

For today, I found a plugin! Wp-D3 which looks promising. Now I have to remember all the steps. It’s been a while. I’m going to start with duplicating some random tutorial here before venturing into making my own ancient stuff works. After that, we can really play.

(I’m putting the whole journey here, so you can see how effing frustrating it is)

So, using this tutorial: https://premium.wpmudev.org/blog/beyond-pie-charts-add-mind-blowing-visualizations-to-wordpress/ and a brief detour on where to find the actual button…

… grrr.

I think the problem may be the current Wp-D3 plugin is not quite compatible with the wordpress version I currently have (but what do I know). The thing that confuses me is in that tutorial, it asks me to look for

var svg = d3.select("body").append("svg")

but my code only has

var svg = d3.select("svg")

Also, there’s commas that is not the same between the tutorial and the example code on mbostock’s page … so this may be an update thing, I think. The tutorial was from 2015, so I went looking for a more recent one:

https://getflywheel.com/layout/how-to-add-charts-to-your-wordpress-site-using-d3-js/ aka the donut tut.

It looks like these start from scratch and doesn’t use a plugin, which makes the learning curve a bit steeper, but probably is more powerful at the end of the day, so here goes.

…uh, that was confusing. But it made me go back to my files to see if I can load them in directly. And then gave up on that halfway through when I noticed that my file has that d3.select thing I was missing in the other tut. So … hangon…

Well, it didn’t work, but something worked because the preview gave a huuuge blank canvas. … Encouraging and frustrating at the same time. Which is better than just frustrating, I guess?

OK, gonna try do the donut tut and using the d3 plugin – it makes things neater, I think. Unless of course it’s the problem in the first place.

Tadaa!! Happy dance! Excellent. ‘K so we know that the plug in works. And in theory putting some thing in there gives something back. Now for the interactive stuff. It’s not alive if it doesn’t move. But this ended on a reasonable high so that’s gonna be a separate post. Cheers!

P.S. I’m going to have to resolve the commas and up to dateness of this stuff, those comma things …