ingeniør hos RisingStack, interesseret i JS, Golang,. net Core.
for nylig havde vi fornøjelsen af at deltage i et maskinlæringsprojekt, der involverer biblioteker som React og D3.js. Blandt mange opgaver udviklede jeg få diagrammer, der hjælper med at behandle resultatet af ML-modeller som Naive Bayes i form af et linjediagram eller grupperet søjlediagram.,
i denne artikel vil jeg gerne præsentere mine fremskridt med D3.js hidtil og viser den grundlæggende brug af biblioteket gennem det enkle eksempel på et søjlediagram.
efter at have læst denne artikel lærer du, hvordan du opretter D3.js-diagrammer som dette let:
den fulde kildekode er tilgængelig her.
vi hos RisingStack er også glade for JavaScript-økosystemet, backend og front-end-udviklingen. Personligt er jeg interesseret i dem begge., På backend kan jeg se gennem den underliggende forretningslogik i en applikation, mens jeg også har mulighed for at skabe fantastiske flotte ting på front-end. Det er her D3.js kommer ind i billedet!
opdatering: en 2.del af min d3.js tutorial serien er også tilgængelig: opbygning af en D3.js kalender Heatmap (for at visualisere Stackoverflo.brugsdata)
Hvad er D3.js?
D3.js er en data-drevet JavaScript bibliotek til at manipulere DOM elementer.
“D3 hjælper dig med at bringe data til liv ved hjælp af HTML, SVG og CSS., D3S vægt på webebstandarder giver dig de fulde muligheder for moderne bro .sere uden at binde dig selv til en proprietær ramme, der kombinerer kraftfulde visualiseringskomponenter og en datadrevet tilgang til DOM-manipulation.”- d3js.org
hvorfor skulle du oprette diagrammer med D3.js i første omgang? Hvorfor ikke bare vise et billede?
Nå, diagrammer er baseret på oplysninger, der kommer fra tredjeparts ressourcer, som kræver dynamisk visualisering under render tid. SVG er også et meget kraftfuldt værktøj, der passer godt til denne applikationssag.,
lad os tage en omvej for at se, hvilke fordele vi kan få ved at bruge SVG.
fordelene ved SVG
SVG står for skalerbar vektorgrafik, som teknisk set er et .ml-baseret markeringssprog.
det bruges ofte til at tegne vektorgrafik, angive linjer og figurer eller ændre eksisterende billeder. Du kan finde listen over tilgængelige elementer her.
fordele:
- understøttet i alle større bro .sere;
- det har DOM-interface, kræver ingen tredjeparts lib;
- skalerbar, det kan opretholde høj opløsning;
- reduceret størrelse sammenlignet med andre billedformater.,
ulemper:
- det kan kun vise todimensionelle billeder;
- Lang indlæringskurve;
- Render kan tage lang tid med computerintensive operationer.
På trods af dets ulemper er SVG et godt værktøj til at vise ikoner, logoer, illustrationer eller i dette tilfælde diagrammer.
Kom godt i gang med D3.js
Jeg valgte søjlediagram for at komme i gang, fordi det repræsenterer et visuelt element med lav kompleksitet, mens det lærer den grundlæggende anvendelse af D3.js selv. Dette bør ikke bedrage dig, D3 giver et godt sæt værktøjer til at visualisere data., Tjek sin github side for nogle virkelig nice use cases!
et søjlediagram kan være vandret eller lodret baseret på dets orientering. Jeg vil gå med den lodrette aka kolonne diagram.
På dette diagram vil jeg vise de 10 mest elskede programmeringssprog baseret på Stack Overflo .s 2018 Developer Survey resultat.
tid til at tegne!
SVG har et koordinatsystem, der starter fra øverste venstre hjørne (0;0). Positiv axis-akse går til højre, mens den positive y-akse leder til bunden., Således skal højden af SVG tages i betragtning, når det kommer til beregning af Y-koordinaten for et element.
det er nok baggrundskontrol, lad os skrive noget kode!
Jeg vil oprette et diagram med 1000 pi .els bredde og 600 pi .els højde.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>i kodestykket ovenfor vælger jeg det oprettede <svg>element i HTML-filen med d3 select. Denne valgmetode accepterer alle slags vælgerstrenge og returnerer det første matchende element., Brug selectAll hvis du gerne vil have dem alle.
jeg definerer også en marginværdi, der giver lidt ekstra polstring til diagrammet. Polstring kan påføres med et<g> element oversat af den ønskede værdi. Fra nu af trækker jeg på denne gruppe for at holde en sund afstand fra ethvert andet indhold på siden.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);tilføjelse af attributter til et element er lige så let som at kalde attr metoden. Metodens første parameter tager en attribut, jeg vil anvende på det valgte DOM-element., Den anden parameter er værdien eller en tilbagekaldsfunktion, der returnerer værdien af den. Koden ovenfor blot flytter starten af diagrammet til (60;60) position af SVG.
understøttet D3.js input formater
for at begynde at tegne, skal jeg definere den datakilde, jeg arbejder fra. Til denne tutorial bruger jeg et almindeligt JavaScript-array, der indeholder objekter med navnet på sprogene og deres procentvise satser, men det er vigtigt at nævne D3.js understøtter flere dataformater.
biblioteket har indbygget funktionalitet til at indlæse fra .mlhttpre .uest, .csv-filer, tekstfiler osv., Hver af disse kilder kan indeholde data, D3.js kan bruge, det eneste vigtige er at konstruere en Matri.ud af dem. Bemærk, at biblioteket fra version 5.0 bruger løfter i stedet for tilbagekald til indlæsning af data, hvilket er en ikke-bagudkompatibel ændring.
skalering, akser
lad os fortsætte med akserne i diagrammet. For at tegne y-aksen skal jeg indstille den laveste og den højeste værdigrænse, som i dette tilfælde er 0 og 100.
Jeg arbejder med procenter i denne tutorial, men der er hjælpefunktioner til andre datatyper end tal, som jeg vil forklare senere.,
Jeg er nødt til at opdele højden af diagrammet mellem disse to værdier i lige store dele. Til dette skaber jeg noget, der kaldes en skaleringsfunktion.
const yScale = d3.scaleLinear() .range() .domain();lineær skala er den mest kendte skaleringstype. Det konverterer et kontinuerligt inputdomæne til et kontinuerligt outputområde. Bemærk range og domain metoden. Den første tager den længde, der skal opdeles mellem grænserne for domæneværdierne.,
Husk, at SVG-koordinatsystemet starter fra øverste venstre hjørne, hvorfor området tager højden som den første parameter og ikke nul.
oprettelse af en akse til venstre er så simpelt som at tilføje en anden gruppe og kalde d3 ‘ saxisLeft metode med skaleringsfunktionen som parameter.
chart.append('g') .call(d3.axisLeft(yScale));fortsæt nu med axis-aksen.
Vær opmærksom på, at jeg bruger scaleBand til axis-aksen, som hjælper med at opdele området i bånd og beregne koordinaterne og bredderne af søjlerne med yderligere polstring.
D3.,js er også i stand til at håndtere datotype blandt mange andre. scaleTime ligner virkelig scaleLinear undtagen domænet er her en række datoer.
Tegnestænger i D3.JS
tænk på, hvilken slags input vi har brug for for at tegne stængerne. De repræsenterer hver især en værdi, der er illustreret med enkle former, specifikt rektangler. I det næste kodestykke tilføjer jeg dem til det oprettede gruppeelement.
først, i selectAll elementer på diagrammet, der vender tilbage med et tomt resultatsæt., Derefter, data funktion fortæller, hvor mange elementer DOM skal opdateres med baseret på array længde. enter identificerer elementer, der mangler, hvis dataindgangen er længere end markeringen. Dette returnerer et nyt valg, der repræsenterer de elementer, der skal tilføjes. Normalt efterfølges dette af en append, der tilføjer elementer til DOM.
grundlæggende fortæller jeg D3.js at tilføje et rektangel for hvert medlem af arrayet.
nu tilføjer dette kun rektangler oven på hinanden, som ikke har nogen højde eller bredde., Disse to attributter skal beregnes, og det er her skaleringsfunktionerne kommer godt med igen.
Se, jeg tilføjer koordinaterne for rektanglerne medattr opkald. Den anden parameter kan være et tilbagekald, der tager 3 parametre: det faktiske medlem af inputdataene, indekset for det og hele input.
.attr(’x’, (actual, index, array) => xScale(actual.value))skaleringsfunktionen returnerer koordinaten for en given domæneværdi. Beregning af koordinaterne er et stykke kage, tricket er med barens højde., Den beregnede y koordinat skal trækkes fra højden af diagrammet for at få den korrekte repræsentation af værdien som en kolonne.
jeg definerer bredden af rektanglerne med skaleringsfunktionen også. scaleBand har enbandwidth funktion, der returnerer den beregnede bredde for et element baseret på den indstillede polstring.
Nice job, men ikke så fancy, ikke?
for at forhindre vores publikum i øjenblødning, lad os tilføje nogle oplysninger og forbedre det visuelle!, 😉
tip til oprettelse af søjlediagrammer
Der er nogle grundregler med søjlediagrammer, der er værd at nævne.
- undgå at bruge 3D-effekter;
- Bestil datapunkter intuitivt – alfabetisk eller sorteret;
- hold afstanden mellem båndene;
- Start y-akse ved 0 og ikke med den laveste værdi;
- brug konsistente farver;
- Tilføj akseetiketter, Titel, kildelinje.
D3.js Grid System
Jeg vil fremhæve værdierne ved at tilføje gitterlinjer i baggrunden.,
gå videre, eksperimentere med både lodrette og vandrette linjer, men mit råd er kun at vise en af dem. Overdreven linjer kan være distraherende. Denne kodestykke præsenterer, hvordan du tilføjer begge løsninger.
Jeg foretrækker de lodrette gitterlinjer i dette tilfælde, fordi de fører øjnene og holder det samlede billede almindeligt og enkelt.
etiketter i D3.js
Jeg vil også gøre diagrammet mere omfattende ved at tilføje nogle tekstvejledninger. Lad os give et navn til diagrammet og tilføje etiketter til akserne.,
tekster er SVG-elementer, der kan føjes til SVG eller grupper. De kan placeres med coordinates-og y-koordinater, mens tekstjustering udføres med attributtentext-anchor. For at tilføje selve etiketten skal du bare ringe text metode på tekstelementet.
interaktivitet med D3.js
Vi fik et ret informativt diagram, men der er stadig muligheder for at gøre det interaktivt også.
i den næste kodeblok viser jeg dig, hvordan du tilføjer begivenhedslyttere til SVG-elementer.,
Bemærk, at jeg bruger funktionsudtryk i stedet for en pilefunktion, fordi jeg får adgang til elementet via this nøgleord.
Jeg indstiller opaciteten for det valgte SVG-element til halvdelen af den oprindelige værdi på musemarkøren og nulstiller det, når markøren forlader området.
Du kan også få musekoordinaterne med d3.mouse. Det returnerer et array med coordinate og y koordinat. På denne måde ville det ikke være noget problem at vise et værktøjstip på spidsen af markøren.
oprettelse af iøjnefaldende diagrammer er ikke en nem kunstform.,
man kan kræve visdom af grafiske designere, u. – forskere og andre mægtige væsener. I det følgende eksempel vil jeg vise et par muligheder for at øge dit diagram!
jeg har meget lignende værdier, der vises på diagrammet, så for at fremhæve forskellene mellem bjælkeværdierne opretter jeg en hændelseslytter til mouseenter begivenhed. Hver gang brugeren svæver over en bestemt A-kolonne, tegnes en vandret linje oven på denne bjælke. Desuden beregner jeg også forskellene i forhold til de andre bånd og viser det på stængerne.,
temmelig pæn, huh? Jeg tilføjede også opacity-eksemplet til denne og øgede bredden af linjen.
transition metoden angiver, at jeg vil animere ændringer til DOM. Dens interval er indstillet med funktionen duration, der tager millisekunder som argumenter. Denne overgang over svinder bandet farve og udvide bredden af baren.
for at tegne en SVG-linje har jeg brug for en start og et destinationspunkt., Dette kan indstilles via x1, y1 og x2, y2 koordinater. Linjen vil ikke være synlig, før jeg indstiller farven på den med attributten stroke.
jeg afslørede kun en del af mouseenter begivenhed her, så husk, du skal vende tilbage eller fjerne ændringerne på mouseout begivenhed. Den fulde kildekode er tilgængelig i slutningen af artiklen.
lad os tilføje nogle stil til diagrammet!,
lad os se, hvad vi har opnået indtil videre, og hvordan kan vi ryste dette diagram op med en vis stil. Du kan tilføje klasseattributter til SVG-elementer med den samme attr funktion, vi brugte før.
diagrammet har et godt sæt funktionalitet. I stedet for et kedeligt, statisk billede afslører det også forskellene mellem de repræsenterede værdier på musens hover. Titlen sætter diagrammet i sammenhæng, og etiketterne hjælper med at identificere akserne med måleenheden. Jeg tilføjer også en ny etiket i nederste højre hjørne for at markere indgangskilden.,
det eneste, der er tilbage, er at opgradere farver og skrifttyper!
diagrammer med mørk baggrund gør de lyse farvede bjælker ser cool. Jeg anvendte ogsåOpen Sans fontfamilien til alle tekster og indstillet størrelse og vægt for de forskellige etiketter.
bemærker du, at linjen blev stiplet? Det kan gøres ved at indstillestroke-width ogstroke-dasharray attributter. Med stroke-dasharray kan du definere mønster af bindestreger og huller, der ændrer formens kontur.
gitterlinjer, hvor det bliver vanskeligt., Jeg skal anvende stroke-width: 0 til stielementer i gruppen for at skjule rammen af diagrammet, og jeg reducerer også deres synlighed ved at indstille opaciteten af linjerne.
alle de andre CSS regler dækker skriftstørrelser og farver, som du kan finde i kildekoden.
indpakning af vores D3.JS Bar Chart Tutorial
D3.js er et fantastisk bibliotek til DOM manipulation. Dybden af det skjuler utallige skjulte (faktisk ikke skjult, det er virkelig veldokumenteret) skatte, der venter på opdagelse., Denne skrivning dækker kun fragmenter af sit værktøjssæt, der hjælper med at skabe et ikke så middelmådigt søjlediagram.
gå videre, udforske det, bruge det og skabe spektakulære visualiseringer!