[Data Visualization] - CoVid - Who is who

[overeha]

We need an embeddable interactive graph following this model: https://www.civicgraph.io/

We want to map all the actors in Romania and the connection between them. A table is in the making as we speak. The four types of actors are the following

1. Organizatii internationale
2. Institutii publice
3. Organzatii neguvernamentale
4. Companii We do not want to display what kind of connection they have, just that they are connected.

Example The connections must show : Code for Romania linked with Guvernul Romaniei, linked with Departamentul pentru Situatii de Urgenta, linked with Fundatia Vodafone Romania, linked with ING Romania etc

The file where we are working on the data is here: https://docs.google.com/spreadsheets/d/1J02NJtKc9RMydAiuC5EefC7xp00Vx9mB1MlKaXoCDN0/edit#gid=1098712259

[thetiby]

Hello, is this the spec for what we expect the graph to look like?

If so, I have the following assumptions, please confirm/reject/expand on each:

• we will most likely have tooltips that show upon hovering a node
• we should be able to pan/zoom the graph
• when sharing on social networks, we should show a zoomed out picture of the graph (which includes all nodes)
• the social sharing is for: Facebook, Instagram, (not sure what this one is), Twitter and generic embedding code for web pages

The model provided doesn't load for me: (Chrome, Windows 10, incognito, ad-blocking disabled)

[overeha]

Hello,

If so, I have the following assumptions, please confirm/reject/expand on each:

we will most likely have tooltips that show upon hovering a node - yes we should be able to pan/zoom the graph - yes when sharing on social networks, we should show a zoomed out picture of the graph (which includes all nodes) - yes the social sharing is for: Facebook, Instagram, (not sure what this one is), Twitter and generic embedding code for web pages - yes

The model provided doesn't load for me: (Chrome, Windows 10, incognito, ad-blocking disabled) Here is a better example. Flourish is the tool we will use for making the network graph: https://flourish.studio/visualisations/network-charts/

[thetiby]

Can I see the WIP data document, please? I have requested access

[tudoramariei]

I think that right now it would be better to implement the charts with e-charts It's already used in Date la Zi for all the charts and we're working on making all these charts embeddable Also, e-charts works quite well with React

Some e-charts examples for these kinds of graphs

1. https://www.echartsjs.com/examples/en/editor.html?c=graph
2. https://www.echartsjs.com/examples/en/editor.html?c=graph-circular-layout
3. https://www.echartsjs.com/examples/en/editor.html?c=graph-webkit-dep

[thetiby]

If the source data of this graph changes infrequently, is stored in Excel files and there's an existing satisfactory Flourish template, then there's no implementation needed here, we can just upload the data to Flourish and embed the interactive result.

On the other hand, if we would need to create a Flourish template first, I agree that e-charts looks to be a better fit.

[teodoradima]

Hey, if you guys decide to go with embedding Flourish I have added support for it in this PR: https://github.com/code4romania/whos-who/pull/19

[tudoramariei]

OK, I think we'll go with Flourish for now and see if we need to change to e-charts later on

@teodoradima as far as I saw from your PR, it shouldn't be a big deal to change from Flourish to embedding a different chart

[tudoramariei]

Regarding this data viz, I've added all the current known connections into this spreadsheet: https://docs.google.com/spreadsheets/d/12uQEykDFYib3yNH1v-cqNmoYJR0H2LzKrHPAfbNvJR0/

Also, I've added all the data in a Flourish Directional Graph and we have this: https://public.flourish.studio/visualisation/1711865/

It's a beginning but more data needs to be added

1. More connections
2. More metadata