TGViewer
Defront — про фронтенд-разработку и не только Defront — про фронтенд-разработку и не только @defront · 5.04K subscribers
Post #498 2.78K
Колин Эберхарт — участвует в разработке многих проектов — написал статью про использование 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
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…
More from @defront
  1. Jan 7, 2024Channel name was changed to «Defront — про фронтенд-разработку и не только»
  2. Feb 24, 2022Про войну в Украине Шлю лучи поддержки братьям и сёстрам украинцам. В моём окружении нет н…
  3. Feb 23, 2022Qwik — возобновляемый JavaScript-фреймворк Райан Карниато поделился своими мыслями после р…
  4. Feb 22, 2022Обработка ошибок с помощью reportError Стэфан Джудис рассказал про малоизвестный метод для…
  5. Feb 21, 2022Выбор библиотеки по её размеру Владимир Клепов рассказал про подводные камни выбора библио…
  6. Feb 10, 2022Time-travel debugging в Svelte Сэм Ван Тассел рассказал про DeLorian — новый инструмент дл…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →