Boost D3.JS-grafieken met SVG-hellingen

Nadieh Bremer zal zijn Genereer Londen in september, waar ze zal aantonen hoe ze te nemen SVG voorbij louter vormen , met JavaScript, CSS en D3.JS om gegevensvisualisaties nog leuker en spannender te maken. Boek nu uw ticket ​

D3.JS heeft de wereld van interactieve gegevensvisualisatie overgenomen. Een enorm aantal voorbeelden is te vinden, elk die zijn eigen leuke en nuttige draai op de bibliotheek toont. Zie je, D3 is geen grafiekenbibliotheek, maar iets veel beter. Het geeft u alleen de basishulpmiddelen om gegevensvisualisaties te maken, en hiermee kunt u in staat om vrijwel alles wat u maar kunt bedenken. Hoewel sommige ideeën meer tijd kunnen nemen dan andere, krijg je er uiteindelijk mee. En deze vrijheid is precies wat ik dol op D3.

In zijn kern wordt elke D3-visuele uitgezonden uit SVG-elementen. Voor elk DatAppoint in een scatterplot-diagram, om een ​​staafdiagram te maken, als een as, parallelle coördinaten of hellingsgrafiek, als labels, en het uiterst handig voor praktisch al het andere. Bovendien zijn SVG's resolutieonafhankelijk, dus zien er dus goed uit op een display of zoomniveau.

Zelfs als u alleen SVGS voor hun vormen gebruikt, kunt u prachtige visualisaties creëren. Ze kunnen echter veel meer doen - denk bijvoorbeeld aan SVG-filters. In deze tutorial nemen we een diepe duik in één specifiek aspect en kijken we naar een paar verschillende manieren waarop het kan worden toegepast om een ​​visualisatie op te fleuren. Laat me je voorstellen aan SVG-hellingen!

Vind alle bestanden die u nodig hebt voor deze tutorial hier ​

Lineaire verlopen

Soms als ik een lijndiagram maak met een enkele regel, voelt het gewoon een beetje te leeg en kan verdwalen op de witte achtergrond. Om het meer te laten opvallen, plaats ik een lichtgradiënt eronder het gebruik van D3's d3.svg.area Functie, gevuld met een SVG-gradiënt (zie figuur 1).

Ik wil dat het verloop verticaal van de top loopt (waar het dezelfde kleur is als de lijn, maar een lichtere tint) naar de onderkant (waar het wit of transparant moet worden). Dit is wat bekend staat als een lineair verloop; iets dat van kleur langs een rechte lijn verandert.

We beginnen met een SVG. Dit is het canvas waarop onze lijndiagram wordt getrokken. We maken dan een defs element waarop we een a kunnen toevoegen lineargradient element. Het is erg belangrijk om het verloop een unieke ID te geven - we zullen dit later gebruiken wanneer we het gebied onder de lijn zijn vullen moeten geven.

 Var AreaGadient = SVG.APPEND ("DEFS")
.Append ("lineargradient")
.ATTR ("ID", "AreaGadient")
.attr ("x1", "0%"). At ("Y1", "0%")
.attr ("x2", "0%"). At ("Y2", "100%"); 

De laatste twee regels van de bovenstaande code definiëren hoe het verloop moet worden uitgevoerd. Zie het als een onzichtbare lijn: x1 en y1 zijn de startposities van de onzichtbare lijn en de x2 en y2 geef het eindpunt aan, om de richting van het verloop te geven. Het is vaak het gemakkelijkst om deze te definiëren als percentages, hoewel het mogelijk is om exacte pixellocaties te gebruiken. Standaard verwijzen de locaties naar de begrenzingsdoos van het element waarop het verloop wordt toegepast. We willen dat het verloop verticaal wordt uitgevoerd, dus x1 en x2 zou hetzelfde moeten zijn ( 0% is goed), y1 moet zijn 0% en Y2 100% ​

Nu kunnen we de kleuren van het verloop definiëren. Ten minste twee kleuren zijn nodig voor een verloop, maar je kunt zoveel mogelijk gebruiken als je wilt. Voor elke kleur in het verloop voegt u een toe hou op element. Hierin specificeer je de schaduw met aanhouden , en de locatie (langs de onzichtbare lijn) waar je wilt dat deze kleur puur (de exacte kleur) is met offset ​

Optioneel kunnen we ook de dekking van elke kleur instellen met stop-opaciteit ​Hier maak ik de schaduw iets lichter aan de bovenkant en volledig transparant onderaan.

AreaGadient.APPEND ("STOP")
.attr ("offset", "0%")
.attr ("stop-color", "# 21825c")
.attr ("stop-dekking", 0,6);
AreaGadient.APPEND ("STOP")
.attr ("offset", "80%")
.attr ("stop-color", "wit")
.attr ("stop-dekking", 0); 

Nu is het lineaire verloop opgezet, we kunnen een gebiedskaart maken en het met het verloop vullen. Om dit te doen, gebruik dan URL (# verloop-ID) In de vulstijl, samen met de unieke ID die we eerder hebben ingesteld.

 SVG.APPEND ("PATH")
.Style ("Fill", "URL (#Ereagradient)")
.ATTR ("D", gebiedenfunctie (dataset)); 

Teken daarna de regel bovenop dit gedeelte van de grafiek zodat de viewer de resultaten van uw grafiek kan lezen. In mijn grafiek heb ik ook cirkels geplaatst om de locaties van specifieke gegevenspunten te benadrukken.

Een soepele legende

Legendes komen vaak voor in gegevensvisualisaties. Wanneer u kleuren gebruikt om een ​​bepaald aspect van uw gegevens te vertegenwoordigen, moet u uitleggen wat elke kleur betekent. Dit is waar een legende binnenkomt.

In sommige grafieken gebruikt u kleur om te discrimineren tussen discrete gevallen (bijvoorbeeld verschillende landen), in welk geval de kleuren vaak allemaal heel anders zijn. U kunt echter ook kleur gebruiken om een ​​kwantitatieve waarde aan te geven.

Hier vertegenwoordigen we de temperatuur buiten (zie figuur 2). De kleur verandert geleidelijk om de temperatuur van laag naar hoog te duiden. Om dit in een legende te laten zien, gaan we een lange rechthoek maken en vullen het met een verloop van naar links naar rechts. We kunnen het verloop hebben hergebruik dat we hebben gemaakt voor onze lijndiagram, maar omgedraaid met 90 graden (dus x2 nu werkt 100% , liever dan y2 ​Hoewel in het algemeen een regenboogpalet niet wordt aanbevolen in gegevensvisualisatie, worden mensen gebruikt om kleurrijke temperatuurkaarten te zien, en ik heb er negen kleuren gekozen om in ons voorbeeld te gebruiken.

In plaats van elk te schrijven hou op Om toe te voegen, kunnen we alle kleuren in een dataset plaatsen en D3's handy gebruiken gegevens stap om het proces sneller te maken. Met D3 is het mogelijk om toegang te krijgen tot een eigenschap van de dataset in de volgende kettingstappen met behulp van een anonieme functie, waardoor we de kleur en offset in slechts twee regels kunnen instellen.

 SVG.APPEND ("DEFS")
.Append ("lineargradient")
.attr ("ID", "LegendgradientMulti")
.attr ("x1", "0%"). At ("Y1", "0%")
.attr ("x2", "100%"). At ("Y2", "0%")
.Selectall ("stop")
.gegevens([
{offset: "0%", kleur: "# 2c7bb6"},
{Offset: "12,5%", kleur: "# 00a6ca"},
{offset: "25%", kleur: "# 00cbc"},
{Offset: "37,5%", kleur: "# 90EB9D"},
{Offset: "50%", kleur: "# ffff8c"},
{Offset: "62,5%", kleur: "# f9d057"},
{offset: "75%", kleur: "# f29E2E"},
{Offset: "87,5%", kleur: "# E76818"},
{Offset: "100%", kleur: "# D7191C"}])
.en (). Appd ("stop")
.attr ("offset", functie (d) {return d.offset;})
.Atstr ("stop-color", functie (d) {return d.color;}); 

Zoals eerder, de laatste stap is om een ​​te maken rect en vul dit met behulp van de unieke gradiënt-ID.

 svg.Append ("rect")
.attr ("x", 0) .ATTR ("Y", 0)
.attr ("breedte", 500) .ATtr ("hoogte", 20)
.Style ("vullen", "URL (#legendgradientmulti)"); 

De grafieken die deze legendes gaan, worden opnieuw gemaakt na het fantastische werk van www.weather-radials.com Toont de temperatuur in New York of Beijing in 2015. De gemiddelde temperatuur elke dag wordt aangegeven met een gekleurde lijn en deze lijnen zijn ingericht om een ​​cirkelvormige grafiek te vormen. De legende hieronder legt uit wat elke kleur betekent. Eén grafiek gebruikt een gradiënt van de ene kleur naar de andere, en de andere vordert door alle negen kleuren.

Gegevensgerichte gradiënten

Op een manier vergelijkbaar met het vorige voorbeeld kunnen we ook meerdere hellingen maken. We zouden een uniek verloop kunnen maken voor elk gegevenspunt, op basis van een bepaald aspect van de gegevens. Ik heb deze aanpak in een gebruikt Exoplanet-visualisatie , waar elke planeet een gradiënt kreeg op basis van de stellaire klasse van de Star It Orbits. Ik heb een subtiel boleffect gebruikt om de indruk te geven die elk door de ster in het centrum werd verlicht.

Dus laten we teruggaan naar de jaren 90 en een verzameling platte cirkels weergeven die de planeten in ons eigen zonnestelsel vertegenwoordigen in 3D-uitziende bollen met radiale hellingen (fig. 4). Ik heb een kleine dataset gemaakt met de naam en diameter van de planeet. Elk zal door één kleur worden gegeneraliseerd, die we zullen gebruiken om een ​​uniek verloop voor elke planeet te creëren.

 Var Gradientradial = SVG.APPEND ("DEFS")
.Selectall ("radialgradient")
.data (planeten)
.Entel (). Appd ("Radialgradient")
.Atstr ("ID", functie (d) {return "gradiënt-" + D.planet;})
.attr ("CX", "15%")
.ATTR ("CY", "50%")
.ATTR ("R", "85%"); 

De code is hier een beetje anders: in plaats van eerst een gradiëntelement toe te voegen, voegen we nu meteen de planeten dataset en pas na de invoeren creëren we een verloopelement (in dit geval radialgradient ​Op deze manier wordt een verloop voor elk punt in de dataset gemaakt. Houd het ID van elk punt uniek door het op de gegevens te baseren. De index ik werkt meestal, maar hier is de naam van de planeet veiliger. Dit zorgt ervoor dat we later toegang hebben tot het juiste verloop.

Een radiale gradiënt is iets anders dan een lineaire. We creëren het op een vergelijkbare manier voor een SVG-cirkel: leveren het midden van de gradiënt met betrekking tot het objectgrenzen waaraan het wordt toegepast, met behulp van cx en cy ​Deze waarden standaard aan 50% , dat het centrum van het object is.

Om het uiterlijk van een ster van één kant op de planeten te simuleren, verplaatsen we het midden van het verloop naar links door in te stellen cx naar 15% ​De radius van het verloop (waar een verloopstop van 100% zou moeten eindigen) wordt aangegeven door r ​Het is ook standaard naar 50% , maar vanwege onze cx Offset, dit is nu 85% Dus vult het de hele cirkel.

We kunnen de planeetgegevens gebruiken om de kleurstops toe te voegen. Om het uiterlijk van een bol te creëren die wordt geschenen, de kleur op 0% moet lichter zijn. Door het gebruiken van D3.RGB (). BLIJFER (K) Ik hoef niet een afzonderlijke kleur te specificeren, omdat D3 die berekening voor mij zal doen. De waarde k Bepaalt hoeveel lichter ik wil dat de kleur wordt. Ongeveer 50% Ik heb de ware kleur in de dataset ingezet. Aan de rand wil ik een kleur die iets donkerder is, het uiterlijk van schaduw geeft. Logisch gezien is er ook een D3.RGB (). Donkerder (K) die we kunnen gebruiken.

 Gradientradial.Append ("stop")
.attr ("offset", "0%")
.attr ("stop-color", functie (d) {
RETURN D3.RGB (D.COLOR) .Erbrighter (1);​
Gradientradial.Append ("stop")
.attr ("offset", "50%")
.Atstr ("stop-color", functie (d) {return d.color;});
Gradientradial.Append ("stop")
.attr ("offset", "100%")
.attr ("stop-color", functie (d) {
Retourneer D3.RGB (D.Color) .Darker (2.5); }); 

Als u de HTML zou inspecteren nadat u dit hebt uitgevoerd, zouden er acht verschillende radiale hellingen aanwezig zijn. Laatste, we moeten acht cirkels maken, ze een straal geven zoals gedefinieerd door de gegevens en vul ze met het juiste verloop.

 SVG.Selectall (". Planeten")
.data (planeten)
.en (). Appd ("cirkel")
/ * Stel de klasse, locatie en radiusattributen in ... * /
.Style ("vullen", functie (d) {
RETURN "URL (# verloop-" + D.planet + ")"; }); 

Ik heb ook de zon toegevoegd, die zijn eigen radiale verloop heeft, maar ik ben vertrokken cx ​ cy en r Met de standaardinstelling van 50% Om het eruit te laten zien alsof de zon glijdt van het midden naar buiten.

Een disclaimer: hoewel de diameters van alle bollen correct zijn ten opzichte van elkaar, zijn de afstanden natuurlijk volledig nep. En het spijt me dat Saturnus geen ringen heeft

Spelen met de oriëntaties

We hebben nu onderzocht hoe ze kleurenaspecten instellen op basis van gegevens, maar er zijn veel meer mogelijkheden. We kunnen praktisch alles instellen op basis van gegevens - zelfs de oriëntaties van elk verloop.

Om dit uit te proberen, laten we een D3-akkoorddiagram maken met de samenwerkingen tussen de Avengers in het Marvel Cinematic Universum (Fig. 5). De akkoorden die tussen de zes Avengers lopen, zijn afgezien volgens het aantal films waarin ze allebei verschijnen. We gaan deze akkoorden vullen met een eenvoudig lineair verloop, verandert van de kleur van één Avenger naar de andere.

Een akkoord is meestal niet precies horizontaal of verticaal. Dus we moeten de X1 instellen, x2 ​ y1 en y2 waarden op basis van de locaties van de buitenste boog van elke Avenger. Deze gegevens staan ​​niet in onze originele dataset, maar nadat we het aan D3's hebben geleverd d3.layout.chord Functie, we zullen een nieuwe dataset terughalen met de start- en eindhoeken van elke boog (zoals D.Bron.startangle en d.target.dangle ​Dit is de dataset die we leveren tijdens het maken van de hellingen.

We moeten de pixelposities van de onzichtbare lijn kennen die van het ene uiteinde van een akkoord naar de andere loopt. Deze worden vervolgens gebruikt om de x1, .., y2 attributen van elk verloop. We kunnen wat trigonometrie toepassen met behulp van de straal van het akkoorddiagram en de locatie halverwege langs de ARC van elke Avenger om deze posities terug te krijgen. De volledige trigonometrische formule is uit de volgende code verwijderd, maar u vindt het in De GitHub-repo die bij dit artikel vergezelt ​

Om een ​​unieke ID voor elk akkoord te maken, creëren wij een snaarcombinatie van de wijsindex van de Avenger aan elk uiteinde van een akkoord. D3's d3.layout.chord Stelt altijd één (van de Avengers) in op bron en de ander om doelwit , wat een uniek paar maakt. Later, bij het tekenen van de akkoorden, kunnen we dezelfde techniek gebruiken om het juiste verloop te bellen.

 Var Grades = SVG.APPEND ("DEFS"). Selectall ("lineargradient")
.data (akkoord.chords ())
.Entel (). Appd ("lineargradient")
.Atstr ("ID", functie (d) {return "GradientChord-" + D.Bron.
Index + "-" + d.target.index;​
.ATTR ("Gradientunits", "GebruikersPacEonuse")
// de pixellocatie van het ene uiteinde van een akkoord
.attr ("x1", functie (D, i) {return / * ... trigonometrie op basis van
D.Source-waarden ... * /;​
.attr ("Y1", functie (D, i) {return / * ... * /})
// de pixellocatie van het andere uiteinde van een akkoord
.attr ("x2", functie (D, i) {return / * ... * /})
.attr ("Y2", functie (D, i) {return / * ... * /}); 

Aangezien elke Avenger wordt gedefinieerd door zijn eigen indexnummer, kunnen we een kleurfunctie maken, kleuren , dat de kleur van elke wreker per indexwaarde retourneert. Dit maakt het gemakkelijk om naar de juiste kleur te verwijzen terwijl de twee kleurenhaltes aanmeldt.

 Grads.Ackd ("stop")
.attr ("offset", "0%")
.Atstr ("stop-color", functie (d) {return kleuren (D.Source.index);
​
Grad.Alled ("Stop")
.attr ("offset", "100%")
.attr ("stop-color", functie (d) {return kleuren (d.target.index);
}); 

Alles wat overblijft is om de juiste gradiënt-ID te bellen tijdens het instellen van de vulstijl van de akkoorden (met dezelfde functie als we gebruikten om de Gradiënt-ID in te stellen).

Afronden

Tijdens deze tutorial hebben we vier verschillende manieren bekeken om SVG-hellingen in gegevensvisualisaties te gebruiken, maar er zijn altijd meer dingen die u kunt doen. Met gradiëntanimaties zou u een stroom van het ene deel van de gegevensvisualisatie naar de andere kunnen simuleren, bijvoorbeeld.

Dus laat je je creativiteit je creativiteit vrij laten lopen. Met D3.JS hoef je niet te worden beperkt door wat je denkt, zijn de limieten van het gereedschap. Met een beetje out-of-the-box denken en inspanning, kun je de meest verbazingwekkende dingen maken.

Mis de sessie van Nadieh niet, SVG Beyond Mere Shapes, op Generate London, 21-23 september. Boek nu ​

Dit artikel verscheen oorspronkelijk in netto tijdschrift uitgave 280; koop het hier ​