Картирање вода: између Бокех и Д3

Картирање вода: између Бокех и Д3

Увод

У животу надобудног „ниског, али и високог кључа који покушава да постане фронт-енд дизајнер и програмер“ дође време када морају да уђу у свет графичких библиотека.

Графичке библиотеке производе визуелизације на основу података. Они су разлог због којег можете брзо схватити трендове у очекиваном животу на ФивеТхиртиЕигхт или измерити национално расположење о предстојећим председничким изборима (иикес) на Тхе Нев Иорк Тимес-у.

Размислите о графиконима које можете да креирате у оквиру Гоогле табела, осим што сада имате права на директан преглед и уређивање библиотеке која покреће те табеле. Ви сте господар ових блокова ниског нивоа који чине „графикон“.

Неколико библиотека графикона написано је на ЈаваСцрипт-у, језику који је веб програмерима познатији од већине, што њихово учење чини мање застрашујућим подвигом. Када се правилно изврше, библиотеке графикона имају моћ да кући однесу моћну поруку и пруже вам прилику да погледате озбиљне визуелне слаткише.

Недавно је наш тим имао задатак да креира интерфејс који треба да интегрише библиотеку графикона како би испунио циљ. Као резултат, морали смо се одлучити за библиотеку која је задовољила наше специфичне случајеве употребе. Ако правилно измерите своје потребе и одаберете библиотеку која их некако задовољава, живот је златан.

Међутим, библиотеке никада нису једноставан посао. Чешће него не, ваша почетна претпоставка да се библиотека савршено подудара биће нетачна због непредвиђених препрека које се појављују.

Можда размишљате: „Које су то опције?“, „Како сте приступили одабиру опције?“ или „Зашто сте се осећали глупо?“ (односи се на горњу поруку Слацк).

Овај чланак ће описати наш поступак одабира библиотеке графикона међу безбројем ЈаваСцрипт библиотека графикона које су тренутно доступне, критичну одлуку о преласку између две библиотеке графикона (Бокех и Д3.јс) и предности и недостатке сваке од њих. За мене је ово била „неисцртана“ територија, и ако се и ви осећате исто у вези са графичким библиотекама или визуализацијом података уопште, осећаћете се боље након што ово прочитате.

Почнимо!

Зашто смо прво испробали бокех

Наше потребе су се подијелиле у два табора: брзина и интерактивност . Будући да смо обрађивали веће количине података, наша визуелизација је морала да буде у могућности да се ажурира брзином муње (или бар брзином која није имала осетљиво заостајање).

Наша апликација је такође требала да има жељену интерактивност коју смо предвидели за корисника. У идеалном сценарију, библиотека би већ садржала неке од ових интерактивних функција које бисмо могли лако убацити, уместо да их морамо писати од нуле.

Уђите у Бокех.

О Бокех

Бокех је библиотека првенствено намењена стварању визуелизација у прегледачу из великих скупова података или података који се стримују. Ове визуелизације креирате помоћу Питхона. Тада Бокех-ов ЈаваСцрипт АПИ узима вашу Питхон скрипту и приказује графиконе или графиконе, поред руковања корисничким интерфејсом у прегледачу.

Такође можете да одаберете да користите Бокех Сервер за управљање протоком података. У документацији Бокех 0.12.13 стоји: „Ова способност синхронизације између питхона и прегледача је главна сврха Бокех сервера.“

Предности

Боке је магичан из пуно разлога. Прво се приказује помоћу ВебГЛ-а са резервним ХТМЛ5 Цанвас-ом, пружа неколико уграђених алата за интеракцију са графиконима, обрађује изузетно велике скупове података и на крају ствара нешто што одмах може ићи на мрежу.

Способност навигације између Питхона и ЈаваСцрипт-а такође је невероватно моћна за графиковање, јер вам Питхон омогућава да искористите корисну структуру података и алате за анализу података, док ЈаваСцрипт манипулираним подацима преводи у визуализације прилагођене прегледачу.

Мане

Међутим, један недостатак Бокеха је тај што је он ограничен у степену интерактивности коју визуализација може имати. Бокех вам омогућава да „графиконите“ у уобичајенијем смислу - нуди дводимензионално мрежасто платно са осама као основном линијом. И то је у реду, јер је често то оно што корисник треба и жели. Искусни корисници Бокех-а могу да направе заиста лепе ствари (примере погледајте овде).

Али ако бих желео да направим визуализацију која превазилази уобичајене карактеристике графикона, попут симулације сила између атома и повлачења атома око себе, не знам како бих то постигао у Бокеху.

Бокех је такође намењен за развој на Питхону, а не за ЈаваСцрипт. Испод су примери графикона у Бокех-у који користе Питхон. Супер је једноставно и чисто.

Бокех Барцхарт користећи Питхон (путем Јупитер бележнице)

Пре него што смо почели да користимо Бокех, донели смо свесну одлуку да скриптујемо на ЈаваСцрипт уместо на Питхону, јер је цела наша веб апликација била и изграђена је на ЈаваСцрипт оквиру. Ниједна Бокех документација није на ЈаваСцрипт-у (она је на Питхону, као што бисте очекивали), а покушај да уђемо под ЈаваСцрипт-хаубу показао се тешким.

Ако радите са ниским нивоима глифа, истина је да је све могуће у Питхону могуће у ЈаваСцрипт-у са Бокех-ом. Међутим, ако тек почињете да учите оба језика као што сам ја био, превођење синтаксе између њих није интуитивно.

Поред тога, постоје ограничења за ЈаваСцрипт Bokeh.Chartsи Bokeh.PlottingАПИ -је на високом нивоу - неки су застарели, а други вам отежавају промену карактеристика радње. Следећи примери су моји покушаји стварања Бокех парцела у ЈаваСцрипт-у.

Бокех Барцхарт ниског нивоа користећи Јавасцрипт

Бокех графикон високог нивоа користећи Бокех.Цхартс Јавасцрипт АПИ

Овде више о развоју ЈаваСцрипт-а са Бокех-ом. Као што видите, ЈаваСцрипт са Бокех-овом библиотеком губи једноставније редове кода које смо приметили приликом развијања са Питхоном. Мислим да је требало око сат времена петљања по конзоли да бих додао бели обрис тракама и наслов у моју графикон високог нивоа, који понавља моју борбу око навигације ван граница Bokeh.ChartsЈаваСцрипт АПИ-ја када желите да промените визуелне детаље графикона.

Коначно, постоји више документације и активно коришћење других библиотека графикона , попут Д3.јс или тхрее.јс, у поређењу са Бокех. Са активнијим сарадницима и корисницима библиотеке долази ивећа вероватноћа да ћете пронаћи решење које вам је потребно да бисте исправили одређену грешку.

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

Зашто смо прешли на Д3

Дакле, заглавили смо. Стигли смо до тачке „ова библиотека некако одговара нашим потребама, али мука је наставити правити ствари у ЈаваСцрипт-у и можда ћемо једног дана досећи плафон када схватимо да нам треба нешто што није доступно у Бокех-у. Сада." Хладан.

Унесите Д3.

Наша првобитна брига за Д3 била је да ће приказати наше визуализације преспоро, с обзиром на прошла искуства са приказивањем СВГ-ова у прегледачу са већим количинама података. Такође смо знали да је крива учења за Д3 била знатно виша од Бокехове криве учења.

Али и даље смо били оптимистични с обзиром на популарност Д3, бесконачну количину лепо документованих Д3 апликација и наш став „Заборави“ ... па смо ипак одлучили да покушамо.

О Д3

Д3.јс је ЈаваСцрипт библиотека која наглашава везивање података. Даје вам јединствену снагу за генерисање елемената у ДОМ-у и истовремено повезивање података / података са елементима. Помоћу потпуно библиотеке вођене подацима можете динамички додавати елементе приликом додавања или уклањања тачака података и преласка између скупова података. Д3 такође пружа већу контролу над естетиком и интерактивношћу коначног резултата, што значи да се можете извући стварањем најбизарнијих / дивнијих визуализација.

Предности

На наше изненађење, визуелизације Д3 које смо креирали помоћу наших скупова података биле су врло масне. Убрзо смо схватили да је Д3 конструисан посебно за брзо приказивање, упркос масивним низовима које смо прослеђивали у библиотеку.

Уместо да прослеђујете тачке података једну по једну и генеришете одговарајући СВГ, што може бити прилично заморно, Д3 вам омогућава да свој целокупни скуп података повежете са СВГ-овима пре него што они постоје. СВГ-ови се затим генеришу брзо активирање и повезују са одговарајућим тачкама података све у једном потезу.

То је попут кувара у кухињи који одједном прима списак поруџбина и може припремити храну по редоследу који изоставља непотребно време чекања, уместо да увек чека да добије следећу поруџбину након припреме једног јела.

Најбољи део Д3 је тај што нуди обилне могућности за глатке интеракције и прелазе између скупова података. Будући да је наш крајњи циљ био и јесте да оснажимо корисника, желели смо да створимо визуелизацију која ће позвати појединца да се ангажује са њом.

Д3 је такође намењен развоју ЈаваСцрипт-а. Не би било више „копања испод хаубе“ ЈаваСцрипт АПИ-ја као што смо то радили са Бокех-ом. Пример графикона који сам створио користећи БокехЈС раније у овом чланку приказан је доле користећи Д3 библиотеку.

Д3 Барцхарт

Да, постоје сложеније линије кода у поређењу са кодом потребним за Бокех графикон. Требало је више времена и енергије да се покупи. Али имате потпуну контролу над свим малим детаљима графикона и све је то документовано негде на мрежи (вероватно преко творца, Микеа Бостоцка). То је прилично добро.

И на крају, последњих година се често користи Д3 за визуализацију америчких избора 2017. године, кретање избегличке популације, стопе вакцинације новорођенчади за СЗО и безброј других трендова и прича. Као резултат, Д3 је привукао значајну количину изложености и пажње, што доводи до активнијих корисника и нових начина свакодневног коришћења библиотеке.

Када бирате библиотеку на дуге стазе и имајући на уму да ће и ваши саиграчи то на крају морати да науче, од пресудне је важности размотрити тренутну и будућу заједницу сарадника у библиотеци. Библиотека са заједницом која непрестано напредује је идеална и чини се да Д3 негује ту врсту заједнице.

Мане

Почетна крива учења је виша за Д3 у поређењу са Бокех-ом, под претпоставком да се развијате у Питхону са Бокех-ом. ЈаваСцрипт је опширнији од Питхона. Међутим, ако сте попут нас планирали да развијате ЈаваСцрипт, вреди се трудити кроз Д3 водиче.

То је тешко разумевање како селекције рад, што .ентер () и .екит () и средња, а магија је управо дешава са једном једноставном линијом кода (.транситион () било ко?). АЛИ - кад једном омотате главу око јединствене структуре Д3 претпостављајући да ствари постоје пре него што постоје, могућности су бескрајне.

На крају, благодати Д3 премашиле су напор и време његовог учења, а слутили смо да би прелазак на Д3 био добра дугорочна инвестиција.

Закључак

Ето ти га! И даље активно користимо и учимо Д3 док интегришемо библиотеку у нашу апликацију и наш тим. Иако то што напредујемо са Д3 не значи да убудуће нећемо користити Бокех за другу апликацију. Постоје предности и недостаци сваке библиотеке графикона и важно је непрестано размишљати како бисте утврдили да ли требате наставити са тренутном библиотеком или започети истраживање других опција.

Пре него што одаберете библиотеку графикона, знајте своје специфичне потребе и не бојте се заронити главом у неисцртане воде библиотека графикона имајући на уму те потребе. Ако нешто не успије први пут, покушајте с нечим новим што изгледа обећавајуће.

Ради се о истраживању, документовању и поновном проверивању са собом и саиграчима да бисте наставили да развијате пројекат на продуктиван начин.

Напред!

Ако имате коментаре, исправке, сугестије или само желите да разговарате, слободно ми пошаљите е-маил на мандицаи@гмаил.цом. Неке од мојих радова можете пронаћи на //мандилицаи.цом/.