ingenieur bij RisingStack, geïnteresseerd in JS, Golang,. net Core.
onlangs hadden we het genoegen om deel te nemen aan een machine learning project waarbij bibliotheken als React en D3 betrokken zijn.js. Onder de vele taken heb ik enkele grafieken ontwikkeld die helpen om het resultaat van ML-modellen zoals naïeve Bayes te verwerken in de vorm van een lijndiagram of gegroepeerd staafdiagram.,
In dit artikel wil ik mijn voortgang met D3 presenteren.js tot nu toe en toon het basisgebruik van de bibliotheek door het eenvoudige voorbeeld van een staafdiagram.
na het lezen van dit artikel, leert u hoe u D3 maakt.js-diagrammen zijn eenvoudig als volgt:
de volledige broncode is hier beschikbaar.
bij RisingStack zijn we ook dol op het JavaScript ecosysteem, backend en front-end ontwikkeling. Persoonlijk ben ik in beide geïnteresseerd., Op de backend, ik kan zien door de onderliggende business logica van een applicatie, terwijl ik ook de mogelijkheid om geweldig uitziende dingen te maken op de front-end. Dat is waar D3.js komt in beeld!
Update: een tweede deel van mijn d3.js tutorial series is ook beschikbaar: het bouwen van een D3.js Calendar Heatmap (om StackOverflow gebruiksgegevens te visualiseren)
Wat is D3.js?
D3.js is een data-driven JavaScript-bibliotheek voor het manipuleren van DOM-elementen.
” D3 helpt u gegevens tot leven te brengen met behulp van HTML, SVG en CSS., D3 ‘ s nadruk op webstandaarden geeft u de volledige mogelijkheden van moderne browsers zonder jezelf te binden aan een eigen framework, een combinatie van krachtige visualisatiecomponenten en een data-gedreven benadering van DOM manipulatie.”- d3js.org
waarom zou u grafieken maken met D3.js in de eerste plaats? Waarom niet gewoon een afbeelding weergeven?
grafieken zijn gebaseerd op informatie afkomstig van bronnen van derden die dynamische visualisatie vereist tijdens de rendertijd. Ook SVG is een zeer krachtige tool die goed past bij deze toepassing geval.,
laten we een omweg nemen om te zien welke voordelen we kunnen krijgen van het gebruik van SVG.
de voordelen van SVG
SVG staat voor Scalable Vector Graphics wat technisch gezien een op XML gebaseerde opmaaktaal is.
het wordt vaak gebruikt om vectorafbeeldingen te tekenen, lijnen en vormen te specificeren of bestaande afbeeldingen te wijzigen. De lijst met beschikbare elementen vindt u hier.
voors:
- ondersteund in alle belangrijke browsers;
- het heeft een DOM-interface, vereist geen lib van derden;
- schaalbaar, het kan een hoge resolutie behouden;
- kleiner in vergelijking met andere afbeeldingsformaten.,
Cons:
- Het kan alleen tweedimensionale afbeeldingen weergeven;
- lange leercurve;
- Render kan lang duren bij rekenintensieve bewerkingen.
ondanks de nadelen is SVG een geweldig hulpmiddel om pictogrammen, logo ‘ s, illustraties of in dit geval grafieken weer te geven.
aan de slag met D3.js
Ik koos staafdiagram om te beginnen omdat het een visueel element met een lage complexiteit vertegenwoordigt terwijl het de basistoepassing van D3 leert.js zelf. Dit moet u niet misleiden, D3 biedt een grote set van tools om gegevens te visualiseren., Bekijk de github pagina voor een aantal echt leuke use cases!
een staafdiagram kan horizontaal of verticaal zijn op basis van de oriëntatie. Ik zal gaan met de verticale een aka kolom Grafiek.
in dit diagram ga ik de top 10 meest geliefde programmeertalen weergeven op basis van het resultaat van de Ontwikkelaarsenquête van Stack Overflow in 2018.
tijd om te tekenen!
SVG heeft een coördinatenstelsel dat begint in de linkerbovenhoek (0;0). De positieve x-as gaat naar rechts, terwijl de positieve y-as naar de bodem gaat., De hoogte van de SVG moet dus in aanmerking worden genomen bij het berekenen van de Y-coördinaat van een element.
dat is genoeg achtergrond check, laten we wat code schrijven!
Ik wil een grafiek maken met een breedte van 1000 pixels en een hoogte van 600 pixels.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>in het codefragment hierboven selecteer ik het aangemaakte <svg> element in het HTML-bestand met d3 select. Deze selectiemethode accepteert alle soorten selectorstrings en geeft het eerste overeenkomende element terug., Gebruik selectAll Als u ze allemaal wilt krijgen.
ik definieer ook een marge waarde die een beetje extra opvulling geeft aan de grafiek. Padding kan worden toegepast met een<g> element vertaald door de gewenste waarde. Vanaf nu gebruik ik deze groep om een gezonde afstand te houden van alle andere inhoud van de pagina.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);attributen toevoegen aan een element is net zo eenvoudig als het aanroepen van deattr methode. De eerste parameter van de methode neemt een attribuut dat ik op het geselecteerde DOM-element wil toepassen., De tweede parameter is de waarde of een callback functie die de waarde ervan retourneert. De bovenstaande code verplaatst eenvoudig het begin van de grafiek naar de (60;60) positie van de SVG.
ondersteunde D3.js invoerformaten
om te beginnen met tekenen, moet ik de gegevensbron definiëren waar ik mee werk. Voor deze tutorial gebruik ik een gewone JavaScript-array die objecten bevat met de naam van de talen en hun percentages, maar het is belangrijk om die D3 te vermelden.js ondersteunt meerdere dataformaten.
de bibliotheek heeft ingebouwde functionaliteit om vanuit XMLHttpRequest te laden .csv-bestanden, tekstbestanden etc., Elk van deze bronnen kan gegevens bevatten die D3.js kan gebruiken, het enige belangrijke ding is om een array uit hen te construeren. Merk op dat vanaf versie 5.0 de bibliotheek promises gebruikt in plaats van callbacks voor het laden van gegevens, wat een niet-achterwaarts compatibele wijziging is.
schalen, Assen
laten we doorgaan met de assen van de grafiek. Om de y-as te tekenen, moet ik de laagste en de hoogste waarde limiet instellen die in dit geval 0 en 100 zijn.
Ik werk met percentages in deze tutorial, maar er zijn nutsfuncties voor andere gegevenstypen dan getallen die ik later zal uitleggen.,
Ik moet de hoogte van de grafiek tussen deze twee waarden in gelijke delen splitsen. Hiervoor creëer ik iets dat een schaling functie wordt genoemd.
const yScale = d3.scaleLinear() .range() .domain();lineaire schaal is het meest bekende schaaltype. Het Converteert een continu invoerdomein naar een continu uitvoerbereik. Let op de range en domain methode. De eerste neemt de lengte die moet worden verdeeld tussen de grenzen van de domeinwaarden.,
onthoud dat het SVG coördinatenstelsel begint in de linkerbovenhoek. daarom neemt het bereik de hoogte als eerste parameter en niet nul.
het aanmaken van een as aan de linkerkant is zo eenvoudig als het toevoegen van een andere groep en het aanroepen van D3 ‘ s axisLeft methode met de scaling functie als parameter.
chart.append('g') .call(d3.axisLeft(yScale));ga nu verder met de x-as.
Houd er rekening mee dat ik scaleBand gebruik voor de x-as die helpt om het bereik op te splitsen in banden en de coördinaten en breedtes van de staven te berekenen met extra opvulling.
D3.,js is ook in staat om de behandeling van datum type onder vele anderen. scaleTime is echt vergelijkbaar met scaleLinear behalve het domein is hier een array van datums.
Tekenbalken in D3.js
denk na over wat voor soort input we nodig hebben om de maten te tekenen. Ze vertegenwoordigen elk een waarde die wordt geïllustreerd met eenvoudige vormen, in het bijzonder rechthoeken. In het volgende codefragment voeg ik ze toe aan het gemaakte groepselement.
eerst, I selectAll elementen op de grafiek die retourneert met een lege resultatenreeks., Dan, data functie vertelt met hoeveel elementen de DOM moet worden bijgewerkt op basis van de array lengte. enter identificeert elementen die ontbreken als de gegevensinvoer langer is dan de selectie. Dit geeft een nieuwe selectie terug die de elementen weergeeft die moeten worden toegevoegd. Meestal wordt dit gevolgd door een append die elementen toevoegt aan het DOM.
In Principe vertel ik D3.js om een rechthoek toe te voegen voor elk lid van de array.
nu voegt dit alleen rechthoeken bovenop elkaar toe die geen hoogte of breedte hebben., Deze twee attributen moeten worden berekend en dat is waar de scaling functies weer van pas komen.
Zie, Ik voeg de coördinaten van de rechthoeken toe met de attr aanroep. De tweede parameter kan een callback zijn die 3 parameters neemt: het werkelijke lid van de invoergegevens, de index ervan en de gehele invoer.
.attr(’x’, (actual, index, array) => xScale(actual.value))de scaling functie geeft de coördinaat voor een gegeven domeinwaarde terug. Het berekenen van de coördinaten is een fluitje van een cent, de truc is met de hoogte van de balk., De berekende y-coördinaat moet worden afgetrokken van de hoogte van het diagram om de juiste weergave van de waarde als een kolom te krijgen.
ik definieer ook de breedte van de rechthoeken met de scaling functie. scaleBand heeft een bandwidth functie die de berekende breedte voor één element retourneert op basis van de set padding.
mooi werk, maar niet zo mooi, toch?
om te voorkomen dat ons publiek oogbloedingen krijgt, Laten we wat info toevoegen en de beelden verbeteren!, 😉
Tips voor het maken van staafdiagrammen
Er zijn enkele basisregels met staafdiagrammen die het vermelden waard zijn.
- vermijd het gebruik van 3D-effecten;
- gegevenspunten intuïtief – alfabetisch of gesorteerd;
- afstand tussen de banden behouden;
- Start de y-as op 0 en niet met de laagste waarde;
- gebruik consistente kleuren;
- voeg aslabels, titel en bronregel toe.
D3.js rastersysteem
Ik wil de waarden markeren door rasterlijnen op de achtergrond toe te voegen.,
ga je gang, experimenteer met zowel verticale als horizontale lijnen, maar mijn advies is om slechts een van hen weer te geven. Overmatige lijnen kunnen storend zijn. Dit codefragment laat zien hoe je beide oplossingen kunt toevoegen.
Ik geef de voorkeur aan de verticale rasterlijnen in dit geval omdat ze de ogen leiden en het totale beeld eenvoudig houden.
Labels in D3.js
Ik wil het diagram ook uitgebreider maken door wat tekstuele richtlijnen toe te voegen. Laten we een naam geven aan het diagram en labels toevoegen voor de assen.,
teksten zijn SVG-elementen die aan de SVG of groepen kunnen worden toegevoegd. Ze kunnen worden gepositioneerd met x-en y-coördinaten, terwijl tekstuitlijning wordt gedaan met het text-anchor attribuut. Om het label zelf toe te voegen, gebruik je gewoon text methode op het tekstelement.
interactiviteit met D3.js
we hebben een vrij informatieve grafiek, maar toch zijn er mogelijkheden om het interactief te maken.
In het volgende codeblok laat ik u zien hoe u event listeners kunt toevoegen aan SVG-elementen.,
merk op dat ik functieuitdrukking gebruik in plaats van een pijlfunctie omdat ik toegang heb tot het element viathis sleutelwoord.
Ik stel de dekking van het geselecteerde SVG-element in op de helft van de oorspronkelijke waarde bij de muisaanwijzer en reset het als de cursor het gebied verlaat.
u kunt ook de muiscoördinaten krijgen met d3.mouse. Het geeft een array terug met de x-en y-coördinaat. Op deze manier zou het weergeven van een tooltip aan de punt van de cursor helemaal geen probleem zijn.
eye-popping diagrammen maken is geen eenvoudige kunstvorm.,
men zou de wijsheid van grafisch ontwerpers, UX-onderzoekers en andere machtige wezens nodig kunnen hebben. In het volgende voorbeeld laat ik een paar mogelijkheden zien om je grafiek te vergroten!
Ik heb zeer vergelijkbare waarden weergegeven op de grafiek, dus om de verschillen tussen de staafwaarden te markeren, heb ik een gebeurtenisluisteraar ingesteld voor de mouseenter gebeurtenis. Elke keer dat de gebruiker over een specifieke kolom zweeft, wordt er een horizontale lijn bovenop die balk getrokken. Verder bereken ik ook de verschillen ten opzichte van de andere bands en toon het op de balken.,
vrij netjes, hè? Ik heb ook het voorbeeld van de dekking toegevoegd aan deze en de breedte van de balk vergroot.
detransition methode geeft aan dat ik wijzigingen in de DOM wil animeren. Het interval wordt ingesteld met de functie duration die milliseconden als argumenten neemt. Deze overgang hierboven vervaagt de bandkleur en verbreedt de breedte van de balk.
om een SVG-lijn te tekenen, heb ik een begin-en een doelpunt nodig., Dit kan worden ingesteld via dex1,y1 enx2,y2 coördinaten. De regel zal niet zichtbaar zijn totdat ik de kleur ervan instel met het stroke attribuut.
Ik onthulde slechts een deel van de mouseenter gebeurtenis hier dus houd in gedachten, je moet de wijzigingen op de mouseout gebeurtenis terugdraaien of verwijderen. De volledige broncode is beschikbaar aan het einde van het artikel.
laten we wat stijl toevoegen aan de grafiek!,
laten we eens kijken wat we tot nu toe hebben bereikt en hoe we deze grafiek met enige stijl kunnen opschudden. U kunt class attributen toevoegen aan SVG-elementen met dezelfde attr functie die we eerder hebben gebruikt.
het diagram heeft een mooie set functionaliteit. In plaats van een saai, statisch beeld, onthult het ook de verschillen tussen de vertegenwoordigde waarden op de muis hover. De titel zet de grafiek in context en de labels helpen om de assen te identificeren met de meeteenheid. Ik voeg ook een nieuw label toe aan de rechterbenedenhoek om de invoerbron te markeren.,
het enige wat overblijft is om de kleuren en lettertypen te upgraden!
grafieken met donkere achtergrond maken de helder gekleurde balken er cool uitzien. Ik heb ook de Open Sans lettertypefamilie toegepast op alle teksten en de grootte en het gewicht voor de verschillende labels ingesteld.
merkt u dat de regel onderbroken is? Dit kan worden gedaan door de attributen stroke-width en stroke-dasharray in te stellen. Met stroke-dasharray kunt u het patroon van streepjes en gaten definiëren die de omtrek van de vorm veranderen.
rasterlijnen waar het lastig wordt., Ik moet stroke-width: 0 toepassen op padelementen in de groep om het frame van het diagram te verbergen en ik verminder ook hun zichtbaarheid door de dekking van de regels in te stellen.
alle andere css-regels hebben betrekking op de lettergroottes en kleuren die u kunt vinden in de broncode.
onze D3 afsluiten.js staafdiagram Tutorial
D3.js is een geweldige bibliotheek voor Dom manipulatie. De diepte van het verbergt talloze verborgen (eigenlijk niet Verborgen, het is echt goed gedocumenteerd) schatten die wachten op ontdekking., Dit schrijven behandelt alleen fragmenten van de toolset die helpen om een niet zo middelmatige staafdiagram te maken.
ga door, verken het, gebruik het en maak spectaculaire visualisaties!