Привет, жители Хабра! Я Саша Пиманов, ведущий iOS-разработчик в МТС Диджитал. В прошлый раз я рассказывал, что почитать начинающим разработчикам. А сегодня поделюсь подборкой из шести библиотек, которые помогут в ежедневной работе. Среди них простые и сложные, с возможностью глубокой кастомизации и без нее. Все они могут здорово облегчить работу программиста, когда нужно визуализировать какие-то данные.

Latitude

Удобная библиотека, позволяющая превращать SQL-запросы в API. Данные возвращаются в нужном вам формате. После этого можно строить графики и диаграммы, включая точечные, круговые, столбчатые и так далее.

Инструмент хорош тем, что он предлагает уже готовые компоненты для создания различных визуализаций к конкретному проекту. Они позволяют изменять внешний вид графиков: цвета, шрифты, стили, темы. А еще могут либо сами выполнять SQL-запросы через Latitude API и строить график из этих данных, либо работать с данными, которые вы передаете из другого источника.

Пример кода для импорта компонента LatitudeEmbed:

import { LatitudeEmbed } from '@latitude-data/react'
 
function App() {
  return (
	<div>
  	<h1>My React App</h1>
  	<LatitudeEmbed url="https://latitude.app/some/view" />
	</div>
  )
}

Результат обработки данных по «Звездным войнам» на Netflix — количество добавлений фильмов и сериалов с этим названием по годам:

В целом это простая и эффективная библиотека, которая не создает проблем в процессе разработки, а делает именно то, что должна. Доступна по этой ссылке.

D3.js

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

Низкоуровневая она потому, что позволяет получить доступ к SVG, HTML и CSS. Соответственно, разработчик вручную задает свойства визуальных элементов. К тому же библиотека модульная: компоненты можно использовать в сочетании друг с другом или по отдельности.

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

А вот участок кода, обеспечивающий визуализацию данных на этой страничке:

links = Generators.observe(notify => {
  let length = 0;
  const observed = () => {
	const links = document.querySelectorAll("a[title]");
	if (length !== links.length) {
  	length = links.length;
  	notify(Array.from(links, a => a.href).sort());
	}
  };
  const observer = new MutationObserver(observed);
  observer.observe(document.body, {childList: true, subtree: true});
  observed();
  return () => observer.disconnect();
})

Познакомиться с возможностями библиотеки можно прямо на сайте — там показаны различные виды визуализации, причем анимированные.

Nivo

А это уже высокоуровневая библиотека, построенная на базе предыдущей. Она создана для проектов на React. Высокоуровневая, поскольку позволяет быстро строить графики без углубления в кучу параметров. Работать с ней можно без специфических знаний SVG или DOM.

Этот инструмент позволяет за минимальное время создавать красивые визуализации, адаптированные под разные устройства: дисплей телефона, планшет, монитор. Nivo использует компонентную архитектуру React для простой интеграции. Готовая визуализация соответствует дизайну приложения, в которое ее встраивают.

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

import React from "react";
import { render } from "react-dom";
import { ResponsiveBar } from "@nivo/bar";
 
const data = [
  { month: "january", payments: 333823 },
  { month: "february", payments: 289877 },
  { month: "march", payments: 207712 },
  { month: "april", payments: 21550 },
  { month: "may", payments: 60084 }
];
 
const App = () => (
  <div>
	<h1>Hotel payments in Nivo</h1>
	<div style={{ height: "400px" }}>
  	<ResponsiveBar data={data} keys={["payments"]} indexBy="month" />
	</div>
  </div>
);
 
render(<App />, document.getElementById("root"));

В целом это одна из лучших библиотек для проектов, которые разрабатывают на React. Найти ее можно тут.

Plotly

Достоинство этой библиотеки — в ее универсальности. Она может работать с разными языками программирования, включая Python, R и JavaScript. Чаще всего ее используют для создания комплексных сложных графиков — научных или статистических визуализаций. Она абстрагирует те их типы, которые есть в matplotlib, ggplot2 или MATLAB.

Графики в Plotly описываются посредством JSON-объектов, поэтому визуализации можно переносить на разные платформы. У каждого параметра графика есть собственный набор JSON-атрибутов.

Вот пример кода и результат обработки данных, показанный на сайте библиотеки:

Ну а работа с SVG и WebGL для рендеринга изображений обеспечивает быструю работу даже в том случае, если обрабатывается большой объем данных.

Библиотека доступна по этой ссылке.

Apache ECharts

Очень мощная библиотека, в базе которой огромное количество самых разных видов графиков и диаграмм. Среди них, например, тепловые карты, диаграммы Санкея, рассеяния, радарные графики, ящичковые и параллельные координаты.

Визуализации получаются интерактивными, с такими функциями, как всплывающие подсказки, масштабирование, панорамирование, выделение данных и так далее. Для рендеринга графики применяется Zrender.

На этой страничке можно посмотреть пример кода для построения графиков роста дохода граждан разных стран с 1950 года по наши дни. Сам код приводить тут не буду, он слишком объемный. 

Библиотека достаточно сложная. Придется повозиться, прежде чем освоить. Но это стоит того. Как и во многих других случаях, в сети большое количество информации по Apache ECharts, это поможет в обучении. Вот пример одного из видеороликов:

Библиотека доступна на этой страничке.

Victory

Модульная библиотека для визуализации данных в приложениях на React и React Native. Разработчики предоставляют единый API для  React и React Native. Это открывает дорогу бесшовной интеграции в разные приложения — как веб, так и мобильные.

Victory достаточно простая, разобраться в ней можно быстро. При этом библиотека предоставляет интерактивные возможности: всплывающие подсказки, поддержку событий, есть и сложные анимации. Чтобы проект не был слишком «тяжелым», библиотека позволяет подключать только те модули, которые нужны в данный момент.

Чтобы начать работу, требуется импортировать библиотеку в проект, добавить данные и встроить компонент. Есть, как и писал выше, и дополнительная версия для React Native. Вот пример кода и сама визуализация:

function CatPoint(props) {
  const {x, y, datum} = props;
  const cat = datum._y >= 0 ? "?" : "?";
 
  return (
	<text x={x} y={y} fontSize={30}>
  	{cat}
	</text>
  );
}
 
function App() {
  return (
	<VictoryChart>
  	<VictoryScatter
    	y={(d) =>
      	Math.sin(2 * Math.PI * d.x)
    	}
    	samples={25}
    	dataComponent={<CatPoint/>}
  	/>
	</VictoryChart>
  );
}
render(<App/>);

Еще одно достоинство библиотеки в том, что ее компоненты легко настраиваются и расширяются. Можно менять их свойства и работать со стилями. Библиотека доступна по этой ссылке.

Было бы отлично, если бы вы рассказали в комментариях о библиотеках, с которыми работаете сами. Давайте обсуждать!