de Mandi Cai

Graficarea apelor intre Bokeh si D3

Graficarea apelor: între Bokeh și D3

Introducere

Vine un moment în viața unui „low-key, dar și high-key”, care încearcă să devină un designer și dezvoltator front-end, când trebuie să intre în lumea bibliotecilor grafice.

1611990793 545 Graficarea apelor intre Bokeh si D3
Navigarea în apele * neexplorate

Bibliotecile grafice produc vizualizări bazate pe date. Acestea sunt motivul pentru care puteți înțelege rapid tendințele speranței de viață FiveThirtyEight sau măsurați sentimentul național cu privire la viitoarele alegeri prezidențiale (yikes) pe New York Times.

Gândiți-vă la diagramele pe care le puteți crea în interior Foi de calcul Google, cu excepția acum, aveți drepturi de vizualizare și editare directe la biblioteca care le conduce diagrame. Sunteți stăpânul acestor elemente de bază de nivel scăzut care constituie o „diagramă”.

Mai multe biblioteci de grafice sunt scrise în JavaScript, un limbaj care este mai familiar dezvoltatorilor de web decât majoritatea, ceea ce face ca învățarea lor să fie un lucru mai puțin descurajant. Când sunt executate corect, bibliotecile de graficare au puterea de a trimite acasă un mesaj puternic și vă oferă posibilitatea de a vedea bomboane vizuale serioase.

Recent, echipa noastră a primit sarcina de a crea o interfață care trebuia să integreze o bibliotecă de diagrame pentru a îndeplini obiectivul. Ca urmare, a trebuit să decidem asupra unei biblioteci care să satisfacă cazurile noastre specifice de utilizare. Dacă îți cântărești corect nevoile și alegi o bibliotecă care să le satisfacă cumva pe toate, viața este de aur.

Cu toate acestea, bibliotecile nu sunt niciodată o afacere unică. Cel mai adesea, presupunerea inițială că o bibliotecă este potrivirea perfectă va fi incorectă din cauza obstacolelor neprevăzute care apar.

1611990794 236 Graficarea apelor intre Bokeh si D3
Când nimic nu funcționa

Poate vă gândiți: „Care sunt acele opțiuni?”, „Cum ați abordat alegerea unei opțiuni?” sau „De ce te-ai simțit prost?” (se referă la mesajul Slack de mai sus).

Acest articol va descrie procesul nostru de alegere a unei biblioteci de diagrame printre nenumăratele biblioteci de diagrame JavaScript disponibile în prezent, decizia critică de a comuta între două biblioteci de diagrame (Bokeh și D3.js), și avantajele și dezavantajele fiecăruia. Pentru mine, acesta a fost un teritoriu „neexplorat” și, dacă simțiți același lucru despre graficarea bibliotecilor sau vizualizarea datelor în general, vă veți simți mai bine după ce ați citit acest lucru.

Sa incepem!

De ce am încercat mai întâi Bokeh

Nevoile noastre s-au împărțit în două tabere: viteză și interactivitate. Deoarece manipulam cantități mai mari de date, vizualizarea noastră a trebuit să fie capabilă să se actualizeze la viteza fulgerului (sau cel puțin la o viteză care nu a avut nici un decalaj perceptibil).

Aplicația noastră trebuia, de asemenea, să aibă interactivitatea dorită pe care o imaginam pentru utilizator. Într-un scenariu ideal, biblioteca ar include deja unele dintre aceste funcții interactive pe care le-am putea arunca cu ușurință, în loc să le scriem de la zero.

introduce Bokeh.

Despre Bokeh

Bokeh este o bibliotecă destinată în principal creării de vizualizări în browser din seturi de date mari sau în flux. Creați aceste vizualizări folosind Python. Apoi a lui Bokeh API JavaScript preia scriptul Python și redă graficele sau diagramele, în plus față de gestionarea interacțiunilor UI din browser.

De asemenea, puteți alege să utilizați serverul Bokeh pentru a gestiona transmiterea de date. În Bokeh 0.12.13 documentație, afirmă: „Această capacitate de sincronizare între python și browser este scopul principal al serverului Bokeh.”

1611990794 4 Graficarea apelor intre Bokeh si D3
Imagine sursă

Avantaje

Bokeh este magic din mai multe motive. Redă mai întâi utilizarea WebGL cu o rezervă HTML5 Canvas, oferă mai multe instrumente încorporate pentru a interacționa cu diagrame, gestionează seturi de date extrem de mari și, în cele din urmă, creează ceva care poate intra pe web imediat.

Abilitatea de a naviga între Python și JavaScript este, de asemenea, incredibil de puternică pentru graficare, deoarece Python vă permite să accesați structura de date utilă și instrumentele de analiză a datelor, în timp ce JavaScript traduce datele manipulate în vizualizări prietenoase cu browserul.

Dezavantaje

Un dezavantaj pentru Bokeh este însă că este limitat în gradul de interactivitate pe care îl poate avea o vizualizare. Bokeh vă permite să „desenați” în sensul mai convențional – oferă o pânză 2-D, asemănătoare grilei, cu axele ca linie de bază. Și este în regulă, pentru că de multe ori asta are nevoie și dorește utilizatorul. Utilizatorii Bokeh cu experiență pot face lucruri cu adevărat frumoase (vezi exemple Aici).

Dar dacă aș vrea să fac o vizualizare care să depășească caracteristicile convenționale ale unei diagrame, cum ar fi simularea forțelor între atomi și tragerea atomilor în jur, nu știu cum aș realiza asta în Bokeh.

Bokeh este, de asemenea, destinat dezvoltării în Python, nu JavaScript. Mai jos sunt exemple de diagrame în Bokeh folosind Python. Este super simplu și curat.

Bokeh Barchart folosind Python (prin Jupyter Notebook)

1611990794 184 Graficarea apelor intre Bokeh si D3

Înainte de a începe să folosim Bokeh, am luat decizia conștientă de a crea un script în JavaScript în loc de Python, deoarece întreaga noastră aplicație web a fost și este construită pe un cadru JavaScript. Nicio documentație Bokeh nu este în JavaScript (este în Python, așa cum v-ați aștepta), și încercarea de a intra sub capota JavaScript s-a dovedit dificilă.

Dacă lucrați cu glifuri de nivel scăzut, este adevărat că orice posibil în Python este posibil în JavaScript cu Bokeh. Cu toate acestea, dacă abia ați început să învățați ambele limbi ca și mine, traducerea sintaxei între cele două nu este intuitivă.

În plus, există limitări la JavaScript de nivel înalt Bokeh.Charts și Bokeh.Plotting API – unele sunt învechite, altele îți fac foarte greu să schimbi caracteristicile complotului. Exemplele de mai jos sunt încercările mele de a crea parcele Bokeh în JavaScript.

Bokeh Barchart la nivel scăzut folosind Javascript

Bokeh Barchart la nivel înalt folosind Bokeh.Charts Javascript API

Mai multe despre dezvoltarea în JavaScript cu Bokeh Aici. După cum puteți vedea, JavaScript cu biblioteca lui Bokeh pierde liniile de cod mai simple pe care le-am observat atunci când ne dezvoltăm cu Python. Cred că a durat aproximativ o oră de lăutare în consolă pentru a adăuga un contur alb în bare și un titlu în graficul meu la nivel înalt, care reiterează lupta mea de a naviga în afara granițelor Bokeh.Charts JavaScript API când doriți să modificați detaliile vizuale ale graficului.

În cele din urmă, există mai multă documentație și utilizarea activă a altor biblioteci de graficare, ca D3.js sau three.js, comparativ cu Bokeh. Cu colaboratorii mai activi și utilizatorii unei biblioteci vine un probabilitate mai mare de a găsi soluția de care aveți nevoie pentru a remedia o anumită eroare.

1611990795 491 Graficarea apelor intre Bokeh si D3
61.501 rezultate pentru D3 pe Stack Overflow
1611990795 361 Graficarea apelor intre Bokeh si D3
24,126 rezultate pentru three.js pe Stack Overflow
1611990795 207 Graficarea apelor intre Bokeh si D3
3.405 rezultate pentru Bokeh on Stack Overflow

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

De ce am trecut la D3

Așa că am rămas blocați. Ajunsesem la punctul „această bibliotecă se potrivește cu nevoile noastre, dar este o durere să continuăm să facem lucruri în JavaScript și poate că vom atinge plafonul într-o zi când ne dăm seama că avem nevoie de ceva care nu este disponibil în Bokeh chiar acum.” Misto.

introduce D3.

Preocuparea noastră inițială cu D3 a fost că ne va reda vizualizările prea încet, având în vedere experiențele anterioare cu redarea SVG-urilor în browser cu cantități mai mari de date. Știam, de asemenea, că curba de învățare pentru D3 era semnificativ mai mare decât curba de învățare a lui Bokeh.

Dar eram încă optimisti având în vedere popularitatea D3, cantitatea infinită de aplicații D3 frumos documentate și atitudinea noastră „Obțineți Sh * t Done” … așa că am decis să încercăm oricum.

1611990796 311 Graficarea apelor intre Bokeh si D3
Obțineți rahatul Tyler Somers

Despre D3

D3.js este o bibliotecă JavaScript care pune accentul pe legarea datelor. Vă oferă puterea unică de a genera elemente în DOM și de a lega date / date de elemente simultan. Cu o bibliotecă complet bazată pe date, puteți adăuga elemente dinamic atunci când adăugați sau eliminați puncte de date și treceți între seturile de date. D3 oferă, de asemenea, mai mult control asupra esteticii și interactivității rezultatului final, ceea ce înseamnă că puteți scăpa de a crea cel mai mult vizualizări bizare / minunate.

Avantaje

Spre surprinderea noastră, vizualizările D3 pe care le-am creat cu seturile noastre de date au fost foarte unt. Ne-am dat seama rapid că D3 este structurat special pentru redarea rapidă, în ciuda matricelor masive pe care le transmiteam în bibliotecă.

În loc să transmiteți punctele de date unul câte unul și să generați SVG-ul respectiv, care poate fi destul de obositor, D3 vă permite să legați întregul set de date de SVG-urile dvs. înainte de a exista. SVG-urile sunt apoi generate cu foc rapid și asociate cu punctele lor de date respective dintr-o dată.

Este ca un bucătar din bucătărie care primește o listă de comenzi dintr-o dată și poate prepara mâncarea într-o comandă care omite timpul de așteptare inutil, mai degrabă decât să aștepte întotdeauna să primească următoarea comandă după pregătirea unui fel de mâncare.

1611990796 636 Graficarea apelor intre Bokeh si D3
1611990797 977 Graficarea apelor intre Bokeh si D3
Vizualizarea legării datelor la elementele DOM din Mike Bostock’s explicație privind selecțiile D3

Cea mai bună parte despre D3 este că oferă oportunități ample pentru interacțiuni și tranziții fluide între seturile de date. Deoarece obiectivul nostru final a fost și este de a împuternici utilizatorul, am dorit să creăm o vizualizare care să invite o persoană să se angajeze cu el.

D3 este, de asemenea, destinat dezvoltării JavaScript. Nu ar mai exista „săpat sub capotă” al API-ului JavaScript așa cum făceam cu Bokeh. Exemplul de diagrame pe care l-am creat folosind BokehJS anterior în acest articol este prezentat mai jos folosind biblioteca D3.

D3 Barchart

Da, există linii de cod mai complexe în comparație cu codul necesar pentru o diagramă Bokeh. A fost nevoie de mai mult timp și energie pentru a ridica. Dar aveți un control complet asupra fiecare mic detaliu al diagramei și totul este documentat undeva online (probabil prin intermediul creatorului, Mike Bostock). Este destul de grozav.

În cele din urmă, a existat o utilizare extinsă a D3 în ultimii ani pentru a vizualiza Alegerile SUA din 2017, mișcarea populațiilor de refugiați, ratele de vaccinare la sugari pentru OMS, și nenumărate alte tendințe și povești. Drept urmare, D3 a obținut un semnificativ expunerea și atenția, ceea ce duce la utilizatori mai activi și la noi modalități de utilizare a bibliotecii în fiecare zi.

Atunci când alegeți o bibliotecă pe termen lung și aveți în vedere că și colegii dvs. de echipă vor trebui să o învețe în cele din urmă, este absolut crucial să luați în considerare comunitatea actuală și viitoare de colaboratori ai bibliotecii. O bibliotecă cu o comunitate continuă înfloritoare este ideală, iar D3 pare să încurajeze acel tip de comunitate.

Dezavantaje

Curba de învățare inițială este mai mare pentru D3 comparativ cu Bokeh, presupunând că vă dezvoltați în Python cu Bokeh. JavaScript este mai detaliat decât Python. Cu toate acestea, dacă, ca și noi, intenționați să vă dezvoltați în JavaScript, merită să parcurgeți tutorialele D3.

Este greu înțelegerea modului în care funcționează selecțiile, ce înseamnă chiar .enter () și .exit () și magie asta se întâmplă doar cu o linie simplă de cod (.transition () cineva?). DAR – odată ce ați înfășurat capul în jurul structurii unice a lui D3, presupunând că lucrurile există înainte ca acestea să existe, posibilitățile sunt nelimitate.

În cele din urmă, beneficiile D3 au depășit efortul și timpul de învățare a acestuia și am avut înțelegerea că trecerea la D3 ar fi o investiție bună pe termen lung.

Concluzie

Deci, iată-l! Utilizăm și învățăm în mod activ D3 în timp ce integrăm biblioteca în aplicația noastră și în echipa noastră. Deși doar pentru că avansăm cu D3 nu înseamnă că nu vom folosi Bokeh pentru o altă aplicație în viitor. Există argumente pro și contra în fiecare bibliotecă de diagrame și este important să reflectați în mod constant pentru a determina dacă ar trebui să continuați cu biblioteca dvs. curentă sau să începeți să explorați alte opțiuni.

Înainte de a alege o bibliotecă de cartografiere, cunoașteți-vă nevoile specifice și nu vă fie teamă să vă scufundați cu capul în apele neexplorate ale bibliotecilor de cartografiere, având în vedere aceste nevoi. Dacă ceva nu funcționează pentru prima dată, încercați ceva nou care pare promițător.

Este vorba despre explorarea, documentarea și verificarea din nou cu dvs. și cu colegii dvs. de echipă pentru a continua evoluția proiectului în moduri productive.

Înainte!

1611990797 77 Graficarea apelor intre Bokeh si D3
Sursă Aici

Dacă aveți comentarii, corecturi, sugestii sau doriți doar să vorbiți, nu ezitați să mă trimiteți un e-mail la mandicai@gmail.com. Puteți găsi o parte din munca mea la http://mandilicai.com/.