Benvenuti su GITBAR, il podcast dedicato al mondo dei full stack developer, i mezzo artigiani, i mezzo artisti che ogni giorno infilano le mani nel fango per creare nel modo più efficace possibile quei prodotti digitali che quotidianamente utilizziamo.Un saluto a tutti gli amici di GITBAR, io sono Brain Repo e questa è la decima puntata del nostro podcast sulle tecnologie e sui linguaggi di programmazione.È vero, è vero, l'appuntamento sarebbe dovuto essere giovedì e io non l'ho rispettato e quindi vi chiedo scusa.Ma ho come sempre delle buone scuse, potrei usarle come l'asso nella manica ma non lo voglio fare e quindi voglio in qualche modo introdurvi l'argomento di oggi.Oggi andiamo a parlare di Data Visualization.Ma prima di parlare di Data Visualization voglio in qualche modo ricordarvi i nostri contatti.Potete contattarmi scrivendomi su Twitter con un messaggio diretto @brainrepo oppure mandando una mail a info@gitbar.it abbiamo detto che oggi parliamo di data visualization.Per farlo dobbiamo in qualche modo contestualizzare il tutto.Ci troviamo in un'epoca storica dove i dati sono diventati colonna portante del business e del passare le informazioni.Si parla infatti di data journalism e si parla anche di business intelligence.sono due branche che in qualche modo prendono i dati e a questi dati utilizzano questi dati per sostenere delle tesi.Per farlo però il dato deve essere in qualche modo elaborato e deve essere rappresentato a sostegno di una certa tesi o di un'altra.Quindi la data science, le moderne data science, prima di raggiungere il loro obiettivo devono prendere il dato e per renderlo consumabile devono renderlo rappresentabile.E qui si entra nel percorso e nel mondo della visualizzazione dei concetti.Se io vi dovessi fare una domanda e vi dovessi chiedere che cos'è una divisione e se dovessi chiederlo a chi non ha mai visto una divisione, certo ci si renderebbe conto che raccontare una divisione è molto difficile perché si tratta di un concetto astratto.Quindi ci prendiamo qualche secondo per ragionarci e poi raggiungiamo la nostra conclusione.Uno dei modi per rappresentare una divisione è in qualche modo visualizzarla.Quindi pensare a una torta, dividerla in spicchi, spostare dal centro della torta quegli spicchi e a quel punto in qualche modo abbiamo rappresentato il nostro concetto astratto.Quando parliamo di data visualization facciamo esattamente la stessa cosa.Prendiamo dei dati che non hanno una base visuale e in qualche modo li rappresentiamo per sostenere dei concetti e per rendere fruibile quel tipo di messaggio.Quindi alla base della data in Visualization c'è sempre un messaggio da passare.Questo tipo di approccio esiste dalla note dei tempi.Basta pensare alla fotografia, all'image processing, il cui appunto obiettivo è proprio quello di rappresentare certi concetti.Un altro esempio, e nella storia ce ne sono tantissime, possono essere i dipinti nelle casee e nelle caverne.Dipinti che in qualche modo dovevano passare dei messaggi oppure i geroglifici egiziani o le geometrie greche, persino i metodi di disegno tecnico così avanzato e rivoluzionario di Leonardo da Vinci, servivano in qualche modo a prendere dei dati e a rappresentarli per degli obiettivi scientifici e e ingegneristici.Quando dobbiamo però visualizzare dei concetti, dobbiamo fare un percorso abbastanza preciso, quel percorso che prende e parte da un dato astratto e lo trasforma in una rappresentazione.Una cosa infatti importantissima che dobbiamo fare è, quando abbiamo il dato astratto, dobbiamo in qualche modo definire la struttura di dati che sta al suo interno.A quel punto assimiliamo questi dati a degli oggetti o degli elementi che possono essere o archetipi, quindi degli schemi che sono insiti nella natura dell'uomo, oppure semplicemente degli oggetti della vita comune che in qualche modo in via del tutto metaforica possano rappresentarlo.A questo punto di questi oggetti abbiamo le proprietà, la grandezza, il colore, la posizione, ma ce ne potrebbero essere tantissime.Ebbene, quindi possiamo utilizzare queste proprietà per descrivere in qualche modo il contesto e quindi per veicolare la nostra informazione.Per cui abbiamo detto che per visualizzare un concetto dobbiamo prendere il dato astratto ed estrarne la struttura dei dati.Una volta che abbiamo estratto la struttura dei dati dobbiamo in qualche modo estrappolare degli algoritmi che ci permettono in qualche modo di interagire con le proprietà della rappresentazione per in qualche modo passare il nostro messaggio.Vi faccio un esempio semplice.Un grafico a barre.Devo rappresentare per esempio il numero di uomini di donne in un certo territorio.Potrei fare tranquillamente un grafico a barre la cui altezza è la dimensione data dal numero di uomini e di donne a seconda della barretta che vado a vedere.Il colore della barretta è azzurro per gli uomini e rosa per le donne.Vedete che questa rappresentazione è una rappresentazione molto comune nella nostra vita? Bene, se noi andiamo a smontare il concetto di questo semplicissimo grafico a barre, ci renderemo conto che in realtà dobbiamo passare un concetto che è quello o che ci sono più uomini che donne o viceversa, là dipende dai dati che abbiamo a disposizione.Bene, per farlo stiamo analizzando un concetto, prendendo dei dati, estrapolando la singola proprietà del dato e a questo punto lo stiamo associando attraverso un algoritmo a un certo colore, se uomo azzurro, se donna rosa, e a una certa altezza, l'altezza che dipende appunto dal numero degli uomini e delle donne.A questo punto ci vengono subito in mente tantissime librerie javascript che ci permettono di rappresentare i nostri dati con schemi e strutture che sono tipiche della rappresentazione dei dati.Possiamo pensare a un google charts o a un chart js.Se parliamo del mondo javascript in realtà poi su python ce ne sono degli altri ma visto che questo periodo mi sento molto frontender, vi parlo di framework e librerie javascript per la realizzazione di grafici, forse poi capirete il perché.Però ci sono delle rappresentazioni che non possono essere schematizzate su strutture basiche, su strutture standard.Vi faccio un esempio, nelle note dell'episodio vi metto un grafico molto interessante, il sito è guns.peeriscopic.com qual è l'obiettivo di questo sito? qual è il concetto che questo sito vuole veicolare? il concetto che vuole passare è quello appunto che il numero di omicidi negli stati uniti è altissimo per farlo avrebbe potuto semplicemente mostrare un indicatore numerico...sono che ne so...dico numero x 10.000 è un numero del tutto inventato che non ha rispetto neanche dell'unità di grandezza ma abbiate pazienza è sparato la bene potrei farli in quel modo però quello che noi in realtà dobbiamo fare è del data storytelling lo facciamo lo facciamo perché abbiamo un obiettivo principale l'obiettivo sta nel fatto che dobbiamo rendere memorabile quella tesi quel concetto e le persone non ricordano i numeri ma le sensazioni.Gans.periscopic.com l'ha fatto in modo molto intelligente.Ha rappresentato gli anni di vita persi per ogni persona ammazzata.Sommando tutti quegli anni di vita persi ha evidenziato quante vite in realtà sono state perse, si sono perse a causa appunto degli omicidi da arma da fuoco.E questo dato in qualche modo l'ha associato al concetto che spesso le vittime di questi omicidi sono persone molto giovani.Vi suggerisco di entrarci, io lo sto apprendendo in questo momento, questo grafico in realtà rappresenta in modo innovativo questa informazione disegnando degli archi nella barra del tempo dell'età dove la parte gialla rappresenta la vita e la parte bianca l'arco della vita che va appunto a finire e si va a morire.Per cui in questo grafico si vede un'area arancione e un'area e quindi si evidenzia la parte di vita e la parte di morte.E questa informazione è molto più incisiva rispetto a un numero, è molto più forte e soprattutto stimola delle sensazioni, dei sentimenti, quindi rende la tesi, il concetto, memorabile.Un altro esempio di rappresentazione grafica che funziona e funziona bene è la mappa della metropolitana.Pensate a una qualunque mappa della metropolitana.Deve in qualche modo rappresentare le fermate della metropolitana e le intersezioni.Bene, per farlo lascia fuori tutte quelle informazioni che sono per esempio le coordinate geografiche di ogni snodo, ma le rappresenta con delle linee e delle semplici curve con degli angoli prestabiliti.Questa mappa non rappresenta al 100% la realtà, ma in realtà è una visualizzazione che ha preso alcuni dati, li ha rappresentati attraverso degli algoritmi, le curve, le intersezioni, il colore delle linee, i dati fondamentalmente sono questi, e ha reso l'informazione fruibile.Bene, spesso le librerie JavaScript che usiamo per la creazione dei grafici, come Google Chart, Chart.js, sono delle rappresentazioni standard, perfette per essere rappresentazioni standard.ma io non posso rappresentare tutto con un grafica a barre, con uno scatter plot, con un grafico a torta o con quei pochi tool che queste librerie ci mettono a disposizione.Vero è che hanno delle API abbastanza semplici, ci interagiamo in modo molto comodo e hanno una curva d'apprendimento molto bassa.però esiste un momento in cui la rappresentazione del concetto va oltre quegli schemi formalizzati, supera quella linea di confine delle visualizzazioni standard e a quel punto entra in gioco una libreria.Si tratta di D3JS.Che cos'è D3JS? Molti dicono è una libreria per fare grafici e a quel punto moro s'arrabbia perché in realtà il compito di 3js non è quello di fare dei grafici ma di mettere a disposizione una serie di tool per lavorare con dei documenti a base di dati.E qua in realtà si inizia a capire la differenza tra le librerie standard che rappresentano le informazioni con quelle strutture già definite al D3 che invece è una libreria che in qualche modo prende da una parte i dati, prende il DOM e utilizzando delle proprietà va a trasformare il DOM in funzione dei dati.Ecco che la manipolazione dei documenti basati sui dati ci permette, utilizzando gli elementi base che sono gli elementi html, il css o gli elementi per la rappresentazione attraverso il formato svg, di creare queste visualizzazioni che in qualche modo passano i concetti e se la visualizzazione statica fa emergere un certo livello di empatia, se alla rappresentazione aggiungiamo interazioni e animazioni, cosa che D3 ci permette di fare attraverso altre librerie che stanno al suo interno e attraverso il loro il suo metodo di lavoro.Bene, a quel punto la nostra rappresentazione diventa più incisiva.Tra l'altro D3 ci permette di creare anche delle rappresentazioni geospaziali attraverso il GeoJSON oppure delle rappresentazioni a rete e rendere come vi dicevo prima queste rappresentazioni interattive e appunto animate.Può sembrare una banalità ma in realtà l'interattività è uno degli elementi principali per rendere memorabile la tua la nostra informazione, il nostro concetto, quello che noi vogliamo veicolare all'altro.Penso di avervi stancato abbastanza con l'obiettivo di passare un'informazione.Bene, D3.Cosa fa di diverso questo D3 per essere così potente? Intanto abbiamo capito che ci permette di generare delle rappresentazioni completamente svincolate da delle strutture prefabricate.In realtà poi ci sono dei tool basati su D3 che vanno a comporre quelle strutture che possono essere il grafico a barre, il pie chart, perché farle con D3 diventa un pochino più complesso rispetto a farlo magari con una libreria dove gli passi i dati, gli passi i colori ed ha già fatto il grafico.però naturalmente questo piccolo incremento di curve di apprendimento è in qualche modo ricompensato dalla duttilità e dalla dinamicità di questa libreria che tra l'altro è divisa in tanti moduli, ognuno ha la sua specializzazione poi lo andremo a vedere però la cosa importante che voglio evidenziare è il fatto che D3 non si occupa di rappresentazione ma si occupa di trasformazione.Le altre librerie di grafici si occupano di rappresentazione perché? Perché in qualche modo hanno gli schemi già prefabricati.Invece quello che va a fare D3 è e a metterti in mano una serie di chiavi inglesi di pennelli per andare a disegnare il tuo dipinto informativo sulla base dei tuoi dati.Ecco perché D3 mette a disposizione tutta una serie di tool per andare a modificare il DOM, gli elementi HTML, SVG, CSS e arriva persino a mettere a disposizione degli elementi per utilizzare i filtri compositi, quindi gli effetti filtro particolari, per fare il clipping, quindi il ritaglio o le linee tratteggiate.Altra cosa importante, tutto quello che va a fare D3 non è legato alla libreria, ma l'azione che va a fare D3 sta sul DOM.quindi se domani i browser introducono una novità che ne so un effetto particolare piuttosto che adesso non posso prevedere però immagino un filtro specifico che i browser domani implementano D3 non va riscritta i moduli non vanno a cambiare semplicemente andrà a modificare quell'attributo nel svg nel tag HTML, nell'elemento HTML ed è completamente aggiornato senza neanche aggiungere una linea di codice alla libreria base.Altra cosa importante molte delle librerie che generano dei grafici usano le API del Canvas sono delle API che i browser mettono a disposizione, ci si può interagire con javascript per andare a disegnare una sorta di foglio bianco ehm...rappresentazioni grafiche bene, D3 non usa i canvas o perlomeno potresti usarli se vuoi perché è una libreria talmente dinamica che in realtà al posto di disegnare di disegnare un svg vai a disegnare sul canvas ma non ti conviene farlo perché perché perderesti un'altra funzionalità molto interessante che è la funzionalità di debug tutto quello che fai con D3, apri "Explore Elemento" e lo vedi.Quindi D3 va a interagire sul DOM e tu in qualunque momento puoi andare a modificare, a verificare la modifica basata sui dati.Credetemi, su D3 ci sarebbe da parlare per ore e ore e ore.Pensate che io ci ho fatto un corso di 20 ore più o meno.un corso di 20 ore sulla sulla tematica appunto di D3 quindi potete solo immaginare la vastità di questo di questa libreria anche perché esistono dei moduli per fare qualunque cosa esistono dei moduli per disegnare gli assi ass X e ass Y per qualunque grafico esiste un modulo molto molto bello che è quello delle scale praticamente ti permette di realizzare delle scale discrete o continue per rappresentare i tuoi dati e semplicemente ti genera delle funzioni a base su scala che ti trasformano i dati che tu hai in ingresso da magari l'attualista, il tuo cvs o il tuo xml, il tuo json della situazione direttamente su elementi che stanno nel range della scala, nel range della posizione x o nel range del colore e credetemi questo è fantastico perché ti evita di modificare il codice.Ci sono delle librerie che ti permettono di disegnare linee a partire da un datum quindi un insieme di dati una sequenza di dati ci sono delle altre librerie per le interazioni le animazioni animazioni alle quali puoi dare un delay basato sull'indice dell'elemento che stai rappresentando in modo da far alzare che nessuno far apparire prima la prima barretta poi la seconda la terza io sto semplificando però in realtà con le animazioni possiamo fare davvero tante cose a queste animazioni possiamo dare un delay possiamo dare un easing function e quindi modificare i movimenti in modo più o meno fluido più o meno elastico con appunto una funzione di credetemi possiamo fare tantissime cose ma tutte queste animazioni sono figli di un concetto che sta alla base di D3 e che è figlio a sua volta del concetto elementare che dà dato senso poi a D3 che è quello rappresentato allo scopo stesso della libreria cioè prendo i dati o una serie di chiavi inglesi per creare una rappresentazione libera, una carta bianca o la carta bianca o una serie di pennelli o i dati e posso rappresentare come voglio questi dati.Bene, vi dicevo questi dati però poi possono essere animati.E' qua il delirio, perché? Perché le librerie che utilizziamo spesso hanno delle difficoltà ad allineare i dati.Per farlo in realtà 3js usa il concetto dell'enter e dell'exit.Immaginate così, immaginate di avere i vestiti e delle persone, dei bambini, no? Tanti grembiolini e dei bambini.Bene, prendete i bambini, li mettete in una sala d'attesa.I bambini sono i dati.I bambini vengono messi in una sala d'attesa.Attendono.Uno per uno associerete il bambino, quindi il dato, al grembiulino, la sua rappresentazione, il suo elemento dom, per essere precisi.Nell'associare il grembiulino al bambino, glielo facciamo indossare, ci renderemo conto che ci saranno le maniche allungare o la vita da restringere.Bene, questi piccoli dettagli, queste modifiche alle proprietà del grembiolino che è il nostro elemento DOM ci permettono in qualche modo di visualizzare il dato bambino.Io adesso sto semplificando e viene fatta appunto un'associazione 1 a 1 finché tutti i bambini non hanno il suo grembiolino.Quindi i bambini entrano in uno stato di enter, quindi sono in una stanzetta, quello viene chiamato lo stato di enter e quando gli viene indossato il grembiolino e il grembiolino viene adattato al bambino noi abbiamo la rappresentazione.Bene, i bambini superano l'anno scolastico.Cosa succede? I bambini cambiano ed escono dall'aula lasciando il grembiolino dentro l'aula.Quindi in qualche modo l'elemento dom rimane nella pagina.All'associazione di un altro gruppo di bambini l'elemento dom cambierà la larghezza, l'altezza, perché? Perché il grembiulino andrà allungato, andrà ristretto e quindi potremo fare delle animazioni.Questo perché in realtà non si vanno a eliminare tutti gli elementi DOM e ricreare nel momento in cui andiamo a cambiare i dati.Ma si riciclano in qualche modo gli elementi DOM e quindi l'elemento DOM reciclato può essere animato da una proprietà, una larghezza, un'altezza, a un'altra.Ed ecco viste e ecco fatte le animazioni che vediamo nei grafici di fatti con D3.Esiste però un problema.Il problema è quello che, e se i bambini che arrivano sono di più? Beh, semplice, aggiungo dei grembiolini.Ma se sono di meno? Beh, esiste il metodo exit.Il compito del metodo exit è andare a eliminare i grembiolini che in realtà non hanno più un bambino associato perché i bambini sono di meno quindi quegli elementi dom sono là e non ci stanno a rappresentare niente per cui devono poter essere eliminati ma prima di essere eliminati per esempio io a tutti gli elementi che sono in una fase di exit quindi sono prossimi per essere eliminati posso applicare un'animazione per esempio li voglio far uscire scorrendo nell'asse delle x nel mio grafico ed ecco la cosa interessante di d3 in realtà in un modo del tutto innovativo è riuscito a disassociare in qualche modo il concetto di rappresentazione grafica del dato rendendo libero chi utilizza il dato di in qualche modo disegnarlo rappresentarlo nel miglior modo possibile miglior modo per veicolare il concetto.Spero che questa introduzione vi abbia incuriosito, non voleva essere esaustiva ma in qualche modo voleva avvicinarvi, incuriosirvi al mondo di D3.Se siete interessati sulla materia vi suggerisco il sito della libreria D3 che vi metto nelle note dell'episodio.La troverete tutta una serie di rappresentazioni e troverete anche il modo per accedere al codice sorgente di ognuna di queste rappresentazioni.Devo dire che alcuni sono più comprensibili, altri sono un po' ostici e presuppongono delle basi abbastanza rigide di matematica però non scoraggiatevi buttateci un occhio e credetemi rimarrete entusiasti.Grandi compagnie, grandi gruppi editoriali ma tantissime persone in tutto il mondo utilizzano D3 per passare i messaggi, per veicolare delle tesi, rappresentare dei concetti e perché no possiamo farlo anche noi.Spero che la puntata di oggi vi sia piaciuta, un pochino diversa dalle solite e con un audio anche questo un pochino diverso.Tenete presente sono a Lione, sono arrivato da pochissimo e quindi mi sto ancora tarando, mi sto regolando in una condizione devo dire di delirio lavorativo e delirio da coronavirus che non aiuta ma questa è la situazione e noi siamo sempre super positivi per cui siamo pronti ad affrontare qualunque tipo di sfida ci si presenta davanti.Vi ricordo che potete entrare in contatto con me scrivendomi @brenrebo su twitter oppure mandandomi una mail a info@gitbar.it e cosa vi dico vi ringrazio per avermi ascoltato e vi ricordo che potete iscrivervi nel vostro podcast aprendolo da uno dei vostri client e cliccando su iscriviti così facendo ogni settimana riceverete appunto 15 20 minuti di novità di cose più o meno interessanti dal mondo della programmazione.Detto questo è tutto, ci sentiamo la prossima settimana direttamente qua su Gitbar e nulla.Ciao! Gitbar, il circolo dei fullstack developer.Una volta a settimana ci troviamo davanti a due birre e con Brain Repo parliamo di linguaggi e tecniche di sviluppo web, di metodologie e di strumenti immancabili nella cassetta set degli attrezzi dei full stack dev.[Musica] [Musica] [Musica]
