Привет, жители Хабра! Я Саша Пиманов, ведущий 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/>);
Еще одно достоинство библиотеки в том, что ее компоненты легко настраиваются и расширяются. Можно менять их свойства и работать со стилями. Библиотека доступна по этой ссылке.
Было бы отлично, если бы вы рассказали в комментариях о библиотеках, с которыми работаете сами. Давайте обсуждать!
ссылка на оригинал статьи https://habr.com/ru/articles/841498/
Добавить комментарий