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.


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?

Jouissance toilet 2.0 – the foam flush

Why? We’re in drought, so we don’t have water to flush toilets. The nutrients in shit should be re-used, and that is difficult when we dilute it with loads of water and mix it with god knows what else to be shipped off somewhere to be so-called ‘treated’. Also, flushing toilets mean we are flushing nutrients into receiving water bodies (even with excellent wastewater treatment, we’re still not doing well enough). So flushing is just a stupid idea. More about this in a presentation (pdf, 5MB) I recently gave.

If you don’t know already, I have a dry toilet. I love my dry toilet. It’s indoors, I’m affluent, privileged. This is not about toilets for poor people. This is about dry toilets for everyone.

But, many people don’t like the idea of looking at their shit, so we’re trying to get the experience of the white ceramic sparkly-clean ‘flush and forget’ ‘out of sigh(t) out of mind’ toilet, with the cost-saving benefits and environment and resource recovery goodness of dry toilets. I think currently the foam flush may be our best bet.

Continue reading “Jouissance toilet 2.0 – the foam flush”

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.



Jouissance toilet

My house was featured in Earthworks. Obviously I’m thrilled, but also a tad apprehensive. While I have a dry toilet in an affluent (medium density) urban environment, I am not suggesting that people at large use this; the practitioners (specifically Richard Holden) seem to agree that flush toilets remain the best default option – from a (rather centralised) waste management perspective. I don’t know how much of that is user psychology, I don’t think we’ve explored the options from the city planning, health, waste management and engineering sides… hence my interest. On the other hand, it’s worth taking a leap and seeing where it goes. So, one step at a time. Continue reading “Jouissance toilet”

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...)


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 …