Колин Эберхарт — участвует в разработке многих проектов — написал статью про использование D3 для визуализации очень больших объёмов данных — "Rendering One Million Datapoints with D3 and WebGL".
Колин разрабатывает D3FC (набор компонентов для создания интерактивных диаграмм поверх D3). Недавно туда была добавлена поддержка WebGL. В статье на примере визуализации данных из репозитория цифрового контента научных библиотек HathiTrust рассказывается, как использовать эти компоненты.
Датасет HathiTrust состоит из одного миллиона объектов и занимает 70Mb. Если его читать полностью перед отрисовкой, то пользователь некоторое время не будет видеть график. Гораздо лучше рендерить график по мере получения данных. Для этого можно использовать Streams API. При наведении курсора мыши на каждую точку желательно показывать описание. Но опять же из-за большого объёма данных будут тормоза, если использовать линейный поиск для получения нужной точки. Для оптимизации поиска в примере используется структура данных Quadtree (идёт из коробки с D3).
Довольно большая и подробная статья. Cоветую почитать, если у вас возникнет задача визуализации очень большого количества данных.
#d3 #dataviz #webgl
https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html
Колин разрабатывает D3FC (набор компонентов для создания интерактивных диаграмм поверх D3). Недавно туда была добавлена поддержка WebGL. В статье на примере визуализации данных из репозитория цифрового контента научных библиотек HathiTrust рассказывается, как использовать эти компоненты.
Датасет HathiTrust состоит из одного миллиона объектов и занимает 70Mb. Если его читать полностью перед отрисовкой, то пользователь некоторое время не будет видеть график. Гораздо лучше рендерить график по мере получения данных. Для этого можно использовать Streams API. При наведении курсора мыши на каждую точку желательно показывать описание. Но опять же из-за большого объёма данных будут тормоза, если использовать линейный поиск для получения нужной точки. Для оптимизации поиска в примере используется структура данных Quadtree (идёт из коробки с D3).
Довольно большая и подробная статья. Cоветую почитать, если у вас возникнет задача визуализации очень большого количества данных.
#d3 #dataviz #webgl
https://blog.scottlogic.com/2020/05/01/rendering-one-million-points-with-d3.html
Scott Logic
Rendering One Million Datapoints with D3 and WebGL
This blog post introduces the WebGL components which we recently added to D3FC, this suite of components make it easy to render charts with very large numbers of datapoints using D3. Throughout this post I'll describe the creation of the following visualisation…