Складання карт води: між Боке і D3

Складання карт води: між Боке і D3

Вступ

У житті починаючого "стриманого, але також високого класу, який намагається стати дизайнером та розробником інтерфейсу", настає момент, коли вони повинні увійти у світ створення бібліотек.

Бібліотеки діаграм створюють візуалізацію, керовану даними. Вони є причиною того, що ви можете швидко зрозуміти тенденції тривалості життя на FiveThirtyEight або оцінити національні настрої щодо майбутніх президентських виборів (так) на The New York Times.

Подумайте про діаграми, які ви можете створити в Google Таблицях, за винятком того, що тепер у вас є права на прямий перегляд і редагування бібліотеки, яка керує цими діаграмами. Ви господар цих низькорівневих будівельних блоків, що складають "діаграму".

Кілька бібліотек складання графіків написані на JavaScript - мові, яка є більш звичною для веб-розробників, ніж більшість, що робить навчання їх менш страшним подвигом. При правильному виконанні бібліотеки складання графіків мають можливість перенести додому потужне повідомлення та надати можливість переглянути серйозні візуальні цукерки.

Нещодавно нашій команді було доручено створити інтерфейс, який повинен інтегрувати бібліотеку діаграм, щоб досягти мети. Як результат, нам довелося визначитися з бібліотекою, яка відповідає нашим конкретним випадкам використання. Якщо ви правильно зважите свої потреби і виберете бібліотеку, яка якимось чином їх задовольнить, життя золоте.

Однак бібліотеки ніколи не є універсальною угодою. Найчастіше ваше первісне припущення, що бібліотека ідеально підходить, буде неправильним через непередбачувані перешкоди, що виникають.

Можливо, ви думаєте: "Які це варіанти?", "Як ви підійшли до вибору варіанту?" або "Чому ти почувався дурним?" (посилається на повідомлення Slack вище).

У цій статті буде описано наш процес вибору бібліотеки діаграм серед безлічі доступних на даний момент бібліотек діаграм JavaScript, важливе рішення щодо переключення між двома бібліотеками діаграм (Bokeh та D3.js), а також плюси і мінуси кожної з них. Для мене це була "невизначена" територія, і якщо ви відчуваєте те саме щодо графічних бібліотек або візуалізації даних загалом, то після прочитування ви почуватиметеся краще.

Давайте почнемо!

Чому ми спробували боке спочатку

Наші потреби розділилися на два табори: швидкість та інтерактивність . Оскільки ми обробляли більші обсяги даних, наша візуалізація повинна була мати можливість оновлюватись із блискавичною швидкістю (або, принаймні, зі швидкістю, яка не мала помітного відставання).

Наша програма також мала мати бажану інтерактивність, яку ми передбачали для користувача. В ідеальному сценарії бібліотека вже включала б деякі з цих інтерактивних функцій, які ми могли б легко вкинути, замість того, щоб писати їх з нуля.

Входить Боке.

Про Боке

Bokeh - це бібліотека, в основному призначена для створення візуалізацій у браузері з великих або потокових наборів даних. Ви створюєте ці візуалізації за допомогою Python. Потім API-інтерфейс JavaScript Bokeh бере ваш скрипт Python і відображає графіки або діаграми на додаток до обробки взаємодії з користувацьким інтерфейсом у браузері.

Ви також можете використовувати сервер Bokeh для обробки потокових даних. У документації Bokeh 0.12.13 сказано: «Ця можливість синхронізації між python та браузером є основною метою сервера Bokeh».

Переваги

Боке є магічним з багатьох причин. Він відображає спочатку використання WebGL із резервною версією HTML5 Canvas, надає кілька вбудованих інструментів для взаємодії з діаграмами, обробляє надзвичайно великі набори даних і, зрештою, створює щось, що може негайно зайти в Інтернет.

Можливість навігації між Python та JavaScript також надзвичайно потужна для складання графіків, оскільки Python дозволяє використовувати корисну структуру даних та інструменти аналізу даних, тоді як JavaScript перетворює маніпульовані дані у зручну для браузера візуалізацію.

Недоліки

Однак одним недоліком Боке є те, що він обмежений ступенем інтерактивності, яку може мати візуалізація. "Боке" дозволяє "скласти графік" у більш звичному розумінні - він пропонує 2-D сітчасте полотно з осями в якості базової лінії. І це нормально, адже часто саме це потрібно і хоче користувачеві. Досвідчені користувачі Боке можуть робити дійсно гарні речі (див. Приклади тут).

Але якщо я хотів зробити візуалізацію, яка виходила б за рамки загальноприйнятих характеристик діаграми, таких як імітація сил між атомами та перетягування атомів навколо, я не знаю, як би я це зробив у Боке.

Bokeh також призначений для розробки на Python, а не JavaScript. Нижче наведено приклади бархарт в Боке з використанням Python. Це дуже просто і чисто.

Bokeh Barchart за допомогою Python (через блокнот Jupyter)

Перш ніж почати використовувати Bokeh, ми прийняли свідоме рішення писати сценарії на JavaScript замість Python, оскільки вся наша веб-програма була побудована і побудована на структурі JavaScript. Жодна з документації Bokeh не є на JavaScript (вона є на Python, як і слід було очікувати), і спроба потрапити під капот JavaScript виявилася складною.

Якщо ви працюєте з низькорівневими гліфами, це правда, що все можливе в Python можливо в JavaScript з Bokeh. Однак якщо ви тільки починаєте вивчати обидві мови, як я, переклад синтаксису між ними не є інтуїтивним.

Крім того, існують обмеження щодо високоякісного JavaScript Bokeh.Chartsта Bokeh.PlottingAPI - деякі застаріли, інші ускладнюють зміну особливостей сюжету. Наведені нижче приклади - це мої спроби створення графіків Боке в JavaScript.

Низькорівнева діаграма Боке за допомогою Javascript

Діаграма високого рівня Bokeh за допомогою API Javascript Bokeh.Charts

Детальніше про розробку в JavaScript з Bokeh тут. Як бачите, JavaScript із бібліотекою Боке втрачає простіші рядки коду, які ми спостерігали при розробці за допомогою Python. Думаю, знадобилася близько години возиння на консолі, щоб додати білий контур до стовпців та заголовок у моєму високорівневому графіку, який повторює мою боротьбу з навігацією поза межами Bokeh.ChartsJavaScript API, коли ви хочете змінити візуальні деталі діаграми.

Нарешті, є більше документації та активного використання інших бібліотек діаграм , таких як D3.js або three.js, порівняно з Bokeh. З більш активними співавторами та користувачами бібліотеки з'являєтьсявища ймовірність пошуку рішення, необхідного для виправлення конкретної помилки.

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

Чому ми перейшли на D3

Тож ми застрягли. Ми дійшли до точки "ця бібліотека відповідає нашим потребам, але це продовжувати створювати речі на JavaScript, і, можливо, одного дня ми перейдемо до стелі, коли зрозуміємо, що нам потрібно щось, що недоступне в Боке зараз ". Класно.

Введіть D3.

Наша початкова стурбованість D3 полягала в тому, що він буде робити наші візуалізації занадто повільно, враховуючи минулий досвід рендеринга SVG у браузері з більшими обсягами даних. Ми також знали, що крива навчання для D3 була значно вищою, ніж крива навчання Боке.

Але ми все ще були оптимістичними, враховуючи популярність D3, нескінченну кількість прекрасно задокументованих додатків D3 та наше ставлення „Зробити все” ... тому ми вирішили все-таки спробувати.

Про D3

D3.js - це бібліотека JavaScript, яка підкреслює прив'язку даних. Це дає вам унікальну можливість генерувати елементи в DOM і одночасно прив'язувати дані / дані до елементів. Завдяки повністю керованій даними бібліотеці ви можете динамічно додавати елементи при додаванні або видаленні точок даних та переході між наборами даних. D3 також надає більше контролю над естетикою та інтерактивністю кінцевого результату, а це означає, що ви можете уникнути створення найхимерніших / чудових візуалізацій.

Переваги

На наш подив, візуалізації D3, які ми створили з нашими наборами даних, були дуже жирними. Ми швидко зрозуміли, що D3 побудований спеціально для швидкого відтворення, незважаючи на масивні масиви, які ми передавали до бібліотеки.

Замість того, щоб передавати точки даних одну за одною та генерувати відповідний SVG, що може бути досить нудно, D3 дозволяє зв’язати весь набір даних із SVG, перш ніж вони існують. Потім SVG генеруються швидким вогнем і зв’язуються з відповідними точками даних за один раз.

Це як шеф-кухар на кухні, який отримує одразу список замовлень і може приготувати їжу в такому порядку, який опускає непотрібний час очікування, а не завжди чекає отримання наступного замовлення після приготування однієї страви.

Найкраще в D3 полягає в тому, що він пропонує широкі можливості для плавної взаємодії та переходів між наборами даних. Оскільки нашою кінцевою метою було і є розширення можливостей користувача, ми хотіли створити візуалізацію, яка б запросила людину до взаємодії з нею.

D3 також призначений для розробки JavaScript. Більше не буде "копати під капотом" API JavaScript, як ми це робили з Боке. Приклад гістограми, який я створив за допомогою BokehJS раніше в цій статті, показаний нижче за допомогою бібліотеки D3.

D3 Бархарт

Так, є більш складні рядки коду порівняно з кодом, необхідним для діаграми Боке. Щоб забрати, потрібно було більше часу та енергії. Але ви маєте повний контроль над кожною дрібною деталлю вашої діаграми, і все це задокументовано десь в Інтернеті (можливо, через творця Майка Бостока). Це досить здорово.

Нарешті, в останні роки широко використовували D3 для візуалізації виборів у США 2017 року, руху населення біженців, рівня вакцинації немовлят для ВООЗ та безлічі інших тенденцій та історій. Як результат, D3 отримав значну кількість експозиції та уваги, що призводить до більш активних користувачів та нових способів користуватися бібліотекою щодня.

Вибираючи бібліотеку на тривалий термін та маючи на увазі, що вашим товаришам по команді також доведеться її вивчити з часом, надзвичайно важливо врахувати поточну та майбутню спільноту співробітників бібліотеки. Бібліотека з постійно процвітаючою громадою є ідеальною, і D3, схоже, сприяє розвитку такого типу спільноти.

Недоліки

Початкова крива навчання вища для D3 порівняно з Боке, припускаючи, що Ви розробляєте в Python разом з Боке. JavaScript є більш багатослівним, ніж Python. Однак, якщо ви, як і ми, планували розробляти на JavaScript, варто перебирати підручники D3.

Це важко розуміння як вибір роботи, ніж Введіть бажану () і .exit () навіть середнє, і магія , що просто відбувається з допомогою однієї простої рядки коду (.transition () хто - небудь?). АЛЕ - як тільки ти обернеш голову навколо унікальної структури D3, яка передбачає, що речі існують до того, як вони існують, можливостей безмежно.

Врешті-решт, переваги D3 переважали зусилля та час на його вивчення, і ми здогадувались, що перехід на D3 буде гарною довгостроковою інвестицією.

Висновок

Отже, у вас це є! Ми все ще активно використовуємо та вивчаємо D3, інтегруючи бібліотеку в наш додаток та нашу команду. Хоча те, що ми рухаємося вперед із D3, не означає, що ми не будемо використовувати Bokeh для іншого застосування в майбутньому. У кожній бібліотеці графіків є плюси і мінуси, і важливо постійно розмірковувати, щоб визначити, чи варто продовжувати роботу з поточною бібліотекою, чи почати вивчати інші варіанти.

Перш ніж вибирати бібліотеку діаграм, знайте свої конкретні потреби і не бійтеся з головою зануритися у незвідані води бібліотек діаграм з урахуванням цих потреб. Якщо щось не вдається з першого разу, спробуйте щось нове, що здається перспективним.

Йдеться про вивчення, документування та перевірку з собою та своїми товаришами по команді, щоб продовжувати розвивати проект продуктивно.

Вперед!

Якщо у вас є якісь зауваження, виправлення, пропозиції або просто ви хочете поговорити, не соромтеся писати мені на електронну адресу [email protected] Ви можете знайти деякі мої роботи на //mandilicai.com/.