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:

1. trascina la colonna identifier in “Colors” per assegnare un colore diverso ad ogni classe
2. modifica il tipo di grafico scegliendo nel menù a tendina del tipo di mark “Polygon”
3. 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.