Kortlægning af vandet: mellem Bokeh og D3

Kortlægning af vandet: mellem Bokeh og D3

Introduktion

Der kommer en tid i livet for en spirende “lavmælt, men også højtydende forsøg på at blive en frontend-designer og udvikler”, når de skal ind i en verden af ​​kortbiblioteker.

Kortbiblioteker producerer datadrevne visualiseringer. Det er grunden til, at du hurtigt kan forstå tendenser i forventet levealder på FiveThirtyEight eller måle det nationale sentiment om et kommende præsidentvalg (yikes) på The New York Times.

Tænk på de diagrammer, du kan oprette i Google Sheets, medmindre du nu har direkte visnings- og redigeringsrettigheder til det bibliotek, der driver disse diagrammer. Du er herre over disse lavtliggende byggesten, der udgør et ”diagram”.

Flere kortbiblioteker er skrevet i JavaScript, et sprog, der er mere kendt for webudviklere end de fleste, hvilket gør at lære dem en mindre skræmmende bedrift. Når de udføres korrekt, har kortbiblioteker magten til at køre hjem en stærk besked og give dig mulighed for at se seriøst visuelt slik.

For nylig fik vores team til opgave at oprette en grænseflade, der var nødvendig for at integrere et kortbibliotek for at opfylde målet. Som et resultat måtte vi beslutte et bibliotek, der opfyldte vores specifikke brugssager. Hvis du afvejer dine behov korrekt og vælger et bibliotek, der på en eller anden måde tilfredsstiller dem alle, er livet gyldent.

Imidlertid er biblioteker aldrig en one-size-fits-all slags aftale. Oftere end ikke vil din oprindelige antagelse om, at et bibliotek er det perfekte match, være forkert på grund af uforudsete forhindringer, der dukker op.

Måske tænker du: "Hvad er disse muligheder?", "Hvordan gik du ind på at vælge en mulighed?" eller "Hvorfor følte du dig dum?" (henviser til meddelelsen Slack ovenfor).

Denne artikel beskriver vores proces med at vælge et kortbibliotek blandt de utallige JavaScript-kortbiblioteker, der i øjeblikket er tilgængelige, den kritiske beslutning om at skifte mellem to kortbiblioteker (Bokeh og D3.js) og fordele og ulemper ved hver enkelt. For mig var dette "ukendt" område, og hvis du har det på samme måde med at kortlægge biblioteker eller datavisualisering generelt, vil du føle dig bedre efter at have læst dette.

Lad os begynde!

Hvorfor prøvede vi Bokeh først

Vores behov faldt i to lejre: hastighed og interaktivitet . Fordi vi håndterede større datamængder, måtte vores visualisering være i stand til at opdatere med lynhastighed (eller i det mindste med en hastighed, der ikke havde nogen mærkbar forsinkelse).

Vores applikation havde også brug for at have den ønskede interaktivitet, som vi forestillede os for brugeren. I et ideelt scenario ville biblioteket allerede omfatte nogle af disse interaktive funktioner, som vi let kunne smide i stedet for at skulle skrive dem fra bunden.

Indtast Bokeh.

Om Bokeh

Bokeh er et bibliotek, der primært er beregnet til oprettelse af visualiseringer i browseren fra store datasæt eller streaming. Du opretter disse visualiseringer ved hjælp af Python. Derefter tager Bokehs JavaScript API ind dit Python-script og gengiver plottene eller diagrammerne ud over at håndtere UI-interaktionerne i browseren.

Du kan også vælge at bruge Bokeh Server til at håndtere streaming af dine data. I Bokeh 0.12.13-dokumentationen hedder det: "Denne evne til at synkronisere mellem python og browseren er hovedformålet med Bokeh-serveren."

Fordele

Bokeh er magisk af mange grunde. Det gengives først ved hjælp af WebGL med en HTML5 Canvas fallback, giver flere indbyggede værktøjer til at interagere med diagrammer, håndterer alvorligt store datasæt og opretter i sidste ende noget, der kan gå på nettet med det samme.

Evnen til at navigere mellem Python og JavaScript er også utrolig stærk til kortlægning, fordi Python giver dig mulighed for at udnytte nyttige datastrukturer og dataanalyseværktøjer, mens JavaScript oversætter de manipulerede data til browservenlige visualiseringer.

Ulemper

En ulempe ved Bokeh er imidlertid, at det er begrænset i graden af ​​interaktivitet, som en visualisering kan have. Bokeh giver dig mulighed for at "kortlægge" i mere konventionel forstand - det tilbyder et 2-D, gitterlignende lærred med akser som basislinje. Og det er okay, for det er ofte, hvad brugeren har brug for og ønsker. Erfarne Bokeh-brugere kan lave rigtig smukke ting (se eksempler her).

Men hvis jeg ville lave en visualisering, der gik uden for de konventionelle karakteristika ved et diagram, såsom at simulere kræfter mellem atomer og trække atomerne rundt, ved jeg ikke, hvordan jeg ville opnå det i Bokeh.

Bokeh er også beregnet til udvikling i Python, ikke JavaScript. Nedenfor er eksempler på barcharts i Bokeh ved hjælp af Python. Det er super simpelt og rent.

Bokeh Barchart ved hjælp af Python (via Jupyter Notebook)

Før vi begyndte at bruge Bokeh, tog vi den bevidste beslutning om at script i JavaScript i stedet for Python, fordi hele vores webapplikation var og er bygget på en JavaScript-ramme. Ingen af ​​Bokeh-dokumentationen er i JavaScript (den er i Python, som du ville forvente), og det var svært at forsøge at komme under JavaScript-hætte.

Hvis du arbejder med lave niveauer, er det sandt, at alt muligt i Python er muligt i JavaScript med Bokeh. Men hvis du lige er begyndt at lære begge sprog, som jeg var, er det ikke intuitivt at oversætte syntaks mellem de to.

Derudover er der begrænsninger for JavaScript Bokeh.Chartsog Bokeh.PlottingAPI'er på højt niveau - nogle er udfaset, andre gør det virkelig svært for dig at ændre plotets funktioner. Eksemplerne nedenfor er mine forsøg på at oprette Bokeh-plot i JavaScript.

Bokeh lavt niveau Barchart ved hjælp af Javascript

Bokeh barchart på højt niveau ved hjælp af Bokeh.Charts Javascript API

Mere om udvikling i JavaScript med Bokeh her. Som du kan se, mister JavaScript med Bokehs bibliotek de enklere kodelinjer, som vi observerede, da vi udviklede med Python. Jeg tror, ​​det tog omkring en times fiddling i konsollen at tilføje en hvid kontur til bjælkerne og en titel i mit højtstående diagram, som gentager min kamp for at navigere uden for Bokeh.ChartsJavaScript API- grænserne, når du vil ændre visuelle detaljer i diagrammet.

Endelig er der mere dokumentation og aktiv brug af andre kortbiblioteker, som D3.js eller three.js sammenlignet med Bokeh. Med mere aktive bidragydere og brugere af et bibliotek kommer enhøjere sandsynlighed for at finde den løsning, du har brug for for at rette en bestemt fejl.

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

Hvorfor skiftede vi til D3

Så vi sad fast. Vi var nået til punktet "Dette bibliotek passer til vores behov, men det er en smerte at fortsætte med at lave ting i JavaScript, og måske kommer vi til at ramme loftet en dag, når vi indser, at vi har brug for noget, der ikke er tilgængeligt i Bokeh lige nu." Fedt nok.

Indtast D3.

Vores oprindelige bekymring med D3 var, at det ville gengive vores visualiseringer for langsomt i betragtning af tidligere erfaringer med gengivelse af SVG'er i browseren med større datamængder. Vi vidste også, at indlæringskurven for D3 var signifikant højere end Bokehs indlæringskurve.

Men vi var stadig optimistiske i betragtning af D3's popularitet, den uendelige mængde smukt dokumenterede D3-applikationer og vores "Get Sh * t Done" -indstilling ... så vi besluttede alligevel at prøve det.

Om D3

D3.js er et JavaScript-bibliotek, der lægger vægt på databinding. Det giver dig den unikke styrke til at generere elementer i DOM og binde datum / data til elementer samtidigt. Med et fuldstændigt datadrevet bibliotek kan du tilføje elementer dynamisk, når du tilføjer eller fjerner datapunkter og skifter mellem datasæt. D3 giver også mere kontrol over det æstetiske og interaktive ved det endelige resultat, hvilket betyder at du kan slippe af sted med at skabe de mest bizarre / vidunderlige visualiseringer.

Fordele

Til vores overraskelse var de D3-visualiseringer, vi oprettede med vores datasæt, meget buttery. Vi indså hurtigt, at D3 er struktureret specifikt til hurtig gengivelse på trods af de massive arrays, vi sendte ind på biblioteket.

I stedet for at sende datapunkter en efter en og generere den respektive SVG, hvilket kan være ret kedeligt, giver D3 dig mulighed for at binde hele dit datasæt til dine SVG'er, før de eksisterer. SVG'erne genereres derefter hurtigfire og tilknyttes deres respektive datapunkt på én gang.

Det er som en kok i køkkenet, der modtager en ordreliste på én gang og kan forberede maden i en rækkefølge, der undlader unødvendig ventetid, snarere end altid at vente på at modtage den næste ordre efter tilberedning af en skål.

Det bedste ved D3 er, at det giver rig mulighed for glatte interaktioner og overgange mellem datasæt. Fordi vores ultimative mål var og er at styrke brugeren, ønskede vi at skabe en visualisering, der ville invitere en person til at engagere sig i den.

D3 er også beregnet til JavaScript-udvikling. Der ville ikke være mere "grave under emhætten" i JavaScript API, som vi gjorde med Bokeh. Barchart-eksemplet, jeg oprettede ved hjælp af BokehJS tidligere i denne artikel, vises nedenfor ved hjælp af D3-biblioteket.

D3 Barchart

Ja, der er mere komplekse kodelinjer sammenlignet med den kode, der kræves til et Bokeh-diagram. Det tog mere tid og energi at samle op. Men du har fuld kontrol over hver lille detalje i dit diagram, og det hele er dokumenteret et eller andet sted online (sandsynligvis via skaberen, Mike Bostock). Det er ret godt.

Endelig har der været omfattende brug af D3 i de senere år til at visualisere det amerikanske valg i 2017, flytningen af ​​flygtningepopulationer, spædbarnsvaccinationsrater for WHO og utallige andre tendenser og historier. Som et resultat har D3 vundet en betydelig eksponering og opmærksomhed, hvilket fører til mere aktive brugere og nye måder at bruge biblioteket hver dag på.

Når du vælger et bibliotek til lang tid og husker, at dine holdkammerater også bliver nødt til at lære det til sidst, er det helt afgørende at overveje bibliotekets nuværende og fremtidige samfund af bidragydere. Et bibliotek med et konstant blomstrende samfund er ideelt, og D3 ser ud til at fremme den type samfund.

Ulemper

Den indledende indlæringskurve er højere for D3 sammenlignet med Bokeh, forudsat at du udvikler dig i Python med Bokeh. JavaScript er mere detaljeret end Python. Men hvis du som os havde planer om at udvikle JavaScript, er det værd at kaste igennem D3-tutorials.

Det er svært at forstå, hvordan valg fungerer, hvad .enter () og .exit () endda betyder, og den magi, der bare sker med en simpel linje kode (.transition () nogen?). MEN - når du først har pakket hovedet omkring D3s unikke struktur, forudsat at ting eksisterer, før de eksisterer, er mulighederne uendelige.

I sidste ende opvejer fordelene ved D3 indsatsen og tiden med at lære det, og vi havde en fornemmelse af, at skift til D3 ville være en god langsigtet investering.

Konklusion

Så der har du det! Vi bruger stadig aktivt og lærer D3, når vi integrerer biblioteket i vores applikation og vores team. Selvom bare fordi vi bevæger os fremad med D3, betyder det ikke, at vi ikke vil bruge Bokeh til en anden applikation i fremtiden. Der er fordele og ulemper ved hvert kortbibliotek, og det er vigtigt at reflektere konstant for at afgøre, om du skal fortsætte med dit nuværende bibliotek eller begynde at udforske andre muligheder.

Inden du vælger et kortlægningsbibliotek, skal du kende dine specifikke behov og ikke være bange for at dykke hovedet ned i det ukendte vand i kortlægningsbiblioteker med disse behov i tankerne. Hvis noget ikke fungerer første gang, så prøv noget nyt, der virker lovende.

Det handler om at udforske, dokumentere og tjekke ind igen med dig selv og dine holdkammerater for at fortsætte med at udvikle projektet på produktive måder.

Fremad!

Hvis du har kommentarer, rettelser, forslag eller bare vil tale, er du velkommen til at e-maile mig på [email protected] Du kan finde noget af mit arbejde på //mandilicai.com/.