A foray into Geodesign

This is part of a journey to learn to visualise what a water conscious city looks like, to help everyday people to thrive in water scarce environments. This is the goal of the AquaSavvy campaign and underscores my academic work at the Future Water Institute.

So far I’m learning how to work with RHINO and GRASSHOPPER. Baby steps. 🙂

No automatic alt text available.

I also discovered this coursera course about Geodesign, and am popping cool links here for reference.

http://www.urbanobservatory.org

Evaluating Ecosystems from Space

City Engine seems to be a very pretty tool and useful for what I thik I want to do, keen to explore it further (hopefully with the next Geospatial Coursera MOOC)

Of course, one day when I am smart enough I will do map related data visualisations and stuff.

Other stuff: a clear overview of design thinking.

The coursera course featured Dr. Douglas Olson giving a talk at the 2014 Geodesign Summit. His talk is titled “Geodesign for the City-Region: Three Scales, Three Approaches.” Dr. Olson is President of O2 Planning + Design, based in Calgary, Alberta, Canada.

Raw html in worldpress for d3.

YAAASSS!!! What? No, it just worked! Nooooooo

Using the Raw HTML plugin, and the raw/raw tags, I put in my html code for my sankey flow diagram. In preview, it worked! But once I published it, it didn’t.  The good news is that I know the code works. The bad news is it looks like either wordpress or this plugin is buggy – and its page warns about this. So I went to have a cuppa tea (in lieu of a frustrated cry), and now I’m going to try other raw html plugins.

Deactivating all other plugins that do this (just in case), trying Raw HTML Snippets (found via sitesparker) which I guess is much like the Wp-d3 plugin. Doesn’t do the donut, and gets the same result as the raw html – the text is there but not the actual sankey.

Next, Insert HTML Snippet.  This still isn’t working, but the plugin is really well designed and user friendly, worth more investigation.

Last, Shortcoder. Nope, same problem, and slightly confusing to use. So I’m re-activating the wp-d3, pageview, Insert HTML Snippet and raw html plugins. and I’m wondering if I should just spend the bucks to get the pro raw html version, will that help me? Pondering.

ok, wait, before I try figuring out PayPal (I despise paypal), let’s do the raw thing again, staying well clear of the visual interface.

All right! Shit’s weird and the sankey doesn’t seem to be working 100%, but it’s progress! So for now let’s try optimise it and not touch the visual editor. I’ll probably buy this anyways, if it’s making my life easier and I don’t see any decent alternatives at the moment.

SANKEY_C_Bacterial_flows 4may16

Wastewater Biorefinery Sankey diagram: Bacterial Bioreactor Carbon flows

From formatted JSON, using Malcolm MacLean's book.

To Do: Write macro to export values from .xls sheet into csv and update .htm file with a click of a button - better user interface.
To do: Change font to sans serif.
To do: Change position of labels to beneath blocks?
To do: Influence colours of blocks?

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