Ingegnere presso RisingStack, interessato a JS, Golang,. NET Core.
Recentemente, abbiamo avuto il piacere di partecipare a un progetto di apprendimento automatico che coinvolge librerie come React e D3.js. Tra le molte attività, ho sviluppato alcuni grafici che aiutano a elaborare il risultato di modelli ML come Naive Bayes sotto forma di grafico a linee o grafico a barre raggruppati.,
In questo articolo, vorrei presentare i miei progressi con D3.js finora e mostrare l’utilizzo di base della libreria attraverso il semplice esempio di un grafico a barre.
Dopo aver letto questo articolo, imparerai come creare D3.grafici js come questo facilmente:
Il codice sorgente completo è disponibile qui.
Noi di RisingStack siamo appassionati dell’ecosistema JavaScript, del backend e dello sviluppo front-end. Personalmente, sono interessato a entrambi., Sul back-end, posso vedere attraverso la logica di business sottostante di un’applicazione, mentre ho anche l’opportunità di creare cose dall’aspetto fantastico sul front-end. Ecco dove D3.js entra in scena!
Aggiornamento: una seconda parte del mio d3.è disponibile anche la serie js tutorial: Costruire un D3.js Calendar Heatmap (per visualizzare i dati di utilizzo di StackOverflow)
Che cos’è D3.js?
D3.js è una libreria JavaScript data-driven per la manipolazione di elementi DOM.
“D3 ti aiuta a dare vita ai dati usando HTML, SVG e CSS., L’enfasi di D3 sugli standard Web offre tutte le funzionalità dei browser moderni senza legarsi a un framework proprietario, combinando potenti componenti di visualizzazione e un approccio basato sui dati alla manipolazione DOM.” – d3js.org
Perché dovresti creare grafici con D3.js in primo luogo? Perché non visualizzare un’immagine?
Bene, i grafici sono basati su informazioni provenienti da risorse di terze parti che richiedono una visualizzazione dinamica durante il rendering. Inoltre, SVG è uno strumento molto potente che si adatta bene a questo caso applicativo.,
Facciamo una deviazione per vedere quali benefici possiamo ottenere dall’uso di SVG.
I vantaggi di SVG
SVG sta per Scalable Vector Graphics che è tecnicamente un linguaggio di markup basato su XML.
È comunemente usato per disegnare grafica vettoriale, specificare linee e forme o modificare immagini esistenti. Puoi trovare l’elenco degli elementi disponibili qui.
Pro:
- Supportato in tutti i principali browser;
- Ha un’interfaccia DOM, non richiede lib di terze parti;
- Scalabile, può mantenere un’alta risoluzione;
- Dimensioni ridotte rispetto ad altri formati di immagine.,
Contro:
- Può visualizzare solo immagini bidimensionali;
- Curva di apprendimento lunga;
- Il rendering può richiedere molto tempo con operazioni ad alta intensità di calcolo.
Nonostante i suoi aspetti negativi, SVG è un ottimo strumento per visualizzare icone, loghi, illustrazioni o, in questo caso, grafici.
Guida introduttiva a D3.js
Ho scelto il grafico a barre per iniziare perché rappresenta un elemento visivo a bassa complessità mentre insegna l’applicazione di base di D3.js stesso. Questo non dovrebbe ingannare, D3 fornisce un grande insieme di strumenti per visualizzare i dati., Controlla la sua pagina github per alcuni casi d’uso davvero belli!
Un grafico a barre può essere orizzontale o verticale in base al suo orientamento. Andrò con quello verticale aka istogramma.
In questo diagramma, visualizzerò i 10 linguaggi di programmazione più amati in base al risultato del sondaggio per sviluppatori 2018 di Stack Overflow.
Tempo di disegnare!
SVG ha un sistema di coordinate che inizia dall’angolo in alto a sinistra (0;0). L’asse x positivo va a destra, mentre l’asse y positivo si dirige verso il basso., Pertanto, l’altezza del SVG deve essere presa in considerazione quando si tratta di calcolare la coordinata y di un elemento.
Questo è abbastanza controllo dei precedenti, scriviamo un po ‘ di codice!
Voglio creare un grafico con 1000 pixel di larghezza e 600 pixel di altezza.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>Nel frammento di codice sopra, seleziono l’elemento creato<svg>nel file HTML con d3select. Questo metodo di selezione accetta tutti i tipi di stringhe di selezione e restituisce il primo elemento corrispondente., Usa selectAll se vuoi ottenerli tutti.
Definisco anche un valore di margine che dà un po ‘ di padding extra al grafico. Il padding può essere applicato con un elemento<g> tradotto dal valore desiderato. D’ora in poi, attingo a questo gruppo per mantenere una sana distanza da qualsiasi altro contenuto della pagina.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);Aggiungere attributi a un elemento è semplice come chiamare il metodo attr. Il primo parametro del metodo prende un attributo che voglio applicare all’elemento DOM selezionato., Il secondo parametro è il valore o una funzione di callback che restituisce il valore di esso. Il codice sopra sposta semplicemente l’inizio del grafico nella posizione (60;60) dell’SVG.
Supportato D3.js input formats
Per iniziare a disegnare, ho bisogno di definire l’origine dati da cui sto lavorando. Per questo tutorial, uso un semplice array JavaScript che contiene oggetti con il nome delle lingue e le loro percentuali percentuali, ma è importante menzionare che D3.js supporta più formati di dati.
La libreria ha funzionalità integrate da caricare da XMLHttpRequest,.file csv, file di testo ecc., Ciascuna di queste fonti può contenere dati che D3.js può usare, l’unica cosa importante è costruire un array da loro. Si noti che, dalla versione 5.0, la libreria utilizza le promesse anziché i callback per il caricamento dei dati che è una modifica non compatibile con le versioni precedenti.
Scala, Assi
Andiamo avanti con gli assi del grafico. Per disegnare l’asse y, ho bisogno di impostare il limite di valore più basso e più alto che in questo caso sono 0 e 100.
Sto lavorando con le percentuali in questo tutorial, ma ci sono funzioni di utilità per tipi di dati diversi dai numeri che spiegherò più avanti.,
Devo dividere l’altezza del grafico tra questi due valori in parti uguali. Per questo, creo qualcosa che si chiama funzione di ridimensionamento.
const yScale = d3.scaleLinear() .range() .domain(); La scala lineare è il tipo di scala più comunemente noto. Converte un dominio di input continuo in un intervallo di output continuo. Si noti il metodorange edomain. Il primo prende la lunghezza che dovrebbe essere divisa tra i limiti dei valori del dominio.,
Ricorda, il sistema di coordinate SVG inizia dall’angolo in alto a sinistra, ecco perché l’intervallo prende l’altezza come primo parametro e non zero.
Creare un asse a sinistra è semplice come aggiungere un altro gruppo e chiamare il metodoaxisLeft di d3 con la funzione di ridimensionamento come parametro.
chart.append('g') .call(d3.axisLeft(yScale));Ora, continuare con l’asse x.
Tieni presente che uso scaleBand per l’asse x che aiuta a dividere l’intervallo in bande e calcolare le coordinate e le larghezze delle barre con padding aggiuntivo.
D3.,js è anche in grado di gestire il tipo di data tra molti altri. scaleTime è molto simile a scaleLinear tranne che il dominio è qui una serie di date.
Barre di disegno in D3.js
Pensa a quale tipo di input abbiamo bisogno per disegnare le barre. Ognuno di essi rappresenta un valore che è illustrato con forme semplici, in particolare rettangoli. Nel prossimo frammento di codice, li aggiungo all’elemento del gruppo creato.
In primo luogo, IselectAll elementi sul grafico che restituisce con un set di risultati vuoto., Quindi, la funzionedata indica quanti elementi deve essere aggiornato il DOM in base alla lunghezza dell’array. enter identifica gli elementi mancanti se l’input dei dati è più lungo della selezione. Questo restituisce una nuova selezione che rappresenta gli elementi che devono essere aggiunti. Di solito, questo è seguito da un append che aggiunge elementi al DOM.
Fondamentalmente, dico a D3.js per aggiungere un rettangolo per ogni membro della matrice.
Ora, questo aggiunge solo rettangoli uno sopra l’altro che non hanno altezza o larghezza., Questi due attributi devono essere calcolati ed è qui che le funzioni di ridimensionamento tornano utili.
Vedi, aggiungo le coordinate dei rettangoli con la chiamataattr. Il secondo parametro può essere un callback che prende 3 parametri: il membro effettivo dei dati di input, l’indice di esso e l’intero input.
.attr(’x’, (actual, index, array) => xScale(actual.value))La funzione di ridimensionamento restituisce la coordinata per un determinato valore di dominio. Calcolare le coordinate sono un pezzo di torta, il trucco è con l’altezza della barra., La coordinata y calcolata deve essere sottratta dall’altezza del grafico per ottenere la rappresentazione corretta del valore come colonna.
Definisco anche la larghezza dei rettangoli con la funzione di ridimensionamento. scaleBand ha una funzionebandwidth che restituisce la larghezza calcolata per un elemento in base al padding impostato.
Bel lavoro, ma non così elegante, giusto?
Per evitare che il nostro pubblico sanguini gli occhi, aggiungiamo alcune informazioni e miglioriamo le immagini!, 😉
Suggerimenti per creare grafici a barre
Ci sono alcune regole di base con grafici a barre che vale la pena menzionare.
- Evita l’uso di effetti 3D;
- Ordina i punti dati in modo intuitivo-alfabetico o ordinato;
- Mantieni la distanza tra le bande;
- Avvia l’asse y a 0 e non con il valore più basso;
- Usa colori coerenti;
- Aggiungi etichette asse, titolo, linea sorgente.
D3.js Grid System
Voglio evidenziare i valori aggiungendo linee della griglia in background.,
Vai avanti, sperimenta sia le linee verticali che quelle orizzontali, ma il mio consiglio è di visualizzarne solo una. Le linee eccessive possono distrarre. Questo frammento di codice presenta come aggiungere entrambe le soluzioni.
In questo caso preferisco le linee della griglia verticale perché guidano gli occhi e mantengono l’immagine generale chiara e semplice.
Etichette in D3.js
Voglio anche rendere il diagramma più completo aggiungendo alcune indicazioni testuali. Diamo un nome al grafico e aggiungiamo etichette per gli assi.,
I testi sono elementi SVG che possono essere aggiunti al SVG o ai gruppi. Possono essere posizionati con le coordinate x e y mentre l’allineamento del testo viene eseguito con l’attributotext-anchor. Per aggiungere l’etichetta stessa, basta chiamare text metodo sull’elemento di testo.
Interattività con D3.js
Abbiamo ottenuto un grafico piuttosto informativo, ma ci sono ancora possibilità di renderlo interattivo.
Nel prossimo blocco di codice ti mostro come aggiungere ascoltatori di eventi agli elementi SVG.,
Si noti che uso l’espressione della funzione invece di una funzione freccia perché accedo all’elemento tramite la parola chiavethis.
Ho impostato l’opacità dell’elemento SVG selezionato a metà del valore originale al passaggio del mouse e resettato quando il cursore lascia l’area.
Puoi anche ottenere le coordinate del mouse con d3.mouse. Restituisce un array con la coordinata x e y. In questo modo, la visualizzazione di un suggerimento sulla punta del cursore non sarebbe affatto un problema.
Creare diagrammi strabilianti non è una forma d’arte facile.,
Si potrebbe richiedere la saggezza di grafici, ricercatori UX e altre creature potenti. Nel seguente esempio ho intenzione di mostrare alcune possibilità per aumentare il grafico!
Ho valori molto simili visualizzati sul grafico in modo da evidenziare le divergenze tra i valori della barra, ho impostato un listener di eventi per l’eventomouseenter. Ogni volta che l’utente passa sopra una specifica colonna, una linea orizzontale viene disegnata sopra quella barra. Inoltre, calcolo anche le differenze rispetto alle altre bande e le visualizzo sulle barre.,
Abbastanza pulito, eh? Ho anche aggiunto l’esempio di opacità a questo e aumentato la larghezza della barra.
Il metodo transition indica che voglio animare le modifiche al DOM. Il suo intervallo è impostato con la funzioneduration che richiede millisecondi come argomenti. Questa transizione sopra sfuma il colore della banda e allarga la larghezza della barra.
Per disegnare una linea SVG, ho bisogno di un punto di partenza e di un punto di destinazione., Questo può essere impostato tramite le coordinatex1,y1 ex2,y2. La linea non sarà visibile fino a quando non ne imposterò il colore con l’attributostroke.
Ho rivelato solo una parte dell’evento mouseenter qui quindi tieni presente che devi ripristinare o rimuovere le modifiche sull’evento mouseout. Il codice sorgente completo è disponibile alla fine dell’articolo.
Aggiungiamo un po ‘ di stile al grafico!,
Vediamo cosa abbiamo ottenuto finora e come possiamo scuotere questo grafico con un po ‘ di stile. È possibile aggiungere attributi di classe agli elementi SVG con la stessa funzione attr che abbiamo usato prima.
Il diagramma ha un bel set di funzionalità. Invece di un’immagine opaca e statica, rivela anche le divergenze tra i valori rappresentati al passaggio del mouse. Il titolo mette il grafico nel contesto e le etichette aiutano a identificare gli assi con l’unità di misura. Aggiungo anche una nuova etichetta nell’angolo in basso a destra per contrassegnare la sorgente di input.,
L’unica cosa che rimane è aggiornare i colori e i caratteri!
Grafici con sfondo scuro rende le barre colorate luminose aspetto fresco. Ho anche applicato la famiglia di fontOpen Sans a tutti i testi e ho impostato dimensioni e peso per le diverse etichette.
Noti che la linea è stata tratteggiata? Può essere fatto impostando gli attributistroke-width estroke-dasharray. Con stroke-dasharray, È possibile definire il modello di trattini e spazi vuoti che alterano il contorno della forma.
Linee della griglia dove diventa difficile., Devo applicare stroke-width: 0 agli elementi del percorso nel gruppo per nascondere la cornice del diagramma e riduco anche la loro visibilità impostando l’opacità delle linee.
Tutte le altre regole css coprono le dimensioni e i colori dei caratteri che puoi trovare nel codice sorgente.
Avvolgendo il nostro D3.js Grafico a barre Tutorial
D3.js è una libreria straordinaria per la manipolazione DOM. La profondità di esso nasconde innumerevoli tesori nascosti (in realtà non nascosti, è davvero ben documentato) che aspettano di essere scoperti., Questa scrittura copre solo frammenti del suo set di strumenti che aiutano a creare un grafico a barre non così mediocre.
Vai avanti, esploralo, usalo e crea visualizzazioni spettacolari!