Boost d3.js diagrame cu gradienți SVG

Nadieh Bremer va fi la Generați Londra În septembrie, unde va demonstra cum să ia SVG dincolo de simple forme , folosind JavaScript, CSS și D3.Js pentru a face vizualizări de date chiar mai distractive și mai interesante. Rezervați biletul acum Fotografiile!

D3.JS a preluat lumea vizualizării interactive a datelor. Se poate găsi un număr enorm de exemple, fiecare prezintă propriul său distracție și răsucire utilă pe bibliotecă. Vedeți, D3 nu este o bibliotecă de grafică, ci ceva mult mai bine. Vă oferă doar instrumentele de bază pentru a crea vizualizări de date, iar în acest sens vă permite să creați practic tot ce vă puteți gândi. Chiar dacă unele idei ar putea dura mai mult timp decât altele, veți ajunge acolo în cele din urmă. Și această libertate este exact ceea ce iubesc despre D3.

În centrul său, fiecare vizual D3 este construit din elemente SVG. De exemplu, pentru fiecare datapoint dintr-o diagramă de scatterplot, pentru a crea o diagramă de bare, ca axă, coordonate paralele sau grafic de pante, ca etichete și extrem de util pentru practic orice altceva. În plus, SVG-urile sunt independente de rezoluție, arată astfel excelent pe orice nivel de afișare sau zoom.

Chiar dacă utilizați SVG-uri pentru formele lor, puteți crea vizualizări minunate. Cu toate acestea, ei pot face mult mai mult - gândiți-vă de filtrele SVG, de exemplu. În acest tutorial, vom lua o scufundare profundă într-un aspect specific și vom privi câteva modalități diferite pe care le poate fi aplicată pentru a lumina o vizualizare. Permiteți-mi să vă prezint Gradienți SVG!

Găsiți toate fișierele de care aveți nevoie pentru acest tutorial Aici .

Gradienți liniari

Uneori, când creez o diagramă de linie cu o singură linie, se simte puțin prea gol și se poate pierde pe fundalul alb. Pentru a face să evidențiem mai mult, pun un gradient de lumină sub ea folosind D3's d3.svg.area. Funcția, umplută cu un gradient SVG (vezi fig 1).

Vreau ca gradientul să ruleze vertical din partea de sus (unde este aceeași culoare ca linia, dar o umbră mai ușoară) spre partea de jos (unde ar trebui să devină albă sau transparentă). Acesta este ceea ce este cunoscut ca un gradient liniar; ceva care schimbă culoarea de-a lungul unei linii drepte.

Începem cu un SVG. Aceasta este panza pe care va fi desenată diagrama noastră de linie. Apoi creăm a Defs element pe care putem adăuga a lineragial element. Este foarte important să oferiți gradientului un ID unic - vom folosi acest lucru mai târziu când trebuie să oferim zona sub linia completă.

 Var Areagradient = svg.append ("defs")
.append ("liniargradient")
.Attr ("ID", "Areagradient")
.Attr ("x1", "0%"). Attr ("Y1", "0%")
.attr ("x2", "0%"). Attr ("Y2", "100%"); 

Ultimele două linii ale codului de mai sus definesc modul în care trebuie să funcționeze gradientul. Gândiți-vă la el ca o linie invizibilă: X1. și Y1. sunt pozițiile de pornire ale liniei invizibile și ale X2. și Y2. Indicați punctul final, pentru a da direcția gradientului. Este adesea mai ușor să se definească aceste procente, deși este posibil să se utilizeze locațiile exacte de pixeli. În mod implicit, locațiile se referă la caseta delimită a elementului pe care se aplică gradientul. Vrem ca gradientul să ruleze vertical, așa că X1. și X2. ar trebui să fie același ( 0% e bine), Y1. trebuie sa fie 0% și Y2 100% .

Acum putem defini culorile gradientului. Cel puțin două culori sunt necesare pentru un gradient, dar puteți folosi cât de mulți doriți. Pentru fiecare culoare din gradient adăugați a Stop element. În acest sens, specificați umbra cu Opriți-culori , și locația (de-a lungul liniei invizibile) unde doriți ca această culoare să fie pure (culoarea exactă) cu decalaj .

Opțional, putem seta și opacitatea fiecărei culori cu oprire-opacitate . Aici fac umbra ușor mai ușoară în partea de sus și complet transparentă în partea de jos.

areagradient.append ("Stop")
.Attr ("offset", "0%")
.Attr ("Stop-color", "# 21825c")
.Attr ("opacitatea opacității", 0,6);
areagradient.append ("Stop")
.Attr ("offset", "80%")
.Attr ("Stop-color", "alb")
.Attr ("opacitatea opacității", 0); 

Acum, gradientul liniar este configurat, putem crea o diagramă de zonă și o umplem cu gradientul. Pentru a face acest lucru, utilizați URL (# GRADIENT-ID) În stilul de umplere, împreună cu ID-ul unic pe care l-am stabilit mai devreme.

 SVG.APPEND ("PATH")
.Style ("Fill", "URL (#areagradicient)")
.Attr ("d", zona (setul de date)); 

După aceea, trageți linia de sus a acestei zone a graficului, astfel încât vizualizatorul să poată citi rezultatele de pe graficul dvs. În diagrama mea, am plasat și cercuri pentru a sublinia locațiile punctelor de date specifice.

O legendă netedă

Legendele sunt foarte frecvente în vizualizările datelor. Când utilizați culorile pentru a reprezenta un aspect particular al datelor dvs., trebuie să explicați ce înseamnă fiecare culoare. Aici intră o legendă.

În unele diagrame, veți folosi culoarea pentru a discrimina între cazurile discrete (de exemplu, diferite țări), caz în care culorile sunt adesea foarte diferite. Cu toate acestea, puteți utiliza, de asemenea, culoarea pentru a indica o valoare cantitativă.

Aici reprezentând temperatura exterioară (vezi Fig 2). Culoarea se schimbă treptat pentru a indica temperatura care trece de la scăzut la înălțime. Pentru a arăta acest lucru într-o legendă, vom crea un dreptunghi lung și o vom umple cu un gradient care trece de la stânga la dreapta. Putem reutiliza gradientul pe care l-am creat pentru diagrama noastră, dar a răsturnat 90 de grade (deci X2. Acum merge la 100% , Mai degrabă decât Y2. ). Deși, în general, o paletă de curcubeu nu este recomandată în vizualizarea datelor, oamenii sunt folosiți pentru a vedea hărți de temperatură colorate și am ales nouă culori pentru a le folosi în exemplul nostru.

În loc să scrie fiecare Stop Pentru a adăuga, putem pune toate culorile într-un set de date și folosim NIFTY D3 date pas pentru a face procesul mai rapid. Cu D3 este posibilă accesarea oricărei proprietăți a setului de date în pașii ulteriori de înlănțuire, utilizând o funcție anonimă, permițându-ne astfel să stabilim culoarea și compensarea în doar două linii.

 svg.append ("defs")
.append ("liniargradient")
.Attr ("ID", "legendgradientMulti")
.Attr ("x1", "0%"). Attr ("Y1", "0%")
.Attr ("x2", "100%"). Attr ("Y2", "0%")
.Selectați ("opriți")
.date([
{Offset: "0%", Culoare: "# 2C7BB6"},
{Offset: "12,5%", Culoare: "# 00A6CA"},
{Offset: "25%", Culoare: "# 00ccbc"},
{Offset: "37,5%", Culoare: "# 90eb9d"},
{Offset: "50%", Culoare: "# FFFF8C"},
{Offset: "62,5%", Culoare: "# F9D057"},
{Offset: "75%", Culoare: "# F29E2E"},
{Offset: "87,5%", Culoare: "# E76818"},
{Offset: "100%", Culoare: "# D7191C"}])
.Enter (). APPACT ("STOP")
.Attr ("offset", funcția (d) {retur d.offset;})
.Attr ("Stop-Color", funcția (d) {retur d.color;}); 

Ca și înainte, pasul final este de a crea o rect. și completați acest lucru utilizând ID-ul unic de gradient.

 svg.append ("rect")
.Attr ("x", 0) .Attr ("y", 0)
.Attr ("lățime", 500) .Attr ("înălțime", 20)
.Style ("umple", "URL (#legendgradientMulti)"); 

Diagramele pe care le fac aceste legende sunt recreate după lucrarea fabuloasă a www.weather-radials.com. Afișarea temperaturii din New York sau Beijing în 2015. Temperatura medie în fiecare zi este indicată de o linie colorată, iar aceste linii sunt aranjate pentru a forma un grafic circular. Legenda de mai jos explică ce înseamnă fiecare culoare. Un grafic utilizează un gradient de la o culoare la altul, iar celălalt progresează prin toate cele nouă culori.

Gradienți bazați pe date

Într-o manieră similară cu exemplul anterior, putem crea și mai multe gradiente. Am putea face un gradient unic pentru fiecare punct de date, pe baza unui anumit aspect al datelor. Am folosit această abordare într-un Exoplanetul vizualizării , în cazul în care fiecare planetă a primit un gradient bazat pe clasa stelară a starului. Am folosit un efect subtil de sferă pentru a da impresia că fiecare a fost aprins de steaua din centru.

Deci, să ne întoarcem la anii '90 și să transformăm o colecție de cercuri plate reprezentând planetele din propriul nostru sistem solar în sfere 3D cu gradienți radiali (Fig. 4). Am creat un mic set de date care conține numele și diametrul planetei. Fiecare va fi generalizată de o singură culoare, pe care o vom folosi pentru a crea un gradient unic pentru fiecare planetă.

 VAR GRADIENTRADIAL = svg.append ("defs")
.SELECTAL ("RadialGradient")
.data (planete)
.Enter (). APPACT ("radialgradient")
.Attr ("ID", funcția (d) {return "gradient-" + d.planet;})
.Attr ("cx", "15%")
.Attr ("CY", "50%")
.Attr ("R", "85%"); 

Codul este ușor diferit aici: În loc să adresați mai întâi un element de gradient, acum adăugăm imediat Planeta setul de date și numai după introduce Creăm un element de gradient (în acest caz radialgrafient ). În acest fel, este creat un gradient pentru fiecare punct din setul de date. Păstrați ID-ul fiecărui punct unic, bazându-l pe date. Indicele I. de obicei funcționează, dar numele planetei este mai sigur. Acest lucru asigură că putem accesa mai târziu gradientul corect.

Un gradient radial este ușor diferit de unul liniar. O creăm într-un mod similar cu un cerc SVG: furnizați centrul gradientului în ceea ce privește obiectul la care se va aplica, folosind cx. și Cy. . Aceste valori implicit la 50% , care este centrul obiectului.

Pentru a simula aspectul unei stele strălucește pe planete dintr-o parte, vom deplasa centrul gradientului spre stânga prin stabilirea cx. la 15% . Raza gradientului (în cazul în care o oprire gradient 100% ar trebui să se încheie) este indicată de R. . De asemenea, este implicit la 50% , dar din cauza noastră cx. offset, acest lucru este acum 85% Deci, umple întregul cerc.

Putem folosi datele planetei pentru a adăuga oprirea culorii. Pentru a crea aspectul unei sfere care este strălucită, culoarea la 0% ar trebui să fie mai ușoară. Prin utilizarea d3rgb (). mai luminos (k) Nu trebuie să specificez o culoare separată, deoarece D3 va face acest calcul pentru mine. Valoarea K. Definește cât mai ușoară vreau ca culoarea să devină. La 50% Am setat culoarea adevărată în setul de date. La margine vreau o culoare care este puțin mai întunecată, dând aspectul umbrei. Logic, există și a d3rgb (). mai întunecat (k) pe care le putem folosi.

 Gradientradial.Append ("Stop")
.Attr ("offset", "0%")
.Attr ("Stop-color", funcția (D) {
Return D3RGB (D.Color) .brării (1); });
gradientradial.append ("Stop")
.Attr ("offset", "50%")
.Attr ("Stop-color", funcția (d) {retur d.color;});
gradientradial.append ("Stop")
.Attr ("offset", "100%")
.Attr ("Stop-color", funcția (D) {
returnare d3rgb (d.color) .darker (2.5); }); 

Dacă ați fi inspectat HTML după ce ați executat acest lucru, ar exista opt gradienți radiali diferiți. Ultimul, trebuie să creăm opt cercuri, să le dau o rază așa cum este definită de date și să le umpleți cu gradientul corect.

 SVG.SELECTAL ("Planeta")
.data (planete)
.Enter (). Adăugați ("cerc")
/ * Setați atributele de clasă, locație și rază ... * /
.Style ("umplere", funcția (d) {
return "URL (# gradient-" + d.planet + ")"; }); 

De asemenea, am adăugat soarele, care are propriul gradient radial, dar am plecat cx. , Cy. și R. Cu setarea implicită a 50% Pentru ao arăta ca soarele strălucea din centru spre exterior.

O declarație de declinare: Deși diametrele tuturor sferelor sunt corecte reciproc, distanțele sunt, desigur, complet false. Și îmi pare rău că Saturn nu are inele

Jucând cu orientările

Am explorat acum cum să stabilim aspecte de culoare bazate pe date, dar există mult mai multe posibilități. Putem stabili practic tot ceea ce se bazează pe date - chiar și orientările fiecărui gradient.

Pentru a încerca acest lucru, să facem o diagramă D3 coardă care să arate colaborările dintre răzbunătorii din universul cinematic Marvel (Fig. 5). Cordoanele care rulează între cei șase răzbunători sunt dimensionați în funcție de numărul de filme în care apar ambele. Vom umple aceste acorduri cu un gradient liniar simplu, schimbând de la o culoare a lui Avenger la altul.

O coardă nu este, de obicei, exact orizontală sau verticală. Deci, va trebui să stabilim X1, X2. , Y1. și Y2. valori bazate pe locațiile arcului exterior al fiecărui Avenger. Aceste date nu sunt în setul de date originale, dar după ce am furnizat-o lui D3 d3.layout.chord. Funcția, vom relua un nou set de date care conține unghiurile de pornire și de sfârșit ale fiecărui arc (ca d.source.startangle. și d.target.endangle. ). Acesta este setul de date pe care îl furnizăm în timp ce creați gradienții.

Trebuie să cunoaștem pozițiile pixelilor ale liniei invizibile care se desfășoară de la un capăt al unei coarde la celălalt. Acestea sunt apoi folosite pentru a da X1, .., Y2 atributele fiecărui gradient. Putem aplica o anumită trigonometrie utilizând raza diagramei coardei și locația la jumătatea distanței fiecărui arc al lui Avenger pentru a reveni la aceste poziții. Formula completă trigonometrică a fost eliminată din următorul cod, dar o veți găsi FITHUB REPO care însoțește acest articol .

Pentru a face un ID unic pentru fiecare coardă, creăm o combinație de șir de valoare a indicelui Avenger la fiecare capăt al unei coarde. D3's d3.layout.chord. întotdeauna stabilește unul (de răzbunători) la sursă și cealaltă la ţintă , ceea ce face o pereche unică. Mai târziu, când tragem coardele, putem folosi aceeași tehnică pentru a apela gradientul corect.

 VAR GRADS = SVG.APPEND ("defs"). Selectați ("Lineragial")
.Data (chord.chords ())
.Enter (). APPACT ("Lineragial")
.Attr ("ID", funcția (d) {return "gradientchord-" + d.source.
index + "-" + d.target.index; })
.Attr ("GradientMunits", "UtilizatorPaceOUSE")
// localizarea pixelilor unui capăt al unei coarde
.Attr ("x1", funcția (d, i) {întoarcere / * ... trigonometrie bazată pe
D. Valori: })
.Attr ("y1", funcția (d, i) {retur / * ... * /})
// locația pixelului celuilalt capăt al unei coarde
.Attr ("x2", funcția (d, i) {retur / * ... * /})
.Attr ("Y2", funcția (D, I) {retur / * ... * /}); 

Deoarece fiecare Avenger este definit de numărul său de index, putem face o funcție de culoare, Culori , care returnează culoarea fiecărui Avenger pe valoarea indexului. Acest lucru face ușor să se refere la culoarea potrivită în timp ce adaugă cele două opriri de culoare.

 Grads.append ("Stop")
.Attr ("offset", "0%")
.Attr ("Stop-Color", funcția (D) {culorile retur (D.Source.Index);
});
grads.append ("Stop")
.Attr ("offset", "100%")
.Attr ("Stop-Color", funcția (D) {culorile de retur (d.target.index);
}); 

Tot ceea ce rămâne este să apelați ID-ul de gradient din dreapta în timp ce setați stilul de umplere al acordurilor (cu aceeași funcție pe care am folosit-o pentru a seta ID-ul de gradient).

Rotunjind

În timpul acestui tutorial, am analizat patru moduri diferite de a utiliza gradienți SVG în vizualizările de date, dar există întotdeauna mai multe lucruri pe care le puteți face. Cu animații de gradient, ați putea simula un flux de la o parte a vizualizării datelor la altul, de exemplu.

După data viitoare, proiectați o vizualizare a datelor, lăsați-vă creativitatea să fie liberă. Cu D3.Js, nu trebuie să fiți constrânși de ceea ce credeți că sunt limitele instrumentului. Cu o gândire și efort mic în afara casei, puteți face cele mai uimitoare lucruri.

Nu ratați sesiunea lui Nadieh, SVG dincolo de simple forme, la Generate Londra, 21-23 septembrie. Rezerva acum Fotografiile!

Acest articol a apărut inițial în revista netă Ediția 280; Cumpărați-l aici Fotografiile!