Boost D3.js diagramok SVG gradiensekkel

Nadieh Bremer lesz London létrehozása Szeptemberben, ahol megmutatja, hogyan kell megtenni Svg puszta formákon túl , a JavaScript, a CSS és a D3.js használatával az adatok megjelenítése még szórakoztatóbb és izgalmas. Foglalja le jegyét most !

A D3.js átvette az interaktív adatok vizualizációjának világát. Hatalmas számú példa található, mindegyik bemutatja saját szórakoztató és hasznos csavarja a könyvtáron. Látod, a D3 nem egy charting könyvtár, de valami sokkal jobb. Ez csak az alapvető eszközöket adja meg az adat vizualizációk létrehozásához, és ezáltal lehetővé teszi, hogy gyakorlatilag bármit teremtsen, amit gondolhat. Bár néhány ötlet több időt vehet igénybe, mint mások, akkor végül ott lesz. És ez a szabadság pontosan az, amit szeretek a D3-ról.

A magjában minden D3 vizuális SVG elemekből épül fel. Például az egyes adatpont egy egy szórási diagramot, hogy hozzon létre egy oszlopdiagram, mint egy tengely párhuzamos koordinátákkal, vagy lejtőn grafikon, címkék, és a rendkívül hasznos gyakorlatilag minden mást. Ezenkívül az SVG-k a felbontás függetlenek, így jól néz ki a kijelzőn vagy a zoom szinten.

Még akkor is, ha csak SVG-eket használsz az alakzatokhoz, csodálatos vizualizációkat hozhat létre. Azonban sokkal többet tehetnek - például az SVG szűrők gondolkodására. Ebben a bemutatóban mélyen merülünk egy konkrét szempontba, és nézzünk néhány különböző módon, hogy alkalmazzák a vizualizáció fényesítésére. Hadd mutassam be az SVG gradienseket!

Keresse meg az összes szükséges fájlt a bemutatóhoz itt .

Lineáris gradiensek

Néha, amikor létrehozok egy vonal diagramot egyetlen vonallal, csak úgy érzi, hogy egy kicsit túl üres, és elveszett a fehér háttér. Ahhoz, hogy jobban kiemelkedjen, egy fényes gradiont helyezek el a D3-ák alatt d3.svg.area funkció, svg gradienssel töltve (lásd az 1. ábrát).

Azt akarom, hogy a gradiens függőlegesen futjon a tetejéről (ahol ugyanolyan színű, mint a vonal, hanem egy könnyebb árnyalat) az alsó (ahol fehér vagy átlátszóvá válik). Ez az, amit lineáris gradiensnek neveznek; valami, ami egy egyenes vonal mentén változik.

SVG-vel kezdődik. Ez az a vászon, amelyen a vonaldiagramunkat rajzoljuk. Ezután hozzunk létre egy defok az elem, amelyre hozzá tudunk adni a lineargradiens elem. Nagyon fontos, hogy a gradiens egyedülálló azonosítót adjunk - ezt később fogjuk használni, amikor meg kell adnunk a terület alatti területet.

 VAR AreaGradient = svg.append ("DEFS")
.Az ("LinearGradient")
.attr ("ID", "területgradient")
.attr ("x1", "0%"). Att ("y1", "0%))
.attr ("x2", "0%"). Att ("y2", "100%); 

A fenti kód utolsó két sora határozza meg, hogy a gradiensnek hogyan kell futnia. Gondolj rá, mint láthatatlan vonal: X1 és y1 a láthatatlan vonal kiindulási pozíciói és a X2 és y2 Adja meg a végpontját, hogy megadja a gradiens irányát. Ez gyakran a legkönnyebben meghatározni ezeket százalékos arányként, bár lehetséges, hogy pontos pixel helyeket használhat. Alapértelmezés szerint a helyek az elem határoló dobozára vonatkoznak, amelyre a gradiens alkalmazása. Azt akarjuk, hogy a gradiens függőlegesen fut-e X1 és X2 meg kell felelnie ( 0% rendben van), y1 kell lennie 0% és Y2 100% .

Most meghatározhatjuk a gradiens színeit. Legalább két színre van szükség a gradienshez, de olyan sokan is használható, amennyit csak akarsz. Minden színben a gradiensben hozzáadod a álljon meg elem. Ezen belül megadja az árnyékot stop-color , és a hely (a láthatatlan vonal mentén), ahol azt szeretné, hogy ez a szín tiszta legyen (pontos szín) eltol .

Opcionálisan beállíthatjuk az egyes színek átlátszatlanságát is megállító . Itt az árnyékot kissé könnyebbé teszem a tetején és teljesen átlátszó az alján.

területgradient.append ("stop")
.attr ("offset", "0%")
.attr ("stop-color", "# 21825c")
.attr ("stop-opacity", 0,6);
területgradient.append ("stop")
.attr ("offset", "80%")
.attr ("stop-color", "fehér")
.attrtrtr ("stop-opacity", 0); 

Most a lineáris gradiens be van állítva, létrehozhatunk egy területi diagramot, és kitölthetjük a gradienssel. Ehhez használja URL (# Gradient-ID) A kitöltési stílusban, valamint a korábban meghatározott egyedi azonosítóval együtt.

 svg.append ("útvonal")
.style ("kitöltés", "url (#areagradient)")
.attr ("d", területfunkció (adatkészlet)); 

Ezt követően húzza ki a vonalat a diagram ezen a területén, így a néző az eredményeket le tudja olvasni a grafikonon. A diagramomban köröket is elhelyeztem, hogy hangsúlyozzák a konkrét adatpontok helyét.

Sima legenda

A legendák nagyon gyakoriak az adatok megjelenítésében. Ha színeket használ, hogy az adatok egy bizonyos aspektusát képviseljük, meg kell magyaráznia, hogy mit jelent minden szín. Ez az, ahol egy legenda jön.

Néhány diagramban színt fogsz használni a diszkrét esetek (például különböző országok) közötti megkülönböztetéshez, amely esetben a színek gyakran nagyon eltérőek. Azonban a színt is használhat a kvantitatív érték jelzésére is.

Itt a külső hőmérsékletet (lásd a 2. ábrát). A szín fokozatosan változik, hogy jelezze az alacsony és magas hőmérséklet közötti hőmérsékletet. Ahhoz, hogy megmutassuk ezt a legendában, hosszú téglalapot fogunk létrehozni, és kitöltjük egy gradienssel, balról jobbra. Megfelelően újrafelhasználhatjuk az általunk létrehozott gradienst, de 90 fokos (így X2 most fut 100% , inkább mint y2 ). Bár általában egy szivárványpaletta nem ajánlott az adatok vizualizációjában, az emberek színes hőmérsékleti térképeket látnak, és kilenc színt választottam a példánkban.

Ahelyett, hogy megírnánk álljon meg Ahhoz, hogy hozzáadjuk az összes színeket az adatkészletbe, és a D3-t használjuk adat lépés, hogy a folyamat gyorsabb legyen. A D3 lehet hozzáférni tulajdonsága az adatbázisba a következő lépéseket láncolás segítségével egy névtelen függvényt, ami lehetővé teszi számunkra, hogy állítsa be a színt és az eltolás csak két sort.

 SVG.Append ("DEFS")
.Az ("LinearGradient")
.attr ("ID", "LegendgradientMulti")
.attr ("x1", "0%"). Att ("y1", "0%))
.attr ("x2", "100%"). Att ("y2", "0%))
.Selectall ("stop")
.adat([
{Offset: "0%", Szín: "# 2C7BB6"},
{Offset: "12,5%", Szín: "# 00A6CA"},
{Offset: "25%", szín: "# 00cccc"},
{Offset: "37,5%", Szín: "# 90EB9D"},
{Offset: "50%", szín: "# ffff8c"},
{Offset: "62,5%", Szín: "# F9D057"},
{Offset: "75%", Szín: "# F29E2E"},
{Offset: "87,5%", Szín: "# E76818"},
{Offset: "100%", Szín: "# D7191C"}])
.enter (). Hozzáadva ("stop")
.attr ("offset", funkció (d) {return d.offset;}))))
.attr ("stop-color", funkció (d) {Return D.Color;}); 

Mint korábban, az utolsó lépés az, hogy hozzon létre egy rect és töltse ki ezt az egyedi gradiens azonosító használatával.

 svg.append ("ront")
.attr ("x", 0) .attr ("y", 0)
.attr ("szélesség", 500) .attr ("Magasság", 20)
.style ("kitöltés", "url (#leegendgradientmulti)"); 

A diagramok ezek a legendák mennek a mesés munkája után www.weather-radials.com mutatja a hőmérsékletet New Yorkban vagy Peking 2015-ben az átlagos hőmérsékletet naponta jelzi színes vonal, és ezek a vonalak vannak elrendezve, hogy egy kör alakú grafikonon ábrázoljuk. Az alábbi legenda megmagyarázza, hogy mit jelent minden szín. Az egyik grafikon az egyik színű gradienst használ a másikra, és a másik pedig mind a kilenc színn keresztül halad.

Adat alapú gradiensek

Az előző példához hasonló módon több gradiens is létrehozhatunk. Az adatok bizonyos aspektusa alapján egyedi gradienset tudunk tenni minden egyes adatpontra. Ezt a megközelítést egy Exoplanet vizualizáció , ahol minden bolygót gradiensnek adták a csillag informatikai orbits Stellar osztályán. A finom gömbhatást használtam, hogy a benyomást a középpontban lévő csillag megvilágította.

Tehát térjünk vissza a 90-es évekre, és fordítsuk el a saját naprendszerünkön lévő bolygókat reprezentáló lapos köröket 3D-s gömbökbe sugárirányú gradiensekkel (4. ábra). Létrehoztam egy kis adatkészletet, amely tartalmazza a bolygó nevét és átmérőjét. Mindegyiket az egyik szín általánosítja, amelyet minden bolygó számára egyedi gradiens létrehozására használunk.

 var gradientradial = svg.append ("DEFS")
.Select ("radialgradient")
.Data (bolygók)
.enter (). Hozzáadása ("radialgradient")
.attr ("ID", funkció (d) {return "gradient-" + d.planet;})))
.attr ("Cx", "15%")
.attr ("Cy", "50%")
.attr ("R", "85%); 

A kód kissé eltérő itt: a gradiens elem első hozzáadásának helyett azonnal hozzá kell adnunk a bolygók adatkészlet és csak a belép létrehozunk egy gradiens elemet (ebben az esetben radialgradient ). Így az adatkészlet minden egyes pontjára gradiens jön létre. Tartsa az egyes pont azonosítóját egyedülállóan az adatok alapján. Az index én Általában működik, de itt a bolygó neve biztonságosabb. Ez biztosítja, hogy később hozzáférhessünk a megfelelő gradienshez.

A radiális gradiens kissé eltér a lineáris. Hasonló módon hoztuk létre egy SVG körhöz: a gradiens középpontját az objektumhatárok tekintetében, amelyekre alkalmazzák, használva cx és kegyetlen . Ezek az értékek alapértelmezés szerint 50% , amely az objektum középpontja.

Ahhoz, hogy szimulálja a csillagok megjelenését a bolygók egyik oldaláról, a színező közepét a bal oldali cx nak nek 15% . A gradiens sugara (ahol a gradiens leáll 100% vége) r . Ez az alapértelmezés szerint 50% , de a miénk miatt cx Offset, ez most van 85% így kitölti az egész kört.

Használhatjuk a bolygóadatokat a színmegállók hozzáadásához. Ahhoz, hogy hozza létre egy gömb megjelenését, amelyre ragyog, a szín a 0% könnyebbnek kell lennie. Használva d3.rgb (). fényesebb (K) Nem kell külön színnel kell megadnom, mivel a D3 a számításnak számít. Az érték k Meghatározza, hogy mennyi könnyebb lesz a szín, hogy legyen a szín. Körül 50% Beállítottam az igazi színt az adatkészletben. A szélén olyan színt akarok, amely kissé sötétebb, az árnyék megjelenését. Logikusan van egy D3.RGB (). Sötétebb (K) amit használhatunk.

 GradientRadial.append ("stop")
.attr ("offset", "0%")
.attr ("stop-color", funkció (d) {
vissza a d3.RGB (D.Color) .Brighter (1); });
GradientRadial.append ("stop")
.attr ("offset", "50%")
.attr ("stop-color", funkció (d) {Return D.Color;});
GradientRadial.append ("stop")
.attr ("offset", "100%")
.attr ("stop-color", funkció (d) {
vissza a d3.RGB (D.Color) .DARKER (2.5); }); 

Ha megvizsgálná a HTML-t, akkor nyolc különböző sugárirányú gradiens lenne jelen. Utoljára nyolc köröt kell létrehoznunk, adjunk nekik az adatok által meghatározott sugarot, és töltse ki őket a megfelelő gradienssel.

 svg.seleclet (". Bolygók")
.Data (bolygók)
.enter (). Hozzáadása ("kör")
/ * Állítsa be az osztályt, a helyet és a sugár attribútumokat ... * /
.style ("kitöltés", funkció (d) {
Visszatérés "URL (# Gradient-" + d.planet + ")"; }); 

Azt is hozzáadtam a napot, amely saját sugárirányú gradienssel rendelkezik, de elmentem cx , kegyetlen és r az alapértelmezett beállítással 50% Ahhoz, hogy úgy nézzen ki, mintha a nap ragyogna a központból.

Jogi nyilatkozat: Bár az összes gömb átmérője egymáshoz viszonyítva van, a távolságok természetesen teljesen hamis. És sajnálom, hogy a Saturnnek nincs gyűrűje

Játék a tájolással

Most meggondoltuk, hogyan állíthatjuk be a színes szempontokat az adatok alapján, de sokkal több lehetőség van. Gyakorlatilag mindent beállíthatunk az adatok alapján - még az egyes gradiens orientációi is.

Ennek kipróbálásához tegyünk egy D3 akkorddiagramot, amely bemutatja az avengerek közötti együttműködést a Marvel Cinematic univerzumban (5. ábra). A hat Avengers között futó akkordok a filmek számának megfelelően vannak méretezve, amelyben mindketten megjelennek. Meg fogjuk tölteni ezeket az akkordokat egy egyszerű lineáris gradienssel, változik az egyik avenger színéből a másikra.

Az akkord általában nem pontosan vízszintes vagy függőleges. Tehát meg kell állítanunk az X1-et, X2 , y1 és y2 az egyes Avenger külső ívének helyszínein alapuló értékek. Ez az adatok nem az eredeti adatkészletünkben vannak, de miután a D3-hez adtuk d3.layout.chord Funkció, visszatérünk egy új adatkészletet, amely tartalmazza az egyes ívek kezdetét és végszögeit (mint d.source.startangle és d.target.ENDangle ). Ez az adatkészlet, amelyet a gradiensek létrehozása közben szállítunk.

Meg kell ismernünk a láthatatlan vonal pixelpozícióit, amely egy akkord egyik végétől a másikra fut. Ezután ezeket használják a x1, .., y2 minden gradiens tulajdonságai. Trigonometria alkalmazása az akkorddiagram sugarával és a helyszínen félúton, az egyes Avenger íve mentén, hogy visszaszerezze ezeket a pozíciókat. A teljes trigonometrikus képletet eltávolították a következő kódból, de megtalálja a cikket kísérő github repo .

Ahhoz, hogy egyedi azonosítót hozzunk létre minden egyes akkordhoz, hozzon létre egy karakterláncos kombinációt az Avenger index értékének mindkét végén egy akkord. D3 d3.layout.chord mindig egy (avengers) forrás és a másik cél , ami egyedülálló párot tesz. Később, az akkordok rajzolásánál ugyanazt a technikát használhatjuk a megfelelő gradiens hívásához.

 var grads = svg.append ("DEFS"). Selectall ("LinearGradient")
.Data (chord.chords ())
.enter (). Hozzáadása ("LinearGradient")
.attr ("ID", funkció (d) {Return "Gradientchord-" + D.Source.
Index + "-" + d.target.index; })
.attr ("Gradientunits", "userspaceonuse")
// az akkord egyik végének pixel helye
.attr ("x1", függvény (d, i) {visszatér / * ... trigonometria alapul
D.SOURCE értékek ... * /; })
.attr ("y1", funkció (d, i) {Return / * ... * /})
// az akkord másik végének képpontos helye
.attr ("x2", funkció (d, i) {visszatérés / * ... * /})))
.attr ("y2", funkció (d, i) {return / * ... * /}); 

Mivel minden egyesvenget saját indexszáma határozza meg, színfunkciót végezhetünk, színek , Ez visszaadja az egyes Avenger színét indexértékenként. Ez megkönnyíti a megfelelő színre utalni, miközben a két szín leáll.

 Grads.Append ("stop")
.attr ("offset", "0%")
.attr ("stop-color", funkció (d) {return színek (d.source.index);
});
Grads.Append ("stop")
.attr ("offset", "100%")
.attr ("stop-color", funkció (d) {return színek (d.target.index);
}); 

Mindez marad, hogy a megfelelő gradiens azonosítót hívja, miközben beállítja az akkordok kitöltési stílusát (ugyanazzal a funkcióval, amint azt a gradiens azonosító beállítottuk).

Felkerekíteni

E bemutató során négy különböző módon néztük meg az SVG gradienseket az adat vizualizációban, de mindig több dolog van. A gradiens animációkkal szimulálhatod az adat vizualizáció egyik részétől a másikra.

Tehát legközelebb az adat vizualizációt tervez, hagyja, hogy a kreativitás ingyenes legyen. A D3.js segítségével nem kell korlátozni, amit úgy gondolja, hogy a szerszám korlátai. Egy kicsit a dobozos gondolkodás és erőfeszítéssel a legcsodálatosabb dolgokat lehet tenni.

Ne hagyja ki Nadieh munkamenetét, SVG a puszta formákon túl, a London Generate, szeptember 21-23. Foglalás most !

Ez a cikk eredetileg megjelent net magazin 280 kiadása; Vásárolja meg itt !