Potreste aver visto alcuni esempi di workbook con immagini di sfondo utilizzate come mappe personalizzate: settori di uno stadio, camere di un appartamento, e così via. Vediamo insieme come fare.
In questo blog vedremo come disegnare i poligoni delle classi del Titanic.
Come Tableau rappresenta poligoni
Ogni riga di database rappresenta un vertice (angolo) di un poligono. Per sapere quale vertice appartiene a quale poligono, occorre avere un identificatore di poligono, uguale per tutti i vertici che fanno parte dello stesso poligono. In più sono necessarie le coordinate X e Y. Infine, ogni vertice del poligono ha bisogno di un ordine, in modo che Tableau sappia in che ordine unire i vertici per ottenere la forma che vogliamo.
Come si disegnano i poligoni con Tableau
Abbiamo bisogno di due cose:
- L’immagine da usare come sfondo (il Titanic)
- Uno strumento che ci consenta di mappare le coordinate X,Y dei poligoni, come ad esempio questo sito.
Il nostro obiettivo è creare un file che contiene le coordinate di ogni classe della nave. Dato che in questo esempio utilizzeremo uno strumento che ci permette di disegnare manualmente i poligoni sopra all’immagine, restituendoci un file CSV con le coordinate, utilizzeremo un .csv. I dati saranno simili a questi:
- Identifier: è l’ID del poligono, l’ID della classe
- Path_ID: è l’ordine per far capire a Tableau in che ordine unire i vertici del poligono
- X e Y sono le coordinate, la posizione dei vertici, in pixel.
Quindi se ad esempio abbiamo un’immagine jpeg di dimensioni 500px x 500px, un punto che si posiziona esattamente al centro dell’immagine avrà coordinata X,Y uguale a 250,250.
STEP1: creare le coordinate X, Y
Aprite il link di github: https://github.com/bryantbhowell/tableau-map-pack/blob/master/draw_tableau_polygons_on_background_image.html, copiate tutto il codice html, dalla riga1 all’ultima:
Aprite un nuovo documento di testo con il notepad e incollate il codice copiato da github. Poi andate al menù “Salva con nome…” e salvate il file scegliendo “Tutti i file” e scrivendo a mano l’estensione .html alla fine del nome che avrete deciso di dare al file (nel mio esempio Poligoni.html).
Ora potete aprire la pagina web in locale, che avrà questo aspetto:
Caricate l’immagine sulla quale volete disegnare i poligoni, e seguite le istruzioni fornite per farvi creare il file csv con le coordinate.
STEP2: utilizzare un’immagine al posto delle mappe
Come prima cosa apriamo Tableau e connettiamoci al file .csv creato. Trasciniamo le due measure X e Y rispettivamente in columns e rows e andiamo al menù “Map -> Background Image”.
In caso avessimo più di un dataset aperto in Tableau, scegliamo quello che ha le due colonne X e Y (nel nostro caso il csv) e clicchiamo su “Add Image…” e poi “Browse…” per andare a scegliere la stessa immagine che abbiamo usato nel tool github per disegnare i poligoni.
Il box “X Field” riguarda la larghezza dell’immagine. Nel menù a tendina dovremo scegliere la colonna X, quella che abbiamo trascinato in columns e impostare a 0 il left e come right l’effettiva larghezza in pixel dell’immagine caricata.
Il box “Y FIeld” riguarda l’altezza dell’immagine. Nel menù a tedina dovremo scegliere la colonna Y, quella che abbiamo trascinato in rows e impostare a 0 il bottom e come top l’effettiva altezza dell’immagine in pixel.
STEP3: creare il grafico polygon
Una volta cliccato su OK e tornati alla schermata di Tableau, non vedremo ancora nulla. Dobbiamo trascinare gli elementi nella viz:
- trascina la colonna identifier in “Colors” per assegnare un colore diverso ad ogni classe
- modifica il tipo di grafico scegliendo nel menù a tendina del tipo di mark “Polygon”
- trascina Path_ID in “Path” per far capire a Tableau in che ordine unire i vertici
Ora che abbiamo l’immagine e tutti i dati necessari per plottarla al posto di una mappa, possiamo ad esempio fare una join tra questo data source e i dati che voglio effettivamente analizzare e sviluppare la viz.