Vete kaardistamine: Bokehi ja D3 vahel

Vete kaardistamine: Bokehi ja D3 vahel

Sissejuhatus

Alustava “madala ja ka suure võtmega, kes üritab saada esiotsa disaineriks ja arendajaks” elus saabub aeg, mil nad peavad sisenema raamatukogude graafikute maailma.

Raamatukogude graafikute koostamine annab andmepõhiseid visualiseeringuid. Need on põhjus, miks saate FiveThirtyEightil kiiresti aru saada eeldatava eluea suundumustest või hinnata ajalehes The New York Times ilmuvate eelseisvate presidendivalimiste rahvuslikku meelt.

Mõelge diagrammidele, mida saate Google'i arvutustabelites luua, välja arvatud nüüd, kui teil on otsesed vaatamis- ja redigeerimisõigused neid graafikuid juhtival teegil. Olete kapten nendel madala tasandi ehitusplokkidel, mis moodustavad "diagrammi".

Mitmed graafikute teegid on kirjutatud JavaScripti keeles, mis on veebiarendajatele tuttavam kui enamik, mis muudab nende õppimise vähem hirmutavaks saavutuseks. Kui õigesti täidetakse, on kaardiraamatukogudel õigus jõuline sõnum koju viia ja anda teile võimalus vaadata tõsiseid visuaalseid komme.

Hiljuti tehti meie meeskonnale ülesandeks luua liides, mis pidi graafiku kogu integreerima eesmärgi täitmiseks. Selle tulemusena pidime otsustama raamatukogu üle, mis rahuldaks meie konkreetseid kasutusjuhtumeid. Kui kaalute oma vajadusi õigesti ja valite raamatukogu, mis neid kõiki kuidagi rahuldaks, on elu kuldne.

Kuid raamatukogud ei ole kunagi kõigile ühetaoline tehing. Enamasti on teie esialgne eeldus, et raamatukogu sobib ideaalselt, valed ettenägematute takistuste tõttu.

Võib-olla mõtlete: "Mis on need võimalused?", "Kuidas lähenesite valiku valimisele?" või "Miks tundsite end rumalana?" (viitab ülaltoodud sõnumile Slack).

Selles artiklis kirjeldatakse meie diagrammiteegi valimise protsessi arvukate praegu saadaolevate JavaScripti diagrammiteekide seast, kriitilist otsust kahe diagrammiteeki (Bokeh ja D3.js) vahetamise kohta ning igaühe plusse ja miinuseid. Minu jaoks oli see "kaardistamata" territoorium ja kui te tunnete samamoodi ka raamatukogude kaardistamist või andmete visualiseerimist üldiselt, tunnete end pärast selle lugemist paremini.

Alustagem!

Miks me proovisime kõigepealt Bokehi

Meie vajadused jagunesid kahte leeri: kiirus ja interaktiivsus . Kuna töötlesime suurema hulga andmetega, pidi meie visualiseerimine olema võimeline värskendama välkkiirelt (või vähemalt kiirusega, millel ei olnud tajutavat viivitust).

Meie rakendusel pidi olema ka soovitud interaktiivsus, mida me kasutaja jaoks ette nägime. Ideaalse stsenaariumi korral hõlmaks raamatukogu juba mõnda neist interaktiivsetest funktsioonidest, mida saaksime hõlpsalt sisse visata, selle asemel, et neid nullist kirjutama hakata.

Sisestage bokeh.

Bokehi kohta

Bokeh on raamatukogu, mis on mõeldud peamiselt visualiseerimiste loomiseks brauseris suurte või voogedastusega andmekogumite hulgast. Need visualiseerimised loote Pythoni abil. Seejärel võtab Bokeh JavaScripti API teie Pythoni skripti ja renderdab graafikud või diagrammid lisaks kasutajaliidese interaktsioonide haldamisele brauseris.

Samuti saate oma andmete voogesituse kasutamiseks valida Bokeh Serveri. Bokeh 0.12.13 dokumentatsioonis on öeldud: "See võimalus sünkroonida pythoni ja brauseri vahel on Bokeh Serveri peamine eesmärk."

Eelised

Bokeh on maagiline paljudel põhjustel. See muudab esmalt WebGL-i kasutamise koos HTML5 Canvas-i varuvariantiga, pakub mitmeid sisseehitatud tööriistu diagrammidega suhtlemiseks, käsitseb tohutult suuri andmekogumeid ja loob lõpuks midagi, mis võib veebis kohe minna.

Võimalus Pythoni ja JavaScripti vahel navigeerida on ka diagrammide koostamisel uskumatult võimas, kuna Python võimaldab teil kasutada kasulikke andmestruktuure ja andmete analüüsimise tööriistu, samal ajal kui JavaScript tõlgib manipuleeritud andmed brauserisõbralikeks visualiseerimisteks.

Puudused

Bokehi üks puudus on aga see, et visualiseerimise interaktiivsuse määr on piiratud. Bokeh võimaldab teil "diagrammida" tavapärasemas mõttes - see pakub 2-D võrgulaadset lõuendit, mille baasjooneks on teljed. Ja see on okei, sest sageli vajab kasutaja seda ja tahab. Kogenud Bokehi kasutajad saavad teha tõeliselt ilusaid asju (vt näiteid siit).

Aga kui ma tahaksin teha visualiseeringu, mis väljuks graafiku tavapärastest omadustest, näiteks aatomite vaheliste jõudude simuleerimine ja aatomite lohistamine, ei tea ma, kuidas ma seda Bokehis saavutaksin.

Bokeh on mõeldud ka Pythonis arendamiseks, mitte JavaScripti jaoks. Allpool on näited Bokehi tulpdiagrammidest, kasutades Pythoni. See on ülilihtne ja puhas.

Bokeh Barchart Pythoni abil (Jupyteri märkmiku kaudu)

Enne Bokehi kasutamise alustamist tegime teadliku otsuse skriptida Pythoni asemel JavaScripti, kuna kogu meie veebirakendus oli ja on ehitatud JavaScripti raamistikule. Ükski Bokehi dokumentatsioon ei ole JavaScripti (see on Pythonis, nagu võite arvata) ja JavaScripti katte alla saamise proovimine osutus keeruliseks.

Kui töötate madala taseme glüüfidega, on tõsi, et kõik Pythonis võimalik on JavaScripti koos Bokehiga võimalik. Kui te aga alles hakkate mõlemat keelt õppima nagu mina, ei ole süntaksi tõlkimine nende kahe vahel intuitiivne.

Lisaks on kõrgel tasemel JavaScripti Bokeh.Chartsja Bokeh.PlottingAPI - de osas piirangud - mõned on aegunud, teised muudavad teie jaoks krundi funktsioonide muutmise tõesti raskeks. Allpool toodud näited on minu katsed luua Bokehi krundid JavaScripti.

Bokeh madala taseme Barchart Javascripti abil

Bokeh kõrgetasemeline Barchart, kasutades Bokeh.Charts Javascripti API-d

Lisateavet JavaScripti arendamise kohta koos Bokehiga siin. Nagu näete, kaotab Bokehi teegiga JavaScripti lihtsamad koodiread, mida täheldasime Pythoniga arendades. Ma arvan, et valgel kontuuril ribadele lisamiseks ja pealkirja lisamiseks minu kõrgetasemelises diagrammis kulus konsoolis umbes tund aega möllamist, mis kordab minu võitlust navigeerida Bokeh.ChartsJavaScripti API- piire, kui soovite visuaalseid üksikasju muuta diagrammil.

Lõpuks on Bokehiga võrreldes rohkem dokumenteerimist ja muude diagrammiteekide , näiteks D3.js või three.js, aktiivset kasutamist . Aktiivsemate kaastöötajate ja raamatukogu kasutajatega kaasnevad asuurema tõenäosusega leida konkreetse vea parandamiseks vajalik lahendus.

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

Miks me üle läksime D3-le

Nii et jäime ummikusse. Olime jõudnud punkti, et „see raamatukogu sobib meie vajadustele, kuid on valus jätkata JavaScripti loomist ja võib-olla jõuame ühel päeval lagedale, kui mõistame, et vajame midagi, mis pole Bokehis saadaval nüüd. " Lahe.

Sisestage D3.

Meie esialgne mure D3-ga oli see, et see muudab meie visualiseerimised liiga aeglaselt, arvestades varasemaid kogemusi SVG-de renderdamisel brauseris suurema hulga andmetega. Samuti teadsime, et D3 õppimiskõver oli oluliselt kõrgem kui Bokehi õppekõver.

Kuid olime endiselt optimistlikud, pidades silmas D3 populaarsust, ääretult palju kaunilt dokumenteeritud D3 rakendusi ja meie suhtumist "Saage tehtud *" ... nii et otsustasime siiski proovida.

D3 kohta

D3.js on JavaScripti teek, mis rõhutab andmete sidumist. See annab teile ainulaadse jõu genereerida DOM-is elemente ja siduda tugipunkt / andmed elementidega üheaegselt. Täielikult andmepõhise teegiga saate andmepunktide lisamisel või eemaldamisel ning andmekogumite vahel üleminekul dünaamiliselt elemente lisada. D3 annab ka suurema kontrolli lõpptulemuse esteetika ja interaktiivsuse üle, mis tähendab, et saate kõige veidramate / imelisemate visualiseerimiste loomisest pääseda.

Eelised

Meie üllatuseks olid meie andmekogumitega loodud D3 visualiseeringud väga võikad. Mõistsime kiiresti, et D3 on üles ehitatud spetsiaalselt kiireks renderdamiseks, hoolimata massiivsetest massiividest, mida me raamatukokku edastasime.

Selle asemel, et andmepunkte ükshaaval edastada ja genereerida vastav SVG, mis võib olla üsna tüütu, võimaldab D3 teil siduda kogu oma andmekogum oma SVG-dega, enne kui need olemas on. Seejärel genereeritakse SVG-d kiirelt ja seostatakse nende vastava andmepunktiga kõik ühe korraga.

See on nagu peakokk köögis, kes saab korraga tellimuste nimekirja ja saab toitu valmistada järjestuses, mis jätab ära tarbetu ooteaja, selle asemel, et pärast ühe roa valmistamist alati järgmise tellimuse saamist oodata.

Parim osa D3-st on see, et see pakub piisavalt võimalusi sujuvaks suhtlemiseks ja andmekogumite vahel üleminekuks. Kuna meie lõppeesmärk oli ja on kasutaja võimestamine, tahtsime luua visualiseerimise, mis kutsuks inimest sellega tegelema.

D3 on mõeldud ka JavaScripti arendamiseks. Enam ei oleks JavaScripti API "kaevamist kapoti all", nagu me Bokehiga tegime. Baaritabeli näide, mille lõin BokehJS-i abil selles artiklis varem, on toodud allpool D3 teeki kasutades.

D3 Barchart

Jah, võrreldes Bokehi diagrammi jaoks vajaliku koodiga on koodiridu keerukam. Selle ülesvõtmine võttis rohkem aega ja energiat. Kuid teil on täielik kontroll oma graafiku iga väikese detaili üle ja see kõik on kuskil veebis dokumenteeritud (tõenäoliselt looja Mike Bostocki kaudu). See on päris tore.

Lõpuks on viimastel aastatel D3-d laialdaselt kasutatud, et kuvada 2017. aasta USA valimisi, pagulaste liikumist, WHO väikelaste vaktsineerimise määra ning lugematuid muid suundumusi ja lugusid. Seetõttu on D3 pälvinud märkimisväärse hulga säritust ja tähelepanu, mis viib aktiivsemate kasutajateni ja uute viisideni iga päev raamatukogu kasutamiseks.

Pika tee jaoks raamatukogu valimisel ja pidades meeles, et ka meeskonnakaaslased peavad selle lõpuks õppima, on ülioluline arvestada raamatukogu praeguse ja tulevase kaastöötajate kogukonnaga. Pidevalt areneva kogukonnaga raamatukogu on ideaalne ja D3 näib seda tüüpi kogukonda edendavat.

Puudused

Esialgne õppimiskõver on D3 puhul kõrgem kui Bokeh, eeldades, et arenete Pyokonis koos Bokehiga. JavaScripti on rohkem kui Pythonit. Kui aga plaanisite meie sarnaselt JavaScripti arendamist, tasub tutvuda D3 õpetustega.

On raske mõista, kuidas valik töö, mida .enter () ja .exit () isegi keskmine ja maagia , et lihtsalt juhtub ühe lihtsa koodirida (.transition () keegi?). AGA - kui olete oma pea D3 ainulaadse struktuuri ümber mässinud, eeldades, et asjad eksisteerivad enne nende olemasolu, on võimalused lõputud.

Lõppkokkuvõttes kaalusid D3 eelised üles selle õppimise pingutused ja aja ning meil oli aimdus, et D3-le üleminek oleks hea pikaajaline investeering.

Järeldus

Nii et teil on see! Kasutame ja õpime D3-d endiselt aktiivselt, kui integreerime raamatukogu oma rakendusse ja meeskonda. Kuigi see, et me D3-ga edasi liigume, ei tähenda, et me ei kasutaks Bokehit tulevikus mõne muu rakenduse jaoks. Igas diagrammikogus on plusse ja miinuseid ning oluline on pidevalt järele mõelda, et otsustada, kas peaksite jätkama oma praeguse teegiga või alustama muude võimaluste uurimist.

Enne tabeliteegi valimist teadke oma konkreetseid vajadusi ja ärge kartke neid vajadusi silmas pidades pea ees sukelduda kaardistamisraamatukogude kaardistamata vetesse. Kui midagi esimest korda ei toimi, proovige midagi uut, mis näib paljutõotav.

See seisneb enda ja meeskonnakaaslaste uurimises, dokumenteerimises ja uuesti kontrollimises, et jätkata projekti arendamist produktiivsel viisil.

Edasi!

Kui teil on kommentaare, parandusi, ettepanekuid või soovite lihtsalt rääkida, saatke mulle julgelt e-kiri aadressil [email protected] Osa minu töödest leiate aadressilt //mandilicai.com/.