de Mandi Cai

Cartografierea apelor (pct. 2): o comparație a bibliotecilor de cartografiere JavaScript

O scufundare profundă în D3.js, Dygraphs, Chart.js și Google Charts

Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Codul pentru diagramele pe care le-am creat în imaginea antetului este activat GitHub.

Când am început să creez diagrame și să vizualizez date, singurele lucruri pe care le știam erau „Luați în considerare Pânză pentru seturi de date mari ”și„D3 este magic”. Habar n-aveam că există un întreg ecosistem de biblioteci de cartografiere. Aceste biblioteci sunt gratuite, disponibile și complete cu exemple și documentație.

Mai important, fiecare bibliotecă are propriile sale argumente pro și contra în ceea ce privește varietatea de diagrame, curba de învățare, nivelul de personalizare și interactivitatea imediată. Deci, cum se decide?

În acest articol, voi compara câteva biblioteci populare de diagramă JavaScript D3.js, Dygraphs, Chart.js, și Google Charts. Așteptați să aflați cum să creați o diagramă JavaScript, o comparație la nivel înalt între biblioteci a factorilor menționați anterior (varietate de diagrame, personalizare etc.) și cazul de utilizare pe care îl consider cel mai potrivit pentru fiecare bibliotecă de diagrame.

Dar mai întâi, o introducere rapidă a motivului pentru care vizualizarea datelor devine din ce în ce mai importantă. Sunteți binevenit să treceți la comparația side-by-side (Ctrl+F „Să comparăm!”).

0*ZhBuvIhsgEOET25q
0* pP 224BUyY5ZhEY
Sursă: Upshot, Ritmul alimentelor, și Stai, dar de ce

De ce să graficăm și să vizualizăm datele?

M-am gândit întotdeauna la vizualizarea datelor ca la o modalitate mai bună de a învăța și angajează o audienta. Nu toată lumea este firească să absoarbă informații prin text. Ochii mei strălucesc când încerc să extrag cifre dintr-un bloc de cuvinte. Textul presupune, de asemenea, că ești familiarizat cu limba în care este scris. M-am luptat cu lecturile manualelor la facultate. Este plauzibil ca vorbitorii de limbi străine să nu aibă probleme.

Alternativ, ori de câte ori am dat peste o diagramă frumoasă și clarificatoare în mijlocul grămezilor de informații, am înțeles imediat conceptele și le-am amintit și mai bine.

Mintea noastră nu este conectată pentru a înțelege rapid și temeinic bucăți mari de text sau grămezi de rânduri Excel. Dar ceea ce excelează este să recunoască similitudinea, simetria, conexiunile dintre obiecte și continuitatea, care sunt fundamentele vizualizării datelor. Gândiți-vă la principiile Gestalt.

Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere
Principiile Gestalt (Sursa: FusionCharts)

Iată un fragment din câteva date din Biroul de Statistică a Muncii despre ratele șomajului din județele SUA (reprezentate printr-un cod FIPS) în 2016.

1611190871 672 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere
Sursă: Biroul de Statistică a Muncii

Pentru a observa tendințele sau a surprinde valorile aberante, o persoană medie ar petrece o cantitate semnificativă de timp privind aceste date. Ei pot scana fiecare rând și re-scrie cifre pe o altă foaie de hârtie. Nu ideal.

Dar dacă vizualizăm datele ca pe o hartă geografică, așa cum a făcut Mike Bostock în al său Caiet observabil:

0*u9tFdrMr4u gLJqU
Sursă: D3 Cloroplet

Puteți vedea imediat puncte fierbinți pentru șomaj mai mare. În loc de ore, acum ați detectat modele interesante în secunde. Această diferență de timp pentru a înțelege poate însemna diferența dintre renunțarea la un set de date aparent „de neînțeles” sau, alternativ, continuându-vă ancheta. Crearea de vizualizări precise și accesibile le permite, de asemenea, spectatorilor să prindă inconsecvențe sau găuri în setul de date, care ține datele mai responsabile.

Anatomia unei diagrame

Înainte de a intra în comparația bibliotecii, cred că „anatomia” de bază a unei diagrame JavaScript justifică o privire de ansamblu. În timp ce lucram prin aceste biblioteci, am observat că toți, cu excepția D3 *, au adoptat același model pentru generarea graficelor.

  1. Importați biblioteca de diagrame în HTML.
  2. Creeaza o <div> cu un identificator de identificare, cum ar fi „prima mea diagramă”.
  3. Preluați și încărcați date în JS. De asemenea, puteți defini datele direct în JS. Asigurați-vă că ați conectat acest fișier JS în HTML.
  4. Transmiteți datele <div> container și un obiect opțiuni la o funcție generator de diagrame.
  5. Unele biblioteci, cum ar fi Google Charts, necesită apel draw() pentru a desena graficul generat.
  6. Serviți codul pe un server Python cu http-server -c-1 -p 8000 și vedeți prima dvs. diagramă la localhost:8000.

Exemple

* D3 a fost utilizat în principal pentru graficare, dar este mai mult o colecție de seturi de instrumente decât biblioteca dvs. standard de graficare. Vedea Acest articol pentru o explicație mai bună.

Să comparăm!

Când aleg orice bibliotecă, îmi place să încep cu următoarele întrebări de evaluare:

  • Care este curba de învățare? (calitatea documentației, complexitatea codului)
  • Cât îmi pot personaliza graficele?
  • Biblioteca este susținută activ?
  • Ce tipuri de date ia această bibliotecă?
  • Ce moduri de interactivitate sunt oferite?
  • Biblioteca oferă diagrame receptive?

Curbă de învățare

1611190872 248 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Dygraphs, Chart.js și Google Charts au curbe de învățare relativ mici. Sunt minunate dacă trebuie să bifați graficele în câteva ore.

D3 are cea mai înaltă curbă de învățare, iar motivul pentru aceasta este controlul cu cereale fine și de nivel scăzut pe care îl oferă. Este mai mult o bibliotecă bine scrisă de funcții de asistență avansate. D3 poate fi teoretic utilizat împreună cu alte biblioteci de diagrame.

Pentru a explora puțin mai departe, am creat același grafic în toate cele 4 biblioteci folosind datele meteo din Boston meteoblue. Codul este activat GitHub.

1611190873 120 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere
Rândul superior: D3, Dygraphs, Rândul inferior: Chart.js, Google Charts

…. și a înregistrat liniile de cod necesare pentru a face fiecare diagramă:

1611190873 443 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Liniile de cod acceptă comparația originală a curbelor de învățare. D3 are nevoie de mai multe linii pentru a pune în funcțiune o diagramă de bază, dar oferă mai multe oportunități de personalizare.

Personalizare

1611190874 209 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

D3 strălucește în arena de personalizare. Granularitatea și modularitatea lui D3 este exact motivul pentru care proiectanții și dezvoltatorii îl favorizează ca mijloc pentru vizualizări uimitoare și unice. Chart.js și Google Charts oferă numeroase opțiuni care pot fi transmise într-o funcție generator, cum ar fi dimensiunea fontului legendă și grosimea unei linii.

Dezvoltare activă

1611190874 902 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Definesc dezvoltarea bibliotecii ca fiind frecvența lansărilor și sensibilitatea întreținătorilor bibliotecii la problemele deschise și feedback-ul pentru îmbunătățire. O comunitate extinsă și solidară de utilizatori este, de asemenea, un plus. Utilizarea încurajează schimbarea sănătoasă și responsabilitatea pe măsură ce ecosistemul JavaScript evoluează.

Privind respectivele depozite GitHub, am descoperit versiunile și am rezolvat problemele pentru ca Dygraphs și Google Charts să fie mai sporadice decât D3 și Chart.js. D3 nu se va opri în dezvoltare în curând. Creatorul și colaboratorii săi au lansat recent o versiune majoră (v5.0) în 2018. Încă contribuie activ la comunitatea de vizualizare. Cea mai recentă versiune a Chart.js a avut loc, de asemenea, destul de recent în 2018. Versiunea a abordat probleme și îmbunătățiri. Acestea sunt documentate temeinic în notele de lansare.

Tipuri de date

1611190874 705 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Acest lucru vorbește de la sine. Fapt amuzant: am folosit D3-uri preluați biblioteca pentru a prelua date. Am folosit alte biblioteci pentru a-l grafica. D3 are funcții de preluare pentru aproape toate formatele de date obișnuite utilizate în vizualizarea datelor.

Interactivitate

1611190875 460 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Dygraphs, Chart.js și Google Charts au toate funcții de interactivitate prealabilă, cum ar fi sfaturi despre instrumente, zoom și evenimente. Este dificil să introduci interacțiuni foarte personalizate, deoarece fiecare bibliotecă este atât de încapsulată. Cu D3, acceptați că sunt posibile interacțiuni complicate și unice. Compensația este o interacțiune simplă, ca un vârf de instrument, care trebuie, de asemenea, să fie construită de la bază.

Sensibilitate

1611190875 106 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere

Chart.js și D3 oferă diagrame receptive imediat (pentru D3, specificați un viewBox in loc de width și height pentru svg container). Dygraphs și Google Charts au nevoie de o muncă suplimentară pentru a crea diagrame receptive, cum ar fi adăugarea position: relative la containerul graficului sau redesenarea graficului pe $(window).resize().

Dygraphs responsive chart (inspectați containerele grafice pentru a vedea clasele CSS)

Firul Google Chart Stack Overflow thread

Cel mai bine folosit pentru?

Nu în ultimul rând, am enumerat cazul de utilizare pentru care cred că fiecare bibliotecă este cea mai potrivită pentru:

1611190875 697 Cartografierea apelor pct 2 o comparatie a bibliotecilor de cartografiere
Toate capturile de ecran preluate din secțiunea de exemple respective a fiecărei biblioteci

D3 merită să investești timp în tine a) au nevoie de o vizualizare foarte personalizată și / sau b) doresc ca funcțiile de asistență să fie utilizate împreună cu alte biblioteci.

M-am bucurat de Dygraphs pentru seriile cronologice, deoarece utilizatorul poate parcurge seria și vezi data și punctul corespunzător în mod implicit. Poti de asemenea evidențiați perioade specifice de timp și selectați intervale de timp.

Chart.js vă permite să creați simplu, estetic plăcut diagrame care apar în pagină perfect la încărcare.

În cele din urmă, Google Charts a oferit cea mai mare varietate de diagrame out-of-the-box, comparativ cu celelalte biblioteci. Pe lângă graficele standard, Google Charts acceptă, de asemenea hărți geografice, hărți de copaci, diagrame sankey, etc.

3, 2, 1 … recapitulare!

Am acoperit numeroasele motive de ce vizualizarea datelor este puternică, structura de bază și pașii pentru a crea o diagramă utilizând o bibliotecă de diagrame și un comparație joc cu joc din 4 biblioteci JavaScript populare.

Cel mai important pas după ce ați selectat o bibliotecă și ați generat câteva vizualizări este să comunica, și apoi repeta. Arătați diagramele altora și întrebați-i ce pot și ce nu pot interpreta. Ascultați feedback-ul lor și continuați să vă îmbunătățiți graficele. Acestea sunt instrumente de predare, iar instrumentele de predare ar trebui să evolueze constant cu conținutul și spectatorii.

Mulțumesc că ai citit!

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Codul pentru diagramele pe care le-am creat sunt activate GitHub.

Aici sunt diapozitive de prezentare care a dus la acest articol.

Dacă doriți să citiți despre Bokeh și D3, verificați Graficarea apelor: între Bokeh și D3.

Dacă aveți sugestii sau feedback, trimiteți un comentariu.