Эта статья пройдет через 3 основных этапа масштабируемого способа визуализации данных с Review.js и d3.js. Учебник основан на Часы работы с кодами Хозяин Zach Nation, инженером программного обеспечения на Dato Отказ
Часы работы кодамента с Zach Nation: масштабируемая визуализация данных в Rect.js
Презентация слайдов
Зачем использовать визуализацию данных?
Просто чтобы дать некоторому контексту для того, что мы делаем, разработчик должен пройти четыре шага при создании прогнозирующего применения:
Шаг 1: Понять данные.
Шаг 2: Выбрать некоторую соответствующую информацию. Ученые данные будут называть эту функцию инженерии и выбор функций.
Шаг 3: Создайте модель, которая по существу включает в себя несколько алгоритма машинного обучения и обучение его на существующих данных, которые у вас есть, используя функции, которые вы выбрали.
Шаг 4: Разверните модель. Это включает в себя производственный жизненный цикл. Интернет-разработчики будут знакомы с этими шагами, где вы берете то, что вы разработали на вашу машину и развернув его к производству. У вас есть тестовая инфраструктура, мониторинг и т. Д. Это, чтобы убедиться, что она работает и ведет себя так, как вы ожидаете.
На протяжении всего этого трубопровода визуализация данных может быть действительно важным инструментом для того, чтобы помочь вам понять все, от чего в сам данные о том, как вы управляете этим данным, как модель работает и выполняет, а затем, как служба работает и выполняет С точки зрения вещей, таких как задержка и сквозной. Человеческие существа действительно хороши в визуальном распознании картины.
Преимущества визуализации данных
Есть много типов данных, наборов данных и форм данных, в которых рассматривается сводная статистика, не дает вам очень четкую картину того, что фактически происходит в данных. Однако визуализация может немедленно дать вам эту картину без необходимости подкопать слишком много глубже или проводить слишком много времени на нее. Это очень быстрый способ получить понимание формы некоторых данных.
Пример, показанный выше, называется квартетом ANSCOMB, и это классический пример в визуализации данных, почему визуализация необходима в первую очередь. Как видите, каждый из этих примеров имеет одинаковую сводную статистику, но ясно, что они очень разные наборы данных, так что это просто одно место, где визуализация является очень важным инструментом.
Реальный мир Пример: транзакции Bitcoin
Приведенные выше данные являются шестнадцатеричными свалками реального мира пример на транзакциях Bitcoin. Это больший набор данных, чем вы, как правило, вписываются в браузере, поэтому я думаю, что он является представителем типов проблем, которые мы сталкиваемся. Он последовательно устроен, что означает, что мы можем визуализировать его во время передачи данных.
Разбирая блокчан
По большей части, шестнадцатеричный дамп выше – это двоичные данные, поэтому трудно иметь смысл. Тем не менее, я начал замечать картину: это повторение F9beb4d9 Отказ
Это на самом деле волшебный заголовок для каждого блока в блокчане. Блокчан Bitcoin по существу является одним длинным массивом блоков, и каждый блок представляет собой набор транзакций на биткойн. Другими словами, это гигантская публичная книга, которую каждый пишет, чтобы выполнять транзакции, и все данные хранятся последовательно здесь, и она может быть расставлена. На самом деле я написал какой-нибудь код JavaScript для анализа данных, загрузил его в GraphLab Create, как Sframe И получил действительно полезный дисплей того, что на самом деле происходит в этом файле.
Как видите, у нас около сорока пять миллионов строк. Это теперь было расставлено в индивидуальные транзакции. У нас есть операции, и каждая транзакция имеет временную метку и сумму. Есть некоторые другие данные, а также в этом блокчане, что я не включал здесь только для краткости (например, AT и A-A). По сути, вы можете думать об этом как в длинном списке транзакций и сумм транзакций.
Визуализация данных
Я на самом деле просто собираюсь запустить свою локальную копию этого демократического кода. Для тех, кто хочет следовать с кодом дома, это на самом деле на Github Отказ Это та же демо, и набор слайдов, которые я использовал на конференции REVECTJS, но я собираюсь пойти на намного больше глубиной здесь о том, как фактически структурировать код, как выполнить передачу данных между сервером NODE и приложением React Благодаря широкому количеству данных, как это, и как использовать D3, чтобы внести информацию в комментарий реагирования, но все еще используют реакцию для рендеринга.
Демо – это небольшой компонент, который я создал, чтобы показать общее количество транзакций биткойнов в день с течением времени, и у меня есть сервер узла, идущий в фоновом режиме, который обрабатывает этот блокчан. Другими словами, эта демонстрация фактически использует двоичный узел для разбора сырой блокировки.
Это помогает тем, что блокчан Bitcoin используется последовательно со временем, потому что мы можем транслировать весь файл в одном линейном проходе, и нам не нужно делать какие-то более сложные преобразования, чтобы получить хорошую визуализацию из данных.
Как видите, демонстрация дает мне гистограмму, показывающую сумму общей суммы транзакции биткойнов в день, поэтому мы сжимаем каждый день, а затем показываем батончик на каждый день, который произошел исторически. В то же время у нас есть журнал истории, который будет обновляться со временем, когда мы переходим в будущее в блокчане.
Я также нашел страницу Wiki, которая детализировала историю биткойна, и я только что снял, какова была дата, на которую произошло каждое событие. В моем компоненте реагирования я отфильтрую на максимальной дате, что отображается здесь, чтобы узнать, что отображать в этом компонент.
Итак, график поможет вам легко увидеть некоторые интересные корреляции между реальными событиями в блокчан и больших шипах в объеме транзакции. Например, когда были опубликованы обменные курсы, что коррелирует на действительно большой шип, потому что вдруг указывает на людей: «Теперь я могу торговать биткойн на реальные доллары». Таким образом, вы можете увидеть фактически реальные мировые события, которые соотносится на изменение объема транзакций, и это что-то визуализация может сказать нам гораздо легче, чем если бы мы пытались просто посмотреть на необработанные данные или сводить статистику, чтобы получить ту же информацию.
Проблемы с визуализацией больших данных
Самая большая проблема, участвующая в визуализации больших наборов данных, конденсирует, что объем данных в меньший набор визуальных элементов. Мы начинаем с более чем двадцать гигабайт необработанных данных, но мы явно не можем отправить все двадцать гигабайт в браузер. Поэтому мы должны иметь некоторую архитектуру, которая позволяет нам сделать это уменьшение данных и агрегацию на сервере, а затем отправлять меньший объем данных клиенту для рендеров в виде визуальных элементов (все, что отображается на графике, включая тикеру истории , доступа к данным, этикеткам и всеми точками данных, которые отображаются в этом участке.)
Другая задача поддерживает высокий уровень интерактивности и производительности при выполнении вычислений в потоковой моде.
Третья задача поддерживает состояние взаимодействия во всем интерфейсе Application UI и контролирующих длительные вычисления на стороне серверов на основе этого государства UI. Я не собираюсь слишком сильно попасть в эту проблему в этой статье, но это большая задача для анализа данных в целом, потому что если вы переключаетесь взад и вперед между большим набором данных, теперь вам нужно управлять тем, что в памяти Сервер на основе состояния пользовательского интерфейса на клиенте. У нас есть архитектура, где ваш сервер работает на localhost, и вы можете думать об этом как деталь реализации, потому что все это – это одно приложение, работающее на вашем компьютере.
Оказывается, это на самом деле вещами, на которых есть в реаги:
Визуализация данных с Reactjs: обзор
Оказывая визуальные элементы, поддержание интерактивности, а затем отслеживание состояния внезапно стало легко, когда я начал использовать inventjs. Теперь, когда мы использовали его в Dato около года, я думаю, что это была хорошая подгонка, поэтому я рад продолжать делать это, и я рад рассказать миру о том, как мы это делаем. Ниже приведен трубопровод для визуализации данных:
Чтобы получить необработанные данные, такими как двадцать гигабайт блокчан в представленную визуализацию, которая появляется в браузере, первый шаг, который вы должны сделать, это агрегация или снижение данных, чтобы получить какой-то другой визуальный результат. Это включает в себя существенно принимать эти данные и превращать его в меньшее количество других данных, которые будут представлять участок более напрямую. Тем не менее, мы не на самом деле не замышляйте двадцать гигабайт данных здесь, так как большинство участков действительно не могут приспособиться с тем, что для начала присутствуют много данных. Я не думаю, что люди, которые мы действительно способны смотреть на двадцать миллионов или сорок миллионов уникальных точек данных, так что это критический шаг в понимании того, что в этих данных в целом.
Следующим шагом является описание графиков сцены, где вы будете принимать эти агрегированные или уменьшенные данные и превратить его в набор визуальных элементов. Это означает, что идет из блока данных (например, массив чисел) в вещи, которые мы можем думать о (например, осях, отметках галочек, ярлыков, ширины и высоты баров на экране и т. Д.) Это то, что D3. JS традиционно действительно хорошо. Я всегда был большим поклонником D3, и это огромная библиотека ремня инструментов для визуализации в JavaScript, и достаточно низкоуровневая, чтобы позволить вам выразить все, что вы хотите выразить, чтобы создать любую визуализацию, которую вы хотите. D3.js имеет много действительно хороших наборов инструментов для таких вещей, как масштабирование, поэтому вам не придется изобретать колесо, поскольку вы построили визуальные элементы из агрегированных данных.
Последний шаг в этом трубопроводе является рендеринг. Многие люди используют D3.js для этого. Он имеет свое собственное решение для привязки данных, хотя учитывая, что у нас есть более широкое приложение в ReactJS, я предпочитаю использовать реактивные ресурсы для этого шага рендеринга. Таким образом, вы принимаете визуальные элементы, поместите их на страницу как SVG или в виде элемента холста, а затем выполнять некоторые привязки данных (по меньшей мере, в случае SVG.) Ни D3, ни реагируют не имеют хорошего абстрактного способа выполнения привязки данных К элементу холста, но холст по существу является немедленным режимом UI в любом случае, поэтому вы можете просто перерисовать весь кадр или каждый кадр, если вам нужно, предполагая, что это не займет слишком долго, или вам может придеться микро оптимизировать.
Шаг 1: агрегация данных
Первым шагом агрегации или снижения данных является проектирование и оптимизация конвейера данных, который уменьшит большой блок данных (например, два терабайта данных) в форму, которую вы можете отправить в браузер.
Первый принцип, который вы должны следовать, это Вычислить близко к данным Отказ Вы можете себе представить это так: у вас есть очень богатый сервер с огромным количеством данных и действительно, действительно крошечной трубы в веб-браузере. Этот веб-браузер – это то, где все в конечном итоге будет отображаться, но вы не можете просто отправить все эти данные. Если бы вы пытались попробовать, он может сбиться в браузер задолго до того, как все это попадет. Итак, всегда вычисляйте близко к данным. Сделать снижение данных, где данные.
Архитектура потока
Для достижения этого снижения данных мы используем архитектуру, которая является подобной поток. Я уверен, что многие из вас знакомы с этой диаграммой выше. У вас есть диспетчер и компонент магазина. Диспетчер несет ответственность за принятие действий и внесение изменений в магазине. Магазин по сути несет ответственность за то, что он является единственным источником правды о государстве. Все течет из магазина в вид, который фактически делает на странице. В целом, это поможет вам отслеживать изменения статистика на протяжении всего приложения. Мы используем очень похожую архитектуру для HorgLab Canvas:
Однако, как вы можете видеть, мы фактически заменили диспетчеру с помощью HTTP-запроса XML и/или веб-сокетом, поэтому, по сути, мы пересекаем провод по сети для каждого действия. Кроме того, наш магазин на самом деле является гостевым объектом на сервере, в отличие от большинства реализаций Flux, это упрощает управление государством довольно много, потому что нам не нужно что-либо сохранять синхронизацию через клиент и сервер. Все идет на сервер, и сервер является единственным источником правды.
Это работает, потому что наше приложение на localhost Итак, Это не обязательно архитектура, которую я бы порекомендовал приложению к Интернету Отказ Однако, если вы строете то, что считывают от вашего локального диска, а затем рендеринга в веб-браузере с сервером на Localhost это может быть хорошей архитектурой. Я знаю, что это было хорошо для нас.
Масштабируемая агрегация
Техника
Некоторые из типов агрегации данных, которые мы делаем, – это биннинг. Если вы делаете Binning в одном измерении, вы получаете гистограмму (которая по сути, есть гистограмма). Это почти как поворотные таблицы, если вы видели, что в Excel, где вы можете подсчитать элементы на диапазон, а затем вы отображаете количество элементов, которые попадают в каждый диапазон. Так вот визуальный пример этого:
Как видите, у нас здесь равная ширина. Первый имеет один предмет, второй имеет четыре и так далее.
По сути, вы просто посчитаете элементы, то у вас есть бары, высота которых представлена подсчетом элементов в каждом корзине, и вы получите гистограмму.
Это эффективная техника снижения данных, потому что теперь у нас есть пять точек данных, где мы использовались довольно много. Если вы сделаете это в двух измерениях, вы получаете тепловую карту. Вы можете думать об этом как об этом сюжетом. Это 2-D сюжет, как правило, две переменные или два столбца в одних и тех же наборах данных, наставляемых друг против друга. С помощью карты тепла, вы используете цвет, чтобы представлять плотность точек в каждом регионе. Другая методика, которую мы используем, это эскизные структуры данных. Если вы используете линейную алгоритмическую сложность (с 1 ~ 3 пропускаются по данным), вы можете получить точную статистику в некоторых случаях, а приблизительная статистика или приблизительные результаты в других случаях. И вы можете сделать это в потоковой моде, что означает, что вы можете начать рендурирование визуализации до завершения эскиза.
Поток – это ключ ко всему, что мы делаем в HorgLab Canvas, потому что один из принципов в разработке этого – предотвратить ожидание пользователя. Если вы имеете дело с большим количеством данных и делаете все как пакетную обработку, и вам нужно ждать пятнадцать минут, пока ваши данные не будут потеряны, вы потеряете свой поток, по сути, потому что ваше программное обеспечение прервало вас. Это не опыт пользователя, который я хотел бы доставить, поэтому у нас есть принцип потоковой передачи все, что мы делаем, чтобы получить немедленные результаты. И мы получаем частичные результаты. Также было несколько отличных академических исследований в этой области в визуализации, поэтому мы вдохновляемся этим, и я думаю, что мы даем хорошие результаты здесь.
Советы
Совет 1: иметь постоянную или очень медленно растущую сложность памяти Отказ Вы убедитесь, что масштабируемость агрегации, потому что вы не знаете, насколько велико государство будет заранее, поэтому вы не хотите масштабировать линейно или хуже с объемом данных о памяти.
Совет 2: производить результаты постепенно Отказ Это снова ключ к пользователю. Убедитесь, что пользователь не будет ждать слишком долго.
Совет 3: Периодически отправляйте результаты клиенту Не посылайте результаты, потому что вы переполняете рендеринг без особой причины. Вы можете повторно рендерировать шестьдесят раз в секунду, но я не думаю, что это на самом деле полезно для проблемы визуализации, и она просто собирается съесть много процессоров, поэтому я не буду рекомендовать его.
Как сделать масштабируемую агрегацию
Выше представляет собой небольшую диаграмму того, как мы производим масштабируемую агрегацию для холста графлаба. По сути, мы агрегация в кусках по данным, а затем иногда (не каждый кусок обязательно) отправляя данные обратно клиенту.
Это пример сервера, который фактически отправляет данные клиенту:
И мы делаем это каждые сотые процента Блокчана. Это просто произвольная метрика, которую я решил, был хорошим способом определить, когда мы готовы отправить больше данных. На практике это приводит к отправке новой партии данных клиенту примерно каждые несколько секунд. Тем временем сервер бесперебойный и просто обрабатывает все блоки. Вышеупомянутая петля принимает суммы транзакции из каждого блока, добавляя их все вверх, а затем отправляя их к клиенту.
Аналогично на клиенте мы на самом деле получаем в сообщении, откуда отправлял сервер.
this.setState({ histogram: hist(message.data) })
В набранном массиве JavaScript выше, я просто передаю сообщение, которое мы получили непосредственно в HIST Функция, которая является функцией, которую я написал. HIST Функция здесь не отображается, но она возьмет сообщение и вернет представление объекта, которое мы можем затем запрашивать из компонента реагирования.
Шаг 2: Превращение данных в визуальные элементы
Следующим шагом является принять агрегированные данные и превратить их в набор визуальных элементов.
Все помечено выше, это визуальный элемент. Если вы думаете о том, как вы сломаете реактивный компонент в подкомпоненты, каждый подкомпонент и каждый подкомпонент этого могут быть визуальным элементом в этом.
React & D3.js.
В компоненте реагирования текстовые значения обычно обычно зависят от данных, но в визуализации размеры и положения элементов на экране также обычно зависят от данных. D3.js действительно сияет в сочетании с реакцией, особенно при использовании размеров и позиций элементов в визуализации. D3.js – интересная библиотека. Это своего рода «сделать все» библиотеку визуализации в JavaScript, где она имеет основной набор функциональных возможностей, а затем и куча пространств имени также.
Изображение выше представляет собой инвентаризацию всех разных частей D3, и то, что я обнаружил, что почти все детали, как вы можете видеть, выделены в фиолетовом здесь, на самом деле являются либо чистые функции, кодированные на элементах, либо что-то близкое к нему – возможно, что объекты, которые являются известными, но вы можете запрашивать их для результатов.
Все эти фиолетовые элементы используются из компонента реагирования без каких-либо обручей, которые вы должны были пройти. Я получил много пробега D3 в сочетании с реагированием благодаря этому пути. Однако вы заметите, что выходные переходы и увеличение перетаскивания не включены в этот список. Это части D3, которые действительно специфичны для связывания данных, поэтому, если вы используете D3, чтобы выполнить рендеринг, которые также будут вступить в игру.
Техника
Я видел ряд методов, которые идут в направлении, где у вас есть по существу, в вашем дереве есть компонент узела листьев, а затем у вас есть компонент D3 под. В таком виде установки D3 выполняет все рендеринг и реагирует только на передачу данных. Вы можете использовать методы жизненного цикла, такие как должен () Чтобы убедиться, что реагирование не прикасается к DOM после этой точки, а затем он не будет обеспокоен домом под этим компонентом. Тем не менее, я собираюсь показать технику, которую я предпочитаю использовать, то есть использовать React на самом деле сделать рендеринг к дереву SVG DOM и использовать D3 для выполнения всех вычислений.
Как вы можете видеть, я определил комментарий реагирования под названием Ось И я прохожу в объекте масштаба D3 как его собственность, поэтому я звоню D3.Scale.Linear здесь. Я даю компонент домен и диапазон, а затем D3 дает мне обратно объект запроса для масштаба из этого домена в этот диапазон. Это здорово, потому что мне не нужно реализовывать масштабирование сейчас.
В пределах дочернего компонента, который получает масштаб Как имущество, вы можете видеть, что я могу использовать масштаб Функция на каждом тике, чтобы получить список галочек. Опять же, это только данные D3.Scale сам.
Затем мой React Render возвращает список элементов группы SVG с помощью {line} и а {label} На каждом (и это линия тикания и клещевой меткой). В целом это собирается дать мне список клещей. Наконец, React выполняет рендеринг, что означает, что вы получаете все виртуальные домо-домости.
Шаг 3: рендеринг визуализации
Выбор рендеринга цели
, И реагированные арт являются обычными целями о визуализации. React-Art обеспечивает множество возможностей, таких как WebGL, XAML, Direct2D, IOS и Android (особенно сейчас с реактивным встроенным).
Однако, просто чтобы держать вещи приятными и простыми, я просто собираюсь поговорить о SVG и Canvas. React-Art – это отличный слой абстракции на вершине SVG и холста, но то, что я нашел, это то, что когда я хочу использовать SVG, я действительно хочу, чтобы конкретные особенности самого SVG. Это означает, что я хочу использовать стиль CSS на нем, и я хочу использовать события DOM, но React-Art немного более ограничены.
Если я хочу использовать элемент холста, я собираюсь использовать элемент Canvas напрямую и обходите и обойти реактуальное искусство. Обычно вы можете решить вашу целевую цену на основе характеристик того, что вы оказываете.
- Количество визуальных элементов вы рендерируете
- количество анимации, которую вы хотите сделать
- Уровень интерактивности, который вы хотите поддерживать, * Поддержка браузера.
Примечательно, что React-Art имеет поддержку IE8 рендеринга с VML, но если вы не ориентируетесь на IE8, вам это не нужно.
SVG VS Canvas
Глядя на SVG и Canvas, то, что вы получаете от SVG, – это возможность использовать стили CSS, анимацию CSS и DOM событий. Это действительно мощно, потому что вы можете использовать полную мощность браузера, как правило, как вы, как правило, для HTML DOM с Divs и Swans. Но вы получаете действительно графический конкретный язык, чтобы поговорить об этом с такими вещами, как группы, прямоугольники и различные виды форм.
Когда использовать SVG
Если у вас есть тысяча или меньше визуальных элементов, то я думаю, что вы получите разумную производительность из SVG или Canvas. Поэтому я думаю, что для небольших приложений, в порядке, чтобы использовать SVG, особенно если вам не нужно рисовать слишком много вещей на участках, и если вы только рисующие полосы на одном измерении данных.
Когда использовать холст
Если у вас есть более тысячи или около того визуальных элементов, я обнаружил, что вы действительно можете замедлить браузер, представляя собой много элементов SVG для этого. Таким образом, карта нагрева – отличный пример для холста, где, если вы хотите иметь карту нагрева в два размера, и вы хотите, скажем, пятьсот бункеров в каждой оси, тогда вы имеете дело с пятью сотен на пятьсот прямоугольников, которые Слишком много элементов DOM для браузера, чтобы можно было справиться с хорошей производительностью. Так что там я бы рисовал к элементу холста, где вы можете получить хорошую производительность. И при этом вы откажетесь от того, что домо-доброта, как CSS и события.
Архитектура визуализации inventjs
GraphLab Canvas использует архитектуру визуализации DATO. Это 100% REVENTJS-визуализируется с помощью состоятельного сервера, мы используем структуру данных потокового эскиза для выполнения агрегации во время визуализации, и мы проверили это до почти десяти терабайт. Операторность и производительность остаются примерно постоянными, поскольку размер данных увеличивается, поэтому каждый метод мы используем масштабы до любого количества данных.
Диаграмма выше является обзором архитектуры DETO. Как вы можете видеть, у нас есть условный сервер и веб-браузер, отображающий результаты с этого сервера. На стороне сервера у нас есть постоянный шаг агрегации потокового потока, который идет взад и вперед между нашим магазином (нашим государственным объектом). В магазине подают данные в компонент React, и компонент React отправляет обновления до диспетчера на сервере, который отправляет обновления в магазин.
На стороне браузера мы редаем либо к элементу Canvas, либо элемент SVG, в первую очередь определяли тип графика и количеством визуальных элементов для каждого участка.
Для получения дополнительной информации о архитектуре DETO вы можете проверить эту статью.
Часть 2: Добавление перекрестной фильтрации и на мышковом взаимодействии в визуализированные данные в Rect.js