Автор оригинала: Wayde Herman.
Вступление
Радарные диаграммы, которые также называют диаграммами паука или радарными участками, представляют собой визуализацию данных, используемую для сравнения наблюдений с несколькими количественными переменными. Каждая переменная кодируется к списку, которая равна равна. Чем выше значение, тем дальше от центра диаграммы сделан точка. Радарные диаграммы лучше всего использовать для сравнения «профиля» наблюдений и обнаружения выбросов в данных. Поэтому они используются довольно много в спорте, особенно в баскетбол и футбол для профилирование игроков Отказ
В этом уроке я буду преподавать вам, как построить собственную карту радара с JavaScript и как их использовать, чтобы помочь с одним из самых сложных решений в истории игр: который начинает покемон на выбор!
Правильно, мы будем строить радиолокационные часты для выполнения анализа данных на Булбасауре, Charmander и Squirtle, чтобы определить, один раз и для всех, что является лучшим выбором.
Создание радиатора JavaScript
Для создания наших радиолокационных графиков мы будем использовать библиотеку Charting. Библиотеки графиков Удалите много бремени строительных графиков (по сравнению с чем-то вроде d3.js) и позволяют быстро и легко получить график. Для этого учебника я решил использовать Библиотека anyChart JavaScript Отказ Я выбрал AnyChart, потому что строительные графики с этим действительно быстрым, и это удивительная библиотека для начинающих из-за довольно интенсивных Документация Отказ
Шаг 1: Настройка страницы
Первый шаг для создания наших радиолокационных диаграмм – настроить HTML-страницу и загрузить необходимые скрипты.
Все, что я сделал здесь, создана новая HTML-страница, добавлена скрипты, необходимые для создания радиолокационного диаграммы ‘anyChart-core.min.js’ и ‘anyChart-radaar.min.js’. Первый необходим для всех AnyChart Charting и поставляется с основными диаграммами (Scatter, Bar etc), когда последний дает нам модуль, необходимый для построения радиолокационного диаграммы.
Затем мы создаем правило CSS для нашей HTML-страницы, которая устанавливает размер нашей графики. Мы пошли на 100% ширину и высоту и 0 полей, чтобы создать полноэкранные данные, но если вы хотите что-то другое, и измените эти значения для чего-то, что лучше подходит для ваших потребностей.
Наконец, мы используем anyChart.ondocumentready (). Наша график пойдет в эту функцию. Что это делает, это вызывает функцию только тогда, когда документ готов, а не раньше.
Шаг 2: Загрузите данные
Для того, чтобы нарисовать радиолокационные диаграммы для нашего стартера Pokemon, нам нужно получить данные. Я нашел это в Bulbapedia.bulbagarden.net (Как мило?) Что, кажется, имеет статистику для каждого покемона когда-либо!
Затем нам нужно переформатировать эти данные в то, что AnyChart знает, как читать. AnyChart любит данные для каждого наблюдения в следующем формате:
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
Массив объектов с каждой переменной, имеющей переменную оси X, которая должна быть названа «X» и переменную оси Y, чтобы быть названа «значением». В случае радиолокационного диаграммы переменная оси X – это имя переменной, когда переменная оси Y – это значение.
Мы повторяем этот шаг для каждого стартера Pokemon в результате следующих трех массивов:
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
var data2 = [
{x: "HP", value: 45},
{x: "Attack", value: 49},
{x: "Defense", value: 49},
{x: "Special Attack", value: 65},
{x: "Special Defense", value: 65},
{x: "Speed", value: 45},
];
var data3 = [
{x: "HP", value: 44},
{x: "Attack", value: 48},
{x: "Defense", value: 65},
{x: "Special Attack", value: 50},
{x: "Special Defense", value: 64},
{x: "Speed", value: 43},
];
Шаг 3: Рисование диаграммы
Теперь, когда у нас есть все наши (Psy) утки подряд, пора рисовать наш график.
// create radar chart
var chart = anychart.radar();
// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set chart yScale settings
chart.yScale()
.minimum(0)
.maximum(100)
.ticks({'interval':20});
// create first series
chart.line(data1)
// create second series
chart.line(data2)
// create third series
chart.line(data3)
// set container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
Который приводит к:
Это не выглядит слишком информативным, делает это? Разные серии все выглядят одинаково. Мы можем легко исправить это, хотя. Если мы изменим минимум и максимальные значения Yscale, мы сможем увидеть различия между нашими 3 сериями намного лучше. Затем я устанавливаю максимальное значение до 65 и минимальное значение до 35, я выбрал эти значения на основе данных, которые я пытаюсь визуализировать. Если бы один из наших покемонов имел переменную со значением выше 65 или ниже 35, я бы выбрал разные значения для размещения этого.
// set chart yScale settings
chart.yScale()
.minimum(35)
.maximum(65)
.ticks({'interval':5});
Который приводит к этому:
Кодепен ссылка
Лучше. Теперь мы можем дифференцировать между нашей серией.
Шаг 4: Настройка диаграммы
Как я только что показал вас выше, изменив аспект графика, я сделал его гораздо более привлекательным и информативным. Это ваша работа в качестве разработчика визуализации данных, чтобы использовать все инструменты в вашем распоряжении, чтобы помочь рассказать свою историю данных лучше.
Любая библиотека Charting, которую стоит их соли, имеет средства для настройки своих графиков, чтобы позволить вам лучше рассказать свою историю. Теперь я пойду через несколько методов настройки, чтобы получить больше из моего радара.
Цвет клеток
Одним из недостатков использования радиолокационного диаграммы является то, что трудно сравнивать значения между различными переменными (потому что они циклически расположены вместо линейно позиционирования). Мы можем немного смягчить этот недостаток, окрашивая чередующиеся ячейки для создания ссылок на лучшие вариации сравнения.
// color alternating cells chart.yGrid().palette(["gray 0.1", "gray 0.2"]);
Кодепен ссылка
Этот код цветов цветов радаровных ячеек серым с чередующимися клетками, имеющими различные непрозрачность *.
* Использование непрозрачности – это хорошо известная хитрость для разных цветов, которые хорошо идут вместе.
Область, заполнение, инсульт и легенда
Чтобы лучше профилировать нашу другую серию, я изменим серию тип из линии в область. Это позволит нам изменить заполнение многоугольника. Я также буду изменять цвета каждой серии, чтобы лучше представлять под вопросом покемонов.
// create first series
chart.area(data1).name('Charmander').markers(true).fill("#E55934", 0.3).stroke("#E55934")
// create second series
chart.area(data2).name('Bulbasaur').markers(true).fill("#9BC53D", 0.3).stroke("#9BC53D")
// create third series
chart.area(data3).name('Squirtle').markers(true).fill("#5BC0EB", 0.3).stroke("#5BC0EB")
Легенда также позволит нам сказать, какая серия является какой.
// set chart title
chart.title("Starter Pokemon Comparison Chart");
// set legend
.legend(true);
Кодепен ссылка
Переставить переменные
Другая проблема с радарами диаграммы заключается в том, что пользователи имеют тенденцию видеть соединения между соседними переменными, которые не так. Это несчастный, и не многое можно сделать об этом, однако мы можем попытаться максимально использовать это и переставить наши переменные, чтобы переменные, которые более связаны, находятся рядом друг с другом. Это будет еще больше укрепить использование радиолокационного диаграммы, чтобы увидеть аналитические «профили».
В нашем примере мы бы переработали это:
var data1 = [
{x: "HP", value: 39},
{x: "Attack", value: 52},
{x: "Defense", value: 43},
{x: "Special Attack", value: 60},
{x: "Special Defense", value: 50},
{x: "Speed", value: 65},
];
К этому
var data1 = [
{x: "Speed", value: 65},
{x: "HP", value: 39},
{x: "Defense", value: 43},
{x: "Special Defense", value: 50},
{x: "Special Attack", value: 60},
{x: "Attack", value: 52},
];
Как вы можете сказать, это больше арт, чем наука. Но, как вы можете увидеть ниже, мы получаем гораздо лучшее изображение наших различных профилей.
Кодепен ссылка
Мы можем ясно видеть, что Charmander является более оскорбительным, Squirtle более оборонительным, а Bulbasaur более хорошо округлены. И поэтому я бы сказал, что используя этот график (и я понимаю, как это анти-климатическое заключение), мы можем ясно видеть, что все покемонов являются правильным выбором. Все они довольно хорошо сбалансированы, и все имеют свои сильные и слабые стороны.
Заключение
Создание радиолокационной графики явно намного проще, чем большинство людей думают, и я думаю, что результаты очень крутые и участвующие. Однако они обманывают, чем другие визуализации данных для использования и имеют ряд недостатков.
Если есть слишком много переменных, график становится трудной для чтения. Если есть слишком много наблюдений, рекомендуется отделить их на свой собственный график. Им также нужны все переменные, чтобы иметь одинаковую масштаб. Также обратите внимание, что пользователи, как правило, воспринимают область наблюдений как меру ценности, и, к сожалению, часто не так.
С помощью этих предупреждений я бы предложил использовать линию или диаграмму бар. Там, где радарные диаграммы действительно сияют, это то, что они, вероятно, намного сильнее, чем строки и гистограммы на рисунке пользователя, поэтому, когда они работают, они очень хорошо работают!