Полярные карты часто выглядят впечатляюще, что заставляет некоторых людей думать, что их создание — сложный процесс, требующий большого количества навыков и опыта. Что ж, я собираюсь развенчать этот миф прямо сейчас! Позвольте мне показать вам, как легко визуализировать данные в красивой интерактивной полярной диаграмме JavaScript.
По сути, полярная диаграмма — это разновидность кругового графика, нарисованного с полярными координатами. Он также может хорошо работать для визуализации некоторых видов категориальных данных для сравнения, что я и хочу продемонстрировать сейчас. В этом уроке я построю столбчатую полярную диаграмму с столбцами, растущими от центра диаграммы, чтобы представить значения с их длиной.
Общество визуализации данных (DVS) проводит ежегодный опрос специалистов по данным Состояние отрасли, и я подумал, что это может быть прекрасной возможностью поиграть с некоторыми из его последних данных. В частности, я хотел посмотреть на самые популярные технологии, используемые для визуализации данных на основе ответов. Итак, здесь я создам полярную диаграмму JS, на которой будут показаны 15 лучших, что станет классным иллюстративным примером из реальной жизни.
Будет весело — приходите все!
Предварительный просмотр полярной диаграммы JS
Взгляните на то, как будет выглядеть окончательная полярная диаграмма JavaScript:
Построение полярной диаграммы JavaScript за 4 простых шага
Чтобы создать здесь полярную диаграмму, я буду использовать библиотеку построения диаграмм JavaScript. Такие библиотеки снабжены заранее написанным кодом основных функций, что упрощает и ускоряет создание визуализации данных.
Для этого урока я выбрал JavaScript-библиотеку AnyChart, поскольку она проста в использовании, гибка и бесплатна для некоммерческого использования. Кроме того, это отличная библиотека для начала из-за большого количества примеров и хорошей документации.
Вообще говоря, весь процесс создания любого графика JS, включая полярную диаграмму, можно разделить на четыре основных шага или этапа. Они есть:
- Создайте базовую веб-страницу в HTML.
- Ссылка на необходимые файлы JavaScript.
- Добавьте данные.
- Напишите код JS, чтобы нарисовать диаграмму.
Присоединяйтесь ко мне в выполнении этих шагов, чтобы создать потрясающую интерактивную визуализацию полярной диаграммы на основе JavaScript!
1. Создайте базовую веб-страницу в HTML
Для начала я создаю базовую HTML-страницу и блочный элемент, который будет содержать полярную диаграмму:
<html>
<head>
<title>JavaScript Polar Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Как видите, элементу <div> присвоен идентификатор, чтобы я мог ссылаться на него позже в коде. Кроме того, ширина и высота блока <div> указаны как 100%, чтобы полярная диаграмма отображалась по всей странице.
2. Ссылка на необходимые файлы JavaScript
Далее, в разделе <head> страницы, я ссылаюсь на конкретные сценарии используемой библиотеки диаграмм.
Здесь я работаю с AnyChart, поэтому включу нужные файлы из его CDN. Библиотека модульная, и для полярной диаграммы мне нужны только удобные модули ядро и полярный.
<html>
<head>
<title>JavaScript Polar Chart</title>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the JS polar chart code will come here.
</script>
</body>
</html>
3. Добавьте данные
Чтобы получить набор данных для моей будущей полярной диаграммы, я отфильтровал данные DVS Визуализация данных переписи населения 2020 года и определил 15 наиболее часто используемых технологий, на которые ответили респонденты.
Теперь, чтобы правильно добавить эти данные на диаграмму, я создаю массив с названием категории в качестве параметра x, поскольку мы строим график по оси X, и мерой каждой из категорий в качестве параметра value.
// add data as an array of objects
var data = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
Все приготовления завершены, и теперь пришло время отобразить на холсте полярную диаграмму на основе JavaScript!
4. Напишите код JS для рисования полярной диаграммы
Первое, что я здесь делаю, это добавляю функцию, содержащую весь код полярной диаграммы JS. Это гарантирует, что все внутри него будет выполнено только после того, как веб-страница будет готова.
Сделать полярную диаграмму в JavaScript довольно просто. Я просто пишу одну строку кода для ее создания, затем добавляю массив данных, подготовленный на предыдущем шаге, и подключаю данные к диаграмме, создавая серию столбцов.
anychart.onDocumentReady(function () {
// create a polar chart
var chart = anychart.polar();
// add data as an array of objects
var data = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
// connect the data creating a column series
var columnSeries = chart.column(data);
});
Данные являются категориальными, состоящими из дискретных значений. Поэтому я указываю шкалу X как порядковую. Я также установил для оси Y значение «false», чтобы избежать отображения соответствующих значений.
// set the x-scale
chart.xScale('ordinal');
// disable the y-axis
chart.yAxis(false);
Всегда важно называть график, чтобы у зрителя не было проблем с тем, чтобы быстро понять, что изображено. Итак, я установил заголовок полярной диаграммы:
// set the chart title
chart
.title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');
Наконец, я ссылаюсь на ранее добавленный контейнер <div> и команду для отображения результирующей полярной диаграммы.
// set the chart container id
chart.container('container');
// initiate the chart display
chart.draw();
Исходный результат полярной диаграммы
И вот, интерактивная полярная диаграмма на основе JavaScript готова с помощью этих нескольких строк кода!
Посмотрите эту начальную версию здесь и не стесняйтесь экспериментировать с ней на AnyChart Playground или CodePen.
<html>
<head>
<title>JavaScript Polar Chart</title>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// create a polar chart
var chart = anychart.polar();
// add data as an array of objects
var data = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
// connect the data creating a column series
var columnSeries = chart.column(data);
// set the x-scale
chart.xScale('ordinal');
// disable the y-axis
chart.yAxis(false);
// set the chart title
chart
.title('Top 15 Technologies for Data Visualization (DVS Survey 2020)');
// set the chart container id
chart.container('container');
// initiate the chart display
chart.draw();
});
</script>
</body>
</html>
Такая полярная диаграмма ясно показывает, что, согласно последнему исследованию DVS, Microsoft Excel является самой популярной технологией для визуализации данных, за ней следуют Tableau, ручка и бумага и R.
На самом деле это только базовая версия. И есть так много вещей, которые мы можем добавить. Следите за тем, как я демонстрирую, как эту (и практически любую другую) полярную диаграмму JS можно настроить для более функционального и интересного представления!
Настройка полярной диаграммы JS
Существуют различные способы настройки такой полярной диаграммы. Сейчас я покажу вам, как сделать несколько быстрых, но эффективных настроек.
A. Измените ширину точек
Ширину точек по умолчанию можно изменить и установить в соответствии с вашими предпочтениями. Я хочу уменьшить его, чтобы полярная диаграмма выглядела как набор лепестков. Это очень легко сделать всего одной строкой кода:
// set the width of the series points chart.pointWidth(10);
B. Улучшить всплывающую подсказку и заголовок
Затем я хочу изменить всплывающую подсказку полярной диаграммы по умолчанию, чтобы сделать ее более информативной. Поскольку значения представляют собой процентные значения, я добавляю знак процента прямо рядом с ними:
// set the tooltip
chart.tooltip().format("{%value}%");
Затем я просто добавляю немного отступа к нижней части заголовка диаграммы:
// configure the chart title
chart
.title()
.enabled(true)
.text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)')
.padding({ bottom: 20 });
Вы можете посмотреть полный код этой итерации полярной диаграммы JavaScript на AnyChart Playground или CodePen.
C. Добавить вторую серию
Я решил посмотреть, как изменилось использование этих технологий визуализации данных, и для этого добавить данные за 2019 год, сделав полярную диаграмму более информативной и придав ей больше ценности с точки зрения анализа данных.
Итак, я включаю данные за 2019 год и даю данным за каждый год имена переменных data1 (для 2020 года) и data2 (для 2019 года). Точно так же я соединяю два набора данных с двумя сериями и даю каждой из них имя. Посмотрите, как это делается:
// data for 2020
var data1 = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
// data for 2019
var data2 = [
{ x: 'Excel', value: 54.7 },
{ x: 'Tableau', value: 44.3 },
{ x: 'R', value: 37.7 },
{ x: 'Python', value: 34.2 },
{ x: 'D3.js', value: 33.6 },
{ x: 'ggplot2', value: 32.3 },
{ x: 'Pen & Paper', value: 30.1 },
{ x: 'Illustrator', value: 25.3 },
{ x: 'Power BI', value: 17.3 },
{ x: 'Plotly', value: 16.1 },
{ x: 'Mapbox', value: 15.1 },
{ x: 'QGIS', value: 12.9 },
{ x: 'Matplotlib', value: 11.1 },
{ x: 'ArcGIS', value: 10.2 },
{ x: 'React', value: 10.1 }
]
// create two series and connect the data respectively
var columnSeries2 = chart.column(data2);
var columnSeries1 = chart.column(data1);
// set the series names
// series #1
columnSeries1.name('2020');
// series #2
columnSeries2.name('2019');
Я сохраняю ширину оригинальной серии 2020 года, как определено ранее, и делаю серию 2019 года немного шире, чтобы их было легче визуально различать:
// set the width of the series points // series #1 columnSeries1.pointWidth(10); // series #2 columnSeries2.pointWidth(15);
Д. Изменить цвета
Теперь я хочу установить разные цвета для каждой серии и выбираю два из трех основных цветов DVS: бирюзовый (#2db1a4) и сливовый (#9f5f9c). Третий цвет будет использован чуть позже.
// customize the series color
// series #1
columnSeries1.color('#2db1a4');
// series #2
columnSeries2.color('#9f5f9c');
Библиотека графиков AnyChart JavaScript предоставляет несколько готовых тем. Чтобы сделать полярную диаграмму более яркой с цветами DVS, я установил темную цветовую тему, а именно Dark Glamour. Итак, я добавляю нужный скрипт в раздел <head>, а затем включаю тему в основной код JS. Так:
<script src="https://cdn.anychart.com/releases/8.10.0/themes/dark_glamour.min.js"></script>
...
// set the chart design theme
anychart.theme('darkGlamour');
E. Улучшите метки, всплывающую подсказку и заголовок
Здесь я использую третий цвет логотипа DVS, Горчичный. Я изменяю метки полярной диаграммы, устанавливая этот цвет для каждой и изменяя параметр размера шрифта, чтобы улучшить разборчивость:
// configure the chart labels
var labels = chart.xAxis().labels();
labels.fontSize(14)
.fontColor('#dcb22a');
Затем я изменяю всплывающую подсказку, чтобы отображать цвета каждой серии вместе с метками, и сделать ее более привлекательной:
// set the tooltip title
chart.tooltip().title().fontColor('#dcb22a');
// set the tooltip content
chart.tooltip().format("{%seriesName}: {%value}%").fontSize(14).fontWeight(600);
// set the tooltip font color
// series #1
columnSeries1.tooltip().fontColor('#2db1a4')
// series #2
columnSeries2.tooltip().fontColor('#9f5f9c');
Наконец, я изменяю заголовок полярной диаграммы, чтобы включить оба года, и настраиваю размер и цвет шрифта для улучшения внешнего вида:
// configure the chart title
chart
.title()
.enabled(true)
.text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)')
.fontSize(16)
.fontColor("#d5dcdc")
.padding({ bottom: 20 });
Окончательный результат полярной карты
Вот и все! Совершенно потрясающая и проницательная полярная диаграмма JavaScript готова!
Мы видим, что топовые технологии визуализации данных практически не изменились за оба года. Но доля большинства из 15 технологий в 2020 году ниже, чем в 2019 году, что указывает на рост тех, кто не входит в топ-15. Единственным исключением является Power BI, использование которого увеличилось. Использование Matplotlib в 2020 году осталось примерно таким же, как и в 2019 году.
Посмотрите весь код этой окончательной интерактивной полярной диаграммы JS ниже и не стесняйтесь экспериментировать на AnyChart Playground или CodePen.
<html>
<head>
<title>JavaScript Polar Chart</title>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/js/anychart-polar.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.10.0/themes/dark_glamour.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
// set the chart design theme
anychart.theme('darkGlamour');
// create a polar chart
var chart = anychart.polar();
// data for 2020
var data1 = [
{ x: 'Excel', value: 44.7 },
{ x: 'Tableau', value: 36.1 },
{ x: 'Pen & Paper', value: 27.1 },
{ x: 'R', value: 25 },
{ x: 'Python', value: 24.1 },
{ x: 'D3.js', value: 21.2 },
{ x: 'ggplot2', value: 19.8 },
{ x: 'Illustrator', value: 20.3 },
{ x: 'Power BI', value: 18.7 },
{ x: 'Plotly', value: 11.8 },
{ x: 'Matplotlib', value: 10.58 },
{ x: 'Mapbox', value: 9.28 },
{ x: 'QGIS', value: 9.22 },
{ x: 'ArcGIS', value: 7.18 },
{ x: 'React', value: 7.4 }
];
// data for 2019
var data2 = [
{ x: 'Excel', value: 54.7 },
{ x: 'Tableau', value: 44.3 },
{ x: 'R', value: 37.7 },
{ x: 'Python', value: 34.2 },
{ x: 'D3.js', value: 33.6 },
{ x: 'ggplot2', value: 32.3 },
{ x: 'Pen & Paper', value: 30.1 },
{ x: 'Illustrator', value: 25.3 },
{ x: 'Power BI', value: 17.3 },
{ x: 'Plotly', value: 16.1 },
{ x: 'Mapbox', value: 15.1 },
{ x: 'QGIS', value: 12.9 },
{ x: 'Matplotlib', value: 11.1 },
{ x: 'ArcGIS', value: 10.2 },
{ x: 'React', value: 10.1 }
];
// set the x-scale
chart.xScale('ordinal');
// disable the y-axis
chart.yAxis(false);
// create two column series and connect the data respectively
var columnSeries2 = chart.column(data2);
var columnSeries1 = chart.column(data1);
// set the series names
// series #1
columnSeries1.name('2020');
// series #2
columnSeries2.name('2019');
// set the width of the series points
// series #1
columnSeries1.pointWidth(10);
// series #2
columnSeries2.pointWidth(15);
// customize the series color
// series #1
columnSeries1.color('#2db1a4');
// series #2
columnSeries2.color('#9f5f9c');
// configure the chart labels
var labels = chart.xAxis().labels();
labels.fontSize(14)
.fontColor("#dcb22a");
// set the tooltip title
chart.tooltip().title().fontColor('#dcb22a');
// set the tooltip content
chart.tooltip().format("{%seriesName}: {%value}%").fontSize(14).fontWeight(600);
// set the tooltip font color
// series #1
columnSeries1.tooltip().fontColor('#2db1a4')
// series #2
columnSeries2.tooltip().fontColor('#9f5f9c');
// configure the chart title
chart
.title()
.enabled(true)
.text('Top 15 Technologies for Data Visualization (DVS Survey 2019 & 2020)')
.fontSize(16)
.fontColor("#d5dcdc")
.padding({ bottom: 20 });
// set the chart container id
chart.container('container');
// initiate the chart display
chart.draw();
});
</script>
</body>
</html>
Заключение
Полярные диаграммы — очень классный вид визуализации данных. А создать красивую интерактивную на JS не так уж и сложно, даже если вы новичок. Не пропустите документацию по полярным графикам, чтобы узнать больше о возможностях визуализации полярных диаграмм в JavaScript и о том, как может работать использование полярных координат вместо порядковой шкалы.
Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы, и продолжайте создавать интересные и полезные визуализации самостоятельно!
Команда AnyChart благодарит Шачи Свадиа, внештатного дизайнера данных, за написание этого замечательного руководства по полярной диаграмме JavaScript для нашего блога.
Узнайте больше о полярных диаграммах в Chartopedia и не пропустите другие руководства по построению диаграмм JavaScript в нашем блоге.
Хотите написать для нас крутой гостевой пост? Мы хотим услышать ваши идеи!
Первоначально опубликовано на https://www.anychart.com 11 ноября 2021 г.
Дополнительные материалы на plainenglish.io
