Today a donut, tomorrow the world! Another adventure in D3

Earlier I succeeded, finally, in making a donut. Before I trust my own data, I’m adamant to make something pretty – the first tut’s example (thanks Mike Bostock!), to be precise. This has to do with figuring out the deal with commas.

WTF. So confused.

Meh, screw it. I tried another example on the Gallery instead – the collision detection example.

Which worked, yay, but isn’t wobbly and interactive. ARGH. OK. focus. This is not the end point. Baby steps. Grf.

Because I'm procrastinating and not motivated enough to solve issues, I'm trying a few more... hmm, I think part of my problem is the source file link (where the data and relationships live). And then I'm probably missing some other files for the fancy stuff.

Next day: So this guy on stackoverflow "hasn't had much success with wp-d3" which is a pity, but maybe it's utility is good yet limited. Using an iframe and/or pageview may work. Alternatively/in addition using a csv file to import the data may be a good idea too, according to this cool post learning like I am 🙂 (And I am TOTES going to visualise my annual calendar like this!)

Next day: let's try the csv format first, with my work (which may be broken in other ways...)

Nope.

OK, pageview time. In the format *square bracket* pageview url="url" title="title" *square bracket*

First, trying the sneaky steal the webpage directly (which won't work for my own work, obviously, unless I host it somewhere else which sortof defeats the point), using the cool collision example again.

Title: collision detection

OK, it works, ish.  I'm not too bothered by the size of the frame right now, but this could become an issue with my stuff. A 'doland' on the pageview comments said something about a $height = ‘800px’; but not sure where to go put that. Anyways, a problem for later.

Let's try the collision example saved as a html on my wordpress site next.

It didn't work, but it did read the file (it showed the hint text). I think the problem is that the html asks for the D3 files d3/d3.js, d3/d3.geom.js and d3/d3.layout.js. So time to find those and load them locally and link them, hopefully, properly. (Ugh, this means loading up a new html file every time, yuck. Maybe I'll try this into the d3 plugin again? except that only takes the script bit and this is before that, not sure how to handle that yet - dedicated folder locally something somethinged? Rooted?).

Nope, nadda. Not even hint text. Let's go back to the donut.

Nope. OK, so this example is fairly simple so I think this is a file finding problem. Also, tomorrow's problem.

Title: donut revisited

(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 …