Диаграммы — отличный способ синтезировать и выделять информацию, что делает их полезными как для любителей данных, так и для случайного читателя. С распространением Covid-19 нас наводнили диаграммы, пытающиеся разобраться во всех динамических данных, связанных с этой эпидемией, — от безработицы до сравнения роста и снижения числа инфекций между странами, округами и районами. The New York Times, возможно, предложила нам наиболее убедительную диаграмму в своем выпуске от 27 марта:
Эта маленькая полоска в конце диаграммы рассказывает историю без слов. Эта единственная диаграмма на этой странице, вероятно, станет знаковой ссылкой на этот период, который мы увидим в будущих книгах по истории.
Являясь полноценным разработчиком Javascript в компании, которая анализирует огромное количество медиафайлов, я работал с большим количеством диаграмм и JS-библиотек для построения диаграмм, и не все они созданы одинаково. Создание красивых масштабируемых диаграмм может быть сложным процессом, и в зависимости от ваших потребностей вы можете быть ограничены определенными библиотеками. За последний год наша команда работала с тремя разными пакетами для построения графиков с разной степенью успеха и продуктивности.
Таблицы побед
Ах, моя первая любовь… и немного ненависть. Мое знакомство с диаграммами в Javascript началось с диаграмм победы, и, не имея реальной системы отсчета, я предположил, что это стандарт для диаграмм, и смирился со своей судьбой работать с диаграммами победы в обозримом будущем.
Самое большое препятствие, с которым я столкнулся при использовании Victory, заключается в том, что по сравнению с такой библиотекой, как HighCharts, сообщество пользователей невелико, поэтому вы немного сами по себе, когда дело доходит до реализации пользовательских взаимодействий и дизайна.
Victory предлагает множество примитивных компонентов диаграмм, которые вы можете компоновать в диаграммы, что предлагает высокий уровень настройки, но также заставляет вас, как разработчика, учитывать и затем поддерживать все эти компоненты, что приводит к довольно многословному коду и большому количеству логика для реализации таких вещей, как ось временных рядов или расстояние между столбцами в гистограмме (ситуация, в которой оказалась наша команда, привела к изрядной головной боли).
Вот пример простой гистограммы с использованием Victory:
const myDataset = [
[
{ x: "a", y: 1 },
{ x: "b", y: 2 },
{ x: "c", y: 3 },
{ x: "d", y: 2 },
{ x: "e", y: 1 }
],
[
{ x: "a", y: 2 },
{ x: "b", y: 3 },
{ x: "c", y: 4 },
{ x: "d", y: 5 },
{ x: "e", y: 5 }
],
[
{ x: "a", y: 1 },
{ x: "b", y: 2 },
{ x: "c", y: 3 },
{ x: "d", y: 4 },
{ x: "e", y: 4 }
]
];
class App extends React.Component {
// This is an example of a function you might use to transform your data to make 100% data
transformData(dataset) {
const totals = dataset[0].map((data, i) => {
return dataset.reduce((memo, curr) => {
return memo + curr[i].y;
}, 0);
});
return dataset.map((data) => {
return data.map((datum, i) => {
return { x: datum.x, y: (datum.y / totals[i]) * 100 };
});
});
}
render() {
const dataset = this.transformData(myDataset);
return (
<div>
<VictoryChart height={400} width={400}
domainPadding={{ x: 30, y: 20 }}
>
<VictoryStack
colorScale={["black", "blue", "tomato"]}
>
{dataset.map((data, i) => {
return <VictoryBar data={data} key={i}/>;
})}
</VictoryStack>
<VictoryAxis dependentAxis
tickFormat={(tick) => `${tick}%`}
/>
<VictoryAxis
tickFormat={["a", "b", "c", "d", "e"]}
/>
</VictoryChart>
</div>
);
}
}
ReactDOM.render(<App/>, mountNode);
Высокие диаграммы
Если Victory — это бутик мира JS-чартов, то HighCharts — это McDonald’s. Когда дело доходит до поиска в Интернете примеров создания диаграмм с использованием JavaScript, вы найдете больше примеров с использованием HighCharts, чем любой другой фреймворк.
Его вездесущность — не единственное преимущество, но для меня это определенно дает ему преимущество, если вы не являетесь разработчиком, хорошо разбирающимся в визуализации данных. HighCharts берет на себя большую часть когнитивной нагрузки с разработчика и позаботится о таких вещах, как оси времени, всплывающие подсказки и общий стиль… или, во всяком случае, многое из этого.
Беглое сравнение некоторого кода, написанного нашей командой для той же диаграммы с использованием Victory и HighCharts, привело к сокращению строк кода примерно вдвое!
Вот как просто начать использовать HighCharts с такой библиотекой пользовательского интерфейса, как React (сравните это с примером выше):
const options = {
chart: {
type: 'spline'
},
title: {
text: 'My chart'
},
series: [
{
data: [1, 2, 1, 4, 3, 6]
}
]
};
const App = () => (
<div>
<HighchartsReact highcharts={Highcharts} options={options} />
</div>
);
D3
Если вы ищете полную настройку и расширенные варианты использования или нестандартные диаграммы, D3, вероятно, будет вашим первым выбором в диаграммах JS. Кривая обучения здесь, безусловно, самая крутая из всех трех, поскольку синтаксис D3 может быть немного сложным.
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
.attr("x", function(d) { return x(d.date); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.value); })
.attr("height", function(d) { return height - y(d.value); });D3 взаимодействует с DOM, связывая узлы с данными с помощью преобразований D3 (D3 означает документы, управляемые данными). Как разработчик внешнего интерфейса, некоторые из D3 могут быть легко доступны, например, концепция выбора и добавления элементов в DOM, но выяснение того, как создать диаграмму с легендой, осями и адаптивным размером, является нетривиальной задачей.
В настоящее время я использую D3 для создания Ridgeline Chart, потому что никакая другая библиотека не подходит для случая использования нашей команды. Если ваша команда не хочет привязываться к определенному фреймворку для выполнения тяжелой работы или хочет очень высокий уровень настройки, то D3, вероятно, будет лучшим выбором.
К счастью, существует множество примеров использования D3, поэтому вы можете начать свое путешествие с копирования и вставки фрагментов кода для создания базовой диаграммы и добавления оттуда. Поскольку вы напрямую манипулируете DOM и зависите от D3 в основном для преобразований, которые вы выполняете с вашими данными, небо — это предел того, какую диаграмму вы можете создать, используя библиотеку, такую как HighCharts, ограничивает вас до пределов. библиотеки.
Твоя очередь
Независимо от того, используете ли вы в настоящее время графическую библиотеку или нет, любой из этих трех, упомянутых выше, стоит немного изучить, особенно HighCharts и D3, поскольку они очень широко используются. Вместо того, чтобы создавать еще одно приложение списка дел или Rails MVC, небольшой проект динамической диаграммы может действительно показать вашу ценность как разработчика и действительно выделиться в портфолио.
