Какие бывают библиотеки для визуализации данных

Я сейчас пишу статью о сравнении подходов к созданию графиков в D3 и Chart.js и, пока собираю материал, решила структурировать у себя в голове, какие вообще бывают библиотеки визуализаций и чем они отличаются.

В итоге у меня получился список из восьми популярных библиотек — очень разных и по возможностям, и по подходу к графикам.

⭐️ D3.js
• низкоуровневый тулкит
• 9.7 млн недельных скачиваний на npm
• 113 тысяч звёзд на github

Набор инструментов для работы с данными и DOM/SVG элементами — позволяет собрать практически что угодно, но собирать придётся самостоятельно как сложный конструктор.

Самая используемая у меня библиотека. Сложно влиться, но зато можно покрыть любые хотелки.

🖇 Ссылки на мои туториалы по D3

const line = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y));

⭐️ Chart.js
• готовая библиотека графиков
• 9 млн недельных скачиваний на npm
• 67.3 тысяч звёзд на github

Простой и удобный вариант для создания большинства стандартных графиков, с быстрым стартом и настройкой графиков через конфиг.

Очень люблю Chart.js для визуализаций без сложных кастомизаций (хотя они тоже возможны благодаря системе плагинов). За десяток-другой строк можно уже получить работающий на канвасе график.

new Chart(ctx, {
  type: 'bar',
  data: { ... },
  options: { ... },
});

⭐️ Apache ECharts
• конфигурационная библиотека графиков
• 2.3 млн недельных скачиваний на npm
• 66.1 тысяч звёзд на github

Большая и мощная система для интерактивных графиков и дашбордов с кучей встроенных типов, способная работать в том числе с большими объёмами данных.

Я работала с ECharts на одном проекте, мне понравилось. Похожа на Chart.js, но больше про корпоративные дашборды и системы аналитики.

const myChart = echarts.init(chartDom);

myChart.setOption({
  xAxis: { ... },
  yAxis: { ... },
  series: [{ ... }],
});

⭐️ Plotly.js
• высокоуровневая декларативная библиотека
• 970 тысяч недельных скачиваний на npm
• 18.2 тысяч звёзд на github

Похожа на Chart.js и ECharts, но заметно ближе к научным и аналитическим визуализациям: есть статистические графики, 3D и прочее нетривиальное.

Признаюсь, что никогда не пользовалась. Конфиг простой и в доках я нашла очень много заготовленных типов, включая водопад, свечки и даже контурные карты.

const data = [{ x: [...], y: [...], type: 'bar' }];

Plotly.newPlot('chart', data);

⭐️ Observable Plot
• библиотека для быстрых графиков
• 146 тысяч недельных скачиваний на npm
• 5.2 тысяч звёзд на github

Хороша для быстрого исследования данных — простое API и сборка графика из отдельных заготовленных частей.

Когда-то давно я ковыряла ещё сырую бета версию (рассказывала тут). С тех пор, кажется, многое поменялось, включая даже синтаксис.

Plot.plot({
  marks: [
    Plot.barY(data, { x: 'category', y: 'value' }),
  ],
});

⭐️ Vega-Lite
• декларативная грамматика графики
• 414 тысяч недельных скачиваний на npm
• 5.3 тысяч звёзд на github

Инструмент, где графики описываются через JSON-структуру с данными, типами отображения и всеми преобразованиями.

Раньше не пробовала, но по докам и примерам выглядит как очень удобный инструмент для быстрых визуализаций.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": { ... },
  "mark": "bar",
  "encoding": {
    "x": { ... },
    "y": { ... }
  }
}