New task was created

Task was assigned to Bernelle Verster

Status change: Open → In Progress

Apparently blocks are no longer the thing, and Observable is the place to be now. Busy figuring out how it works, but looks nice and interactive, and updates in real time. The code for this can be hosted anywhere, but I think to make it as user friendly as possible, hosting this template where it is easy to understand what is going on and easy to collaborate takes preference. We can always change it later.

Observable looks really cool! Would you still be able to recreate our sample graphic in there? We should try not to revert to SANKEY until we've given this a go. (Even if there are a few awesome looking ones on Observable :) )

I agree, we need something more visually pleasing and flowy. I think it won't be accurate in the way Sankeys are, and I imagine one could include both in presentations / reports - one to discuss the concepts broadly and the Sankey for the meaty stuff. Observable, and d3.js / D3 in general can do all of these things.

check this out! https://observablehq.com/@zechasault/graph-o-matic-using-a-d3-force-directed-multigraph
This already gives a good layout, just by making it prettier I think that's already something usable. I've been playing with several other things as well, but still finding my feet trying to tie it all together. :)

check this out! https://observablehq.com/@zechasault/graph-o-matic-using-a-d3-force-directed-multigraph
This already gives a good layout, just by making it prettier I think that's already something usable. I've been playing with several other things as well, but still finding my feet trying to tie it all together. :)

So far, I've managed to make a pie chart that takes input from an editable table, see here.. I hope to be able to embed this into the next bit, which is a bunch of nodes that can be re-arranged and have connectors, see draft here. I'll carry on fiddling to make things nicer, and I think a big next chunk is to make the flows more modifyable. But I'm a bit stuck on what we want this to do. Is there a real dataset somewhere that I can apply this to?

Hi Bernelle,

Great stuff!! Wonderful to see you work on this -- it would be so great if we can get this to the next level. You are asking for a real dataset... here is one. This is from my MFA on Cape Town, so it shows all flows for the city broken down in a very commonly used structure. Let me know if that is of use.

Some thoughts so far:

• It's fun that it's draggable. To the power user it won't really add new value, but it's a fun way to engage with it. And in case there are too many flows to easily understand things it may be easy to move it around.


• In the original inspirational image there was this very beautiful image in the center. Would this system allow for a graphic to be placed similarly in the center?


• It would be very handy if we can ultimately somehow engage with the things in the chart. E.g. we click on a flow and a little popup shows us more detail / allows us to go to an external site for full details. Any idea if that is possible?


• One of the key end uses of this would be for us to integrate it on the website as one of the data visualization options that become available to a user and that are auto-generated by the system. So if we have the data in our database, then we want our site to create these graphs without the need of the user to fiddle with this. So while on-the-fly editing is nice, this is just to let you know that it would still be a very useful tool to have even if those editing options are not necessarily available.

OK those are just a few quick notes... please keep it up and I look very much forward to what comes out of this!!

Thank you Paul!

• Yes, I see this as not an information heavy graphic, but a visual one to introduce the topic. For the 'non-technical' people we need to convince :)


• I am using Observables as a way to interact with D3, and it allows very user friendly interaction. I think it should allow the graphic to be embedded. My current idea is to have the city outline with areas that then get animated to fill the pie chart. I guess I'll have to code it to show you what I mean, but I got the inspiration from here (scroll down until you see the "Transition to Diagram" button).


• I think interactivity is my main interest here, yes. There is a lot of potential for this, which is why I am so interest in D3.js.


• I do hope we could get it to some 'click and create' version. Select the city and the streams you want to show and poof! I am not sure how far we could push that, but I think we can get at least some of the way.

Having said all that I'm very, very new to this and learning very slowly! But the potential is very much there. The data will help me a lot, thank you.