the hello world of d3

After getting stuck on getting a squishy collision, I decided to go back to basics by following step by step this blog.

So far so good, because it’s not looking for files – I think my file linking is the problem.

Yes! OK, so the file calling from the media library seems to work. It must be the format of calling the file from some other place, and perhaps how the code relates or something that’s a problem. This is encouraging. Now, for interactivity (or squishiness)

And, nope. *Weeps*. In this tut's code, it says

// Load dataset
var dataset = d3.csv.parse(d3.select("pre#data").text());
// this just grabs the text from the preformatted block
// and parses it as if it was a csv file
// in your real code, you would use d3.csv(filename, callbackFunction)
// and the rest would be inside your callback function:

So the ONE place where I need help it leaves me hanging. Darnit. Now I have to actually think about this.

I would think the correct alternative is

d3.csv("http://indiebio.co.za/wp-content/uploads/2017/12/temperatures.csv", function(d) );

but that makes the plugin ask for an identifier, which I think means it needs the date/temperature info which is in there too, so I can add that, but then where do I stop adding stuff from the previous example? If I add everything it gives the text list, so that's obvs too much.

I need to go learn about variables (or functions? variables are functions? ? ) First, let's digress to capture my current thinking on foam flush toilets. Catcha later.

Next day: trying
var dataset = d3.csv("http://indiebio.co.za/wp-content/uploads/2017/12/temperatures.csv", function(data, temperature) {
and the }); in various places, but no luck so far.

Let's go have a look at some other example that doesn't ask for the d3.js yet but that does call a data file. Ambitiously, the miserables one again (which does use d3). Whole big load of nope. I tried to just use the second example above to show the list of temperatures, but with the miserables file (renamed to csv, and also tried the txt version). This didn't work, even after lots of tweaking. I think an issue may be that the temperature file has simple data pairs, like "date,temperature, 20150101,57", whereas the .json file (in it;s csv or txt form) has "{ "nodes":[ {"name":"Myriel","group":1}, ... ], "links":[ {"source":1,"target":0,"value":1}, ...  ] }.

Hmmm. OK, back to calling a data file.

Actually (yes, focus is hard) ... looking for stuff I found the Raw HTML plugin that may be better (because one can edit the html directly rather than upload a new one every time as I lamented in a previous post). Thanks Nat Kale! Also found what could have been a very useful example but the link to the original tut has broken. It had a nifty way to make the urls better - upload directly via ftp (doh 🙂 ) Some other interesting posts on that blog too. I think I'm going to try the raw html (in a new post) because I suspect it's the d3 plugin that's breaking the more sophisticated d3 stuff. Ugh, this makes me feel so dumb.

 

 

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