Visualizzazione web

[hal0gen]

Io ho caricato una versione molto acerba (#12) di una single-page application che si potrebbe usare per visualizzare i risultati del progetto. Ho combattuto per ottenere una versione dinamica della dot-density map (mappa 1). Al momento il risultato è questo:

Demo

Ho stilato il tutto rifacendomi al sito del progetto di Bruxelles, giusto per raffrontarlo meglio. Nella lista dei paesi ho tolto l'Italia, perché rende praticamente invisibili tutti gli altri (ad ogni modo può essere inserita scommentando la riga di codice in src/components/Map1.vue. Oltre alla selezione delle varie regioni e dell'anno, ho aggiunto il numero di punti per persona e l'opacità, si ottengono effetti abbastanza diversi a seconda dei valori.

Questa è solo una base, e può venire ampiamente modificata e stilata. La UI per la mappa va sicuramente modificata. Può andar bene come punto di partenza?

[albertocottica]

Wow, Marco, è grandioso!

Io forse farei un po' di prove e battezzerei dei valori, altrimenti rischiamo che si possa ottenere qualunque risultato trafficando con i parametri. Anche nel progetto di Bruxelles, se guardi l'ultima visualizzazione, hanno scelto tre gruppi molto segregati tra di loro, e hanno fatto una mappa con solo quei tre lì. Non è una forzatura, perché mostra una segregazione molto netta almeno tra quei tre gruppi.

Comunque complimenti.

[hal0gen]

Sì, ci ho giocato un po' ed effettivamente bisogna stare attenti con i risultati ed i parametri. Ad esempio, con una dot density troppo alta si finisce con il privilegiare l'ultima mappa che viene renderizzata. Secondo me, in una rappresentazione del genere sarebbe comunque bello lasciare un livello di interattività ma con dei vincoli (es. un elenco di combinazioni già pronte da visualizzare). A me sembra che non ci sia una separazione così chiara come nel caso di Bruxelles, comunque ci sono delle differenze, ed è interessante la progressione nel tempo.

C'è anche il discorso colori, che andranno scelti con cura (io ho preso quelli di Bruxelles e ne ho generati altri affini, ma non funzionano molto bene), così come una serie di gruppi non ha proprio senso rappresentarli (es. Oceania, Altro) perché finiscono con l'affollare inutilmente le opzioni.

Nel frattempo vado avanti con le ottimizzazioni: il grafico va responsivizzato, e la dot density deve essere in qualche modo una funzione delle dimensioni della mappa (con un'adeguata legenda). In questi giorni aggiungerò anche un tooltip con qualche informazione sul quartiere specifico. Detto questo, quanto fatto finora è ancora preliminare, accetto volentieri consigli su come modificare questa mappa e proseguire il lavoro in un modo allineato al resto del progetto.

PS. Io sono Tommaso 😄

[albertocottica]

Scusami, Tommaso!

Credo che la chiave per una visualizzazione chiara stia nel giocare con i dati, e tirare su dei semplici grafici o anche solo dei coefficienti di correlazione. Facendo così emergono i patterns interessanti, e la visualizzazione diventa un modo per evidenziarli. Ma prima devi capire quali sono!

Per esempio, la distribuzione degli indici di diversità per quartiere nel 2018 è abbastanza diversificata. A sinistra, Parco Sempione, Tortona, Washington, Muggiano sono poco diversi; a destra Triulzo Superiore e Parco Forlanini-Ortica sono molto diversi. Non mi aspettavo una diversificazione così netta, ma forse nella discussione a Milano questo dato non è per niente sorprendente, e in questo caso non stiamo a visualizzarlo. O forse sì, e allora ci investiamo un po'.

In generale, le visualizzazioni interattive hanno il problema che devi spiegare ai fruitori cosa stanno facendo quando smanettano con i controlli. :-)

[hal0gen]

@albertocottica capisco l'obiezione. Io penso che, quando lo strumento è il web, sia comunque importante fornire a chi si avvicina ad un progetto la possibilità di esplorarne i dati anche visivamente e senza alcuna competenza. L'utente può sempre venire guidato nella lettura, ad esempio decidendo con quali parametri possa interagire e come, oppure presentandogli solo un sottoinsieme di dati.

A mio avviso, poter scegliere quali regioni si desidera visualizzare e in quale anno (magari con un tasto ⏯ per animare la sequenza) sarebbe un valore aggiunto in termini di esperienza utente. La mappa one person one dot ha il vantaggio di essere davvero intuitiva e diretta, a me non sembra abbia bisogno di troppe spiegazioni.

Ad ogni modo, caricare i dati in memoria e usarli per disegnare i punti uno ad uno per una mappa statica non è molto efficiente, in quel caso forse sarebbe meglio utilizzare delle immagini prerenderizzate (come fatto sul sito del progetto su Bruxelles).

Se dovessimo mantenere la mappa interattiva invece, io toglierei i controlli di opacità e punti per persona (visivamente è meglio con meno punti ma ad alta opacità). Eventualmente, si potrebbe anche creare un sistema d presets con un set di parametri preimpostati (per visualizzazioni analoghe a quella finale di Bruxelles con le 3 regioni di origine).

Come ci orientiamo?