Boost D3.JS grafy se SVG gradienty

Nadieh Bremer bude na Generovat Londýn V září, kde bude prokázat, jak vzít SVG za pouhými tvary Používání JavaScriptu, CSS a D3.js k vytváření vizualizací dat ještě zábavnější a vzrušující. Rezervujte si jízdenku Dokázal se!

D3.js převzal svět interaktivní vizualizace dat. Nelze nalézt obrovský počet příkladů, z nichž každý představuje vlastní zábavu a užitečné twist v knihovně. Vidíte, D3 není mapovací knihovna, ale něco lepšího. To vám dává pouze základní nástroje pro vytváření vizualizací dat, a to umožňuje vytvářet prakticky cokoliv, co si můžete myslet. Přestože některé nápady mohou trvat více času než jiné, budeš tam nakonec. A tato svoboda je přesně to, co miluji o D3.

Každý D3 vizuální je v jeho jádře postaven z prvků SVG. Například pro každý datový bod v grafu scatterplot, vytvořit sloupcový graf, jako osa, paralelní souřadnice nebo graf sklonu, jako štítky a extrémně užitečné pro prakticky všechno ostatní. Dále, SVGS jsou nezávislé na rozlišení, což vypadají skvěle na libovolném zobrazení nebo přiblížení.

I když právě používáte SVG pro jejich tvary, můžete vytvořit nádherné vizualizace. Mohou však udělat mnohem více - Přemýšlejte například o filtrech SVG. V tomto návodu budeme zablokovat hluboký ponor do jednoho konkrétního aspektu a podívejte se na několik různých způsobů, jak jej lze aplikovat, aby se rozjasnil vizualizaci. Dovolte mi, abych vám představil SVG gradienty!

Najít všechny soubory, které potřebujete pro tento tutoriál tady .

Lineární gradienty

Někdy, když vytvoříte řádek graf s jedním řádkem, to jen cítí trochu příliš prázdný a může se ztratit na bílém pozadí. Abychom to vyniklo více, umístím světelný gradient pod ním pomocí D3 d3.svg.area. Funkce, naplněné SVG gradientem (viz obr. 1).

Chci, aby gradient spustil vertikálně shora (kde je stejná barva jako linka, ale lehčí odstín) na dno (kde by mělo být bílý nebo transparentní). To je to, co je známo jako lineární gradient; něco, co mění barvu podél přímky.

Začneme s SVG. Toto je plátno, na kterém bude nakreslena naše řádkové schéma. Pak vytvoříme defs. prvek, na který můžeme připojit Lineargradient. živel. Je velmi důležité dát gradient jedinečným ID - použijeme to později, kdy musíme dát oblast pod linií jeho výplň.

 var loodgradient = svg.append ("defs")
.append ("lineargradient")
.Atr ("ID", "Leafradient")
.Attr ("x1", "0%"). attr ("y1", "0%")
.Attr ("x2", "0%"). attr ("y2", "100%"); 

Poslední dva řádky kódu výše definují, jak by měl gradient spustit. Přemýšlejte o tom jako neviditelná linie: X1. a y1. jsou výchozími polohami neviditelné linie a X2. a Y2. Uveďte svůj koncový bod, aby se směr gradientu. Je často nejjednodušší definovat tyto procenta, i když je možné použít přesné umístění pixelů. Ve výchozím nastavení se umístění odkazují na ohraničovací krabici prvku, na který je gradient aplikován. Chceme, aby gradient běžel vertikálně, tak X1. a X2. by mělo být stejné ( 0% je v pořádku), y1. musí být 0% a Y2 100% .

Nyní můžeme definovat barvy gradientu. Pro gradient je zapotřebí alespoň dvě barvy, ale můžete použít tolik, kolik chcete. Pro každou barvu v gradientu přidáte stop živel. Uvnitř tohoto určení stínu stop-color. a umístění (podél neviditelné linie), kde chcete, aby tato barva byla čistá (přesná barva) s ofsetový .

Volitelně můžeme také nastavit neprůhlednost každé barvy zastávka . Zde dělám stín lehce lehčí nahoře a zcela transparentní na dně.

LEAGEGRADIENT.APPEND ("STOP")
.attr ("ofset", "0%")
.attr ("stop-color", "# 21825c")
.Attr ("zastavení-opacity", 0,6);
LEAGEGRADIENT.APPEND ("STOP")
.attr ("ofset", "80%")
.Attr ("stop-color", "bílá")
.Attr ("zastavení-opacity", 0); 

Nyní je nastaven lineární gradient, můžeme vytvořit oblastní graf a naplnit ji gradientem. Chcete-li to udělat, použijte URL (# gradient-id) Ve stylu výplně spolu s jedinečným ID jsme nastavili dříve.

 svg.append ("cesta")
.style ("Fill", "URL (#aReagradient)")
.Attr ("D", oblast) (DataSet)); 

Poté nakreslete linku na horní části této oblasti grafu, takže prohlížeč může číst výsledky z grafu. V mém grafu jsem také umístil kruhy, abych zdůraznil umístění konkrétních datových bodů.

Hladká legenda

Legendy jsou v vizualizacích dat velmi časté. Pokud používáte barvy, abyste reprezentovali konkrétní aspekt vašich dat, musíte vysvětlit, co každá barva znamená. To je místo, kde přichází legenda.

V některých grafech budete používat barvu pro diskriminace mezi diskrétními případy (například různé země), v takovém případě jsou barvy často velmi odlišné. Můžete však také použít barvu pro označení kvantitativní hodnoty.

Zde představujeme teplotu venku (viz obr 2). Barva se postupně mění, což znamená, že teplota vychází z nízko na vysokou. Chcete-li to ukázat v legendě, budeme vytvářet dlouhý obdélník a naplnit ji gradientem zleva doprava. Můžeme znovu použít gradient, který jsme vytvořili pro naši linku, ale otočili o 90 stupňů (tak X2. nyní běží 100% , spíše než Y2. ). Ačkoli obecně duhová paleta se nedoporučuje v oblasti vizualizace, lidé se používají k vidění barevných teplotních map, a vybrala jsem v našem příkladu devět barev.

Místo psaní každého stop Chcete-li připojit, můžeme dát všechny barvy v datovém sadu a používat d3 je šikovný data krok, aby proces rychlejší. S D3 je možné přistupovat k jakékoli vlastnosti DataSet v následných řetězcích krokech pomocí anonymní funkce, což nám umožňuje nastavit barvu a posunutí pouze dvěma řádky.

 SVG.APPEND ("DEFS")
.append ("lineargradient")
.Attr ("ID", "LegendGradientMulti")
.Attr ("x1", "0%"). attr ("y1", "0%")
.Attr ("x2", "100%"). attr ("y2", "0%")
.SECTALL ("STOP")
.data([
{offset: "0%", barva: "# 2c7bb6"},
{offset: "12,5%", barva: "# 00A6CA"},
{offset: "25%", barva: "# 00ccbc"},
{offset: "37,5%", barva: "# 90EB9D"},
{ofset: "50%", barva: "# ffff8c"},
{ofset: "62,5%", barva: "# f9d057"},
{offset: "75%", barva: "# f29e2e"},
{offset: "87,5%", barva: "# E76818"},
{ofset: "100%", barva: "# d7191c"}])
.enter (). Přidat ("STOP")
.Attr ("ofset", funkce (d) {return d.offset;})
.Attr ("stop-color", funkce (d) {návrat d.color;}); 

Stejně jako dříve, konečný krok je vytvořit rektový a vyplňte to pomocí jedinečného ID gradientu.

 SVG.APPEND ("RECT")
.Attr ("x", 0) .attr ("y", 0)
.Atr ("šířka", 500) .attr ("výška", 20)
.style ("Fill", "URL (#legendGradientGradientMulti)"); 

Grafy Tyto legendy jdou s, jsou znovu vytvořeny po báječné práci www.weather-radials.com. Zobrazující teplotu v New Yorku nebo Pekingu v roce 2015. Průměrná teplota každý den je indikována barevnou linií a tyto linie jsou uspořádány tak, aby vytvořily kruhový graf. Níže uvedená legenda vysvětluje, co každá barva znamená. Jeden graf používá gradient z jedné barvy do druhé a další postupuje přes všech devět barev.

Gradienty založené na datech

S podobně jako předchozí příklad můžeme také vytvořit více přechodů. Mohli bychom vytvořit jedinečný gradient pro každý datový bod, založený na konkrétním aspektu dat. Použil jsem tento přístup v vizualizace exoplanetu , kde každá planeta dostala gradient založený na hvězdné třídě hvězdy IT oběh. Použil jsem jemný efekt koule, aby se dosáhlo dojem, každá byla osvětlena hvězdou ve středu.

Vraťme se tedy do 90. let a otočme sbírku plochých kruhů představujících planety ve vlastním sluneční soustavě do 3D-vypadajících koule s radiálními gradienty (obr. 4). Vytvořil jsem malou datovou sadu obsahující jméno a průměr planety. Každý bude zobecněn jednou barvou, kterou budeme používat k vytvoření jedinečného gradientu pro každou planetu.

 var gradientradial = svg.append ("defs")
.Selectall ("radiallgradient")
.data (planety)
.enter (). Přidat ("radiallgradient")
.Attr ("id", funkce (d) {návrat "gradient-" + d.planet;})
.Attr ("cx", "15%")
.Attr ("cy", "50%")
.Attr ("R", "85%"); 

Kód je mírně odlišný zde: Namísto prvního připojení gradientového prvku jsme nyní okamžitě připojeni planety DataSet a teprve po enter. Vytvoříme element gradient (v tomto případě radiallgradient. ). Tímto způsobem je gradient vytvořen pro každý bod v datovém souboru. Udržujte ID každého bodu jedinečné tím, že jej zakládá na datech. Index I. I. Obvykle funguje, ale zde je jméno planety bezpečnější. To zajišťuje, že můžeme přistupovat ke správnému gradientu později.

Radiální gradient je mírně odlišný od lineárního. Vytváříme to podobným způsobem na kruh SVG: dodávat střed gradientu s ohledem na objektu, ke kterým bude aplikován, používat cx. a cyn . Tyto hodnoty jsou výchozí 50% , což je střed objektu.

Chcete-li simulovat vzhled hvězdy svítící na planetách z jedné strany, přesuíme středem gradientu vlevo nastavením cx. na 15% . Poloměr gradientu (kde se gradient zastaví 100% by mělo být indikováno R. . To také výchozí 50% Ale kvůli našim cx. OfSet, to je nyní 85% Tak vyplní celý kruh.

Data planety můžeme použít k připojení barevných zastávek. Vytvořit vzhled koule, která je zářivá, barva na 0% by měl být lehčí. Používáním D3.RGB (). jasnější (k) Nemusím specifikovat samostatnou barvu, protože D3 udělá tento výpočet pro mě. Hodnota k. Definuje, jak moc světleji chci, aby se barva stala. Kolem 50% Nastavil jsem skutečnou barvu v datovém sadu. Na okraji chci barvu, která je o něco tmavší, dává vzhled stínu. Logicky existuje také a d3.rgb (). tmavší (k) Můžeme použít.

 gradientradial.append ("stop")
.attr ("ofset", "0%")
.Attr ("stop-color", funkce (d) {
Vraťte D3.RGB (D.Color) .brighter (1); });
gradientradial.append ("stop")
.attr ("ofset", "50%")
.Attr ("stop-color", funkce (d) {návrat d.color;});
gradientradial.append ("stop")
.Attr ("ofset", "100%")
.Attr ("stop-color", funkce (d) {
Vraťte D3.RGB (D.Color) .darker (2.5); }); 

Pokud byste měli kontrolovat HTML po spuštění, bude existovat osm různých radiálních gradientů. Poslední, musíme vytvořit osm kruhů, dát jim poloměr, jak je definován data, a vyplňte je správným gradientem.

 SVG.SELECTALL (". Planety")
.data (planety)
.enter (). Přidání ("kruh")
/ * Nastavte atributy třídy, umístění a poloměru ... * /
.style ("Fill", funkce (d) {
vrátit se "URL (# gradient-" + d.planet + ")"; }); 

Také jsem přidal slunce, které má svůj vlastní radiální gradient, ale odešel jsem cx. , cyn a R. S výchozím nastavením 50% Aby to vypadalo jako slunce svítí od středu směrem ven.

Prohlášení: I když jsou průměry všech sférů správné relativní vůči sobě, vzdálenosti jsou samozřejmě zcela falešné. A je mi líto, že Saturn nemá žádné prstence

Hrát s orientacemi

Nyní jsme prozkoumali, jak nastavit barevné aspekty založené na datech, ale existuje mnohem více možností. Můžeme nastavit prakticky vše na základě dat - dokonce i orientace každého gradientu.

Chcete-li to vyzkoušet, pojďme udělat D3 akordový diagram ukazující spolupráci mezi Avengers v Marvel Cinematic Universe (obr. 5). Akordy, které běží mezi šesti avengeri, jsou dimenzovány podle počtu filmů, ve kterých oba oba se objevují. Uplníme tyto akordy jednoduchým lineárním gradientem, měnící se z jedné barvy Avengeru do jiného.

Akord není obvykle přesně horizontální nebo vertikální. Takže budeme muset nastavit X1, X2. , y1. a Y2. hodnoty založené na lokalitách vnějšího oblouku Avenger. Tato data nejsou v naší původní datové sady, ale poté, co jsme dodali do D3 d3.layout.chord. Funkce, dostaneme zpět novou datovou sadu obsahující počáteční a koncové úhly každého oblouku (jako d.source.Startangle a d.target.endangle. ). Toto je datový soubor, který dodáváme při vytváření přechodů.

Potřebujeme znát pozice pixelů neviditelné linie, která běží z jednoho konce akordu na druhou. Ty jsou pak použity k poskytnutí X1, .., y2 Atributy každého gradientu. Můžeme použít nějakou trigonometrii s použitím poloměru akordového diagramu a umístění v polovině podél každého oblouku Avenger, aby se tyto pozice vrátily. Plný trigonometrický vzorec byl odstraněn z následujícího kódu, ale najdete ho GitHub repo, který doprovází tento článek .

Chcete-li provést jedinečné ID pro každý akord vytvořili kombinaci řetězec hodnoty indexu Avenger na každém konci akordu. D3 je d3.layout.chord. vždy nastaví jeden (z avengerů) zdroj a druhý cílová , což činí jedinečný pár. Později, při kreslení akordů můžeme použít stejnou techniku ​​k volání správného gradientu.

 var grads = svg.append ("defs"). Selectall ("lineargradient")
.data (Chord.Chords ())
.Enter (). Přidat ("lineargradient")
.Attr ("id", funkce (d) {návrat "gradientchord-" + D.Source.
index + "-" + d.target.index; })
.Attr ("Gradientunitits", "Userspaceonuse")
// Pixel umístění jednoho konce akordu
.Attr ("x1", funkce (d, i) {návrat / * ... Trigonometrie na základě
D.Source hodnoty ... * /; })
.Attr ("y1", funkce (d, i) {návrat / * ... * /})
// Pixel umístění druhého konce akordu
.Attr ("x2", funkce (d, i) {návrat / * ... * /})
.Attr ("y2", funkce (d, i) {návrat / * ... * /}); 

Protože každý Avenger je definován vlastním indexovým číslem, můžeme vytvořit barevnou funkci, barvy , který vrací každou barvu Avenger na hodnotu indexu. Díky tomu je snadné odkazovat na správnou barvu při připojování dvou barevných zastavení.

 Grads.append ("Stop")
.attr ("ofset", "0%")
.Attr ("stop-color", funkce (d) {návratové barvy (d.source.index);
});
grads.append ("stop")
.Attr ("ofset", "100%")
.Attr ("stop-color", funkce (d) {návratové barvy (d.target.index);
}); 

Vše, co zůstane, je zavolat správné gradientové ID při nastavování stylu výplně akordů (se stejnou funkcí, jak jsme použili k nastavení ID přechodu).

Zaokrouhlení nahoru.

Během tohoto tutoriálu jsme se podívali na čtyři různé způsoby, jak používat SVG gradienty v vizualizacích dat, ale vždy existují více věcí, které můžete udělat. S gradientovými animacemi můžete například simulovat tok z jedné části vizualizace dat do druhého.

Takže příště navrhujete vizualizaci dat, nechte svou kreativitu zdarma. S D3.js nemusíte být omezeni tím, co si myslíte, že jsou limity nástroje. S trochou mimo-the-box myšlení a úsilí, můžete učinit nejúžasnější věci.

Nenechte si ujít Session Nadieh, SVG za pouhými tvary, při generování Londýna, 21. - 23. září. Zarezervovat hned Dokázal se!

Tento článek se původně objevil Čistý časopis Vydání 280; koupit to tady Dokázal se!