Boost D3.JS-diagrammer med SVG-gradienter

Nadieh Bremer vil være på Generere London I september, hvor hun skal demonstrere hvordan man skal ta Svg utover bare figurer , ved hjelp av JavaScript, CSS og D3.JS for å gjøre datafilsene enda morsommere og spennende. Bestill din billett nå !

D3.Js har tatt over verden av interaktiv datavisualisering. Et enormt antall eksempler kan bli funnet, hver som viser sin egen morsomme og nyttig vri på biblioteket. Du ser, D3 er ikke et kartleggingsbibliotek, men noe mye bedre. Det gir deg bare de grunnleggende verktøyene for å skape datavisualiseringer, og det gjør det mulig å skape praktisk talt alt du kan tenke på. Selv om noen ideer kan ta mer tid enn andre, kommer du til slutt. Og denne friheten er akkurat det jeg elsker om D3.

I sin kjerne er hver D3 visual bygget ut av SVG-elementer. For eksempel, for hver datapoint i et scatterplot-diagram, for å lage et bar diagram, som en akse, parallelle koordinater eller helling graf, som etiketter, og ekstremt nyttig for praktisk talt alt annet. Videre er SVGs resolution-uavhengige, og ser dermed bra ut på hvilken som helst skjerm eller zoomnivå.

Selv om du bare bruker SVGs for sine former, kan du lage fantastiske visualiseringer. Imidlertid kan de gjøre mye mer - tenk på SVG-filtre for eksempel. I denne opplæringen vil vi ta et dypt dykk i et bestemt aspekt og se på noen få forskjellige måter det kan brukes for å lyse opp en visualisering. La meg introdusere deg til SVG-gradienter!

Finn alle filene du trenger for denne opplæringen her .

Lineære gradienter

Noen ganger når jeg lager et linjediagram med en enkelt linje, føles det bare litt for tomt og kan gå seg vill på den hvite bakgrunnen. For å få det til å skille seg ut mer, legger jeg en lys gradient under den med D3s d3.svg.area. Funksjon, fylt med en SVG-gradient (se figur 1).

Jeg vil at gradienten skal løpe vertikalt fra toppen (hvor den er den samme fargen som linjen, men en lysere nyanse) til bunnen (hvor den skal bli hvit eller gjennomsiktig). Dette er det som er kjent som en lineær gradient; noe som endrer farge langs en rett linje.

Vi starter med en SVG. Dette er lerretet som vårt linjediagram skal bli trukket. Vi lager deretter en defs. element på som vi kan legge til en lineeargradient element. Det er veldig viktig å gi gradienten en unik ID - vi vil bruke dette senere når vi trenger å gi området under linjen sin fylling.

 VAR-områdeGradient = svg.append ("defs")
.append ("lineeargradient")
.attr ("ID", "AreaGradient")
.attr ("x1", "0%"). Attr ("Y1", "0%")
.attr ("x2", "0%"). Attr ("Y2", "100%"); 

De to siste linjene i koden ovenfor definerer hvordan gradienten skal løpe. Tenk på det som en usynlig linje: x1. og Y1. er startposisjonene til den usynlige linjen og x2. og Y2. Angi sluttpunktet, for å gi retning av gradienten. Det er ofte enklest å definere disse som prosentandeler, selv om det er mulig å bruke eksakte pikselsteder. Som standard refererer stedene til avgrensningsboksen til elementet på hvilken gradienten påføres. Vi vil at gradienten skal løpe vertikalt, så x1. og x2. bør være det samme ( 0% er greit), Y1. må være 0% og Y2 100% .

Nå kan vi definere fargene på gradienten. Minst to farger er nødvendig for en gradient, men du kan bruke så mange du vil. For hver farge i gradienten legger du til en Stoppe element. Innenfor dette angir du skyggen med stoppfarge , og plasseringen (langs den usynlige linjen) hvor du vil at denne fargen skal være ren (den eksakte fargen) med offset. .

Eventuelt kan vi også sette opaciteten til hver farge med stopp-opacity. . Her gjør jeg skyggen litt lettere på toppen og helt gjennomsiktig på bunnen.

områdeGradient.append ("stopp")
.attr ("offset", "0%")
.attr ("Stop-Color", "# 21825C")
.attr ("stopp-opasitet", 0,6);
områdeGradient.append ("stopp")
.attr ("offset", "80%")
.attr ("stoppfarge", "hvit")
.attr ("Stop-opacity", 0); 

Nå er den lineære gradienten satt opp, vi kan lage et område diagram og fylle det med gradienten. For å gjøre dette, bruk URL (# Gradient-ID) I fyllestilen, sammen med den unike IDen, satt vi tidligere.

 svg.append ("bane")
.style ("fyll", "url (#areagradient)")
.attr ("D", områdefunksjon (datasett); 

Etterpå, tegne linjen på toppen av dette området av diagrammet, slik at seeren kan lese resultater av grafen din. I min diagram har jeg også plassert sirkler for å understreke stedene til bestemte datapunkter.

En jevn legende

Legends er svært vanlige i dataliseringer. Når du bruker farger for å representere et bestemt aspekt av dataene dine, må du forklare hva hver farge betyr. Det er her en legende kommer inn.

I enkelte diagrammer vil du bruke farge for å diskriminere mellom diskrete saker (for eksempel forskjellige land), i så fall er fargene ofte alle veldig forskjellige. Du kan imidlertid også bruke farge for å indikere en kvantitativ verdi.

Her representerer vi temperaturen utenfor (se fig. 2). Fargen endres gradvis for å indikere temperaturen som går fra lav til høy. For å vise dette i en legende, skal vi lage et langt rektangel og fylle det med en gradient som går fra venstre til høyre. Vi kan gjenbruke gradienten vi opprettet for vårt linjediagram, men vendt med 90 grader (så x2. nå løper til 100% , heller enn Y2. ). Selv om det generelt er en regnbuepalett ikke anbefales i datavisualisering, brukes folk til å se fargerike temperaturkart, og jeg har valgt ni farger for å bruke i vårt eksempel.

I stedet for å skrive ut hver Stoppe For å legge til, kan vi sette alle fargene i et datasett og bruke D3s nifty data Trinn for å gjøre prosessen raskere. Med D3 er det mulig å få tilgang til enhver egenskap i datasettet i de påfølgende kjedetrinnene ved hjelp av en anonym funksjon, og derved gjøre det mulig for oss å sette farge og forskyvning i bare to linjer.

 svg.append ("defs")
.append ("lineeargradient")
.attr ("ID", "LegendgradientMulti")
.attr ("x1", "0%"). Attr ("Y1", "0%")
.attr ("X2", "100%"). Attr ("Y2", "0%")
.Selectall ("stopp")
.data([
{Offset: "0%", Farge: "# 2C7BB6"},
{Offset: "12.5%", Farge: "# 00A6CA"},
{Offset: "25%", farge: "# 00cccbc"},
{Offset: "37.5%", farge: "# 90EB9D"},
{Offset: "50%", farge: "# ffff8c"},
{Offset: "62.5%", Farge: "# F9D057"},
{Offset: "75%", farge: "# f29e2e"},
{Offset: "87.5%", Farge: "# E76818"},
{Offset: "100%", farge: "# D7191C"}])
.enter (). Legg til ("stopp")
.attr ("offset", funksjon (d) {returner d.offset;})
.attr ("stoppfarge", funksjon (D) {returner d.color;}); 

Som før er det endelige trinnet å skape en Rett og fyll dette ved hjelp av den unike gradient-IDen.

 svg.append ("rekt")
.attr ("x", 0) .attr ("y", 0)
.attr ("bredde", 500) .attr ("høyde", 20)
.style ("fyll", "url (#legendgradientmulti)"); 

Diagrammene disse legender går med, gjenopprettes etter det fantastiske arbeidet med www.weather-radials.com. Viser temperaturen i New York eller Beijing i 2015. Gjennomsnittstemperaturen hver dag er indikert med en farget linje, og disse linjene er innrettet til å danne en sirkulær graf. Legenden nedenfor forklarer hva hver farge betyr. En graf bruker en gradient fra en farge til en annen, og den andre utvikler seg gjennom alle ni farger.

Databaserte gradienter

På en måte som ligner på forrige eksempel, kan vi også lage flere gradienter. Vi kunne lage en unik gradient for hvert datapunkt, basert på et bestemt aspekt av dataene. Jeg brukte denne tilnærmingen i en exoplanet visualisering , hvor hver planet ble gitt en gradient basert på stjerneklassen av stjernen IT-banene. Jeg brukte en subtil kærende effekt for å gi inntrykk hver ble tent av stjernen i sentrum.

Så la oss gå tilbake til 90-tallet og slå en samling av flate sirkler som representerer planetene i vårt eget solsystem i 3D-utseende sfærer med radiale gradienter (fig. 4). Jeg har laget et lite datasett som inneholder planetens navn og diameter. Hver vil bli generalisert av en farge, som vi skal bruke til å skape en unik gradient for hver planet.

 var gradientradial = svg.append ("defs")
.Selectall ("Radialgradient")
.data (planeter)
.enter (). Legg til ("radialgradient")
.attr ("ID", funksjon (D) {return "gradient-" + d.planet;})
.attr ("CX", "15%")
.attr ("CY", "50%")
.attr ("R", "85%"); 

Koden er litt annerledes her: I stedet for å først legge til et gradientelement, legger vi nå umiddelbart planeter datasett og bare etter Tast inn Oppretter vi et gradientelement (i dette tilfellet radialgradient ). På denne måten opprettes en gradient for hvert punkt i datasettet. Hold hvert punkts ID unikt ved å basere det på dataene. Indeksen Jeg Vanligvis fungerer, men her er planetnavnet tryggere. Dette sikrer at vi kan få tilgang til den riktige gradienten senere.

En radial gradient er litt annerledes enn en lineær. Vi lager det på en lignende måte til en SVG-sirkel: leverer midten av gradienten med hensyn til objektets grenser som det vil bli brukt på, bruke CX. og Cy. . Disse verdiene er standard til 50% , som er midtpunktet for objektet.

For å simulere utseendet til en stjerne som skinner på planeter fra den ene siden, flytter vi midten av gradienten til venstre ved innstilling CX. til 15% . Radius av gradienten (hvor en gradient stopper av 100% bør ende) er angitt av R. . Det er også standard til 50% , men på grunn av vår CX. offset, dette er nå 85% Så fyller det hele sirkelen.

Vi kan bruke planetedataene til å legge til fargestoppene. Å skape utseendet på en sfære som blir skinnet på, fargen på 0% bør være lettere. Ved bruk av d3.rgb (). lysere (k) Jeg trenger ikke å spesifisere en egen farge, da D3 vil gjøre den beregningen for meg. Verdien K. Definerer hvor mye lettere jeg vil at fargen skal bli. Rundt 50% Jeg satte den sanne fargen i datasettet. På kanten vil jeg ha en farge som er litt mørkere, noe som gir utseendet på skyggen. Logisk er det også en d3.rgb (). Mørkere (K) som vi kan bruke.

 Gradientradial.append ("stopp")
.attr ("offset", "0%")
.attr ("stoppfarge", funksjon (d) {
returnere d3.rgb (d.color) .Bretser (1); });
Gradientradial.append ("stopp")
.attr ("offset", "50%")
.attr ("stoppfarge", funksjon (d) {returner d.color;});
Gradientradial.append ("stopp")
.attr ("offset", "100%")
.attr ("stoppfarge", funksjon (d) {
returnere d3.rgb (d.color) .darker (2.5); }); 

Hvis du skulle inspisere HTML etter å ha kjørt dette, ville det være åtte forskjellige radiale gradienter til stede. Sist, vi trenger å lage åtte sirkler, gi dem en radius som definert av dataene, og fyll dem med riktig gradient.

 svg.SelectAll (". Planeter")
.data (planeter)
.enter (). Legg til ("sirkel")
/ * Sett klassen, plassering og radiusattributter ... * /
.style ("fyll", funksjon (d) {
returnere "url (# gradient-" + d.planet + ")"; }); 

Jeg har også lagt til solen, som har sin egen radiale gradient, men jeg har forlatt CX. , Cy. og R. Med standardinnstillingen til 50% For å få det til å se ut som solen gløder fra midten utover.

En ansvarsfraskrivelse: Selv om diametre av alle sfærene er korrekte i forhold til hverandre, er avstandene selvsagt helt falske. Og jeg beklager at Saturn har ingen ringer

Spiller med orienteringene

Vi har nå utforsket hvordan du setter fargeaspekter basert på data, men det er mange muligheter. Vi kan sette praktisk talt alt basert på data - selv orienteringene til hver gradient.

For å prøve dette ut, la oss lage et D3-akkorddiagram som viser samarbeidet mellom Avengers i Marvel-kinematiske universet (fig. 5). Akkordene som går mellom de seks avengers er dimensjonert i henhold til antall filmer der de begge ser ut. Vi skal fylle disse akkordene med en enkel lineær gradient, endring fra en avenger farger til en annen.

En akkord er vanligvis ikke akkurat horisontal eller vertikal. Så vi må sette X1, x2. , Y1. og Y2. verdier basert på stedene til hver avengers ytre bue. Disse dataene er ikke i vårt opprinnelige datasett, men etter at vi har levert den til D3s d3.layout.chord. Funksjon, vi vil få tilbake et nytt datasett som inneholder start- og sluttvinkler i hver bue (som D.Source.Startangle. og d.target.endakle. ). Dette er datasettet vi leverer mens du lager gradienter.

Vi må vite pikselposisjonene til den usynlige linjen som går fra den ene enden av en akkord til den andre. Disse brukes da til å gi x1, .., y2 attributter av hver gradient. Vi kan bruke litt trigonometri ved hjelp av radiusen til akkorddiagrammet og stedet halvveis langs hver avenger's bue for å komme tilbake disse stillingene. Den fulle trigonometriske formelen er fjernet fra den følgende koden, men du vil finne den i Github repo som følger med denne artikkelen .

For å gjøre en unik ID for hvert akkord, lager vi en strengkombinasjon av Avengers indeksverdi i hver ende av en akkord. D3's. d3.layout.chord. setter alltid en (av avengers) til kilde og den andre til mål , som gjør et unikt par. Senere, når du tegner akkorder, kan vi bruke den samme teknikken til å ringe til riktig gradient.

 Var Grads = SVG.append ("defs"). Velgall ("Lineeargradient")
.data (akkord.chords ())
.enter (). Legg til ("lineeargradient")
.attr ("ID", funksjon (D) {Return "Gradientchord-" + D.Source.
indeks + "-" + d.target.index; })
.attr ("gradientunits", "userspaceonuse")
// pikselplassen til den ene enden av en akkord
.attr ("x1", funksjon (D, I) {return / * ... trigonometri basert på
D.Source-verdier ... * /; })
.attr ("Y1", funksjon (D, I) {Return / * ... * /})
// pikselplassen til den andre enden av en akkord
.attr ("x2", funksjon (D, I) {Return / * ... * /})
.attr ("Y2", funksjon (D, I) {returnere / * ... * /}); 

Siden hver avenger er definert av sitt eget indeksnummer, kan vi lage en fargefunksjon, farger , som returnerer hver avenger farge per indeksverdi. Dette gjør det enkelt å referere til riktig farge mens du legger til de to fargestoppene.

 Grads.append ("stopp")
.attr ("offset", "0%")
.attr ("Stop-Color", funksjon (D) {returner farger (D.Source.Index);
});
grads.append ("stopp")
.attr ("offset", "100%")
.attr ("stop-farge", funksjon (d) {returner farger (d.target.index);
}); 

Alt som gjenstår er å ringe til høyre gradient-ID mens du stiller inn fyllestilen til akkordene (med samme funksjon som vi pleide å angi gradient-IDen).

Runder opp

Under denne opplæringen har vi sett på fire forskjellige måter å bruke SVG-gradienter i datafilsiseringer, men det er alltid flere ting du kan gjøre. Med gradient animasjoner kan du simulere en strøm fra en del av datavualiseringen til en annen, for eksempel.

Så neste gang du designer en datavisualisering, la din kreativitet løpe fri. Med D3.Js trenger du ikke å være begrenset av det du tror er grensene for verktøyet. Med litt ut-av-boks tenkning og innsats, kan du gjøre de mest fantastiske tingene.

Ikke gå glipp av Nadiehs økt, SVG utover bare figurer, på Generere London, 21-23 september. Bestill nå !

Denne artikkelen opprinnelig dukket opp i Net Magazine. utgave 280; Kjøp det her !