D3.Js Tutorial: construirea grafice Interactive Bar cu JavaScript / @ RisingStack

Máté Huszárik

Inginer la RisingStack, interesat în JS, Golang, .NET Core.recent, am avut plăcerea de a participa la un proiect de învățare automată care implică biblioteci precum React și D3.J. S. Printre multe sarcini, am dezvoltat câteva diagrame care ajută la procesarea rezultatului modelelor ML, cum ar fi Bayes Naive, sub forma unei diagrame de linie sau a unei diagrame de bare grupate.,în acest articol, aș dori să prezint progresul meu cu D3.js până în prezent și arată utilizarea de bază a Bibliotecii prin exemplul simplu al unei diagrame de bare.după ce ați citit acest articol, veți învăța cum să creați D3.diagrame js ca aceasta cu ușurință:

codul sursă complet este disponibil aici.noi, cei de la RisingStack, suntem pasionați de ecosistemul JavaScript, de backend și de dezvoltarea front-end. Personal, sunt interesat de amândoi., Pe backend, pot vedea prin logica de afaceri care stau la baza unei aplicații în timp ce am, de asemenea, posibilitatea de a crea minunat caută lucruri pe front-end. Acolo E D3.js vine în imagine!

actualizare: o a 2-a parte a d3-ului meu.seria JS tutorial este disponibil, de asemenea: construirea unui D3.js Calendar Heatmap (pentru a vizualiza datele de Utilizare StackOverflow)

ce este D3.J. S.?

D3.js este o bibliotecă JavaScript bazată pe date pentru manipularea elementelor DOM.

” D3 vă ajută să aduceți date la viață folosind HTML, SVG și CSS., Accentul pus de D3 pe standardele web vă oferă capabilitățile complete ale browserelor moderne, fără a vă lega de un cadru propriu, combinând componente de vizualizare puternice și o abordare bazată pe date pentru manipularea DOM.”- d3js.org

De ce ați crea diagrame cu D3.js în primul rând? De ce nu afișa doar o imagine?Ei bine, diagramele se bazează pe informații provenite de la resurse terțe care necesită vizualizare dinamică în timpul randării. De asemenea, SVG este un instrument foarte puternic care se potrivește bine acestui caz de aplicație.,să facem un ocol pentru a vedea ce beneficii putem obține din utilizarea SVG.

beneficiile SVG

SVG standuri pentru Scalable Vector Graphics, care este punct de vedere tehnic un limbaj de marcare bazat XML.

este utilizat în mod obișnuit pentru a desena grafică vectorială, a specifica linii și forme sau a modifica imaginile existente. Puteți găsi lista elementelor disponibile aici.

Pros:

acceptat în toate browserele majore;
are interfață DOM, nu necesită lib terță parte;
scalabil, poate menține rezoluție înaltă;
dimensiune redusă în comparație cu alte formate de imagine.,

contra:

poate afișa doar imagini bidimensionale;
curba de învățare lungă;
randarea poate dura mult timp cu operații intensive de calcul.în ciuda dezavantajelor sale, SVG este un instrument excelent pentru a afișa pictograme, logo-uri, ilustrații sau, în acest caz, diagrame.

Noțiuni de bază cu D3.js

am ales graficul de bare pentru a începe, deoarece reprezintă un element vizual de complexitate scăzută în timp ce învață aplicarea de bază a D3.js în sine. Acest lucru nu ar trebui să vă înșele, D3 oferă un set excelent de instrumente pentru vizualizarea datelor., Check out pagina sa github pentru unele cazuri de utilizare foarte frumos!

o diagramă de bare poate fi orizontală sau verticală pe baza orientării sale. Voi merge cu cea verticală aka coloana diagramă.

În această diagramă, voi afișa primele 10 cele mai îndrăgite limbaje de programare bazate pe rezultatul sondajului dezvoltatorului Stack Overflow din 2018.
timp pentru a desena!SVG are un sistem de coordonate care pornește din colțul din stânga sus (0;0). Axa x pozitivă merge spre dreapta, în timp ce axa Y pozitivă se îndreaptă spre partea de jos., Astfel, înălțimea SVG trebuie luată în considerare atunci când vine vorba de calcularea coordonatei y a unui element.

asta e destul de verificare de fond, să scrie un cod!

vreau să creez o diagramă cu lățimea de 1000 de pixeli și înălțimea de 600 de pixeli.
```
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>
```
În fragmentul de cod de mai sus, am selectați create <svg> element în fișierul HTML cu d3 select. Această metodă de selecție acceptă tot felul de șiruri selector și returnează primul element de potrivire., Utilizați selectAll dacă doriți să le obțineți pe toate.

am defini, de asemenea, o valoare a marjei, care dă un pic de umplutură suplimentar la diagramă. Padding poate fi aplicat cu un element<g> tradus de valoarea dorită. De acum înainte, mă bazez pe acest grup pentru a păstra o distanță sănătoasă față de orice alt conținut al paginii.
```
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);
```
adăugarea de atribute la un element este la fel de ușor ca apelarea metodei attr. Primul parametru al metodei ia un atribut pe care vreau să-l aplic elementului DOM selectat., Al doilea parametru este valoarea sau o funcție de apel invers care returnează valoarea acesteia. Codul de mai sus mută pur și simplu începutul graficului în poziția (60;60) a SVG.
D3 acceptate.formate de intrare js

pentru a începe desenul, trebuie să definesc sursa de date de la care lucrez. Pentru acest tutorial, folosesc o matrice JavaScript simplu care deține obiecte cu numele limbilor și ratele lor procentuale, dar este important să menționăm că D3.JS suporta mai multe formate de date.

biblioteca are funcționalitate încorporată pentru a încărca de la XMLHttpRequest,.fișiere csv, fișiere text etc., Fiecare dintre aceste surse pot conține date care D3.js poate folosi, singurul lucru important este de a construi o matrice din ele. Rețineți că, de la versiunea 5.0 biblioteca folosește promisiuni în loc de callback-uri pentru încărcarea datelor, care este o schimbare compatibilă non-înapoi.

scalare, axe

să continuăm cu axele graficului. Pentru a desena axa y, trebuie să setez limita cea mai mică și cea mai mare valoare care în acest caz sunt 0 și 100.

lucrez cu procente în acest tutorial, dar există funcții utilitare pentru alte tipuri de date decât numerele pe care le voi explica mai târziu.,

trebuie să împart înălțimea graficului între aceste două valori în părți egale. Pentru aceasta, creez ceva care se numește funcție de scalare.
```
const yScale = d3.scaleLinear() .range() .domain();
```
scala liniară este cel mai cunoscut tip de scalare. Acesta convertește un domeniu de intrare continuă într-un interval de ieșire continuă. Observați metoda rangeși domain. Primul are lungimea care trebuie împărțită între limitele valorilor domeniului.,

rețineți că sistemul de coordonate SVG pornește din colțul din stânga sus, de aceea intervalul ia înălțimea ca primul parametru și nu zero.

crearea unei axe în stânga este la fel de simplă ca adăugarea unui alt grup și apelarea metodei axisLeft cu funcția de scalare ca parametru.
```
chart.append('g') .call(d3.axisLeft(yScale));
```
acum, continuați cu axa X.

Fie conștienți de faptul că eu folosesc scaleBand pentru axa x, care vă ajută să împărți intervalul în benzi și calcula coordonatele și lățimi de bare cu padding suplimentare.

D3.,js este, de asemenea, capabil să manipuleze tipul de dată printre multe altele. scaleTime este într-adevăr similar cu scaleLinear, cu excepția domeniului este aici o serie de date.

bare de desen în D3.JS

gândiți-vă la ce fel de intrare avem nevoie pentru a desena barele. Ele reprezintă fiecare o valoare care este ilustrată cu forme simple, în special dreptunghiuri. În următorul fragment de cod, le adaug la elementul de grup creat.

În primul rând, i selectAll elemente de pe diagramă care se întoarce cu un set de rezultate gol., Apoi, data funcție spune cât de multe elemente DOM ar trebui să fie actualizate cu bazat pe lungimea matrice. enter identifică elementele care lipsesc dacă introducerea datelor este mai lungă decât selecția. Aceasta returnează o nouă selecție reprezentând elementele care trebuie adăugate. De obicei, aceasta este urmată de un append care adaugă elemente la DOM.

practic, spun D3.js pentru a adăuga un dreptunghi pentru fiecare membru al matrice.

acum, aceasta adaugă doar dreptunghiuri una peste alta, care nu au înălțime sau lățime., Aceste două atribute trebuie să fie calculate și acolo funcțiile de scalare vin din nou la îndemână.

vezi, adaug coordonatele dreptunghiurilor cu apelul attr. Al doilea parametru poate fi un apel invers care are 3 parametri: membrul real al datelor de intrare, indicele acestuia și întreaga intrare.
```
.attr(’x’, (actual, index, array) => xScale(actual.value))
```
funcția de scalare returnează coordonata pentru o anumită valoare de domeniu. Calcularea coordonatelor este o bucată de tort, trucul este cu înălțimea barei., Coordonata y calculată trebuie scăzută din înălțimea graficului pentru a obține reprezentarea corectă a valorii ca coloană.

definesc lățimea dreptunghiurilor și cu funcția de scalare. scaleBandare o funcțiebandwidth care returnează lățimea calculată pentru un element pe baza set padding.

frumos loc de muncă, dar nu atât de fantezie, nu?pentru a preveni sângerarea ochilor publicului nostru, să adăugăm câteva informații și să îmbunătățim imaginile!, 😉

Sfaturi pentru a face diagrame de bare

există câteva reguli de bază cu diagrame de bare care merită menționate.
- evitați utilizarea efectelor 3D;
- ordonați punctele de date intuitiv – alfabetic sau sortate;
- păstrați distanța dintre benzi;
- începeți axa y la 0 și nu cu cea mai mică valoare;
- utilizați culori consistente;
- Adăugați etichete de axă, titlu, linie sursă.
D3.js Grid System

vreau să evidențiez valorile adăugând linii de grilă în fundal.,mergeți mai departe, experimentați cu linii verticale și orizontale, dar sfatul meu este să afișați doar una dintre ele. Liniile excesive pot distrage atenția. Acest fragment de cod prezintă modul de adăugare a ambelor soluții.

prefer liniile de grilă verticale în acest caz, deoarece acestea conduc ochii și păstrează imaginea de ansamblu simplă și simplă.

etichete în D3.js

de asemenea, doresc să fac diagrama mai cuprinzătoare prin adăugarea unor îndrumări textuale. Să dăm un nume graficului și să adăugăm etichete pentru axe.,

textele sunt elemente SVG care pot fi anexate la SVG sau grupuri. Acestea pot fi poziționate cu coordonatele x și y, în timp ce alinierea textului se face cu atributul text-anchor. Pentru a adăuga eticheta în sine, trebuie doar să apelați metoda text pe elementul de text.

interactivitate cu D3.js

avem o diagramă destul de informativă, dar totuși, există posibilități de a o face interactivă.

în următorul bloc de cod vă arăt cum să adăugați ascultători de evenimente la elementele SVG.,

rețineți că folosesc expresia funcției în loc de o funcție săgeată, deoarece accesez elementul prin cuvântul cheiethis.

am setat opacitatea elementului SVG selectat la jumătate din valoarea inițială pe cursorul mouse-ului și resetați-l atunci când cursorul părăsește zona.de asemenea, puteți obține coordonatele mouse-ului cu d3.mouse. Returnează o matrice cu coordonata x și Y. În acest fel, afișarea unui tooltip la vârful cursorului nu ar fi deloc o problemă.

crearea de diagrame ochi-popping nu este o formă de artă ușor.,s-ar putea să fie nevoie de înțelepciunea designerilor grafici, a cercetătorilor UX și a altor creaturi puternice. În exemplul următor, voi arăta câteva posibilități de a vă stimula graficul!

am valori foarte similare afișate pe diagramă, astfel încât pentru a evidenția divergențele dintre valorile barei, am configurat un ascultător de evenimente pentru evenimentul mouseenter. De fiecare dată când utilizatorul trece peste o anumită coloană, o linie orizontală este trasată deasupra barei respective. Mai mult, calculez și diferențele în comparație cu celelalte benzi și le afișez pe bare.,

destul de curat, nu-i asa? De asemenea, am adăugat exemplul de opacitate la acesta și am mărit lățimea barei.

metoda transition indică faptul că vreau să animez modificările la DOM. Intervalul său este setat cu funcția duration care ia milisecunde ca argumente. Această tranziție de mai sus estompează culoarea benzii și lărgi lățimea barei.pentru a desena o linie SVG, am nevoie de un punct de pornire și de destinație., Acest lucru poate fi stabilit prin x1, y1 și x2, y2 coordonate. Linia nu va fi vizibilă până când nu setez culoarea acesteia cu atributul stroke.

am dezvăluit doar o parte din evenimentul mouseenter aici, așa că rețineți că trebuie să reveniți sau să eliminați modificările din evenimentul mouseout. Codul sursă complet este disponibil la sfârșitul articolului.

să adăugăm un stil în diagramă!,

Să vedem ce am realizat până acum și cum putem scutura această diagramă cu un anumit stil. Puteți adăuga atribute de clasă elementelor SVG cu aceeași funcție attr pe care am folosit-o înainte.diagrama are un set frumos de funcționalități. În loc de o imagine plictisitoare, statică, aceasta dezvăluie, de asemenea, divergențele dintre valorile reprezentate pe mouse-ul. Titlul pune graficul în context, iar etichetele ajută la identificarea axelor cu unitatea de măsură. De asemenea, adaug o nouă etichetă în colțul din dreapta jos pentru a marca sursa de intrare.,

singurul lucru rămas este să actualizați culorile și fonturile!diagramele cu fundal întunecat fac ca barele colorate să arate cool. De asemenea, am aplicat familia de fonturi Open Sans la toate textele și am setat dimensiunea și greutatea pentru diferitele etichete.

observați că linia a fost întreruptă? Se poate face prin setarea atributelor stroke-width și stroke-dasharray. Cu stroke-dasharray, puteți defini modelul de liniuțe și goluri care modifică conturul formei.

linii de grilă în cazul în care acesta devine complicat., Trebuie să aplic stroke-width: 0 elementelor de cale din grup pentru a ascunde cadrul diagramei și, de asemenea, le reduc vizibilitatea setând opacitatea liniilor.toate celelalte reguli css acoperă dimensiunile și culorile fontului pe care le puteți găsi în codul sursă.

înfășurarea D3 – ului nostru.js Bar diagramă Tutorial

D3.js este o bibliotecă uimitoare pentru manipularea DOM. Adâncimea ascunde nenumărate comori ascunse (de fapt nu ascunse, este foarte bine documentată) care așteaptă descoperirea., Această scriere acoperă doar fragmente din setul său de instrumente care ajută la crearea unei diagrame de bare nu atât de mediocre.

Continuați, explorați-l, utilizați-l și creați vizualizări spectaculoase!