A vizek feltérképezése: Bokeh és D3 között

A vizek feltérképezése: Bokeh és D3 között

Bevezetés

Eljön az az idő, amikor egy kezdő „alacsony kulcsú, de egyben kulcsfontosságú is, aki front-end tervezővé és fejlesztővé akar válni”, amikor be kell lépniük a könyvtári térképek világába.

A diagramkönyvtárak adatközpontú vizualizációkat hoznak létre. Ez az oka annak, hogy gyorsan felismerheti a várható élettartam trendjeit a FiveThirtyEight-on, vagy felmérheti a közelgő elnökválasztás (yikes) nemzeti érzelmét a The New York Times-on.

Gondoljon azokra a diagramokra, amelyeket létrehozhat a Google Táblázatokban, kivéve, hogy most közvetlen megtekintési és szerkesztési jogokkal rendelkezik az adott diagramokat vezérlő könyvtárhoz. Ön a mestere ezeknek a „diagramot” alkotó alacsony szintű építőelemeknek.

Számos diagramkönyvtár JavaScript-ben van megírva, amely a webfejlesztők számára a legtöbbnél jobban ismert nyelv, ami kevésbé ijesztő teljesítményt nyújt. Helyes végrehajtásuk esetén a diagramkönyvtárak képesek erőteljes üzeneteket hazahozni, és lehetőséget adnak arra, hogy komoly vizuális édességeket nézzenek meg.

Nemrégiben csapatunk feladata volt egy interfész létrehozása, amelyre szükség van egy diagramkészítő könyvtár integrálásához a cél teljesítése érdekében. Ennek eredményeként egy olyan könyvtárról kellett döntenünk, amely kielégítette a konkrét felhasználási eseteinket. Ha helyesen mérlegeli az igényeit, és olyan könyvtárat választ, amely valamilyen módon kielégíti mindet, akkor az élet arany.

A könyvtárak azonban soha nem egy mindenki számára megfelelő üzlet. Gyakrabban téves lesz az a kezdeti feltételezés, miszerint a könyvtár tökéletesen megfelel, a felbukkanó előre nem látható akadályok miatt.

Talán arra gondolsz: „Melyek ezek a lehetőségek?”, „Hogyan állt hozzá az opció kiválasztásához?” vagy "Miért érezted magad hülyének?" (a fenti Slack üzenetre utal).

Ez a cikk leírja a diagramkészítő könyvtár kiválasztásának folyamatát a számtalan, jelenleg elérhető JavaScript diagramkönyvtár közül, a két diagramkészítő könyvtár (Bokeh és D3.js) közötti váltás kritikus döntését, valamint mindegyikük előnyeit és hátrányait. Számomra ez "feltérképezetlen" terület volt, és ha ugyanígy gondolkodik a könyvtárak térképezésével vagy általában az adatok megjelenítésével kapcsolatban, akkor jobban fogja érezni magát, miután ezt elolvasta.

Kezdjük!

Miért próbáltuk meg először Bokeh-t

Szükségeink két táborra oszlottak: a sebességre és az interaktivitásra . Mivel nagyobb mennyiségű adatot kezeltünk, a vizualizációnknak képesnek kellett lennie villámgyorsan (vagy legalábbis olyan sebességgel frissülni, amelyen nem volt érzékelhető késés).

Alkalmazásunknak rendelkeznie kellett a kívánt interaktivitással is, amelyet a felhasználó számára elképzeltünk. Ideális esetben a könyvtár már tartalmazna néhány ilyen interaktív funkciót, amelyeket könnyen bedobhatunk, ahelyett, hogy a semmiből kellene írnunk.

Írja be a Bokeh-t.

Bokehról

A Bokeh egy könyvtár, amely elsősorban a böngészőben történő vizualizációk létrehozására szolgál nagy vagy streaming adatkészletekből. Ezeket a vizualizációkat Python használatával hozza létre. Ezután a Bokeh JavaScript API-ja átveszi a Python szkriptet, és a felhasználói felület interakcióinak a böngészőben történő kezelése mellett megjeleníti a diagramokat vagy diagramokat is.

Választhatja azt is, hogy a Bokeh szervert használja-e az adatfolyamok kezelésére. A Bokeh 0.12.13 dokumentációjában ez áll: „Ez a python és a böngésző közötti szinkronizálás képessége a Bokeh Server fő célja.”

Előnyök

A Bokeh varázslatos sok okból kifolyólag. Először teszi lehetővé a WebGL használatát egy HTML5 Canvas tartalékkal, számos beépített eszközt biztosít a diagramokkal való interakcióhoz, rendkívül nagy adatkészleteket kezel, és végül létrehoz valamit, ami azonnal megjelenhet az interneten.

A Python és a JavaScript közötti navigáció képessége szintén hihetetlenül hatékony a diagramok készítéséhez, mert a Python lehetővé teszi, hogy hasznos adatszerkezetet és adatelemző eszközöket használjon, míg a JavaScript a manipulált adatokat böngészőbarát megjelenítésekké alakítja.

Hátrányok

Az egyik hátrány Bokeh számára az, hogy korlátozott az interaktivitás mértéke, amelyet a vizualizáció képes megvalósítani. A Bokeh lehetővé teszi a hagyományosabb értelemben vett „diagramok készítését” - 2-D, rácsszerű vásznat kínál tengelyekkel az alapvonalként. És ez rendben is van, mert a felhasználónak gyakran erre van szüksége és akarja. Tapasztalt Bokeh felhasználók igazán szép dolgokat készíthetnek (lásd itt a példákat).

De ha olyan ábrázolást szeretnék készíteni, amely meghaladja a diagram hagyományos jellemzőit, például az atomok közötti erők szimulálását és az atomok körülhúzását, nem tudom, hogyan valósítanám meg ezt Bokehben.

A Bokeh a Python fejlesztésére is szolgál, nem a JavaScript-re. Az alábbiakban a Bokeh-ban a Python használatával készült barchartok láthatók. Nagyon egyszerű és tiszta.

Bokeh Barchart a Python használatával (a Jupyter Notebook segítségével)

A Bokeh használatának megkezdése előtt tudatosan döntöttünk arról, hogy Python helyett JavaScriptet írunk, mivel az egész webes alkalmazásunk egy JavaScript keretrendszerre épült és épül fel. A Bokeh dokumentációi egyike sem található a JavaScript-ben (Pythonban van, ahogyan azt elvárhatjuk), és a JavaScript motorháztető alá kerülni próbálkozás nehéznek bizonyult.

Ha alacsony szintű karakterjelekkel dolgozik, igaz, hogy a Pythonban minden lehetséges a JavaScript-ben a Bokeh-lel. Ha azonban most kezdi el tanulni mindkét nyelvet, mint én, akkor a kettő közötti szintaxis fordítása nem intuitív.

Ezen felül vannak korlátozások a magas szintű JavaScript Bokeh.Chartsés az Bokeh.PlottingAPI-k esetében - egyesek elavultak, mások megnehezítik a telek jellemzőinek megváltoztatását. Az alábbi példák a Bokeh-cselekmények JavaScript-ben történő létrehozásának kísérletei.

Bokeh Alacsony szintű Barchart Javascript használatával

Bokeh Magas szintű Barchart a Bokeh.Charts Javascript API használatával

További információ a JavaScript fejlesztéséről a Bokeh segítségével itt. Amint láthatja, a Bokeh könyvtárával rendelkező JavaScript elveszíti az egyszerűbb kódsorokat, amelyeket a Python használatával észleltünk. Úgy gondolom, hogy körülbelül egy órát kellett a konzolon fikázni, hogy fehér vonalvezetést adjak a sávokhoz és egy címet a magas szintű diagramomhoz, ami megismétli a küzdelmet a Bokeh.ChartsJavaScript API határain kívüli navigálásért, amikor a vizuális részleteket meg akarja változtatni. a diagram.

Végül a Bokeh-hez képest több dokumentáció és egyéb diagramkészítő könyvtárak , például a D3.js vagy a three.js aktív használata van . Aktívabb közreműködőkkel és könyvtárhasználókkal anagyobb a valószínűsége annak, hogy megtalálja a megoldást, meg kell javítania egy adott hibát.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Miért váltottunk a D3-ra

Tehát elakadtunk. Elérkeztünk ahhoz a ponthoz, hogy „ez a könyvtár megfelel az igényeinknek, de fájdalom, ha továbbra is készítjük a dolgokat JavaScript-ben, és talán egyszer a plafont fogjuk elérni, amikor rájövünk, hogy szükségünk van valamire, ami nem elérhető a Bokeh-ban Most." Menő.

Írja be a D3 billentyűt.

A D3-mal kapcsolatos kezdeti gondunk az volt, hogy túl lassan jelenítse meg a vizualizációinkat, figyelembe véve a múltbeli tapasztalatokat az SVG-k nagyobb böngészőben történő böngészőben történő megjelenítéséről. Azt is tudtuk, hogy a D3 tanulási görbéje lényegesen magasabb volt, mint Bokeh tanulási görbéje.

De továbbra is bizakodóak voltunk, tekintettel a D3 népszerűségére, a végtelen mennyiségű, gyönyörűen dokumentált D3 alkalmazásra és a „Get Sh * t Done” hozzáállásunkra ... ezért úgy döntöttünk, hogy mégis megpróbáljuk.

A D3-ról

A D3.js egy olyan JavaScript könyvtár, amely hangsúlyozza az adatkötést. Ez egyedülálló hatalmat biztosít az elemek létrehozásához a DOM-ban és a nullapont / adatok egyidejű hozzárendeléséhez az elemekhez. A teljesen adatközpontú könyvtár segítségével dinamikusan vehet fel elemeket az adatpontok hozzáadásakor vagy eltávolításakor, valamint az adatkészletek közötti átmenetkor. A D3 emellett jobban ellenőrzi a végeredmény esztétikáját és interaktivitását, ami azt jelenti, hogy megúszhatja a legbizarabb / legcsodálatosabb látványtervek létrehozását.

Előnyök

Meglepetésünkre az adatkészleteinkkel létrehozott D3 vizualizációk nagyon vajasak voltak. Gyorsan rájöttünk, hogy a D3 kifejezetten a gyors renderelésre van felépítve, annak ellenére, hogy hatalmas tömböket adtunk át a könyvtárnak.

Ahelyett, hogy egyesével adná át az adatpontokat, és létrehozná a megfelelő SVG-t, ami meglehetősen unalmas lehet, a D3 lehetővé teszi, hogy a teljes adatkészletet az SVG-hez kösse, mielőtt azok léteznének. Az SVG-ket ezután gyors tüzeléssel hozzák létre, és egy menetben hozzákapcsolják a megfelelő adatpontjukhoz.

Olyan ez, mint egy konyhafőnök, aki azonnal megkapja a megrendelések listáját, és elkészítheti az ételeket olyan sorrendben, amely kihagyja a felesleges várakozási időt, ahelyett, hogy mindig egy étel elkészítése után mindig a következő megrendelésre várna.

A D3 legjobb része az, hogy bőséges lehetőséget kínál az adatsorok közötti zökkenőmentes interakciókra és átmenetekre. Mivel végső célunk a felhasználó felhatalmazása volt és az, az egy olyan vizualizációt akartunk létrehozni, amely felkéri az egyént, hogy vegyen részt benne.

A D3 a JavaScript fejlesztésére is szolgál. Nincs többé „ásni a motorháztető alatt” a JavaScript API-n, mint ahogy a Bokeh-val tettük. Az a barchart példa, amelyet a cikkben korábban a BokehJS segítségével készítettem, az alábbiakban látható a D3 könyvtár segítségével.

D3 Barchart

Igen, vannak összetettebb kódsorok, összehasonlítva a Bokeh diagramhoz szükséges kóddal. Több idő és energia kellett a felvételhez. De a diagram minden apró részletét teljes mértékben ellenőrizheti , és mindezt valahol online dokumentálják (valószínűleg az alkotón keresztül, Mike Bostock-on keresztül). Ez nagyon jó.

Végül az elmúlt években a D3-at széles körben alkalmazták a 2017-es amerikai választások, a menekültpopulációk mozgásának, a csecsemők oltási arányának a WHO számára, valamint számtalan egyéb trend és történet megjelenítésére. Ennek eredményeként a D3 jelentős mennyiségű expozíciót és figyelmet kapott, ami aktívabb felhasználókhoz és a könyvtár minden napos új használatához vezet.

Ha hosszú távú könyvtárat választ, és szem előtt tartva, hogy csapattársainak is meg kell tanulniuk azt, mindenképpen figyelembe kell venniük a könyvtár jelenlegi és jövőbeli közreműködői közösségét. Ideális egy folyamatosan virágzó közösséggel rendelkező könyvtár, és úgy tűnik, hogy a D3 az ilyen típusú közösségeket támogatja.

Hátrányok

A kezdeti tanulási görbe magasabb a D3 esetében a Bokeh-hoz képest, feltételezve, hogy a Pythonban fejlődik a Bokeh. A JavaScript sokkal részletesebb, mint a Python. Ha azonban hozzánk hasonlóan a JavaScript fejlesztését tervezte, akkor érdemes átnézni a D3 oktatóanyagokat.

Ez kemény felmérni, hogy milyen választás a munka, mi .enter () és .exit (), még az átlagos és a mágia , hogy épp egy egyszerű sor kódot (.transition () bárki?). DE - ha a D3 egyedi struktúrája köré fonta a fejét, feltételezve, hogy a dolgok léteznek, mielőtt léteznének, a lehetőségek végtelenek.

Végül a D3 előnyei meghaladták a tanuláshoz szükséges erőfeszítéseket és időt, és sejtettük, hogy a D3-ra való áttérés jó hosszú távú befektetés.

Következtetés

Tehát itt van! Továbbra is aktívan használjuk és tanuljuk a D3-at, miközben integráljuk a könyvtárat alkalmazásunkba és csapatunkba. Bár csak azért, mert a D3-mal haladunk előre, még nem jelenti azt, hogy a jövőben nem használjuk a Bokeh-t egy másik alkalmazáshoz. Minden diagramkészítő könyvtárnak vannak előnyei és hátrányai, ezért fontos állandóan átgondolni annak eldöntését, hogy folytatnia kell-e a jelenlegi könyvtárat, vagy el kell kezdenie más lehetőségeket.

Táblázattár kiválasztása előtt ismerje meg sajátos igényeit, és ne féljen fejjel merülni a diagramtárak feltérképezetlen vizei felé, ezeket az igényeket szem előtt tartva. Ha valami nem működik először, próbáljon ki valami újat, ami ígéretesnek tűnik.

Arról szól, hogy feltárja, dokumentálja és visszanézzen magával és csapattársaival, hogy produktív módon folytassa a projekt fejlesztését.

Tovább!

Ha bármilyen észrevétele, javítása, javaslata van, vagy csak beszélni szeretne, nyugodtan írjon nekem e-mailt a [email protected] címre. Munkámat megtalálhatja a //mandilicai.com/ címen.