Community Portal

Creating beautiful visualisations for city flows

Metabolism of Cities Multimedia Library
Back to topic list

Metabolism of Cities has some ambition in creating visualisations that represent resource flows in cities but take on a different look than the traditional SANKEY graphs.


The idea is to make it auto-generated by basically ensuring it's a SVG file, and that we can simply modify the width of the bars, to illustrate the "weight" of the flows. The idea is to somehow show a "city" (or "island"), and then the environments it interacts with: the soil, the air, the water, other cities, etc. And to then draw arrows between them. In a dream scenario, we would create something like this:example


Let us know what you think and how we can do this, it will be an incredible asset for all aspects of learning and work


This is EXACTLY what I want to do. I'm working on learning how, I just get terribly distracted :)


I think a web-based data driven documentation (d3) is probably the most straightforward way to do this - https://d3js.org/, so one could say 'simply' HTML with input fields. As an unrelated example, this polygon can have it's faces changed with input: https://observablehq.com/@mbostock/geodesic-rainbow
Reveal.js (used for presentations, like Powerpoint meets a website) is also very nifty, I liked working with it. I guess it shares the .js backbone.
So with this it will live on the web and then one can export the image when satisfied with how it looks.


Blender has Python scripting ability, which can:
- Create user interface elements such as menus, headers and panels.
- Create interactive tools.
(via https://docs.blender.org/api/current/info_quickstart.html)
I think that will be a bit more technical and maybe a bit tricky, but the results could be mindblowing and 3D and animated...
With this one one will have to download the file, open it in Blender, probably fiddle a bit and then export an image, but a wide variety of things will be possible this way.


I guess one could do this purely in Python too. I mean, surely there must be millions of ways to do this, but for me those are the two main contenders to try.


Next step? Partly why I get distracted is I don't have a defined output, and the things I want to do is hugely complicated, I don't know if it's even possible and so I get demotivated or bogged down halfway through. So maybe a simple brief will help me. Is it feasible for us to come up with a brief for me? So maybe, duplicate that example, and make it so that the width of the bars can be changed.


So looking at that example, things that could be changable would be the area of the pie dedicated to livestock, plant, industry, residents etc, and that would be a slider or input number? The width of the bars will probably need some scaling to trade off accuracy with visual effect. Losses need to be added.


This is fantastic Bernelle! I don't have much by way of input on methods but in general I think the approach of recreating the example graphic and working for there is great!


Great! Going to try make a rough mock-up with placeholders today, just to try. Anyone please feel free to contribute, advise, drop opinions :) Will drop the github links etc here for now.


I've created a task for this: https://new.metabolismofcities.org/tasks/33614/

You are not logged in.

Sign Up Log In