Ingeniør ved RisingStack, interessert i JS, Golang, .NETTO Kjerne.
Nylig, vi hadde gleden av å delta i en maskin læring prosjekt som innebærer biblioteker som Reagerer og D3.js. Blant mange oppgaver, utviklet jeg noen diagrammer som hjelp for å bearbeide resultatet av ML-modeller som Naive Bayes i form av et linjediagram eller gruppert stolpediagram.,
I denne artikkelen ønsker jeg å presentere min fremgang med D3.js så langt, og vise grunnleggende bruk av biblioteket gjennom den enkle eksempel på et stolpediagram.
Etter å ha lest denne artikkelen, vil du lære hvordan å lage D3.js diagrammer som dette enkelt:
full kildekode er tilgjengelig her.
Vi på RisingStack er glad i JavaScript økosystem, backend, og front-end utvikling, så vel. Personlig, jeg er interessert i dem begge., På backend, jeg kan se gjennom de underliggende virksomhet logikken i et program mens jeg også ha muligheten til å lage fantastisk jakt ting på front-end. Det er der D3.js kommer inn i bildet!
Oppdater: en 2. del av min d3.js tutorial-serien er tilgjengelig som tillegg: å Bygge en D3.js Kalender Heatmap (for å visualisere StackOverflow bruksdata)
Hva er D3.js?
D3.js er en data-drevet JavaScript-biblioteket for å manipulere DOM-elementer.
«D3 hjelper deg med å hente data til livet ved hjelp av HTML, SVG og CSS., D3 vekt på web-standarder gir deg alle muligheter i moderne nettlesere uten å binde deg til en proprietær rammeverk som kombinerer kraftig visualisering komponenter og en data-drevet tilnærming til DOM-manipulasjon.»- d3js.org
Hvorfor ville Du lage diagrammer med D3.js i første omgang? Hvorfor ikke bare vise et bilde?
Vel, diagrammer er basert på informasjon fra tredjepart ressurser som krever dynamisk visualisering under render tid. Også, SVG er et svært kraftig verktøy som passer godt til dette programmet tilfelle.,
La oss ta en avstikker for å se hvilke fordeler vi kan få fra å bruke SVG.
fordelene av SVG
SVG står for Scalable Vector Grafikk som er teknisk sett en XML-basert markup language.
Det er vanligvis brukes til å tegne vektorgrafikk, angi linjer og former, eller endre eksisterende bilder. Du kan finne listen over tilgjengelige elementer her.
Fordeler:
- Støttes i alle de store nettleserne;
- Det har DOM grensesnitt, krever ingen tredjeparts lib;
- Skalerbar, det kan opprettholde høy oppløsning;
- Redusert størrelse i forhold til andre bildeformater.,
Ulemper:
- Det kan bare vise to-dimensjonale bilder;
- Lang læringskurve;
- Render kan det ta lang tid med prosesserings-intensiv drift.
til Tross for sine ulemper, SVG er et flott verktøy for å vise ikoner, logoer, illustrasjoner eller i dette tilfellet, diagrammer.
Komme i gang med D3.js
jeg plukket stolpediagram for å komme i gang fordi det representerer en lav kompleksitet visuelt element, mens det lærer de grunnleggende anvendelse av D3.js seg selv. Dette bør ikke lure Deg, D3 gir et flott utvalg av verktøy for å visualisere data., Sjekk ut sin github-side for noen virkelig fine å bruke tilfeller!
Et stolpediagram kan være horisontal eller vertikal, basert på sin retning. Jeg vil gå med den vertikale en aka Kolonne i diagrammet.
På dette diagrammet, jeg kommer til å vise de 10 mest populære programmeringsspråk basert på Stack Overflow ‘ s 2018 Utvikler Undersøkelse resultat.
Tid til å tegne!
SVG har et koordinatsystem som starter øverst i venstre hjørne (0;0). Positive x-aksen går til høyre, mens den positive y-aksen hoder til bunnen., Dermed høyde av SVG må tas i betraktning når det gjelder å beregne y-koordinaten for et element.
Det er nok bakgrunnen sjekk, la oss skrive noen kode!
jeg ønsker å opprette en tabell med 1000 punkter bredde og 600 piksler høyde.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>I kodebiten over, jeg velger opprettet <svg> – element i HTML-filen med d3 select. Dette utvalget metode aksepterer alle slags selector strenger og returnerer det første samsvarende element., Bruk selectAll hvis Du ønsker å få alle av dem.
jeg vil også definere en margin verdi som gir litt ekstra polstring til kartet. Polstringen kan brukes med en <g> – element oversatt av ønsket verdi. Fra nå av, jeg trekke på denne gruppen for å holde en sunn avstand fra ethvert annet innhold på siden.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);å Legge til egenskaper til et element er like enkelt som å kalle attr metode. Metoden er den første parameteren tar en egenskap som jeg vil bruke for den valgte DOM-element., Den andre parameteren er verdien eller en callback-funksjon som returnerer verdien av det. Koden ovenfor enkelt flytte starten av diagrammet til (60;60) plassering av SVG.
Støttes D3.js-inngang formater
for å begynne Å tegne, jeg trenger å definere datakilde jeg jobber fra. For denne opplæringen, jeg bruker en vanlig JavaScript-array som inneholder objekter med navn på språk og deres prosentvise priser, men det er viktig å nevne at D3.js støtter flere dataformater.
biblioteket har innebygd funksjonalitet for å legge fra XMLHttpRequest, .csv-filer, tekst-filer etc., Hver av disse kildene som kan inneholde data som D3.js kan bruke, det eneste viktige er å konstruere en matrise ut av dem. Merk at fra versjon 5.0 biblioteket bruker løfter i stedet for tilbakering for å laste dataene som er en non-bakover-kompatibel endre.
Skalering, Økser
La oss gå videre med aksene i diagrammet. For å trekke y-aksen, jeg trenger å sette den laveste og høyeste verdi grense, som i dette tilfellet er 0 og 100.
jeg arbeider med prosenter i denne opplæringen, men det er verktøyet funksjoner for datatyper andre enn tall som jeg vil forklare senere.,
jeg har å dele høyde av diagrammet mellom disse to verdiene i like deler. For dette, kan jeg skape noe som kalles en skalering-funksjonen.
const yScale = d3.scaleLinear() .range() .domain();Lineær skala som er den mest kjente skalering type. Den konverterer en kontinuerlig innspill domene i en kontinuerlig produksjon utvalg. Legg merke til range og domain metode. Den første tar den lengden som bør være delt mellom grensene for domenet verdier.,
Husk, SVG koordinatsystem starter fra øverst til venstre, som er grunnen til at serien tar høyde som første parameter og ikke null.
Opprette en aksen på venstre side er så enkelt som å legge en annen gruppe og telefoni d3 er axisLeft metode med skalering-funksjonen som en parameter.
chart.append('g') .call(d3.axisLeft(yScale));Nå, fortsetter du med x-aksen.
Vær oppmerksom på at jeg bruker scaleBand for x-aksen som bidrar til å splitte området i band og beregne koordinater og bredder av barer med ekstra polstring.
D3.,js er også i stand til å håndtere dato type blant mange andre. scaleTime er veldig lik scaleLinear bortsett fra domenet er her et utvalg av datoer.
Tegning Barer i D3.js
Tenk på hva slags input vi trenger å trekke barer. De representerer en verdi som er illustrert med enkle former, spesielt rektangler. I neste kodebiten, kan jeg legge dem til laget gruppe-element.
Først, jeg selectAll – elementer på kartet som er tilbake med et tomt resultat., Deretter data funksjon forteller hvor mange elementer DOM bør oppdateres med basert på utvalg lengde. enter identifiserer elementer som mangler hvis inndata er lenger enn utvalget. Dette gir et nytt utvalg som representerer elementene som må legges til. Vanligvis, dette er etterfulgt av en append som legger til elementer til DOM.
i Utgangspunktet, forteller jeg D3.js for å legge til et rektangel for hvert medlem av gruppen.
Nå, dette bare legger rektangler på toppen av hverandre, og dette har ikke høyde eller bredde., Disse to attributter må bli beregnet, og det er der skalering funksjoner komme godt igjen.
Se, jeg legger koordinatene av rektangler med attr anrop. Den andre parameteren kan være en tilbakeringing som tar 3 parametre: den faktiske medlem av input data, indeks for det, og hele inngang.
.attr(’x’, (actual, index, array) => xScale(actual.value))skalering-funksjonen returnerer koordinering-for et gitt domene verdi. Å beregne koordinatene er en bit av kaken, er trikset med høyden på bar., De beregnede y-koordinaten har til å bli trukket fra høyden av diagrammet for å få riktig representasjon av verdi som en kolonne.
jeg definerer bredden av rektangler med skalering-funksjonen, så vel. scaleBand er en bandwidth funksjon som returnerer den beregnede bredde for en del basert på settet polstring.
Fin jobb, men ikke så fancy, ikke sant?
for Å hindre at vårt publikum fra øyet blødning, la oss legge til litt info og forbedre det visuelle!, 😉
Tips om å lage bar diagrammer
Det er noen grunnregler med bar diagrammer som er verdt å nevne.
- Unngå å bruke 3D-effekter;
- For data poeng intuitivt – alfabetisk eller sortert;
- Hold avstand mellom båndene;
- Start y-aksen på 0 og ikke med lavest verdi;
- Bruk konsekvente farger;
- Legg til aksen etiketter, tittel, kildekode linje.
D3.js-Grid-System
jeg ønsker å markere verdier ved å legge til rutenett linjer i bakgrunnen.,
Gå videre, eksperimentere med både vertikale og horisontale linjer, men mitt råd er å vise bare én av dem. Overdreven linjer kan være distraherende. Denne kodebiten presenterer hvordan å legge begge løsninger.
jeg foretrekker den vertikale linjer linjer i denne saken fordi de fører øynene og holde det generelle bildet ren og enkel.
Etiketter i D3.js
jeg ønsker også å gjøre diagrammet mer omfattende ved å legge til noen tekstlig veiledning. La oss gi et navn til diagrammet, og legg til etiketter for aksene.,
Tekster er SVG elementer som kan brukes for å SVG eller grupper. De kan være plassert med x-og y-koordinatene, mens tekstjustering er gjort med text-anchor attributtet. Å legge etiketten seg selv, bare ring text metode på tekst-element.
Interaktivitet med D3.js
– Vi fikk en ganske informativ diagram, men fortsatt er det muligheter for å gjøre det interaktive også.
I den neste koden blokkere jeg vise Deg hvordan å legge arrangementet lyttere til SVG elementer.,
Merk at jeg bruker funksjonen uttrykk i stedet for en pil funksjon fordi jeg tilgang til elementet via this søkeord.
jeg sette opacity for den valgte SVG-element til halvparten av den opprinnelige verdien på mus hover og tilbakestille det når markøren forlater området.
Du kan også få musen koordinater med d3.mouse. Den returnerer en matrise med x-og y-koordinaten. På denne måten, er å vise et verktøytips på tuppen av markøren ville være noe problem i det hele tatt.
Opprette oppsiktsvekkende diagrammer er ikke en enkel form for kunst.,
En kan kreve visdom grafiske designere, UX, forskere og andre mektige vesener. I følgende eksempel skal jeg vise noen av mulighetene til å øke Din figur!
jeg har veldig lik verdiene som vises på kartet, så for å markere forskjeller blant de bar verdier, setter jeg opp en hendelse som lytter til mouseenter event. Hver gang brukeren svever over et bestemt en kolonne, en horisontal linje trukket på toppen av det bar. Videre er jeg også beregne forskjeller i forhold til andre band og vise det på barer.,
Ganske ryddig, ikke sant? Jeg har også lagt opacity eksempel til dette, og økt bredde i baren.
transition metoden indikerer at jeg ønsker å animere endringer til DOM. Dens intervallet er sett med duration funksjon som tar millisekunder som argumenter. Denne overgangen over fades bandet farge og utvide bredden på bar.
Hvis du vil tegne en SVG-linje, jeg trenger en start-og målpunkt., Dette kan bli sett via x1, y1 og x2, y2 koordinater. Linjen vil ikke være synlige før jeg setter de farge på det med stroke attributtet.
jeg bare avslørt en del av mouseenter event her så husk, Du har å tilbakestille eller fjerne endringer på mouseout event. Full kildekode er tilgjengelig på slutten av artikkelen.
La oss Legge til Litt Stil til Oversikten!,
La oss se hva vi har oppnådd så langt, og hvordan kan vi riste opp denne oversikten med en viss stil. Du kan legge til klasse attributter til SVG elementer med samme attr funksjon vi brukte før.
diagrammet har en hyggelig sett med funksjonalitet. I stedet for et kjedelig, statisk bilde, det viser også forskjeller blant de representerte verdier på mus hover. Tittelen legger kartet inn i en sammenheng og etiketter bidra til å identifisere akser med måleenhet. Jeg også legge til en ny etikett til nederst i høyre hjørne for å markere kilden.,
Det eneste som gjenstår er å oppgradere farger og fonter!
Diagrammer med mørk bakgrunn gjør den lyse stolper se kul. Jeg har også brukt Open Sans skrifttype til alle tekster og angi størrelse og vekt for ulike etiketter.
har Du merke linjen fikk knust? Det kan gjøres ved å sette stroke-width og stroke-dasharray egenskaper. Med stroke-dasharray, kan Du definere mønster av bindestreker og mellomrom som endrer omrisset av figuren.
Rutenett linjer der det blir vanskelig., Jeg nødt til å bruke stroke-width: 0 til bane elementer i gruppen for å skjule rammen av diagrammet, og jeg vil også redusere deres synlighet ved å sette opacity på linjene.
Alle de andre css-regler dekke skriftstørrelser og farger som Du kan finne i kildekoden.
Innpakning opp våre D3.js stolpediagram Opplæringen
D3.js er en fantastisk bibliotek for DOM-manipulasjon. Dybden av det skjuler utallige skjulte (faktisk ikke er skjult, det er virkelig godt dokumentert) skatter som venter på discovery., Dette skriver dekker bare fragmenter av sin verktøy som bidrar til å skape en ikke så middelmådig stolpediagram.
Gå på, utforske det, bruke det og lage spektakulære effekter!