Gitbaritalian
developer
podcast
10

Programmare Documenti Data Driven con D3JS, dom css e svg

Serie 1
Episodio 10
Durata 30 minuti

Spesso dobbiamo raccontare concetti, il codice che scriviamo nella fase di programmazione ci può aiutare ma non sempre basta. Dobbiamo dal concetto, passare per i dati e per gli algoritmi. Trovare proprietà e metafore e poi disegnare. Nell'ultima fase del processo ci viene in aiuto d3js un toolkit meraviglioso per realizzare data driven documents.

Capitoli 00:00 Intro 01:13 Rappresentare concetti 07:26 Dai grafici ai documenti data driven 12:37 D3JS 🤓 19:37 Moduli, animazioni e concetto di enter e exit 26:29 Saluti

Links Utili

https://d3js.org/ https://guns.periscopic.com/ https://eagereyes.org/criticism/definition-of-visualization

Errata corrige Si tratta di csv non cvs 😮

Contatti @brainrepo su twitter o via mail a info@gitbar.it

Crediti Le sigle sono state prodotte da MondoComputazionale Registrato negli studi di Radio Nuoro Centrale Le musiche da Blan Kytt - RSPN

Trascrizione

Trascrizione automatica realizzata con servizi Amazon AWS Transcribe

benvenuti su Bar, il podcast dedicato al mondo dei developer.
In mezzo artigiani in mezzo artisti che ogni giorno infilavano le mani nel fango per creare nel modo più efficace possibile quei prodotti digitali che quotidianamente utilizziamo.
Piu' un saluto a tutti gli amici di Barry.
Io sono il 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 e voglio in qualche modo ricordarvi i nostri contatti potete contattarmi scrivendo mi su twitter con un messaggio diretto a heat breve oppure mandando una mail a 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 giornalismo e si parla anche di business intelligence sono due branche che in qualche modo prendono i dati.
Ehi 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.
Le moderne da prima di raggiungere il loro obiettivo devono prendere il dato e per renderlo consumabile devono renderlo rappresentabile.
E qui si entra nel percorso nel mondo della visualizzazione dei concetti.
Se io vi dovessi fare una domanda e dovessi chiedere che cosa è una divisione, se dovesse chiederlo a chi non ha mai visto una divisione, certo non 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 e' uno dei modi per rappresentare una divisione in qualche modo visualizzarla.
Quindi pensare a una torta, dividerle in spicchi, spostare al 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 lo li rappresentiamo per sostenere dei concetti e per rendere fruibile quel tipo di messaggio.
Quindi nella base della data visualization c'è sempre un messaggio da passare.
Questo tipo di approccio esiste dalla notte dei tempi, basta pensare alla fotografia l'image processing, il cui appunto obiettivo è proprio quello di rappresentare certi concetti.
Un altro esempio nella nella storia ce ne sono tantissime.
Possono essere i dipinti nelle case e nelle caverne, dipinti che in qualche modo dovevano passare dei messaggi, oppure i geroglifici egiziani o geometrie greche.
Persino i metodi di disegno tecnico così avanzato e rivoluzionario di Leonardo da Vinci servivano in qualche modo a prendere dei dati, a rappresentarli per gli obiettivi scientifici e ingegneristici.
Quando dobbiamo però visualizzare dei concetti dobbiamo fare un percorso abbastanza preciso, quel percorso che prende 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 Massimiliano amo questi dati a degli oggetti.
Ho 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 estrapolare degli eye perché ci permettano 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 un 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 e 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 che ci sono più uomini che donne o viceversa la dipende dai dati che abbiamo a disposizione.
Bene.
Per farlo stiamo analizzando un concetto prendendo dei dati, estrapolando la singola proprieta' del dato, il dato e'.
A questo punto lo stiamo associando attraverso a un certo colore se uomo azzurro se donna rosa e una certa 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 google charts e ho un certo j s.
Se parliamo del mondo javascript.
In realtà poi non ce ne sono degli altri, ma ho visto che questo periodo mi sento molto di javascript per la realizzazione di grafici.
Forse poi capirete il perché.
Però ci sono delle rappresentazioni che non possono essere schematizzata su strutture basiche su strutture standard.
Vi faccio un esempio.
Nelle note dell'episodio vi metto un grafico molto interessante.
Il sito è gans punto scopri appunto come 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 come sono, dico numero x diecimila, il numero del tutto inventato che non hanno rispetto neanche dell'unità di grandezza.
Ma abbiate pazienza e sparato la bene potrei farlo in quel modo.
Però quello che noi in realtà dobbiamo fare e del death 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 punto per punto, come ha fatto in modo molto intelligente, ha rappresentato gli anni di vita percy per ogni persona ammazzata sommando tutti quegli anni di vita persi a evidenziato quante vite in realtà sono state perse se non su un si son perse a causa appunto degli omicidi da arma da fuoco.
E questo dato in qualche modo la associato al concetto che spesso le vittime di questi omicidi sono persone molto giovani.
Vi suggerisco di entrarci lo sto aprendo in questo momento.
Questo grafico in realtà rappresenta in modo innovativo ln questa questa informazione, disegnando degli archi nella barra del tempo dell'età dove la parte gialla e rappresenta la vita e la parte bianca l'arco della vita che va appunto a finire, si va a morire, per cui in questo grafico si vede una arancione e' una bianca 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 bene per farlo, lascia fuori tutte quelle informazioni che sono per esempio le coordinate geografiche di ogni snodo.
Male rappresenta con delle linee e delle semplici curve con degli angoli prestabiliti.
Questa mappa non rappresenta al cento per cento 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 dei grafici come Google sono delle rappresentazioni standard perfette per essere rappresentazioni standard.
Ma io non posso rappresentare tutto con un grafico a barre con uno scarto Earp lotto con un grafico a torta o con quei pochi tool che queste librerie ci mettono a disposizione.
Vero è che hanno delle abbastanza semplice in modo molto comodo e hanno una linea di 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 S.
Che cose di tre jas.
Molti dicono e una libreria per fare grafici e a quel punto Moro si arrabbia perché in realtà di tre gemelli il compito di non è quello di fare dei grafici, ma di mettere a disposizione una serie di tool per lavorare con dei documenti a base di dati.
Qua in realtà si inizia a capire la differenza, non tra le librerie standard che rappresentano le informazioni con quelle strutture già definite al di tre che invece una libreria che in qualche modo prende da una parte i dati prende il doma Ehi, utilizzando delle proprietà va' a trasformare il donna in funzione dei dati.
Ecco che la manipolazione dei documenti basati sui dati ci permette, utilizzando gli elementi base della catena che sono gli elementi html, css o gli elementi di per la rappresentazione attraverso il formato, di creare queste visualizzazioni che in qualche modo possano i concetti.
E se la visualizzazione statica fa emergere un certo livello di empatia, se alla rappresentazione aggiungiamo interazione e animazioni, cosa che di tre ci permette di fare attraverso altri 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 di te ci permette di creare anche delle rappresentazioni spaziali attraverso il il gelo jeison, oppure delle rappresentazioni a rette e rendere, come vi dicevo prima, queste rappresentazioni interattive e, appunto, animate.
Può sembrare una banalità, ma in realtà l'intera attività è 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 appunto l'obiettivo di passare un'informazione bene di tre.
Cosa fa di diverso questo di tre per essere così potente? Intanto abbiamo capito che ci permette di per generare delle rappresentazioni completamente svincolati da delle strutture prefabbricate.
In realtà poi ci sono dei tool basati su di tre che vanno a comporre quelle strutture che possono essere il grafico a barre.
Il perché farle con di tre diventa un pochino più complesso rispetto a farlo, magari con una libreria dove gli passi i dati, i passi colori ed ha già fatto il grafico.
Però naturalmente questa piccola in questo questo un piccolo incremento in curva di curva d'apprendimento è in qualche modo ricompensato dalla duttilità e dalla dinamicità di questa libreria.
Libri che tra l'altro è divisa in tanti moduli ognuno ha la sua specializzazione, poi andremo a vedere però la cosa importante che voglio evidenziare.
Il fatto che è di tre non si occupa di rappresentazione ma si occupa di trasformazione.
Gli altri libri di grafici si occupano di rappresentazione perché? Perché in qualche modo hanno gli schemi già prefabbricati invece quello che va a fare di tre 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é di tre mette a disposizione tutta una serie di tool per andare a modificare il donne, gli elementi html, il css e poi arriva persino a mettere a disposizione degli elementi per utilizzare i filtri compositi.
Quindi gli effetti filtro particolari per fare il clip in, quindi il ritaglio o le linee tratteggiate.
Altra cosa importante tutto quello che va a fare di tre non è legato alla libreria, ma l'azione che va a fare di tre sta sul doma.
Quindi se domani ibra introducono una novità che ne so, un effetto particolare piuttosto che adesso non posso prevedere.
Però immagino un filtro specifico che il browser domani implementano bene di tre non va riscritta.
I moduli non vanno a cambiare semplicemente andrà a modificare quella tributo nelle on nel tag nell'elemento html interesse deve completamente aggiornato senza neanche aggiungere una linea di codice alla libreria buzz.
Altra cosa importante molte delle librerie che generano dei grafici usano lei per dai canvas sono delle hickey, mettono a disposizione ci si può interagire con javascript, prendere a disegnare in una sorta di foglio bianco in rappresentazioni grafiche bene di tre non usa il canvas o perlomeno potresti usarli se vuoi.
Perché una libreria talmente dinamica che in realtà al posto disegnare, disegnare un se vai a disegnare sul campo ma non ti conviene farlo perche' perche' un'altra funzionalità molto interessante che la funzionalità di the bug tutto quello che fai.
Quindi tre apri, esplora elemento e lo vedi quindi di tre va a interagire sul don e tu in qualunque momento puoi andare a modificare, a verificare la modifica basata sui dati.
Credetemi, su di te ci sarebbe da parlare per ore e ore e ore.
Pensate che io ci ho fatto un corso di venti ore, più o meno io terro' un corso di venti ore sulla sulla tematica appunto di tre.
Quindi mi 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 ha la e gli assi asse x e asse y per 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 tua in ingresso da magari la tua lista, il tuo se il CVS o il tuo xml dalla situazione direttamente su elementi che questa non è della scala una nel ranch della posizione x non regge del colore e credetemi, questo è fantastico perché ti evita di modificare il codice e ci sono delle librerie che ti permettono di disegnare linee a partire da un dato.
Quindi un insieme di dati, una sequenza di dati.
Ci sono delle altre librerie per le interazioni, le animazioni animazione al quale puoi dare un deejay basato sul dell'elemento che stai rappresentando in modo da far alzare che ne so far apparire prima la prima barretta, poi la seconda, la terza io sto semplificando, però in realtà con le le animazioni possiamo fare davvero tante cose e a queste animazioni possiamo avere un di lei.
Possiamo dare un e quindi modificare i movimenti in modo più o meno fluido, più o meno elastico con appunto una funzione di easing.
Credetemi, possiamo fare tantissime cose, ma tutte queste animazioni sono figli di un concetto che sta alla base di tre e che e' figlio a sua volta del del, del, del del del concetto elementare che da ha dato senso poi ad tre, che è quello rappresentato allo scopo stesso della libreria.
Cioè prendo i dati ho una serie di chiavi inglesi per creare una rappresentazione libera, una carta bianca o la carta bianca, una serie di pennelli o i dati e posso rappresentare come voglio questi dati.
Bene, vi dicevo.
Questi dati però poi possono essere animati.
Ecco qua il delirio.
Perché? Perché le librerie che utilizziamo spesso hanno delle difficoltà ad allineare i dati per farlo, in realtà si usa il concetto delle e dell'ex.
Immaginate così immaginate di avere i vestiti e delle persone dei bambini, non tanti grembiulini e dei bambini.
Bene, prendete i bambini, li mettete in una sala di attesa.
I bambini sono i dati.
I bambini vengono messi in una sala di attesa, attendono uno per uno e il bambino.
Quindi il dato, il grembiulino, la sua rappresentazione, il suo elemento donne per essere precisi nella sociale, il grembiulino al bambino glielo facciamo indossare, ci renderemo conto che ci saranno le maniche da allungare o la vita da restringere bene questi piccoli dettagli.
Queste modifiche alle proprietà del che è il nostro elemento, ci permettono in qualche modo di visualizzare il dato bambino.
Io adesso sto semplificando viene fatta appunto un'associazione uno a uno finché tutti i bambini non hanno il suo grembiulino.
Quindi i bambini entrano in uno stato di ente EUR, quindi sono in una stanzetta.
Quello viene chiamato lo stato di enter e quando gli viene viene indossato il grembiulino.
Il grembiulino viene adattato dal bambino.
Noi abbiamo la rappresentazione bene, i bambini superano l'anno scolastico.
Cosa succede? I bambini cambiano ed escono dall'aula lasciando il grembiulino dentro l'aula.
Quindi in qualche modo e' l'elemento rimane nella pagina all'associazione di un altro gruppo di bambini.
L'elemento don cambierà la larghezza altezza perche' perche' il andra' allungato andra' ristretto e quindi potremmo fare delle animazioni.
Questo perché in realtà non si vanno a eliminare tutti gli elementi donne e ricreare nel momento in cui andiamo a cambiare i dati, ma si riciclano in qualche modo gli elementi.
Don e quindi l'elemento riciclato può essere animato da una proprietà, una larghezza un'altezza a un'altra.
Ecco viste Ecco fatte le animazioni appunto che vediamo nei grafici di fatti con di tre.
Esiste però un problema il problema è quello che si bambini che arrivano sono di più semplice.
Aggiungo dei grembiulini, ma se sono di meno esiste il metodo exit il compito nel metodo exit e andare a eliminare andare a eliminare i grembiulini che in realtà non hanno più un bambino associato perché i bambini sono di meno.
Quindi quegli elementi don sono l'hai, non ci stanno a rappresentare niente per cui devono poter essere eliminati.
Ma prima di essere eliminati, per esempio, io ha tutti gli elementi che sono in una fase di exit, quindi sono prossimi per essere eliminati possa applicare un'animazione, per esempio, gli voglio fare uscire e scorrendo delle x.
Nel mio grafico, ecco la cosa interessante di di tre in realtà, in un modo del tutto innovativo è riuscito a disp associare in qualche modo il concetto di rappresentazione grafica del dato, rendendo libero che utilizza il dato e' lì in qualche modo disegnarlo, rappresentarlo nel miglior modo possibile, miglior modo per veicolare il concetto.
Non spero che questa introduzione vi abbia incuriosito.
Non voleva essere esaustiva, ma in qualche modo voleva avvicinarvi in cui il mondo di tre se siete interessati sulla materia vi suggerisco il sito della libreria di tre 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 una di queste rappresentazioni devo dire che alcuni sono più comprensibili, altri beh, sono un e presuppongono delle basi abbastanza rigide di matematica.
Però non scoraggiatevi, buttate un occhio e credetemi, credetemi, rimarrete entusiasti le grandi compagnie, grandi gruppi editoriali, ma tantissime persone in tutto il mondo utilizzano di tre per passare i messaggi per veicolare delle tesi, rappresentare dei concetti e perché non possiamo farlo anche noi.
Spero che la puntata di oggi vi sia piaciuto.
Un pochino diversa dalle solite e con un audio anche questo felino diverso.
Tenete presente, sono a Lione, sono arrivato da pochissimo e quindi mi sto ancora 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 di sfida ci si presenta.
Vi ricordo che potete entrare in contatto con me scrivendo Heat, Brenner, Epo su Twitter oppure mandandomi una mail bar punto e tutto è cosa vi dico? Vi ringrazio per avermi ascoltata e vi ricordo che potete iscrivervi nel vostro podcast aprendolo da uno dei vostri clienti e cliccando su Iscriviti Così facendo ogni settimana riceverete appunto un quindici venti minuti di novità di cose più o meno interessanti dal mondo della programmazione.
E detto questo e' tutto Ci sentiamo la prossima settimana direttamente qua subito e nulla più.
Bar Il circolo dei Full Stack E' Bello Per una volta a settimana ci troviamo davanti a due birre e compra il repo.
Parliamo linguaggi e tecniche di sviluppo web, di metodologie e di strumenti immancabili nella cassetta degli attrezzi di Fury.
Ho bisogno di una mano. Aiutami a rendere più conosciuto il nostro podcast. Parlane con gli amici o con i colleghi e iscriviti usando Apple Podast o Google Podcast. Questa tua azione ci aiuterà a salire nella classifica dei podcast di tecnologia ed essere utili anche a qualcun’altro. Se non ti va, amici come prima😄