Vesien kartoitus: Bokehin ja D3: n välillä

Vesien kartoitus: Bokehin ja D3: n välillä

Johdanto

Orastavan "hillitty mutta myös avainasemassa oleva yritys yrittää tulla etupään suunnittelijaksi ja kehittäjäksi" tulee elämään aika, jolloin heidän on päästävä karttakirjastojen maailmaan.

Karttakirjastot tuottavat dataan perustuvia visualisointeja. Ne ovat syy siihen, että voit nopeasti ymmärtää elinajanodotteen trendit FiveThirtyEightissa tai mitata kansallista mielipidettä tulevista presidentinvaaleista New York Timesissa.

Ajattele kaavioita, jotka voit luoda Google Sheets -sovelluksessa, paitsi että sinulla on nyt suorat katselu- ja muokkausoikeudet kyseisiä kaavioita ohjaavaan kirjastoon. Olet päällikkö näille matalan tason rakennuspalikoille, jotka muodostavat "kaavion".

Useat karttakirjastot on kirjoitettu JavaScriptillä, joka on web-kehittäjille tutumpi kieli kuin useimmat, mikä tekee niistä oppimisen vähemmän pelottavaksi. Oikein suoritettuna karttakirjastoilla on valta ajaa kotiin voimakas viesti ja antaa sinulle mahdollisuus tarkastella vakavia visuaalisia karkkeja.

Äskettäin tiimimme tehtävänä oli luoda käyttöliittymä, joka tarvitsi karttakirjaston integroimiseksi tavoitteen saavuttamiseksi. Tämän seurauksena meidän oli päätettävä kirjastosta, joka tyydyttää erityiset käyttötapauksemme. Jos punnitset tarpeesi oikein ja valitset kirjaston, joka jotenkin tyydyttää ne kaikki, elämä on kultaista.

Kirjastot eivät kuitenkaan koskaan ole yhtä kokoista sopimusta. Useimmiten alkuperäinen oletuksesi, että kirjasto on täydellinen ottelu, on virheellinen, koska avautuvat odottamattomat esteet.

Ehkä ajattelet: "Mitkä ovat nämä vaihtoehdot?", "Kuinka lähestyit vaihtoehtoa?" tai "Miksi sinusta tuntui tyhmältä?" (viittaa yllä olevaan Slack-viestiin).

Tässä artikkelissa kuvataan prosessimme karttakirjaston valitsemiseksi lukemattomien tällä hetkellä käytettävissä olevien JavaScript-karttakirjastojen joukosta, kriittinen päätös vaihtaa kahden karttakirjaston (Bokeh ja D3.js) välillä sekä kunkin edut ja haitat. Minulle tämä oli "tuntematon" alue, ja jos sinusta tuntuu samalla tavalla kirjastojen kartoittamisesta tai tietojen visualisoinnista yleensä, tunnet olosi paremmaksi lukemasi tämän jälkeen.

Aloitetaanpa!

Miksi yritimme ensin Bokehia

Tarpeemme jakautuivat kahteen leiriin: nopeuteen ja vuorovaikutteisuuteen . Koska käsittelemme suurempia tietomääriä, visualisointimme oli voitava päivittää salamannopeasti (tai ainakin nopeudella, jolla ei ollut havaittavaa viivettä).

Sovelluksellamme oli myös oltava haluttu vuorovaikutteisuus, jonka kuvittelemme käyttäjälle. Ihannetapauksessa kirjasto sisältäisi jo joitain näistä vuorovaikutteisista toiminnoista, jotka voimme helposti heittää sisään sen sijaan, että tarvitsisimme kirjoittaa niitä tyhjästä.

Syötä Bokeh.

Tietoa henkilöstä Bokeh

Bokeh on kirjasto, joka on tarkoitettu ensisijaisesti visualisointien luomiseen selaimessa suurista tai suoratoistotiedostoista. Voit luoda nämä visualisoinnit Pythonilla. Sitten Bokehin JavaScript-sovellusliittymä ottaa käyttöön Python-komentosarjan ja renderöi juonet tai kaaviot käyttöliittymän vuorovaikutusten käsittelyn lisäksi selaimessa.

Voit myös käyttää Bokeh-palvelinta tietojen suoratoistoon. Bokeh 0.12.13 -dokumentaatiossa se toteaa: "Tämä kyky synkronoida pythonin ja selaimen välillä on Bokeh-palvelimen päätarkoitus."

Edut

Bokeh on maaginen monista syistä. Se tekee ensin WebGL: n käytön HTML5 Canvas -varalla, tarjoaa useita sisäänrakennettuja työkaluja vuorovaikutukseen kaavioiden kanssa, käsittelee erittäin suuria tietojoukkoja ja lopulta luo jotain, joka voi siirtyä verkkoon välittömästi.

Kyky navigoida Pythonin ja JavaScriptin välillä on myös uskomattoman tehokas kartoituksessa, koska Python antaa sinun hyödyntää hyödyllisiä tietorakenteita ja tietojen analysointityökaluja, kun taas JavaScript kääntää manipuloidut tiedot selainystävällisiksi visualisoinneiksi.

Haitat

Yksi haittapuoli Bokehille on kuitenkin se, että visualisoinnin interaktiivisuuden aste on rajallinen. Bokeh antaa sinun "kartoittaa" tavanomaisemmassa merkityksessä - se tarjoaa 2-D, ruudukon kaltaisen kankaan, jonka akselina on perusviiva. Ja se on okei, koska usein sitä käyttäjä tarvitsee ja haluaa. Kokeneet Bokeh-käyttäjät voivat tehdä todella kauniita asioita (katso esimerkkejä täältä).

Mutta jos halusin tehdä visualisoinnin, joka meni kaavion tavanomaisten ominaisuuksien ulkopuolelle, kuten simuloida atomien välisiä voimia ja vetää atomeja ympäri, en tiedä miten saavuttaisin sen Bokehissa.

Bokeh on tarkoitettu myös kehittämiseen Pythonissa, ei JavaScriptiin. Alla on esimerkkejä baokartoista Bokehissa käyttäen Pythonia. Se on erittäin yksinkertainen ja puhdas.

Bokeh Barchart Pythonilla (Jupyter Notebookin kautta)

Ennen kuin aloitimme Bokehin käytön, teimme tietoisen päätöksen komentosarjojen kirjoittamisesta JavaScript-muodossa Pythonin sijaan, koska koko verkkosovelluksemme rakennettiin ja rakennetaan JavaScript-kehykselle. Mikään Bokeh-dokumentaatio ei ole JavaScriptiä (se on Pythonissa, kuten voit odottaa), ja yrittäminen päästä JavaScript-hupun alle osoittautui vaikeaksi.

Jos työskentelet matalan tason kuvioiden kanssa, on totta, että kaikki Pythonissa mahdollinen on mahdollista JavaScriptissä Bokehin kanssa. Kuitenkin, jos olet vasta aloittamassa molempien kielten oppimista kuten minä, syntaksin kääntäminen näiden kahden välillä ei ole intuitiivista.

Lisäksi korkean tason JavaScriptille Bokeh.Chartsja Bokeh.Plottingsovellusliittymille on rajoituksia - jotkut ovat vanhentuneita, toiset vaikeuttavat juonen ominaisuuksien muuttamista. Alla olevat esimerkit ovat yrityksiäni luoda Bokeh-tontteja JavaScriptiin.

Bokeh Matala tason Barchart Javascriptin avulla

Bokeh Korkean tason Barchart Bokeh.Charts Javascript -sovellusliittymän avulla

Lisää JavaScriptin kehittämisestä Bokehin kanssa täältä. Kuten näette, JavaScript Bokehin kirjastolla menettää yksinkertaisemmat koodirivit, joita havaitsimme kehittäessämme Pythonin kanssa. Luulen, että kesti noin tunnin hölmöily konsolissa lisätäksesi valkoisen ääriviivan pylväisiin ja otsikon korkean tason kaavioon, joka toistaa taisteluni navigoinnista Bokeh.ChartsJavaScript-sovellusliittymän rajojen ulkopuolella, kun haluat muuttaa visuaalisia yksityiskohtia kaavion.

Lopuksi on enemmän dokumentaatiota ja muiden karttakirjastojen, kuten D3.js tai three.js, aktiivista käyttöä Bokehiin verrattuna. Kirjaston aktiivisten avustajien ja käyttäjien kanssa tulee enemmänsuurempi todennäköisyys löytää ratkaisu sinun täytyy korjata tietty vika.

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

Miksi vaihdoimme D3: een

Joten olimme jumissa. Olimme saavuttaneet pisteen "tämä kirjasto sopii tarpeisiimme tavallaan, mutta on tuskaa jatkaa asioiden tekemistä JavaScriptiä ja ehkä tulemme jonain päivänä kattoon, kun ymmärrämme tarvitsevamme jotain, jota ei ole saatavilla Bokehissa oikealla nyt." Viileä.

Syötä D3.

Alun perin huolta D3: sta oli, että se toisi visualisointimme liian hitaasti, kun otetaan huomioon aikaisemmat kokemukset SVG: n renderoinnista selaimessa suuremmilla tietomäärillä. Tiesimme myös, että D3: n oppimiskäyrä oli merkittävästi korkeampi kuin Bokehin oppimiskäyrä.

Mutta olimme edelleen optimistisia, kun otetaan huomioon D3: n suosio, ääretön määrä kauniisti dokumentoituja D3-sovelluksia ja "Get Sh * t Done" -asenne ... joten päätimme kokeilla sitä silti.

Tietoja D3

D3.js on JavaScript-kirjasto, joka korostaa tietojen sitomista. Se antaa sinulle ainutlaatuisen voiman luoda elementtejä DOM: iin ja sitoa datum / data elementteihin samanaikaisesti. Täysin tietopohjaisen kirjaston avulla voit lisätä elementtejä dynaamisesti, kun lisäät tai poistat datapisteitä ja siirryt tietojoukkojen välillä. D3 antaa myös paremman hallinnan lopputuloksen esteettisyyteen ja vuorovaikutteisuuteen, mikä tarkoittaa, että pääset eroon omituisimpien / upeimpien visualisointien luomisesta.

Edut

Yllätykseksemme D3-visualisoinnit, jotka luotiin tietojoukoillamme, olivat hyvin voihkeita. Ymmärsimme nopeasti, että D3 on rakennettu nimenomaan nopeaan renderointiin huolimatta massiivisista matriiseista, jotka kuljettimme kirjastoon.

Sen sijaan, että välittäisit datapisteitä yksitellen ja luodtaisiin vastaava SVG, mikä voi olla melko tylsiä, D3: n avulla voit sitoa koko tietojoukkosi SVG: siisi ennen kuin niitä on olemassa. SVG: t muodostetaan sitten nopealta ja liitetään vastaavaan datapisteeseensä yhdellä kertaa.

Se on kuin keittiömestari, joka saa luettelon tilauksista kerralla ja voi valmistaa ruoan järjestyksessä, joka jättää tarpeettoman odotusajan, eikä aina odottaa seuraavan tilauksen vastaanottamista yhden ruokalajin valmistamisen jälkeen.

Parasta D3: ssa on se, että se tarjoaa runsaasti mahdollisuuksia sujuvaan vuorovaikutukseen ja siirtymiin tietojoukkojen välillä. Koska lopullinen tavoitteemme oli ja on käyttäjän voimaannuttaminen, halusimme luoda visualisoinnin, joka kutsuisi yksilön osallistumaan siihen.

D3 on tarkoitettu myös JavaScript-kehitykseen. JavaScript-sovellusliittymän "kaivaminen konepellin alle" ei enää olisi, kuten teimme Bokehin kanssa. Aikaisemmin tässä artikkelissa BokehJS: llä luomani barchart-esimerkki on esitetty alla D3-kirjastoa käyttämällä.

D3 Barchart

Kyllä, koodirivejä on monimutkaisempia verrattuna Bokeh-kaavioon vaadittavaan koodiin. Se vaati enemmän aikaa ja energiaa poimimiseen. Mutta sinulla on täydellinen hallinta kaavion jokaisesta pienestä yksityiskohdasta, ja kaikki on dokumentoitu jonnekin verkossa (luultavasti luojan, Mike Bostockin kautta). Se on aika hienoa.

Lopuksi, D3: ta on käytetty viime vuosina laajasti visualisoimaan vuoden 2017 Yhdysvaltain vaaleja, pakolaisväestön liikkumista, lapsirokotusten määrää WHO: lle ja lukemattomia muita trendejä ja tarinoita. Tämän seurauksena D3 on saanut merkittävän määrän valotusta ja huomiota, mikä johtaa aktiivisempiin käyttäjiin ja uusiin tapoihin käyttää kirjastoa päivittäin.

Kun valitset kirjastoa pitkälle matkalle ja pidät mielessä, että myös joukkuetovereidesi täytyy oppia se lopulta, on ehdottoman tärkeää ottaa huomioon kirjaston nykyinen ja tuleva avustajayhteisö. Kirjasto, jossa on jatkuvasti kukoistava yhteisö, on ihanteellinen, ja D3 näyttää edistävän tällaista yhteisöä.

Haitat

Alkuperäinen oppimiskäyrä on D3: lle korkeampi kuin Bokeh, olettaen, että kehität Pythonissa Bokehin kanssa. JavaScripti on tarkempi kuin Python. Jos kuitenkin aiot kehittää JavaScriptiä kuten meidän, kannattaa tutustua D3-opetusohjelmiin.

On vaikea ymmärtää, miten valinnat toimivat, mitä .enter () ja .exit () jopa tarkoittavat, ja taikuutta, joka vain tapahtuu yhdellä yksinkertaisella koodirivillä (.transition () ketään?). MUTTA - kun olet kietonut pään D3: n ainutlaatuisen rakenteen ympärille olettaen, että asiat ovat olemassa ennen kuin ne ovat olemassa, mahdollisuudet ovat rajattomat.

Viime kädessä D3: n edut ylittivät sen oppimisen vaivaa ja aikaa, ja meillä oli aavistus siitä, että siirtyminen D3: een olisi hyvä pitkäaikainen sijoitus.

Johtopäätös

Joten sinulla on se! Käytämme edelleen aktiivisesti D3: ta, kun integroimme kirjaston sovellukseemme ja tiimimme. Vaikka vain siksi, että olemme siirtymässä eteenpäin D3: n kanssa, ei tarkoita sitä, ettemme käytä Bokehia tulevaisuudessa toiseen sovellukseen. Jokaisessa karttakirjastossa on etuja ja haittoja, ja on tärkeää pohtia jatkuvasti, onko sinun jatkettava nykyistä kirjastoa vai aloitettava muiden vaihtoehtojen tutkiminen.

Ennen kuin valitset karttakirjaston, tiedä erityistarpeesi ja älä pelkää sukeltaa päinvastoin karttakirjastojen tuntemattomiin vesiin nämä tarpeet huomioon ottaen. Jos jokin ei toimi ensimmäistä kertaa, kokeile jotain uutta, joka näyttää lupaavalta.

Kyse on tutkimisesta, dokumentoinnista ja tarkistamisesta takaisin itsesi ja joukkuetovereidesi kanssa jatkaaksesi projektin kehittämistä tuottavalla tavalla.

Eteenpäin!

Jos sinulla on kommentteja, korjauksia, ehdotuksia tai haluat vain puhua, voit lähettää minulle sähköpostia osoitteeseen [email protected] Löydät osan työstäni osoitteesta //mandilicai.com/.