Boost D3.js Charts con SVG Gradients

Nadieh Bremer sarà a Genera Londra. A settembre, dove dimostrerà come prendere Svg oltre le semplici forme , utilizzando JavaScript, CSS e D3.JS per rendere le visualizzazioni dei dati ancora più divertenti ed eccitanti. Prenota il tuo biglietto ora !

D3.js ha rilevato il mondo della visualizzazione interattiva dei dati. È possibile trovare un enorme numero di esempi, ognuno showcasing è il proprio divertimento e una svolta utile sulla biblioteca. Vedi, D3 non è una libreria di grafici, ma qualcosa di molto meglio. Ti dà solo gli strumenti di base per creare visualizzazioni di dati e in modo che ti permetta di creare praticamente tutto ciò a cui puoi pensare. Anche se alcune idee potrebbero richiedere più tempo di altre, arriverai alla fine. E questa libertà è esattamente ciò che amo per D3.

Al suo nucleo, ogni D3 Visual è costruito da elementi SVG. Ad esempio, per ciascun datapoint in un grafico di scarsaplot, per creare un grafico a barre, come asse, coordinate parallele o grafico pendio, come etichette e estremamente utili per praticamente tutto il resto. Inoltre, gli SVG sono indipendenti dalla risoluzione, sembrano così grandi su qualsiasi schermo o livello di zoom.

Anche se stai usando SVGS per le loro forme, puoi creare meravigliose visualizzazioni. Tuttavia, possono fare molto di più - Pensa ad esempio i filtri SVG. In questo tutorial, prenderemo un'immersione profonda in un aspetto specifico e guarderemo a pochi modi diversi che può essere applicato per illuminare una visualizzazione. Lascia che ti presentiamo i gradienti SVG!

Trova tutti i file di cui hai bisogno per questo tutorial Qui .

Gradienti lineari

A volte quando creo un grafico a linee con una singola linea, si sente un po 'troppo vuoto e può perdersi sullo sfondo bianco. Per renderlo di più, metto un gradiente leggero sotto questo usando D3 d3.svg.area. Funzione, riempita con un gradiente SVG (vedere la figura 1).

Voglio che il gradiente funzioni verticalmente dall'alto (dove è lo stesso colore della linea ma una tonalità più leggera) sul fondo (dove dovrebbe diventare bianco o trasparente). Questo è ciò che è noto come gradiente lineare; qualcosa che cambia colore lungo una linea retta.

Iniziamo con un svg. Questa è la tela su cui verrà disegnato il nostro grafico a linee. Quindi creiamo a Dims. elemento su cui possiamo aggiungere a lineargradiente elemento. È molto importante dare al gradiente un ID univoco - lo useremo più tardi quando abbiamo bisogno di dare l'area sotto la linea il suo riempimento.

 var areagradient = svg.append ("defs")
.Append ("lineargradiente")
.ATTR ("ID", "Areagradient")
.ATTR ("X1", "0%"). ACT ("Y1", "0%")
.ATTR ("X2", "0%"). ACT ("Y2", "100%"); 

Le ultime due righe del codice sopra definiscono come è necessario eseguire il gradiente. Pensaci come una linea invisibile: x1. e y1. sono le posizioni di partenza della linea invisibile e del x2. e y2. Indica il suo punto finale, per dare la direzione del gradiente. È spesso più facile definire questi come percentuali, anche se è possibile utilizzare posizioni esatte dei pixel. Per impostazione predefinita le posizioni si riferiscono alla casella di delimitazione dell'elemento su cui viene applicato il gradiente. Vogliamo che il gradiente funzioni verticalmente, quindi x1. e x2. dovrebbe essere lo stesso ( 0% è ok), y1. deve essere 0% e Y2 100% .

Ora possiamo definire i colori del gradiente. Sono necessari almeno due colori per un gradiente, ma puoi usare il maggior numero di voi che vuoi. Per ogni colore nel gradiente aggiungi a fermare elemento. All'interno di questo specifichi l'ombra con stop-colour. e la posizione (lungo la linea invisibile) dove vuoi che questo colore sia puro (il colore esatto) con compensare .

Facoltativamente, possiamo anche impostare l'opacità di ogni colore con stop-opacia. . Qui sto facendo l'ombra leggermente più leggera nella parte superiore e completamente trasparente in basso.

areagradient.append ("stop")
.ATTR ("OFFSET", "0%")
.ATTR ("STOP-Color", "# 21825C")
.ATTR ("stop-opacità", 0.6);
areagradient.append ("stop")
.ATTR ("OFFSET", "80%")
.ATTR ("STOP-Color", "Bianco")
.ATTR ("stop-opacità", 0); 

Ora è configurato il gradiente lineare, possiamo creare un grafico di area e riempirlo con il gradiente. Per fare questo, usare URL (# gradiente-ID) Nello stile di riempimento, insieme all'ID univoco che abbiamo impostato prima.

 svg.append ("percorso")
.Style ("Riempi", "URL (#Areagradiente)")
.ATTR ("D", Areafunction (DataSet)); 

Successivamente, disegna la linea in cima a quest'area del grafico in modo che lo spettatore possa leggere i risultati dal tuo grafico. Nel mio grafico, ho anche collocato i cerchi per enfatizzare le posizioni di specifici punti dati.

Una leggenda liscia

Le leggende sono molto comuni nelle visualizzazioni dei dati. Quando utilizzi i colori per rappresentare un aspetto particolare dei tuoi dati, devi spiegare cosa significa ogni colore. È qui che entra una leggenda.

In alcuni grafici, utilizzerai il colore per discriminare i casi discreti (ad esempio, diversi paesi), nel qual caso i colori sono spesso tutti molto diversi. Tuttavia, è anche possibile utilizzare il colore per indicare un valore quantitativo.

Qui stiamo rappresentando la temperatura all'esterno (vedi figura 2). Il colore cambia gradualmente per indicare la temperatura che va da basso al massimo. Per mostrare questo in una leggenda, creeremo un lungo rettangolo e riempirlo con un gradiente che va da sinistra a destra. Possiamo riutilizzare il gradiente che abbiamo creato per il nostro grafico a linee, ma capovolto da 90 gradi (così x2. Ora corre 100% , anziché y2. ). Sebbene generalmente una tavolozza arcobaleno non sia raccomandata nella visualizzazione dei dati, le persone vengono utilizzate per vedere mappe di temperatura colorate e ho scelto nove colori da utilizzare nel nostro esempio.

Invece di scrivere ciascuno fermare Per aggiungere, possiamo mettere tutti i colori in un set di dati e utilizzare il nifty di D3 dati passo per rendere il processo più velocemente. Con D3 è possibile accedere a qualsiasi proprietà del set di dati nei successivi passaggi di catena utilizzando una funzione anonima, consentendo in tal modo di impostare il colore e l'offset in sole due linee.

 svg.append ("defs")
.Append ("lineargradiente")
.ATTR ("ID", "Legendgradientmulti")
.ATTR ("X1", "0%"). ACT ("Y1", "0%")
.ATTR ("X2", "100%"). ACT ("Y2", "0%")
.Selectall ("STOP")
.dati([
{offset: "0%", colore: "# 2c7bb6"},
{offset: "12,5%", colore: "# 00a6ca"},
{offset: "25%", colore: "# 00ccbc"},
{offset: "37,5%", colore: "# 90eb9d"},
{offset: "50%", colore: "# fffff8c"},
{offset: "62,5%", colore: "# f9d057"},
{offset: "75%", colore: "# f29e2e"},
{offset: "87,5%", colore: "# E76818"},
{offset: "100%", colore: "# d7191c"}])
.renter (). APPEND ("STOP")
.ATTR ("offset", funzione (d) {return d.offset;})
.ATTR ("stop-colour", funzione (d) {return d.color;}); 

Come prima, il passo finale è creare un retto e riempire questo usando l'ID gradiente unico.

 svg.append ("redd")
.ATTR ("X", 0) .ATTR ("Y", 0)
.ATTR ("Larghezza", 500) .ATTR ("Altezza", 20)
.Style ("Riempi", "URL (#legendgradientmulti)"); 

I grafici queste leggende vanno con vengono ricreate dopo il favoloso lavoro di www.weather-radials.com. Mostrando la temperatura a New York o Pechino nel 2015. La temperatura media ogni giorno è indicata da una linea colorata, e queste linee sono disposte per formare un grafico circolare. La leggenda sotto spiega ciò che ogni colore significa. Un grafico usa un gradiente da un colore all'altro, e l'altro progredisce attraverso tutti i nove colori.

Gradienti basati sui dati

In un modo simile all'esempio precedente, possiamo anche creare più gradienti. Potremmo fare un gradiente unico per ogni punto di dati, in base a un particolare aspetto dei dati. Ho usato questo approccio in un Visualizzazione esopianet , dove ha ricevuto ogni pianeta un gradiente in base alla classe stellare della stella orbita. Ho usato un sottile effetto sfera per dare l'impressione che ognuno era illuminato dalla stella del centro.

Quindi torniamo agli anni '90 e trasformiamo una collezione di cerchi piatti che rappresentano i pianeti nel nostro sistema solare in sfere dall'aspetto 3D con gradienti radiali (figura 4). Ho creato un piccolo set di dati contenente il nome e il diametro del pianeta. Ognuno sarà generalizzato da un colore, che useremo per creare un gradiente unico per ogni pianeta.

 VAR Gradientradial = svg.append ("defs")
.Selectall ("Radialgradient")
.data (pianeti)
.renter (). APPEND ("RadiaLgradient")
.ATTR ("ID", funzione (D) {return "Gradient-" + d.planet;})
.ATTR ("CX", "15%")
.ATTR ("CY", "50%")
.ATTR ("R", "85%"); 

Il codice è leggermente diverso qui: invece di prima aggiungere un elemento sfumato, ora appendiamo immediatamente il pianeti set di dati e solo dopo il accedere Creiamo un elemento sfumato (in questo caso radialgradiente ). In questo modo, viene creato un gradiente per ogni punto del set di dati. Tieni l'ID di ciascun punto unico univoco basandolo sui dati. L'indice io Di solito funziona, ma qui il nome del pianeta è più sicuro. Ciò garantisce che possiamo accedere al gradiente corretto in seguito.

Un gradiente radiale è leggermente diverso da uno lineare. Lo creiamo in modo simile a un cerchio svg: forniamo il centro del gradiente rispetto ai limiti dell'oggetto a cui verrà applicato, utilizzando cx. e cy. . Questi valori sono predefiniti per 50% , che è il centro dell'oggetto.

Per simulare l'aspetto di una stella che brilla sui pianeti da un lato, sposteremo il centro del gradiente a sinistra facendo impostazione cx. per 15% . Il raggio del gradiente (dove una sosta sfumatura di 100% dovrebbe finire) è indicato da r. . È inoltre predefinito 50% , ma a causa del nostro cx. offset, ora è ora 85% Quindi riempie l'intero cerchio.

Possiamo utilizzare i dati del pianeta per aggiungere le fermate del colore. Per creare l'aspetto di una sfera che viene brillata, il colore a 0% dovrebbe essere più leggero Usando d3.rgb (). Più luminoso (k) Non devo specificare un colore separato, poiché D3 farà quel calcolo per me. Il valore K Definisce quanto più leggero voglio che il colore diventi. Attorno 50% Ho impostato il vero colore nel set di dati. A bordo voglio un colore che è leggermente più scuro, dando l'aspetto dell'ombra. Logicamente, c'è anche un d3.rgb (). più scuro (k) che possiamo usare.

 gradientradial.append ("stop")
.ATTR ("OFFSET", "0%")
.ATTR ("STOP-Color", Funzione (D) {
Ritorna d3.rgb (d.color) .browter (1); }););
gradientradial.append ("stop")
.ATTR ("offset", "50%")
.ATTR ("stop-colour", funzione (d) {return d.color;});
gradientradial.append ("stop")
.ATTR ("OFFSET", "100%")
.ATTR ("STOP-Color", Funzione (D) {
Ritorna D3.rgb (D.Color) .Darker (2.5); }); 

Se dovessi ispezionare l'HTML dopo averlo in esecuzione, ci sarebbero otto diversi gradienti radiali presenti. Ultimo, dobbiamo creare otto cerchi, dare loro un raggio come definito dai dati e riempirli con il gradiente corretto.

 svg.selectalall ("Pianeti")
.data (pianeti)
.renter (). APPEND ("Cerchio")
/ * Impostare gli attributi della classe, della posizione e del raggio ... * /
.Style ("Riempi", funzione (D) {
restituire "URL (# gradiente-" + d.planet + ")"; }); 

Ho anche aggiunto il sole, che ha il suo gradiente radiale, ma ho lasciato cx. , cy. e r. con l'impostazione predefinita di 50% Per farlo sembrare che il sole sia incandescente dal centro verso l'esterno.

Un disclaimer: sebbene i diametri di tutte le sfere siano corretti rispetto all'altra, le distanze sono ovviamente completamente false. E mi dispiace che Saturno non abbia anelli

Giocare con gli orientamenti

Ora abbiamo esplorato come impostare gli aspetti cromatici in base ai dati, ma ci sono molte più possibilità. Possiamo praticamente praticamente tutto in base ai dati, anche gli orientamenti di ogni gradiente.

Per provare questo, facciamo un diagramma di accordi D3 che mostra le collaborazioni tra i Avengers nell'universo cinematografico della Marvel (figura 5). Gli accordi che corrono tra i sei Avengers sono dimensionati in base al numero di film in cui entrambi appaiono. Riempieremo questi accordi con un semplice gradiente lineare, cambiando dal colore di un venditore a un altro.

Un accordo non è solitamente esattamente orizzontale o verticale. Quindi dovremo impostare la X1, x2. , y1. e y2. valori basati sulle posizioni dell'arco esterno di ciascun Avenger. Questi dati non sono nel nostro set di dati originali, ma dopo averlo fornito a D3 d3.layout.chord. Funzione, recupereremo un nuovo set di dati contenente gli angoli iniziali e finali di ciascun arco (come d.source.stanble. e d.target.endle. ). Questo è il set di dati che forniamo durante la creazione dei gradienti.

Dobbiamo conoscere le posizioni dei pixel della linea invisibile che finisce da un'estremità di un accordo all'altro. Questi vengono quindi usati per dare il x1, .., y2 Attributi di ogni gradiente. Possiamo applicare una certa trigonometria usando il raggio del diagramma di accordi e la posizione a metà strada lungo l'arco di ogni Avenger per recuperare queste posizioni. La formula trigonometrica completa è stata rimossa dal seguente codice, ma lo troverai in Il repo GitHub che accompagna questo articolo .

Per creare un ID univoco per ogni accordo creiamo una combinazione di stringhe del valore dell'indice del vendicatore ad ogni estremità di un accordo. D3. d3.layout.chord. Imposta sempre uno (dei vendicatori) a fonte e l'altro a bersaglio , il che rende una coppia unica. Più tardi, quando si disegnano gli accordi, possiamo usare la stessa tecnica per chiamare il gradiente corretto.

 VAR grads = svg.append ("defs"). SelectAll ("lineargradient")
.data (chord.chords ())
.renter (). APPEND ("lineargradiente")
.ATTR ("ID", funzione (D) {return "gradientchord-" + d.source.
Indice + "-" + d.target.index; })
.ATTR ("Gradientnits", "Spaceonuse ")
// la posizione del pixel di un'estremità di un accordo
.ATTR ("X1", funzione (D, I) {return / * ... trigonometria basata su
Valori D.Source ... * /; })
.ATTR ("Y1", funzione (D, I) {return / * ... * /})
// la posizione del pixel dell'altra estremità di un accordo
.ATTR ("x2", funzione (D, I) {return / * ... * /})
.ATTR ("Y2", funzione (D, I) {return / * ... * /}); 

Poiché ogni Avenger è definito dal proprio numero di indice, possiamo fare una funzione di colore, colori , che restituisce il colore dell'Avenger per valore indice. Questo rende facile fare riferimento al colore giusto mentre si aggiunge alle due fermate di colore.

 grads.append ("stop")
.ATTR ("OFFSET", "0%")
.ATTR ("stop-colour", funzione (D) {colori di ritorno (d.source.index);
}););
grads.append ("stop")
.ATTR ("OFFSET", "100%")
.ATTR ("STOP-Color", Funzione (D) {I colori di ritorno (D.Target.Index);
}); 

Tutto ciò che rimane è chiamare il giusto ID graduale durante l'impostazione dello stile di riempimento degli accordi (con la stessa funzione che abbiamo usato per impostare l'ID del gradiente).

Arrotondare

Durante questo tutorial, abbiamo guardato quattro modi diversi per utilizzare i gradienti SVG nelle visualizzazioni dei dati, ma ci sono sempre più cose che puoi fare. Con animazioni gradienti, è possibile simulare un flusso da una parte della visualizzazione dei dati all'altra, ad esempio.

Quindi la prossima volta che stai progettando una visualizzazione dei dati, lascia che la tua creatività sia libera. Con D3.JS, non devi essere limitato da ciò che pensi siano i limiti dello strumento. Con un piccolo pensiero e sforzo fuori dal fatto che puoi fare le cose più incredibili.

Non perdere la sessione di Nadieh, SVG oltre la semplice forme, a Genera Londra, 21-23 settembre. Prenota ora !

Questo articolo è originariamente apparso in Magazine netta Edizione 280; Compralo qui !