BOOST D3.JS Diagrammer med SVG-gradienter

Nadieh bremer vil være på Generere London. I september, hvor hun vil demonstrere, hvordan man tager SVG ud over blotte figurer , ved hjælp af JavaScript, CSS og D3.Js at gøre datavisualiseringer endnu mere sjove og spændende. Book din billet nu !

D3.js har overtaget verden af ​​interaktiv datavisualisering. Et enormt antal eksempler kan findes, hver udviser sin egen sjove og nyttige twist på biblioteket. Du ser, D3 er ikke et diagrambibliotek, men noget meget bedre. Det giver dig kun de grundlæggende værktøjer til at oprette datavisualiseringer, og gør det muligt for dig at skabe stort set alt, hvad du kan tænke på. Selvom nogle ideer måske tager mere tid end andre, kommer du til sidst. Og denne frihed er præcis, hvad jeg elsker om D3.

Ved sin kerne er hver D3-visuel bygget ud af SVG-elementer. For eksempel for hvert datapunkt i et scatterplot-diagram for at oprette et stregdiagram som en akse, parallelle koordinater eller hældningsgrafer, som etiketter og den yderst nyttige til næsten alt andet. Desuden er SVG'er opløselige-uafhængige, hvilket ser godt ud på et hvilket som helst display eller zoomniveau.

Selvom du bare bruger SVG'er til deres former, kan du oprette fantastiske visualiseringer. Men de kan gøre meget mere - tænk på SVG filtre for eksempel. I denne vejledning tager vi et dybt dykke ind i et bestemt aspekt og ser på et par forskellige måder, det kan anvendes til at lyse op en visualisering. Lad mig introducere dig til SVG gradienter!

Find alle de filer, du har brug for til denne vejledning her .

Lineære gradienter

Nogle gange, når jeg opretter et linjediagram med en enkelt linje, føles det bare lidt for tom og kan gå tabt på den hvide baggrund. For at gøre det skiller sig mere, placerer jeg en let gradient under den ved hjælp af D3's d3.svg.area. funktion, fyldt med en SVG-gradient (se fig. 1).

Jeg vil have, at gradienten løber lodret fra toppen (hvor den er den samme farve som linjen, men en lysere skygge) til bunden (hvor den skulle blive hvid eller gennemsigtig). Dette er det, der er kendt som en lineær gradient; noget der ændrer farve langs en lige linje.

Vi starter med en SVG. Dette er lærredet, som vores linjediagram vil blive trukket. Vi opretter derefter en Defs. element på hvilket vi kan tilføje en lineargradient. element. Det er meget vigtigt at give gradienten et unikt id - vi vil bruge dette senere, når vi skal give området under linjen, det er påfyldning.

 VAR AREGRADIENT = SVG.Append ("Defs")
.Append ("lineargradient")
.attr ("id", "areamradient")
.attr ("x1", "0%"). Attre ("Y1", "0%")
.attr ("x2", "0%"). Attre ("Y2", "100%"); 

De sidste to linjer i koden ovenfor definerer, hvordan gradienten skal løbe. Tænk på det som en usynlig linje: X1. og Y1. er startpositionerne for den usynlige linje og x2. og Y2. Angiv dets endepunkt, for at give retningen af ​​gradienten. Det er ofte nemmest at definere disse som procentsatser, selvom det er muligt at bruge nøjagtige pixelsteder. Som standard henviser placeringen til elementets afgrænsningsboks, på hvilken gradienten påføres. Vi ønsker, at gradienten løber lodret, så X1. og x2. bør være det samme ( 0% er fint), Y1. skal være 0% og Y2 100% .

Nu kan vi definere farverne på gradienten. Der er behov for mindst to farver til en gradient, men du kan bruge så mange som du vil. For hver farve i den gradient tilføjer du en hold op element. Inden for dette angiver du skyggen med Stop-Color. , og placeringen (langs den usynlige linje), hvor du vil have denne farve til at være ren (den nøjagtige farve) med offset. .

Eventuelt kan vi også sætte opaciteten af ​​hver farve med stop-opacity. . Her gør jeg skyggen lidt lettere på toppen og helt gennemsigtig i bunden.

AreaGradient.Append ("Stop")
.attr ("offset", "0%")
.attr ("stop-farve", "# 21825C")
.attr ("stop-opacity", 0,6);
AreaGradient.Append ("Stop")
.attr ("offset", "80%")
.attr ("stop-farve", "hvid")
.attr ("stop-opacity", 0); 

Nu er den lineære gradient oprettet, vi kan oprette et områdekort og fylde det med gradienten. For at gøre dette, brug URL (# gradient-id) I fyldestilen sammen med det unikke ID satte vi tidligere.

 SVG.Append ("PATH")
.Style ("Fill", "URL (#areagradient)")
.attr ("D", områdefunktion (datasæt)); 

Derefter trækkes linjen oven på dette område af diagrammet, så seeren kan læse resultater fra din graf. I mit diagram har jeg også placeret cirkler for at understrege placeringen af ​​specifikke datapunkter.

En glat legende

Legends er meget almindelige i datavisualiseringer. Når du bruger farver til at repræsentere et bestemt aspekt af dine data, skal du forklare, hvad hver farve betyder. Det er her, hvor en legende kommer ind.

I nogle diagrammer vil du bruge farve til at diskriminere mellem diskrete tilfælde (for eksempel forskellige lande), i hvilket tilfælde farverne ofte er alle meget forskellige. Du kan dog også bruge farve til at angive en kvantitativ værdi.

Her repræsenterer vi temperaturen udenfor (se fig. 2). Farven ændres gradvist for at angive temperaturen, der går fra lav til høj. For at vise dette i en legende, vil vi skabe et langt rektangel og fylde det med en gradient, der går fra venstre mod højre. Vi kan genbruge den gradient vi skabte til vores linjediagram, men vendt med 90 grader (så x2. kører nu til 100% , hellere end Y2. ). Selvom en regnbuepalette ikke anbefales i datavisualisering, bruges folk til at se farverige temperaturkort, og jeg har valgt ni farver, der skal bruges i vores eksempel.

I stedet for at skrive ud hver hold op For at tilføje, kan vi sætte alle farverne i et datasæt og bruge D3's Nifty data trin for at gøre processen hurtigere. Med D3 er det muligt at få adgang til en hvilken som helst egenskab af datasættet i de efterfølgende kædestrin ved hjælp af en anonym funktion, hvorved vi kan indstille farven og offset på kun to linjer.

 SVG.Append ("Defs")
.Append ("lineargradient")
.attr ("id", "legendgadientmulti")
.attr ("x1", "0%"). Attre ("Y1", "0%")
.attr ("x2", "100%"). Attre ("Y2", "0%")
.selektall ("stop")
.data([
{Offset: "0%", farve: "# 2C7BB6"},
{Offset: "12,5%", farve: "# 00A6CA"},
{Offset: "25%", farve: "# 00ccbc"},
{Offset: "37,5%", farve: "# 90EB9D"},
{Offset: "50%", farve: "# ffff8c"},
{Offset: "62.5%", farve: "# F9D057"},
{Offset: "75%", farve: "# f29e2e"},
{Offset: "87,5%", farve: "# E76818"},
{Offset: "100%", farve: "# D7191C"}])
.Enter (). Tilføj ("stop")
.attr ("offset", funktion (d) {return d.offset;})
.attr ("stop-farve", funktion (d) {return d. color;}); 

Ligesom før er det sidste trin at skabe en Retrint og udfyld dette ved hjælp af det unikke gradient-id.

 SVG.Append ("RECT")
.attr ("x", 0) .attr ("y", 0)
.attr ("bredde", 500) .attr ("højde", 20)
.Style ("FILL", "URL (#legendGradientMulti)"); 

Diagrammerne, som disse legender går med, genskabes efter det fantastiske arbejde af www.weather-radials.com. Viser temperaturen i New York eller Beijing i 2015. Den gennemsnitlige temperatur hver dag er angivet med en farvet linje, og disse linjer er indrettet til at danne en cirkulær graf. Legenden nedenfor forklarer, hvad hver farve betyder. En graf bruger en gradient fra en farve til en anden, og den anden skrider frem gennem alle ni farver.

Data-baserede gradienter

På en måde svarende til det foregående eksempel kan vi også skabe flere gradienter. Vi kunne lave en unik gradient for hvert datapunkt baseret på et bestemt aspekt af dataene. Jeg brugte denne tilgang i en exoplanet visualisering , hvor hver planet fik en gradient baseret på stjerneklassen af ​​stjernen IT-kredsløb. Jeg brugte en subtil sfæreeffekt til at give indtryk hver blev tændt af stjernen i centrum.

Så lad os gå tilbage til 90'erne og dreje en samling af flade cirkler, der repræsenterer planeterne i vores eget solsystem til 3D-udseende kugler med radiale gradienter (fig. 4). Jeg har oprettet et lille datasæt med planetens navn og diameter. Hver vil blive generaliseret af en farve, som vi bruger til at skabe en unik gradient for hver planet.

 Var Gradientradial = SVG.Append ("Defs")
.selektall ("radialgradient")
.Data (planeter)
.Enter (). Tilføj ("radialgradient")
.attr ("id", funktion (d) {return "gradient-" + d.planet;})
.attr ("cx", "15%")
.attr ("cy", "50%")
.attr ("r", "85%"); 

Koden er lidt anderledes her: I stedet for første tilføjelse af et gradientelement, tilføjer vi nu straks planeter. datasæt og kun efter gå ind skaber vi et gradientelement (i dette tilfælde Radialgradient. ). På denne måde skabes en gradient for hvert punkt i datasættet. Hold hvert punkts ID unikt ved at basere det på dataene. Indekset. jeg Virker normalt, men her er planetnavnet sikrere. Dette sikrer, at vi får adgang til den korrekte gradient senere.

En radial gradient er lidt anderledes end en lineær. Vi skaber det på samme måde som en SVG-cirkel: Forfør midten af ​​gradienten med hensyn til objektets grænser, som den vil blive anvendt på, ved hjælp af CX. og CY. . Disse værdier som standard til 50% , som er centrum for objektet.

For at simulere udseendet af en stjerne skinner på planeterne fra den ene side, flytter vi midten af ​​gradienten til venstre ved at indstille CX. til 15% . Gradientens radius (hvor en gradient stop af 100% skulle ende) er angivet med R. . Det er også standard til 50% , men på grund af vores CX. Offset, det er nu 85% så det fylder hele cirklen.

Vi kan bruge planetdataene til at tilføje farvestopene. At skabe udseendet af en kugle, der bliver skinnet på, farven på 0% bør være lettere. Ved hjælp af d3.rgb (). lysere (k) Jeg behøver ikke at angive en separat farve, da D3 vil gøre den beregning for mig. Værdien K. Definerer, hvor meget lysere jeg vil have farven til at blive. Ved omkring 50% Jeg sætter den sande farve i datasættet. Ved kanten vil jeg have en farve, der er lidt mørkere, hvilket giver skygge udseende. Logisk er der også en D3.RGB (). Mørkere (K) som vi kan bruge.

 Gradientradial.append ("Stop")
.attr ("offset", "0%")
.attr ("stop-farve", funktion (d) {
returnere D3.RGB (D.Color) .Brys (1); });
gradientradial.append ("stop")
.attr ("offset", "50%")
.attr ("stop-farve", funktion (d) {return d. color;});
gradientradial.append ("stop")
.attr ("offset", "100%")
.attr ("stop-farve", funktion (d) {
returnere D3.RGB (D.Color) .darker (2.5); }); 

Hvis du skulle inspicere HTML efter at have kørt dette, ville der være otte forskellige radiale gradienter til stede. Sidst, vi har brug for at skabe otte cirkler, give dem en radius som defineret af dataene, og fyld dem med den korrekte gradient.

 SVG.SelectAll (". Planets")
.Data (planeter)
.Enter (). Tilføj ("cirkel")
/ * Indstil klassen, placering og radiusattributter ... * /
.style ("fyld", funktion (d) {
Return "URL (# gradient-" + d.planet + ")"; }); 

Jeg har også tilføjet solen, som har sin egen radiale gradient, men jeg har forladt CX. Vi CY. og R. med standardindstillingen for 50% For at få det til at se ud som solen glødende fra midten udad.

En ansvarsfraskrivelse: Selvom diametrene af alle kuglerne er korrekte i forhold til hinanden, er afstanden selvfølgelig fuldstændigt falske. Og jeg er ked af, at Saturn ikke har ringe

Leger med retningen

Vi har nu udforsket, hvordan man sætter farveaspekter baseret på data, men der er mange flere muligheder. Vi kan sætte praktisk taget alt baseret på data - selv orienteringen af ​​hver gradient.

For at prøve dette ud, lad os lave et D3-akkorddiagram, der viser samarbejder mellem Avengers i Marvel-filmuniverset (fig. 5). De akkorder, der løber mellem de seks Avengers, er dimensioneret i henhold til antallet af film, hvor de begge vises. Vi skal fylde disse akkorder med en simpel lineær gradient, der skifter fra en Avengers farve til en anden.

Et akkord er normalt ikke ligefrem vandret eller lodret. Så vi bliver nødt til at indstille X1, x2. Vi Y1. og Y2. værdier baseret på placeringen af ​​hver Avenger's ydre bue. Disse data er ikke i vores originale datasæt, men efter at vi har leveret det til D3's d3.layout.chord. funktion, vi får tilbage et nyt datasæt, der indeholder start- og endevinklerne på hver bue (som D.Source.Startangle. og d.target.endangel. ). Dette er datasættet, vi leverer, mens vi opretter gradienterne.

Vi skal kende pixelpositionerne på den usynlige linje, der løber fra den ene ende af en akkord til den anden. Disse bruges derefter til at give x1, .., y2 attributter af hver gradient. Vi kan anvende nogle trigonometri ved hjælp af radius af akkorddiagrammet og placeringen halvvejs langs hver Avenger's ARC for at komme tilbage disse positioner. Den fulde trigonometriske formel er blevet fjernet fra følgende kode, men du vil finde den i Github repo, der følger med denne artikel .

For at lave et unikt id for hvert akkord skaber vi en strengkombination af AVENGER's indeksværdi i hver ende af en akkord. D3's. d3.layout.chord. sætter altid en (af afsengerne) til kilde og den anden til mål , som gør et unikt par. Senere, når vi tegner akkorderne, kan vi bruge den samme teknik til at kalde den korrekte gradient.

 VAR GRADS = SVG.Append ("Defs"). SelectAlle ("lineargradient")
.data (akkord.chord ())
.Enter (). Tilføj ("lineargradient")
.Attr ("ID", funktion (D) {Return "GradientChord-" + D.Source.
indeks + "-" + d.target.index; })
.attr ("GradientUnits", "USERSPACEONUSE")
// pixel placering af den ene ende af en akkord
.attr ("x1", funktion (d, i) {return / * ... trigonometry baseret på
D.Source Values ​​... * /; })
.attr ("Y1", funktion (D, I) {Return / * ... * /})
// pixel placering af den anden ende af en akkord
.attr ("x2", funktion (d, i) {return / * ... * /})
.attr ("Y2", funktion (D, I) {Return / * ... * /}); 

Da hver Avenger er defineret af sit eget indeksnummer, kan vi lave en farvefunktion, farver. , der returnerer hver Avengers farve pr. Indeksværdi. Dette gør det nemt at henvise til den rigtige farve, mens du tilføjer de to farve stop.

 Grader.append ("Stop")
.attr ("offset", "0%")
.attr ("Stop-Color", funktion (D) {Return Colors (D.Source.Index);
});
Grads.append ("Stop")
.attr ("offset", "100%")
.attr ("stop-farve", funktion (d) {returnfarver (d.target.index);
}); 

Alt, der er tilbage, er at kalde det rigtige gradient-id, mens du indstiller akkorderens fyldestil (med samme funktion som vi plejede at indstille gradient-id'et).

Afrunding

Under denne vejledning har vi set på fire forskellige måder at bruge SVG-gradienter i datavisualiseringer, men der er altid flere ting, du kan gøre. Med gradient animationer kan du simulere en strøm fra en del af datalisualiseringen til en anden, for eksempel.

Så næste gang du designer en datalisualisering, lad din kreativitet løbe fri. Med D3.Js behøver du ikke at være begrænset af, hvad du synes er rammerne af værktøjet. Med lidt out-of-the-box tænkning og indsats, kan du lave de mest fantastiske ting.

Gå ikke glip af Nadieh's session, SVG ud over blotte figurer, på generere London, 21-23 september. Book nu !

Denne artikel optrådte oprindeligt i Net Magazine. Udgave 280; Køb det her !