Boost d3.js-kaavioita SVG-kaltevuuksilla

Nadieh Bremer on Luo Lontoo Syyskuussa, jossa hän osoittaa, miten SVG ylittää pelkkää muotoja , JavaScript, CSS ja d3.js tehdä tietojen visualisointeja vieläkin hauska ja jännittävä. Varaa lippu nyt !

D3.JS on ottanut vuorovaikutteisen tiedon visualisoinnin maailman. Valtava määrä esimerkkejä löytyy, jokainen esittelee omaa hauskaa ja käyttökelpoinen kierre kirjastossa. Näet, D3 ei ole kartoituskirjasto, vaan jotain paljon parempaa. Se antaa sinulle vain perustyökaluja tietojen visualisoinnin luomiseen ja mahdollistaa mahdollisuuden luoda käytännössä kaiken, mitä voit ajatella. Vaikka jotkut ideat saattavat kestää enemmän aikaa kuin toiset, pääset sinne lopulta. Ja tämä vapaus on juuri sitä, mitä rakastan D3: stä.

Sen ytimessä jokainen D3-visuaalinen on rakennettu SVG-elementeistä. Esimerkiksi jokaiselle DataPoint Scatterplot-kaaviossa, jotta voit luoda viivakaavion akselina, yhdensuuntaisina koordinaatteina tai rinteiden kaaviona tarroina ja erittäin hyödylliseksi lähes kaikesta muusta. Lisäksi SVGS on resoluutio riippumaton, joten näyttävät hyvältä millä tahansa näytöllä tai zoomaustasolla.

Vaikka käytät vain SVGS: tä muodoissaan, voit luoda upeita visualisointeja. He voivat kuitenkin tehdä paljon enemmän - ajattele esimerkiksi SVG-suodattimia. Tässä opetusohjelmassa otamme syvän sukeltamaan yhteen erityiseen näkökohtaan ja tarkastelemme muutamia eri tapaa, miten sitä voidaan käyttää visualisoinnin kirkastamiseksi. Haluan esitellä sinulle SVG-kaltevuudet!

Etsi kaikki tämän opetusohjelman tarvitsemat tiedostot tässä .

Lineaariset kaltevuudet

Joskus kun luon linjan kaavion yhdellä rivillä, se vain tuntuu hieman liian tyhjältä ja voi eksyä valkoisella pohjalla. Jotta se erottuu enemmän, laitan kevytgradientin sen alle D3: n d3.svg.area Toiminto, täytetty SVG-gradientilla (katso kuvio 1).

Haluan, että kaltevuus kulkee pystysuoraan ylhäältä (jossa se on sama väri kuin linja, mutta kevyempi sävy) pohjaan (jossa sen pitäisi tulla valkoiseksi tai läpinäkyväksi). Tämä on se, mitä kutsutaan lineaariseksi gradientiksi; jotain, joka muuttaa väriä suoralla linjalla.

Aloitamme SVG: n kanssa. Tämä on kangas, johon viivakaavio on piirretty. Luomme sitten defs elementti, johon voimme liittää a lineargradient elementti. On erittäin tärkeää antaa Gradientille ainutlaatuinen tunnus - käytämme tätä myöhemmin, kun meidän on annettava rivin täytön alue.

 var aregradient = svg.append ("defs")
.Append ("lineargradient")
.attr ("ID", "areagradient")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Edellä mainitun koodin viimeiset kaksi riviä määrittelevät, miten kaltevuuden pitäisi ajaa. Ajattele sitä näkymättömällä linjalla: x1 ja y1 ovat näkymättömän linjan ja X2 ja y2 Ilmoita loppupiste, jolloin saadaan dradientti. Se on usein helpoin määritellä nämä prosenttiosuutena, vaikka on mahdollista käyttää tarkkoja pikselipaikkoja. Oletusarvoisesti sijainnit viittaavat elementin raja-ruutuun, johon gradientti levitetään. Haluamme, että kaltevuus ajaa pystysuoraan, joten x1 ja x2 pitäisi olla sama ( 0% on hyvin), y1 on oltava 0% ja Y2 100% .

Nyt voimme määritellä kaltevuuden värit. Vähintään kaksi väriä tarvitaan gradientille, mutta voit käyttää niin monta kuin haluat. Jokaiselle kaltevuusväristä lisäät a lopettaa elementti. Tässä määrität varjosta pysäytys ja sijainti (näkymätön linja), jossa haluat tämän värin olevan puhdas (tarkka väri) offset .

Valinnaisesti voimme myös asettaa kunkin värin läpinäkyvyyden pysäytys . Täällä Teen sävy hieman kevyempi yläosassa ja täysin läpinäkyvä pohja.

aregradient.Append ("STOP")
.attr ("Offset", "0%")
.attr ("STOP-COLOR", "# 21825C")
.attr ("Stop-opasiteetti", 0,6);
aregradient.Append ("STOP")
.attr ("offset", "80%")
.attr ("Stop-Color", "valkoinen")
.attr ("Stop-opasiteetti", 0); 

Nyt lineaarinen kaltevuus perustetaan, voimme luoda alueen kaavion ja täyttää sen gradientilla. Voit tehdä tämän, käytä URL (# gradient-id) Täydellisessä tyylissä sekä aiemmin asetetut yksilölliset tunnukset.

 Svg.Append ("polku")
.Style ("Täytä", "URL (#areagradient)")
.attr ("D", alueenfunction (dataSet)); 

Jälkeenpäin piirrä viiva tämän kaavion tämän alueen päälle, jotta katseluohjelma voi lukea tuloksia pois kaaviosta. Kaaviossani olen myös sijoittanut piirejä korostamaan tiettyjen tietopisteiden sijainteja.

Sileä legenda

Legends ovat hyvin yleisiä tietojen visualisoinnissa. Kun käytät värejä, jotka edustavat tietyn osaa tietojasi, sinun on selitettävä, mitä jokainen väri tarkoittaa. Tämä on silloin, kun legenda tulee.

Joissakin kaavioissa käytät väriä erottamaan erilliset tapaukset (esimerkiksi eri maat), jolloin värit ovat usein hyvin erilaisia. Voit kuitenkin käyttää väriä osoittamaan kvantitatiivista arvoa.

Tässä edustamme lämpötilaa ulkona (katso kuvio 2). Väri muuttuu vähitellen ilmaisemaan lämpötila, joka menee alhaisesta korkeaan. Jos haluat näyttää tämän legenda, aiomme luoda pitkän suorakulmion ja täyttää sen gradientilla, joka menee vasemmalta oikealle. Voimme käyttää uudelleen gradientia, jonka olemme luoneet linjakaaviomme, mutta käänsi 90 astetta (niin x2 nyt toimii 100% , mielummin kuin y2 ). Vaikka yleensä sateenkaaren paletti ei ole suositeltavaa datan visualisointiin, ihmiset näkevät värikkäitä lämpötilakarttoja, ja olen valinnut yhdeksän väriä käytettäväksi esimerkissämme.

Sen sijaan, että kirjoitat kukin lopettaa Lisätään, voimme laittaa kaikki värit tietokannassa ja käyttää D3: n NIFTY tiedot Vaihe tehdä prosessi nopeammaksi. D3: llä on mahdollista käyttää tietokannan ominaisuutta myöhemmissä ketjuissa vaiheissa käyttäen anonyymi-toimintoa, mikä mahdollistaa värin ja siirtyä vain kahdella rivillä.

 Svg.Append ("DEFS")
.Append ("lineargradient")
.attr ("ID", "Legendgradientmulti")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.SelectAll ("STOP")
.Data ([
{Offset: "0%", väri: "# 2c7bb6"},
{Offset: "12,5%", väri: "# 00A6CA"},
{Offset: "25%", väri: "# 00ccbc"},
{Offset: "37,5%", väri: "# 90EB9D"},
{Offset: "50%", väri: "# FFFF8C"},
{Offset: "62,5%", väri: "# F9D057"},
{Offset: "75%", väri: "# F29E2E"},
{Offset: "87,5%", väri: "# E76818"},
{Offset: "100%", väri: "# D7191C"}])
. ANTER (). Liitä ("STOP")
.attr ("offset", toiminto (d) {paluu d.offset;})
.attr ("STOP-COLOR", toiminto (D) {Return D.Color;}); 

Kuten aikaisemmin, lopullinen vaihe on luoda a panna ja täytä tämä käyttämällä ainutlaatuista kaltevuustunnusta.

 Svg.Append ("rect")
.attr ("x", 0) .attr ("Y", 0)
.attr ("leveys", 500) .attr ("korkeus", 20)
.Style ("Täytä", "URL (#legendgradientmulti)"); 

Kaaviot Nämä legendat kulkevat, jotka on uusittu upean työn jälkeen www.weather-radials.com Näytetään lämpötila New Yorkissa tai Pekingissä vuonna 2015. Keskimääräinen lämpötila päivittäin on merkitty värillisellä rivillä, ja nämä viivat on järjestetty muodostamaan pyöreä kaavio. Alla oleva legenda selittää, mitä jokainen väri tarkoittaa. Yksi kaavio käyttää gradienttia yhdestä väristä toiseen, ja toinen etenee kaikki yhdeksän väriä.

Tietopohjaiset kaltevuudet

Vastaavasti edellisessä esimerkissä voimme myös luoda useita kaltevuuksia. Voisimme tehdä ainutlaatuisen kaltevuuden jokaiselle datapisteelle, joka perustuu tietyn osaan. Käytin tätä lähestymistapaa Exoplanetin visualisointi , jossa jokaiselle planeetalle annettiin gradientti, joka perustuu tähti-IT: n stellar-luokkaan. Käytin hienovaraisia ​​pallovaikutuksia, jotta voisin antaa vaikutelman, joka tuli keskeltä tähti.

Joten siirretään 90-luvulle ja kääntää kokoelma litteitä piirejä, jotka edustavat planeetat omassa aurinkokunnassamme 3D-näköinen palloja säteittäisten gradienttien kanssa (kuva 4). Olen luonut pienen tietokannan, joka sisältää planeetan nimen ja halkaisijan. Jokainen yleistetään yhdellä värillä, jota käytämme luomaan ainutlaatuinen gradientti jokaiselle planeetalle.

 var gradientradial = svg.ppend ("defs")
.SelectAll ("Radialgradient")
.Data (planeetat)
. aentti (). Liitä ("Radialgradient")
.attr ("ID", toiminto (D) {Return "gradient-" + d.planet;})
.attr ("CX", "15%")
.attr ("CY", "50%")
.attr ("R", "85%"); 

Koodi on hieman erilainen täällä: sen sijaan, että se liittää Gradient-elementin, liitämme nyt välittömästi planeetat Tietokanta ja vasta sen jälkeen tulla sisään Luotammeko kaltevuuselementin (tässä tapauksessa radialgradient ). Tällä tavoin luodaan gradientti jokaiselle asiakirja-aineistolle. Pidä jokaisen pisteen tunnus ainutlaatuinen perustamalla se tietoihin. Indeksi i Yleensä toimii, mutta tässä planeetan nimi on turvallisempi. Tämä takaa, että voimme käyttää oikeaa kaltevuutta myöhemmin.

Radial gradientti on hieman erilainen kuin lineaarinen. Luomme sen samalla tavalla kuin SVG Circle: syöttää gradientin keskipiste suhteessa siihen, että sitä sovelletaan käyttäen cx ja cy . Nämä arvot ovat oletusarvoisia 50% , joka on esineen keskus.

Simuloida tähtiä, joka loistaa planeetoilla toisella puolella, siirrämme kaltevuuden keskusta vasemmalle asettamalla cx jllek 15% . Kaltevuuden säde (jossa kaltevuus pysähtyy 100% pitäisi lopettaa) on merkitty r . Se on myös oletusarvo 50% , mutta takia meidän cx Offset, tämä on nyt 85% Joten se täyttää koko ympyrän.

Voimme käyttää planeetan tietoja väri pysähtyy. Luoda ulkonäkö palloa, joka on loistanut, väri 0% pitäisi olla kevyempi. Käyttämällä d3.rgb (). Kirkkaampi (k) Minun ei tarvitse määrittää erillistä väriä, sillä D3 tekee tämän laskennan minulle. Arvo k Määrittää, kuinka paljon kevyempi haluan väri tulla. Noin 50% Asetan todellisen värin tietokantaan. Edge haluan värin, joka on hieman tummempi, ja se antaa sävy. Loogisesti on myös a D3.RGB (). Tumma (k) että voimme käyttää.

 GradientRadial.Append ("STOP")
.attr ("Offset", "0%")
.attr ("Stop-Color", Toiminto (D) {
Paluu D3.RGB (d.color) .Brighter (1); });
GradientRadial.Appeng ("STOP")
.attr ("offset", "50%")
.attr ("pysäytysväri", funktio (d) {palautus d.color;});
GradientRadial.Appeng ("STOP")
.attr ("offset", "100%")
.attr ("Stop-Color", Toiminto (D) {
Palauta D3.RGB (D.Color) .Darker (2.5); }); 

Jos haluat tarkastaa HTML: n jälkeen tämän jälkeen, läsnä olisi kahdeksan eri säteittäistä kaltevuutta. Viimeisin, meidän on luotava kahdeksan ympyrää, antavat heille säteellä määritellään tiedot ja täyttää ne oikealla gradientilla.

 Svg.Selectall (". Planeetat")
.Data (planeetat)
. ANTER (). Liitä ("ympyrä")
/ * Aseta luokka, sijainti ja säde attribuutit ... * /
.Style ("Täytä", toiminto (D) {
Palauta "URL-osoite (# gradient-" + d.planet + ")"; }); 

Olen myös lisännyt aurinko, jolla on oma säteittäinen kaltevuus, mutta olen lähtenyt cx , cy ja r Oletusasetus 50% Tehdä se näyttää kuin aurinko hehkuu keskusta ulospäin.

Vastuuvapauslauseke: Vaikka kaikkien pallojen halkaisijat ovat oikeat suhteessa toisiinsa, etäisyydet ovat luonnollisesti täysin vääriä. Ja olen pahoillani, että Saturnilla ei ole renkaita

Pelaaminen suuntaviivoilla

Olemme nyt tutkineet, miten voit asettaa värin näkökohtia tietojen perusteella, mutta on paljon enemmän mahdollisuuksia. Voimme asettaa käytännöllisesti katsoen kaikki tiedot - jopa kunkin kaltevuuden suuntaukset.

Kokeile tätä, emme tee D3-sointukaavio, jossa esitetään yhteistyötä ihmeessä elokuvateattereiden avengereiden välillä (kuva 5). Kuusi Avengerin välillä kulkevat soinnut mitoitetaan elokuvien lukumäärän mukaan, joissa molemmat näkyvät. Aiomme täyttää nämä soinnut yksinkertaisella lineaarisella gradientilla, muuttuvat yhdestä Avengerin väristä toiseen.

Sordi ei yleensä ole tarkalleen vaakasuora tai pystysuora. Joten meidän on asetettava X1, x2 , y1 ja y2 Arvot, jotka perustuvat kunkin Avengerin ulomman kaaren paikkoihin. Nämä tiedot eivät ole alkuperäisessä tietopaketeissamme, mutta kun olemme toimittaneet sen D3: lle d3.layout.chord Toiminto, saamme takaisin uuden tietokannan, joka sisältää kunkin kaaren aloitus- ja pääkulmut (kuten D.SOURCE.STARKENTI ja d.target.enple ). Tämä on tietokanta, jota tarjoamme luomaan kaltevuudet.

Meidän on tiedettävä näkymättömän linjan pikselikohtaiset paikat, jotka kulkevat sointujen toisesta päästä toiselle. Näitä käytetään sitten antamaan X1, .., Y2 kunkin gradientin ominaisuudet. Voimme soveltaa joitakin trigonometriaa käyttäen sointukaaviota ja sijaintia puolivälissä jokaisen Avengerin kaaren varrella saadakseen takaisin nämä paikat. Koko trigonometrinen kaava on poistettu seuraavasta koodista, mutta löydät sen Github repo, joka liittyy tähän artikkeliin .

Jokaisen soinnun ainutlaatuisen tunnuksen tekemiseksi luomme Avengerin indeksin arvon merkkijonon yhdistelmän jokaisena louna. D3: n d3.layout.chord Asettaa aina yhden (Avengers) lähde ja toinen kohde , joka tekee ainutlaatuisen parin. Myöhemmin, kun piirrät sointuja, voimme käyttää samaa tekniikkaa soittaa oikea gradientti.

 var grads = svg.append ("defs"). Selectall ("lineargradient")
.Data (Chord.Chods ())
. (). Liitä ("lineargradient")
.attr ("ID", toiminto (D) {Return "GradientChod-" + D.SOURCE.
indeksi + "-" + d.target.index; }))
.attr ("gradientitsit", "käyttäjienPaceonuse")
// pikselin sijainti yhden loun
.attr ("x1", toiminto (d, i) {paluu / * ... Trigonometria
D.SOURCE arvot ... * /; }))
.attr ("Y1", toiminto (D, i) {Return / * ... * /})
// pikselin sijainti toisen pään sointujen
.attr ("x2", toiminto (d, i) {paluu / * ... * /})
.attr ("y2", funktio (d, i) {paluu / * ... * /}); 

Koska jokainen Avager määritellään oman indeksinumeronsa, voimme tehdä väritoiminnon, värit , joka palauttaa jokaisen Avengerin värin indeksiarvona. Tämä helpottaa oikean värin kanssa, kun kaksi väri pysähtyy.

 GRADS.Append ("STOP")
.attr ("Offset", "0%")
.attr ("pysäytysväri", toiminto (D) {paluuvärit (D.SOURCE.INDEX);
});
Grad.Append ("STOP")
.attr ("offset", "100%")
.attr ("Stop-Color", toiminto (D) {paluuvärit (D.target.index);
}); 

Kaikki, mitä jäljellä on soittaa oikealle kaltevuustunnukselle samalla kun asetat sointujen täyttötyyli (samalla toiminnolla kuin käytimme gradientin tunnuksen asettamiseen).

Pyöristäminen

Tämän opetusohjelman aikana olemme katsoneet neljä eri tapaa käyttää SVG-kaltevuuksia tietojen visualisoinnissa, mutta aina voi tehdä enemmän asioita. Gradientin animaatioiden avulla voit simuloida virtaa datan visualisoinnin osasta toiseen.

Joten seuraavan kerran suunnittelet datan visualisointia, anna luovuutesi vapaaksi. D3.js, sinun ei tarvitse rajoittaa sitä, mitä mieltä olet työkalun rajoista. Little Out-of-the-Boxin ajattelu ja vaivaa, voit tehdä hämmästyttävimmät asiat.

Älä missaa nadiehin istuntoa, SVG ylittää pelkkää muotoja, luodaan Lontoon 21.-23. Syyskuuta. Varaa nyt !

Tämä artikkeli oli alun perin ilmestynyt Net-aikakauslehti myöntää 280; Osta se täällä !