Come creare una animated bar chart con Flourish Studio

Flourish Studio è un ottimo strumento per creare grafici animati come le animated bar chart, che potresti aver già visto in qualche post sui vari social. Le animated bar chart sono grafici a barre dove sembra esserci una gara (race) fra le varie categorie e vengono utilizzate per orizzonti temporali oppure per semplici categorizzazioni.

In questo caso ho voluto riprendere i dati dai top 100 marcatori della serie A di calcio italiana, che userò come esempio per spiegare meglio le logiche prima della creazione del grafico stesso. Ovviamente puoi replicare lo stesso procedimento con i dati che desideri, ti basta avere una colonna con dei testi e una con dei numeri per creare un grafico dinamico come quello della guida.

Cominciamo dal processare i dati correttamente, prima di utilizzare Flourish Studio - che è stato comprato da Canva da 2022. Se già usi Canva, potrebbe esserti utile saperlo dato che puoi esportare direttamente i tuoi grafici sulle tue presentazioni.

Premessa: questo non è un post sponsorizzato da Flourish Studio, ma trovo sia un tool da valorizzare e che possa beneficiare enormemente da una corretta impostazione dei dati in Excel per creare dei grafici dinamici decisamente accattivanti.

In questa guida faccio vedere prima come preparare i dati su Excel 365 perchè abbiamo solo due colonne e vogliamo dare un effetto di movimento.

Se preferisci saltare direttamente alla sezione con la creazione del grafico, clicca qui!

Come impostare il file Excel per usare Flourish Studio

Vediamo prima come impostare il file Excel necessario per usare al meglio Flourish Studio. I dati potrebbero essere come quelli che ho io in fase iniziale:

Qual è il problema di questa sorgente dati? In questo abbiamo solo un datapoint per giocatore, mentre invece ce ne servono diversi per creare l'animazione. Idealmente, vogliamo 274 colonne con dei valori sequenziali per ogni giocatore che vadano da 1 (minimo) a 274 (massimo). Se Meazza ha realizzato 216 reti, vogliamo tutti i numeri da 1 a 216 in 216 colonne diverse - e per le colonne dalla 217 in poi, vogliamo comunque che sia restituito 216.

Questo perchè Flourish prende i dati come se fossero una sequenza temporale - quindi possiamo creare un effetto di movimento, ma i dati vanno impostati diversamente. Vediamo come fare con Excel. Assumiamo di avere una tabella chiamata TBL_CALCIATORI e una colonna chiamata RETI_SEGNATE. Il risultato finale si può ottenere con una formula sola:

=LET(reti;TBL_CALCIATORI[RETI_SEGNATE];
range;SE.ERRORE(ESCLUDI(REDUCE("";reti;LAMBDA(acc;v;
STACK.VERT(acc;SEQUENZA(;v))));1);reti);
range)

Qui viene il bello, ma questa formula è un po' ostica da digerire. Se può aiutarti, pensa che questa logica con REDUCE potrà aiutarti enormemente ogni volta che lavorerai con array complessi. Vediamola insieme, utilizzando solo i dati per Silvio Piola e Francesco Totti (C3 e C4) e analizzando la parte chiave della formula (ignorando SE.ERRORE e ESCLUDI):

=LET(reti;C3:C4;
range;REDUCE("";reti;LAMBDA(acc;v;STACK.VERT(acc;SEQUENZA(;v))));
range)

Le reti sono prese dalla tabella, quindi stiamo considerando tutti i valori di reti segnate presenti in tabella. Il cuore della formula è la parte con REDUCE - che permette di effettuare calcoli ricorsivi all'interno di Excel. In questo caso, vogliamo fare un'operazione per tutti questi valori e poi, gradualmente, impilare tutti i risultati per i singoli giocatori in un colpo solo.

Quando dico REDUCE("";reti.... ) sto dicendo che partiamo da un valore vuoto ("") e che vogliamo effettuare un'operazione che vada a prendere tutte le reti una dopo l'altra (274,250,225 e così via). Quello che vogliamo è lavorare con acc (accumulatore) e il valore attuale (v) per riuscire a impilare tutti questi dati insieme, visto che ci interessano tutti. Dobbiamo quindi dichiararlo all'interno della funzione LAMBDA, dove acc e v sono proprio accumulatore e il valore attuale.

A questo punto, ci serve impilare i dati con STACK.VERT. Questo perchè STACK.VERT ci permetterà di impilare l'accumulatore, cioè il risultato per tutti i valori precedenti, e poi il valore per la riga attuale che stiamo considerando. Ma che cosa deve impilare, STACK.VERT?

Abbiamo detto che vogliamo una SEQUENZA di numeri che vada da 1 alle reti segnate da ogni giocatore. Quindi la parte con SEQUENZA(;v) farà esattamente questo: per ogni riga, ci darà una sequenza di numeri da 1 alla rete segnata. Puoi fare una prova digitando =SEQUENZA(274), vedrai che i numeri da 1 a 274 saranno tutti in righe diverse. A noi servono in colonna, motivo per il quale inseriamo SEQUENZA(;v) anzichè SEQUENZA(v). Il ragionamento, comunque, è lo stesso.

Torniamo ai nostri dati, prendendo solo Silvio Piola (274 reti) e Francesco Totti (250 reti). Se usiamo solo questi due dati, anzichè la colonna intera, avremo un risultato come questo:

• Una riga con la prima cella vuota e poi una fila di errori #N/D
• Una riga per Silvio Piola, con tutti i numeri da 1 a 274 in diverse colonne
• Una riga per Francesco Totti, con i numeri da 1 a 250 in diverse colonne - e, dalla colonna 251 in poi, degli errori #N/D

Ma che cosa fa la formula?

• A: la formula inizia dal valore vuoto, come abbiamo dichiarato. Questo è il nostro valore iniziale. Ancora prima di guardare i nostri dati, abbiamo un valore vuoto (valore_iniziale) e degli errori che si ampliano fino alla fine dell'intervallo (colonna 274, coperta da Piola). Elimineremo poi questa riga successivamente, visto che non ci serve. Questa riga è ora l'accumulatore che useremo per lo step B
• B: passiamo adesso a Silvio Piola. Il nostro accumulatore, come detto, è la riga con il primo valore vuoto e la fila di #N/D. Qui però, come valore attuale (v) abbiamo 274. Quindi in questo caso, avremo un array composto da 2 righe: la prima rimane quella con il valore vuoto e gli errori, ma la seconda adesso ha i valori da 1 a 274. Questo perchè stiamo dicendo, con REDUCE, che vogliamo cristallizzare i calcoli precedenti e riportarli in tutte le righe seguenti. L'array finale di questo passaggio, con le due righe, costituirà l'accumulatore del passaggio successivo, così come la riga con valore vuoto ed errori costituiva l'accumulatore iniziale di questo step con Silvio Piola
• C: abbiamo i dati per "" e per Piola, passiamo ora a Francesco Totti. Avremo un accumulatore iniziale con le due righe con valore vuoto + errori #N/D e la seconda riga con i valori da 1 a 274. Saranno impilati, in una terza riga, anche i valori per Totti (che arriva a 250) e quindi il v (250) originerà una SEQUENZA di valori da 1 a 250. Dopo il 250, ci saranno degli errori. Adesso, il nostro accumulatore finale avrà 3 righe: quella iniziale con vuoto + errori #N/D, quella con i valori per Silvio Piola e quella con i valori per Francesco Totti

Semplice? Non proprio, ma la logica si ripeterà sempre uguale per tutti i valori della nostra tabella. Ad ogni nuova riga, impileremo, sotto le altre, i valori della riga attuale, tenendo sempre sott'occhio i dati precedenti.

A questo punto, se hai seguito i singoli passaggi, ti dovrebbe essere più chiaro il perchè ci servano SE.ERRORE ed ESCLUDI:

Usando anche solo due valori, vediamo come abbiamo ora, correttamente, due sole righe e che la sequenza di numeri non si interrompe. Alla serie di #N/D corrisponde infatti, ora, il valore delle reti segnate.

Vediamolo con tutti i dati:

=LET(reti;TBL_CALCIATORI[RETI_SEGNATE];
range;SE.ERRORE(ESCLUDI(REDUCE("";reti;LAMBDA(acc;v;
STACK.VERT(acc;SEQUENZA(;v))));1);reti);
range)

• ESCLUDI cancella la prima riga, visto che comunque non può servirci essendo creata con ""
• SE.ERRORE, invece, ci permette di sostituire tutti gli errori che troviamo dopo le reti segnate (quelle da 251 in poi, per Totti) con il valore iniziale che troviamo per i singoli calciatori. Per Totti, questo valore sarebbe 250. Per Nordahl, 225 e così via. In questo modo, non avremo dei dati vuoti all'interno del nostro database iniziale

Una volta fatta questa operazione, puoi semplicemente copiare i dati originati dall'array e incollarli accanto ai dati esistenti. La tabella si espanderà automaticamente, considerando le 274 colonne nuove che ci interessa utilizzare.

L'intero processo si riassume quindi così:

• Crea una tabella con due colonne: una con i dati testuali, l'altra con i valori (evitando zeri o vuoti)
• Utilizza la formula con REDUCE adattandola alle tue necessità
• Copia e incolla i valori a destra della tabella con le due colonne realizzata in precedenza

I dati finali saranno simili a questi, con una colonna per il singolo giocatore e poi i numeri sequenziali.

Puoi anche aggiungere già delle informazioni aggiuntive, ad esempio un link per un'immagine dei singoli giocatori oppure il totale delle reti segnate.

Il procedimento non è così complesso, ma potresti voler velocizzare, magari utilizzando Power Query. Vediamo come fare.

Come impostare il file Excel con Power Query per usare Flourish Studio

Power Query è un ottimo alleato per impostare correttamente un dato in Excel prima di passare a Flourish Studio. Anche in questo caso partiremo da una semplice tabella con due colonne, per poi realizzare una tabella con numerose colonne che ci aiuteranno a realizzare la nostra grafica animata.

Se vuoi replicare il procedimento puoi cliccare all'interno della tabella chiamata TBL_CALCIATORI e poi Recupera Dati > Da tabella/intervallo. A questo punto ti si aprirà la schermata di Power Query e, andando nella sezione Editor avanzato, potrai inserire il codice che trovi qui sotto.

Come detto, uso lo stesso database precedente: GIOCATORE | RETI SEGNATE. Avremo quindi Piola | 274, Totti | 250 e così via. Qui trovi il codice in M, commentato per singolo passaggio:

let

    // 1. Importazione dei dati dalla sorgente

    DatiIniziali = Excel.CurrentWorkbook(){[Name="TBL_CALCIATORI"]}[Content],

    // 2. Creazione lista di numeri basata su RETI_SEGNATE

    AggiuntaColonnaNumeriSequenziali = Table.AddColumn(DatiIniziali, "ListaNumeri", each List.Numbers(1,[RETI_SEGNATE])),

    // 3. Conversione della lista di numeri in stringa delimitata

    ConvertiListaInStringa = Table.TransformColumns(AggiuntaColonnaNumeriSequenziali, {"ListaNumeri", each Text.Combine(List.Transform(_, Text.From), ","), type text}),

    // 4. Suddivisione della stringa in colonne separate

    SuddividiListaInColonne = Table.SplitColumn(ConvertiListaInStringa, "ListaNumeri", Splitter.SplitTextByDelimiter(",", QuoteStyle.Csv),

        {"Numero.1","Numero.2","Numero.3","Numero.4","Numero.5","Numero.6","Numero.7","Numero.8","Numero.9","Numero.10",

         "Numero.11","Numero.12","Numero.13","Numero.14","Numero.15","Numero.16","Numero.17","Numero.18","Numero.19",

         "Numero.20","Numero.21","Numero.22","Numero.23","Numero.24","Numero.25","Numero.26","Numero.27","Numero.28",

         "Numero.29","Numero.30","Numero.31","Numero.32","Numero.33","Numero.34","Numero.35","Numero.36","Numero.37",

         "Numero.38","Numero.39","Numero.40","Numero.41","Numero.42","Numero.43","Numero.44","Numero.45","Numero.46",

         "Numero.47","Numero.48","Numero.49","Numero.50","Numero.51","Numero.52","Numero.53","Numero.54","Numero.55"}),

    // Qui continua fino a 274 (non a 55), ma è la stessa logica

    // 5. Rimozione della colonna RETI_SEGNATE originale

    RimuoviColonnaOriginale = Table.RemoveColumns(SuddividiListaInColonne, {"RETI_SEGNATE"}),

    // 6. Ottieni i nomi delle colonne

    NomiColonne = Table.ColumnNames(RimuoviColonnaOriginale),

    // 7. Sostituzione dei valori null con "RETI"

    SostituisciNullConRETI = Table.ReplaceValue( 

        RimuoviColonnaOriginale,

        null,

        "RETI",Replacer.ReplaceValue,NomiColonne),

    // 8. Trasforma le colonne in righe (Unpivot)

    TrasformaColonneInRighe = Table.UnpivotOtherColumns(SostituisciNullConRETI, {"GIOCATORE"}, "NumeroColonna", "Valore"),

    // 9. Rimuove "RETI" dai valori e sostituisce con null

    RimuoviRETI = Table.ReplaceValue(TrasformaColonneInRighe,"RETI",null,Replacer.ReplaceValue,{"Valore"}),

    // 10. Riempimento dei valori null con i valori sovrastanti

    RiempimentoValori = Table.FillDown(RimuoviRETI,{"Valore"}),

    // 11. Modifica del tipo di dati della colonna "Valore" in intero

    ModificaTipoValore = Table.TransformColumnTypes(RiempimentoValori,{{"Valore", Int64.Type}}),

    // 12. Trasforma i dati ritornati in una struttura Pivot

    TrasformaInPivot = Table.Pivot(ModificaTipoValore, List.Distinct(ModificaTipoValore[NumeroColonna]), "NumeroColonna", "Valore")

in

    TrasformaInPivot

Vedrai che sono numerosi passaggi, ma ci servono per ottenere il file proprio come lo desideriamo. Il passaggio più strano è quello ai punti 6-7-9-10, che si rende necessario perchè unpivot non funziona bene con null. Se troviamo un valore null, l'unpivot cancella quel riferimento e invece ne abbiamo bisogno perchè sono i dati dopo il numero di reti segnate - per Totti, che ha 250 reti segnate, sono le colonne dal 251 in poi e così via.

Ci sono solo alcuni accorgimenti per riutilizzare questo codice anche sui tuoi file:

• Modifica il nome della tabella con la tua, da TBL_CALCIATORI a quella del tuo file (step1)
• Modifica il nome della colonna che ti interessa, da RETI_SEGNATE alla tua (step2,step5)
• Modifica il nome della colonna con le etichette, da GIOCATORE alla tua (step8)

Se non sai come utilizzare Power Query, i passaggi sono questi, come anticipato:

• Crea la tabella che ti interessa e selezionala
• Clicca su Dati > Recupera Dati > Da altre origini > Da tabella/intervallo
• Nella schermata Home di Power Query, accedi a Editor avanzato
• Copia e incolla il codice che vedi inserito in precedenza, modificando le parti che ti interessano
• Clicca su Chiudi e carica

A questo punto, che tu abbia deciso di utilizzare formule o Power Query, non fa differenza. L'importante è avere una tabella di riferimento che assomigli a questa, prima di passare a Flourish.

Vediamo adesso come portare questi dati su Flourish e qualche accorgimento di grafica.

Come inserire i dati su Flourish Studio

Flourish Studio permette di creare diversi tipi di grafici e viene utilizzato specialmente per casi complessi proprio come quello della animated bar chart. Dovrai registrarti sul sito di Flourish e creare un account gratuito, che ti permetterà di utilizzare questo tool nella sua interezza. Dovrai solo fare attenzione a condividere sempre un link a Flourish, se utilizzi queste visualizzazioni, per evitare poi problemi dato che l'account potrebbe essere rimosso senza preavviso. Questo accorgimento è rilevante perchè l'alternativa è creare un account a pagamento, dove però il prezzo (10.000 €/anno per 2 licenze) è decisamente proibitivo per la maggior parte delle persone che utilizza questo strumento. L'account free ha la stragrande maggioranza dei grafici disponibili su Flourish, quindi non ti preoccupare.

Tieni solo a mente che qualsiasi progetto creato su Flourish è pubblico e può essere replicato da chiunque abbia un account su questa piattaforma. Quindi attenzione a utilizzare dati aziendali sensibili.

Una volta creato un account, dovrai cliccare su New visualization per poi scegliere il tipo di grafico che più ti interessa.

Noi vogliamo creare una animated bar chart e quindi la selezioniamo, ma puoi veramente sbizzarrirti dato che la selezione è enorme.

A questo punto, Flourish creerà in automatico una animated bar chart per darci dei valori dummy e mostrarci già una visualizzazione di quello che andremo a creare. Vedrai che ci sono due sezioni principali:

• Preview ci permette di lavorare sulla visualizzazione finale, è qui che creiamo il grafico finale
• Data è invece la zona dedicata all'inserimento dei nostri dati, che andranno poi a comporre il grafico

Per creare questo tipo di grafico, avremo bisogno di numerose colonne con dei valori, altrimenti l'effetto di movimento non ci sarà. Ad esempio potresti voler creare delle sequenze temporali e far corrispondere a ogni mese una colonna e così via. In ogni caso, come prima azione dobbiamo inserire i nostri dati, cliccando prima su Data e poi andando nella sezione di destra.

Troviamo qui il pulsante Upload data > Upload data file, dove inseriremo il nostro file creato in precedenza. Selezioniamo la tabella che ci interessa e manteniamo le opzioni di default.

Notiamo che ci sono delle colonne che vengono ritenute più importanti di altre, su Flourish:

• Label sono le etichette dei dati. Per me è la colonna GIOCATORE, che è la A
• Values sono i valori che vogliamo inserire nel grafico. Qui prende CK-JQ, prendendo tutti i nostri numeri da 86 in poi. Questo succede perchè non ci sono valori nulli e perchè abbiamo correttamente creato un file che vada bene con Flourish, seguendo le indicazioni precedenti
• Categories indica le categorie. Potrebbe essere interessante nel caso volessimo filtrare la nostra visualizzazione, ma in questo caso non lo inseriremo
• Image indica le immagini, colonna B. Se avessimo un URL per ognuno dei calciatori, potremmo inserirlo qui e Flourish ci mostrerebbe le singole immagini. In questo caso le ho inserite solo per alcuni giocatori

Flourish ci permette di manipolare il dato una volta caricato, quindi possiamo anche inserire nuove colonne e modificare i dati che abbiamo preso dal file. Abbiamo quindi la tranquillità di intervenire direttamente sui dati inseriti, ma in questo caso i dati di partenza chiaramente rimarranno gli stessi. Se hai modificato i dati su Flourish e vuoi portare queste modifiche anche sul file di partenza, dovresti selezionare una cella della tua tabella > CTRL+A > CTRL+C e poi incollare, con CTRL+V, i dati sul tuo file Excel. In questo modo avrai esattamente i dati come li desideri.

Quando avrai terminato la parte di creazione della tua animated bar chart, puoi cliccare su Export & publish per pubblicarla online. Questo ti permetterà di:

• Avere un link pubblico cui puntare per visualizzare il tuo grafico
• Incorporare il tuo grafico ovunque tu voglia online, con codice HTML
• Scegliere se le persone possano copiare il tuo grafico e i tuoi dati. Puoi modificare questa opzione solo sui piani a pagamento
• Scaricare l'HTML (se sei su un piano a pagamento)
• Scaricare un'immagine statica
• Aggiungere il tuo grafico a Canva. Questo perchè Canva ha comprato Flourish Studio nel 2022

Noti inoltre che c'è un comando chiamato Republish. Questa opzione è utile se hai modificato i dati / il grafico e vuoi che la visualizzazione sia sempre aggiornata - se clicchi su Republish, anche la visualizzazione al tuo link pubblico ed eventuali embed saranno perfettamente aggiornati.

Una volta ultimata la parte di preparazione del dato, possiamo passare alla creazione del grafico stesso.

Come creare un grafico su Flourish Studio

Creare un grafico su Flourish Studio è abbastanza semplice, dato che abbiamo già una visualizzazione del potenziale risultato finale. Abbiamo però numerose sezioni che possiamo considerare per migliorare il nostro grafico, che vediamo singolarmente. In questo caso, salvo casi eccezionali, parliamo della sezione Preview, che ci permette di intervenire direttamente sulla nostra animated bar chart.

La sezione Theme di Flourish Studio ci può tornare utile solo se abbiamo un piano a pagamento, dato che possiamo creare un tema personalizzato da zero. Nel nostro caso, terremo "no theme".

La sezione Setup di Flourish Studio ci permette di scegliere fra varie opzioni:

• Chart style: possiamo scegliere se vogliamo che il grafico sia orizzontale (barre) o verticale (colonne)
• No. bars: qui possiamo definire il numero di barre che vogliamo visualizzare
• Spacing: definiamo, in percentuale, lo spazio fra i valori
• Sorting: per ordinare i dati, se lo desideriamo
• Sort mode: per definire se i dati siano da ordinare Z-A o A-Z

Sulla nostra animated bar chart avremo Chart style horizontal, No. bars 8 (perchè sono 8 i giocatori sopra le 200 reti), Spacing 10, Sorting On, Sort mode Z-A.

C'è anche una sezione avanzata con ulteriori informazioni:

• Bar height: scegliamo l'altezza, se automatica oppure specificata dall'utente
• Hide bars below value: nascondiamo le barre se il valore è sotto una certa soglia definita, ad esempio 150
• When not enough bars: se non c'è spazio per le barre, decidiamo se lasciare dello spazio (Leave space) oppure ridimensionare (Resize)

Passiamo ora alla sezione Colors di Flourish Studio, dove troviamo:

• Color mode: se cambiare colore per categoria, per singola barra (Extend garantisce che i colori siano tutti diversi) o singola, uguale per tutti. In questo caso puoi selezionare il colore che preferisci.
• Color overrides: possiamo definire quale colore associare alle singole barre singolarmente, per dare maggiore risalto ad alcuni dati
• Bar opacity: definiamo quale sia la trasparenza / opacità delle nostre barre

Sulla nostra animated bar chart avremo By bar, Extend e Bar opacity 0.85.

Vediamo ora la sezione Labels, cioè le etichette di Flourish Studio:

• Max size: la dimensione massima delle etichette, intese come % del font standard della pagina. Se inseriamo 5 e il font è 8, saranno 40. Se inseriamo 1, rimarranno della dimensione standard
• Labels mode: abbiamo due opzioni. Labels in axis (images on bars) ci mostra le etichette all'inizio della barra e l'immagine alla fine. Labels on bars (images on axis) fa il contrario, quindi avremo le immagine sull'asse all'inizio della barra e la relativa etichetta alla fine della barra stessa
• Color: anche qui possiamo cambiare il colore delle etichette stesse
• Value labels: qui decidiamo se far vedere i valori o meno, selezionando Show values. Possiamo anche scegliere il colore con Color e lo spazio con Space, che crea un margine sul lato destro per migliorare la visualizzazione

Sulla nostra animated bar chart avremo Max size 1, Labels in axis, Space 10, Show values, Space 7.

Passiamo ora alle immagini, che sono gestite nella sezione Images in Flourish Studio:

• Height, Width, Margin right: scegliamo altezza, larghezza e margine da destra per la singola immagine
• Image sizing: possiamo scegliere se riempire (Fill) con l'immagine, che sarà più zoomata. Oppure possiamo selezionare Fit per adattare le proporzioni, mentre Stretch allarga l'immagine e ne riduce la qualità
• Shape: possiamo scegliere se avere le nostre immagini come rettangoli (Rectangle) oppure cerchi (Circle)

Sulla nostra animated bar chart avremo Height 90, Width 145, Margin right -20, Image sizing Fit, Shape Circle.

La sezione Counter & totalizer è fra le più interessanti in Flourish Studio, perchè ci permette di dare una vera e propria idea di movimento al nostro grafico:

• Current time counter: possiamo visualizzare il tempo attuale con Show current time. Se lo selezioniamo, possiamo scegliere con Size (percentage of screen) la percentuale dello schermo occupata dalla scritta del valore attuale, così come il colore (Color) e la relativa altezza (Line height). Il valore preso da Show current time non è altro che l'intestazione della colonna della nostra tabella inserita in Data che viene visualizzata in quel momento
• Totalizer: definiamo se vogliamo vedere anche un valore totale. In questo caso è il totale della colonna della tabella visualizzata in quel momento e possiamo scegliere percentuale, colore ed etichetta

Nella nostra animated bar chart questa opzione non è utilizzata, ma in altri casi potrebbe essere sicuramente utile da inserire.

Un'altra sezione veramente interessante è Timed captions, che ci permette di inserire delle didascalie. Prima di farti vedere questa parte, vorrei fare però una specifica. Se vuoi inserire delle caption sul tuo grafico, dovrai prima cliccare su Data e poi su Captions. A questo punto potrai definire vari elementi:

• From & To: da quale colonna a quale colonna ci interessa visualizzare questa informazione aggiuntiva. Quindi se inserisci le colonne da 1970 a 1988, se avessi una linea temporale, la tua didascalia apparirebbe esclusivamente quando sul grafico stanno scorrendo i dati da 1970 a 1988. Qui lavoriamo con le intestazioni di colonna, che in questo caso sono indicate come "Colonna1, Colonna2" e così via.
• Caption: inseriamo il testo che desideriamo
• Image: inseriamo un'immagine, se lo desideriamo. Anche in questo caso dovremo inserire un link

Torniamo quindi alle possibili scelte stilistiche della sezione Timed captions:

• Background & Border: scegliamo il colore di sfondo e del bordo
• Opacity & Padding: scegliamo la trasparenza e quanto spazio lasciare attorno alla didascalia
• Align: possiamo scegliere come allineare il testo
• Position: definiamo la posizione della didascalia fra le varie opzioni possibili
• Text: scegliamo sia la dimensione del font (Font size) e il relativo colore (Text)
• Content mode: Text with colors significa che eventuali parti della didascalia che abbiano un corrispettivo nelle categorie saranno colorate. Ad esempio, per i nostri dati, inserire "Solamente Silvio Piola e Francesco Totti hanno segnato 250+ reti in Serie A" trasformerebbe sia Silvio Piola sia Francesco Totti nella didascalia, rendendoli colorati. Questo aspetto grafico può permettere di visualizzare velocemente numerosi dati, ma attenzione perchè può esserci una sola didascalia per colonna. Se ne inseriamo più di una per la stessa colonna, quella inserita nella riga precedente non sarà considerata
• Position: abbiamo nuovamente position ma, in questo caso, per definire dove visualizzare le eventuali immagini all'interno delle timed captions

Nella nostra animated bar chart abbiamo Opacity 1, Padding 1, Align center, Position Top Center, Font size 1.2, Text with colors.

Vediamo ora la sezione Controls, per controllare, eventualmente, l'ordine dei nostri risultati:

• Show sort control: cliccandolo, avremo la possibilità di controllare quali dati far vedere, se quelli più grandi (Highest) o più piccoli (Lowest). Possiamo anche cambiare il testo visualizzato
• Controls style: come per altre sezioni, possiamo modificare aspetti quali la dimensione del font (Text size), il relativo peso (Text weight), altezza (Height), colore di sfondo (Background) e così via, anche considerando la selezione del mouse (Mouse over) per creare un effetto ancora più dinamico
• Button border styles: similarmente ai controlli stessi, possiamo anche definire uno stile per il bordo, che può essere più o meno grande (Border width), colorato (Color), più o meno trasparente (Trasparency) e con un certo raggio (Radius). Il raggio influisce la dimensione del box, che sembrerà sempre più schiacciato all'aumentare del relativo valore

Nella nostra animated bar chart non ci sono i controlli.

La sezione Legend di Flourish Studio controlla invece l'eventuale legenda, permettendo numerose opzioni:

• Alignment, Title Weight, Text weight, Color, Size: Flourish è molto ampio e anche in questo caso possiamo decidere allineamento, stile del titolo, stile del testo, colore e dimensione
• Color legend, Swatches: possiamo decidere se inserire una legenda così come il titolo e, nel caso Swatches, se vogliamo fare drill-down su una sola categoria semplicemente cliccando sulla legenda
• Qui le opzioni sono davvero tante e non così utili per il nostro caso, ti rimando comunque alla sezione dedicata sul sito ufficiale se vuoi saperne di più

Nella nostra animated bar chart abbiamo selezionato Disabled, visto che non ci interessa.

La sezione Axis determina invece le opzioni per il nostro asse:

• Abbiamo le solite opzioni di visualizzazione, quali Text color, Text size, Line color e Line Dash
• Scale: possiamo scegliere se avere un asse dinamico, fisso o personalizzato (Dynamic, Fixed, Custom). L'opzione Min range ci aiuta nel definire un valore 0 dinamico, quindi se inseriamo un certo numero l'asse sarà fisso fino a quel valore e poi dinamico. Per capirci meglio - se inseriamo 90, avremo un asse inizialmente da 0 a 90. Quando questo valore viene superato, allora l'asse diventa dinamico in automatico

Nella nostra animated bar chart abbiamo indicato che la scala deve essere Dynamic.

La sezione Annotations di Flourish ci permette di inserire delle annotazioni sul grafico:

• Annotations: qui dobbiamo sapere come inserire le informazioni. Nella mia visualizzazione ho inserito testi come LAUTARO (103) | :: 103 perchè in questo modo visualizzerò delle righe verticali con il testo LAUTARO (103) | al valore 103. Quindi la sintassi è questa: TESTO :: VALORE. Se avessi voluto dire LAUTARO INTER nella colonna 96, avrei dovuto scrivere LAUTARO INTER :: 96. La barra | è solo per una questione di visualizzazione, ma non cambia la sostanza
• Anche qui abbiamo le solite opzioni di visualizzazione che abbiamo visto in precedenza, quali Text color, Size, Weight, Line color, Opacity, Width, Dash
• Align, Offset: decidiamo se allineare i testi all'inizio, in mezzo o in fondo (Start, Middle, End) e la relativa visualizzazione, dove On line sarà l'unica davvero visibile sopra ai valori delle barre, mentre Above line e Below line sono più sfumate

Nella nostra animated bar chart abbiamo inserito varie annotazioni, con font Regular, Align End, Offset On line.

La sezione Timeline & animation è una fra le più caratteristiche di Flourish:

• Style: scegliamo se in formato Timeline, con una sequenza temporale, oppure Play/pause che ha un pulsante dedicato per far partire l'animazione. In vari casi sarà più interessante vedere la Timeline, ma in questo caso dovrai dare un nome definito alle singole colonne dei tuoi dati di partenza. In questo caso ho utilizzato Play/pause
• Play on load, Loop timeline: scegliamo se far partire l'animazione appena caricata e se creare un loop nel grafico, che riparte da zero una volta terminato il ciclo finale
• Timeline duration, Time jump duration, Pause before loop: la durata della nostra animazione, un'opzione dedicata alle story (che non ho utilizzato) e il numero di secondi prima di far ripartire il loop, che ti consiglio di impostare
• Axis, Layout, Play button settings: queste sono ulteriori personalizzazioni a livello visivo, disponibili se necessarie
• Bar swap duration: impostiamo quanto sia veloce il cambio fra le varie barre, dove un valore soppianta quello precedente. Ho impostato 0.5 ma ti consiglio di verificare quale sia meglio nel tuo caso: 0.1 sarà velocissimo, 3 molto lento

Nella nostra animated bar chart abbiamo inserito Play/pause (come detto), Play on load, Loop timeline, Timeline duration 20, Pause before loop 5 e Bar swap duration 0.5.

La sezione Number formatting riguarda la formattazione dei numeri:

• Number styling: possiamo aggiungere un suffisso, un prefisso e i numeri decimali, se vogliamo. Nella sezione Advanced ci sono altre specifiche quali come far visualizzare i numeri negativi (Styling of negative numbers), se togliere gli zero di troppo all'inizio dei numeri (Remove trailing zeros) e se nascondere il separatore delle migliaia per valori inferiori a 10.000 (Hide thousands separator below 10,000). Possiamo anche moltipicare o dividere i valori con la sezione Multiply/divide values
• Invalid cells: definiamo come gestire casi nei quali ci manchino dei dati. Possiamo usare l'ultimo valore valido (Use last valid), fare interpolazione dei valori (Interpolate), trattarli come zeri (Treat as zero) o rimuovere la barra (Remove bar)

Sul capitolo Invalid cells faccio un'aggiunta specifica. Se prendi i dati semplicemente da Excel / Power Query avendo una sequenza di numeri che si conclude con dei valori null, questo crea un grande problema nella fase di creazione del grafico perchè Flourish non riconosce automaticamente i dati di tutte le colonne come numeri (essendo mischiati numeri e testi) e quindi prende solo alcune colonne e non tutte quelle che ci servono. Pur avendo Use last valid selezionato, dovremmo comunque cambiare il tipo di dati per tantissime colonne e quindi ho preferito modificare i dati con Excel / Power Query come descritto in precedenza.

Nella nostra animated bar chart abbiamo mantenuto i valori di default.

La sezione Layout impatta sul layout complessivo della nostra animated bar chart:

• Main font, Text color: font che desideriamo e relativo colore
• Background: scegliamo se avere un colore oppure un'immagine
• Maximum width: decidiamo la larghezza massima. Con None non la indichiamo, mentre con Everything la impostiamo per tutto. Infine, con Main graphic, la impostiamo solo per la grafica principale
• Layout order: tutti gli elementi del grafico possono essere riordinati a piacimento, in modo da modificare la priorità visiva dei singoli elementi
• Space between sections: definiamo quanto spazio debba esserci fra le varie barre
• Margins, Borders, Read direction: scegliamo se inserire dei margini, dei bordi e la direzione di lettura che può anche essere da destra verso sinistra

Nella nostra animated bar chart abbiamo selezionato lo Space between sections più minimalista possibile.

Lavoriamo sull'intestazione tramite la sezione Header di Flourish:

• Title, Subtitle, Text: abbiamo ben tre sezioni per inserire titolo, sottotitolo e un testo. Ognuna di queste sezioni ha la sua parte dedicata di Styling, se la desideriamo
• Border: definiamo se vogliamo un bordo, di che tipo e che stile debba avere
• Logo/Image: inseriamo, se vogliamo, un'immagine o un logo. Possiamo sia fare upload sia segnalare un link, definendo poi l'altezza (Height) e l'allineamento (Align) così come la posizione (Position) ed eventualmente il padding, cioè quanto spazio debba esserci attorno all'immagine stessa

Nella nostra animated bar chart abbiamo inserito Title, Subtitle, un'immagine con Height 3 e Align Header, con un lieve padding di 0.25 Top e 0.5 Right.

Possiamo anche definire la parte finale della nostra chart con la sezione Footer:

• Alignment, Size, Color, Advanced footer styles: scegliamo l'allineamento, la grandezza, il colore del testo del footer e se ci servano degli stili speciali
• Text: con Source Name mettiamo l'etichetta di un'eventuale pagina web, indicata da Source url. Possiamo anche definire se vogliamo inserire più sorgenti dati con Multiple sources e la relativa etichetta con Source label
• Note, Advanced: volendo, possiamo aggiungere ulteriori testi dopo Text, che saranno separati da un cerchio nero. Possiamo anche mettere un timestamp, se vogliamo
• Logo: anche in questo caso possiamo inserire un'immagine con le specifiche viste in precedenza. La possiamo caricare oppure puntare direttamente a un sito, così come definire allineamenti, margini, bordi e altro

Nella nostra animated bar chart ho inserito alcune informazioni nel Source name e Source url, nelle Note e nella parte Image, cioè il mio logo.

Terminiamo questa panoramica con la sezione Accessibility:

• Screenreader description, Screenreader label: possiamo inserire una descrizione e un'etichetta nel caso la nostra animated bar chart non sia visualizzata
• Screenreader mode for main visual container: definisci se vuoi che il contenitore visuale principale sia visualizzato con lo screenreader mode attivo

Nella nostra animated bar chart abbiamo mantenuto le opzioni di default.

Se hai seguito fino a qui, dovresti aver creato la tua prima animated bar chart! Ora non ti resta che cliccare su Export & publish e metterla live online.

Conclusioni

Creare una animated bar chart con Flourish Studio è molto stimolante, perchè è uno strumento facile da usare e che regala molta soddisfazione in fase di creazione e modifica. Di per sè basta avere alcuni accorgimenti:

• Avere già un'idea del layout che si vuole andare a creare, prima di andare sullo strumento
• Avere un file iniziale in linea con le aspettative di Flourish, con valori coerenti per tutte le colonne
• Definire correttamente le colonne principali per la nostra chart
• Ipotizzare alcuni messaggi da inserire per arricchire il grafico
• Utilizzare le opzioni a nostra disposizione per migliorare il grafico nel suo complesso
• Pubblicarlo!