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/

Dear All,
I would like to design something similar on the bellow image for my city to show relationships between materials used and emissions. Please, which can of software could I use for this purpose? I will be delighted if you could suggest me the appropriate tool. Thanks.

Hi Pascal

I would recommend Inkscape, which is an open source graphics editor, similar to Adobe's suite, but free and I find it easier to use. https://inkscape.org/

In addition you can find free vector images to import into Inkscape and adapt, all over the web, see for example the nounproject https://thenounproject.com/.

Without the images, what you are trying to show is called a Sankey diagram, (a Material Flow Analysis) and there is some programmes on the web for this, but I don't like any of them. D3.js is a good way of coding these, but it has a steep learning curve, see e.g. https://observablehq.com/search?query=sankey

Dear Bernelle,

Thank you very much for your reply. The Inkscape is comprehensive than other, even if I'm struggling too.

Hi Pascal,
Just some background to the image you shared. Back in the Paul Duvigneaud and his team had an in-house illustrator that actually drew all of the illustration by hand. So to go back to Bernelle's point this type of illustrations are difficult to be made "automatically", you will need to build them yourself.
What you could do, is to somehow take this image and delete some text and images, and adapt it to your city and your figures. In any case this will certainly take some time (to learn Gimp or Inkscape) and do the illustration.
We're very curious what your result will be. Please do share it here once done.
cheers,
a.