d3.js не может визуализировать большой набор данных

Question

Мне нужны предложения по использованию d3.js для визуализации больших данных. Я извлекаю данные из hbase и сохраняю в json-файле для визуализации с использованием d3.js. Когда я вытягиваю данные за несколько часов, размер json-файла составляет около 100 МБ и может быть легко визуализирован с помощью d3.js, но фильтрация с использованием dc.js и crossfilter происходит немного медленно. Но когда я вытаскиваю набор данных за 1 неделю, размер json-файла становится больше 1 ГБ и пытается визуализировать с помощью d3.js, dc.js и crossfilter, тогда визуализация не работает должным образом, и фильтрация также невозможна. Может ли кто-нибудь дать мне представление о том, есть ли хорошее решение для этого или мне нужно работать на другой платформе вместо d3?

Answer 1

Я определенно согласен с тем, что раньше говорили Марк и Гордон. Но я должен добавить то, что я узнал за последние месяцы, когда я расширил панель dc.js, чтобы иметь дело с довольно большими наборами данных.

Один из узких мест, как указано, размер ваших наборов данных, когда он переводится в тысячи элементов SVG/DOM или Canvas. Холст легче в браузере, но у вас все еще есть огромное количество элементов в памяти, каждый со своими атрибутами, событиями щелчка и т. Д.

Вторым узким местом является сложность данных. Реактивность dc.js зависит не только от d3.js, но и от crossfilter.js. Если вы проверите the Crossfilter example dashboard, вы увидите, что размер данных, которые они используют, впечатляет: более 230000 записей. Однако сложность этих данных довольно низкая: всего пять переменных для каждой записи. Простое хранение ваших наборов данных помогает значительно увеличить масштаб. Имейте в виду, что пять переменных для каждой записи здесь означают около миллиона значений в памяти браузера во время визуализации.

Конечная точка, вы упоминаете, что вы извлекаете данные в формате JSON. Хотя это очень удобно в Javascript, разбор и проверка больших файлов JSON довольно требовательны. Кроме того, это не самый компактный формат. Crossfilter example data отформатированы как очень простой и жесткий CSV-файл.

Таким образом, вы должны найти сладкое пятно между размером и сложности ваших данных. Один миллион значений данных (размер раз сложности) вполне осуществимо. Увеличьте это на один порядок и ваше приложение может по-прежнему можно использовать.

Answer 2

Как отмечает @Mark, рассмотрение холста и рендеринга DOM - одно дело. Безусловно, самый большой расход в веб-визуализации - это элементы DOM.

Однако в какой-то степени crossfilter может смягчить это, объединив данные в меньшее количество визуальных элементов. Он может привлечь вас к сотням тысяч рядов данных. 1 ГБ может подталкивать его, но возможно 100 мегабайт.

Но вам нужно знать, на каком уровне вы агрегируете. Так, например, если это неделя данных временных рядов, вероятно, копание по часам является разумной визуализацией, для 7 * 24 = 168 пунктов. На самом деле вы не сможете воспринимать еще много очков, поэтому бессмысленно просить браузер нарисовать тысячи элементов.