BOOST D3.JS Графики с градиентами SVG

Nadieh Bremer будет в Генерировать Лондон В сентябре, где она будет демонстрировать, как взять SVG за пределы простых форм Используя JavaScript, CSS и D3.js, чтобы сделать визуализацию данных еще более веселыми и захватывающими. Забронируйте свой билет сейчас !

D3.js взял на себя мир интерактивных визуализации данных. Огромное количество примеров можно найти, каждый демонстрирует свой собственный веселый и полезный поворот на библиотеке. Видите ли, D3 не является библиотекой Charting, но что-то намного лучше. Это дает вам только основные инструменты для создания визуализации данных, и при этом позволяет вам создавать практически все, о чем вы можете подумать. Несмотря на то, что некоторые идеи могут занять больше времени, чем другие, вы доберетесь туда в конце концов. И эта свобода именно то, что я люблю о D3.

В своем ядре каждый D3 Visual построен из элементов SVG. Например, для каждой нагрузки на графике ScatterPlot, чтобы создать гистограмму, как ось, параллельные координаты или граф наклона, как метки, а также чрезвычайно полезны для практически всего. Кроме того, SVGS - независимо от разрешения, таким образом выглядит великолепно на любом уровне дисплея или масштабирования.

Даже если вы просто используете SVG для своих форм, вы можете создавать замечательные визуализации. Однако они могут сделать гораздо больше - думать о фильтрах SVG, например. В этом руководстве мы возьмем глубокое погружение в один конкретный аспект и посмотрим на несколько разных способов, которыми он может быть применен для осветления визуализации. Позвольте мне представить вас с градиентами SVG!

Найти все файлы, которые вам нужны для этого учебника здесь Отказ

Линейные градиенты

Иногда, когда я создаю диаграмму линии с одной линией, просто чувствует себя слишком пустой и может потеряться на белом фоне. Чтобы выделиться больше, я помещаю градиент света под ним, используя D3's d3.svg.area. Функция, заполненная градиентом SVG (см. Рис. 1).

Я хочу, чтобы градиент бежал вертикально сверху (где одинаково цвет, что и линия, но более легкий оттенок) до дна (где он должен стать белым или прозрачным). Это то, что известно как линейный градиент; то, что меняет цвет по прямой линии.

Начнем с SVG. Это холст, на котором будет нарисована наша диаграмма линии. Затем мы создаем дефект элемент, на который мы можем добавить Lineargradient элемент. Очень важно дать градиент уникальный идентификатор - мы будем использовать это позже, когда нам нужно дать область ниже линии ее заполнения.

 var profertgradient = svg.append ("defs")
.append ("Lineargradient")
.attr ("ID", "областиградиент")
.attr ("x1", "0%"). Атрибус ("Y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Последние две строки кода выше определяют, как начинается градиент. Подумайте об этом как о невидимой линии: х1. и y1. являются начальными позициями невидимой линии и х2. и Y2. Укажите свою конечную точку, чтобы дать направление градиента. Часто проще всего определить их в процентах, хотя можно использовать точные местоположения пикселей. По умолчанию местоположения относятся к ограничительной коробке элемента, на который применяется градиент. Мы хотим, чтобы градиент бежать вертикально, так х1. и х2. должно быть то же самое ( 0% Это хорошо), y1. должен быть 0% и Y2 100% Отказ

Теперь мы можем определить цвета градиента. Для градиента необходимы как минимум два цвета, но вы можете использовать столько, сколько хотите. Для каждого цвета в градиенте вы добавляете остановка элемент. Внутри этого вы указываете оттенок с стоп-цвет и место (вдоль невидимой линии), где вы хотите, чтобы этот цвет был чистым (точный цвет) с компенсировать Отказ

При желании мы также можем установить непрозрачность каждого цвета с Стоп-непрозрачность Отказ Здесь я делаю тень слегка легче наверху и полностью прозрачно внизу.

profertgradient.append («Стоп»)
.attr ("смещение", "0%")
.attr ("Стоп-цвет", "# 21825C")
.attr («Стоп-непрозрачность», 0,6);
profertgradient.append («Стоп»)
.attr ("смещение", "80%")
.attr ("Стоп-цвет", "белый")
.attr ("Стоп-непрозрачность", 0); 

Теперь настроен линейный градиент, мы можем создать диаграмму области и заполнить его градиентом. Сделать это, используйте URL (# градиент-идентификатор) В стиле заполнения вместе с уникальным идентификатором мы установили ранее.

 svg.append ("путь")
.style («заполнить», «URL (#AreaGradient)»)
.attr ("D", области области (набор данных)); 

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

Гладкая легенда

Легенды очень распространены в визуализациях данных. Когда вы используете цвета, чтобы представлять конкретный аспект ваших данных, вам необходимо объяснить, что означает каждый цвет. Это где происходит легенда.

В некоторых чартах вы будете использовать цвет, чтобы различать дискретные случаи (например, разные страны), в этом случае цвета часто все очень разные. Однако вы также можете использовать цвет, чтобы указать количественное значение.

Здесь мы представляем температуру снаружи (см. Рис. 2). Цвет изменяется постепенно, чтобы указать температуру, идущую от низкого до высокого. Чтобы показать это в легенде, мы собираемся создать длинный прямоугольник и заполнить его градиентом слева направо. Мы можем повторно использовать градиент, который мы создали для нашей диаграммы линии, но перевернуты на 90 градусов (так х2. Сейчас бежит к 100% , скорее, чем Y2. ). Хотя в целом радужная палитра не рекомендуется в визуализации данных, люди используются для видения красочных карт температуры, и я выбрал девять цветов в нашем примере.

Вместо того, чтобы писать каждый остановка Чтобы добавить, мы можем поставить все цвета в набор данных и использовать Nifty D3 данные шаг, чтобы сделать процесс быстрее. С D3 можно получить доступ к любому свойству набора данных в последующих этапах цепи, используя анонимную функцию, тем самым позволяя нам установить цвет и компенсировать на две строки.

 svg.append ("defs")
.append ("Lineargradient")
.attr ("ID", "легендградиентмульти")
.attr ("x1", "0%"). Атрибус ("Y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.SELECTALL («Стоп»)
.данные([
{Offset: «0%», цвет: «# 2C7BB6»},
{Offset: «12,5%», цвет: «# 00A6CA»},
{Offset: «25%», цвет: «# 00CCBC»},
{Смещение: "37,5%", цвет: "# 90eb9d"},
{Смещение: «50%», цвет: «# FFFF8C»},
{Offset: «62,5%», цвет: «# F9D057»},
{Offset: «75%», цвет: «# F29e2e»},
{Смещение: "87,5%", цвет: "# E76818"},
{Offset: «100%», цвет: «# D7191C»}])
.enter (). Добавить («Стоп»)
.attr ("смещение", функция (d) {rettion d.offset;})
.attr ("Стоп-цвет", функция (d) {return d.color;}); 

Как раньше, последний шаг - создать прямой и заполните это, используя уникальный градиент ID.

 svg.append ("rect")
.attr ("X", 0) .attr ("Y", 0)
.attr ("ширина", 500) .attr ("высота", 20)
.style ("Fill", "URL (#legendgradientmulti)"); 

Графики эти легенды идут с воссозданными после сказочной работы www.weather-radials.com. Отображение температуры в Нью-Йорке или Пекине в 2015 году. Средняя температура каждый день обозначается цветной линией, и эти линии расположены для образования круглого графа. Легенда ниже объясняет, что означает каждый цвет. Один график использует градиент от одного цвета к другому, а другой прогрессирует через все девять цветов.

Градиенты на основе данных

Таким образом, похожим на предыдущий пример, мы также можем создать несколько градиентов. Мы могли бы сделать уникальный градиент для каждой точки данных, основываясь на конкретном аспекте данных. Я использовал этот подход в Визуализация экзопланета , где каждая планета была дана градиент на основе звездного класса звезды, которую он орбит. Я использовал тонкий эффект сферы, чтобы создать впечатление, каждое зажечь звезду в центре.

Итак, давайте вернемся к 90-х годам и превратим в коллекцию плоских кругов, представляющих планеты в нашей собственной солнечной системе, в трехмерные сфер с радиальными градиентами (рис. 4). Я создал небольшой набор данных, содержащий имя и диаметр планеты. Каждый будет обобщена одним цветом, который мы будем использовать для создания уникального градиента для каждой планеты.

 var gradientradial = svg.append ("defs")
.SELECTALL («RadialGradient»)
.дата (планеты)
.enter (). Добавить («радиалградиент»)
.attr ("ID", функция (d) {возврат "градиент-" + d.clanet;})
.attr ("CX", "15%")
.attr ("CY", "50%")
.attr ("R", "85%"); 

Здесь несколько разные: вместо сначала добавляя градиентный элемент, мы теперь сразу добавим планеты набор данных и только после войти Мы создаем градиентный элемент (в этом случае радиалградиент ). Таким образом, градиент создается для каждой точки в наборе данных. Держите идентификатор каждой точки уникальным, основывая его на данных. Индекс я Обычно работает, но здесь название планеты безопаснее. Это гарантирует, что мы можем получить доступ к правильному градиенту позже.

Радиальный градиент немного отличается от линейного. Мы создаем это аналогичным образом к кругу SVG: поставьте центр градиента в отношении границ объекта, на который он будет применен, используя усадьба и цитан Отказ Эти значения по умолчанию 50% , который является центром объекта.

Чтобы моделировать появление звезды, сияющего на планетах с одной стороны, мы переместим центр градиента налево, настройки усадьба к 15% Отказ Радиус градиента (где градиентная остановка 100% должен закончиться) указан р Отказ Это также по умолчанию 50% , но из-за нашего усадьба Смещение, это сейчас 85% Так что наполняет весь круг.

Мы можем использовать данные планеты, чтобы добавить цвет остановки. Создать внешний вид сферы, которая света, цвета, цвет в 0% должно быть легче. Используя d3.rgb (). ярче (k) Мне не нужно указывать отдельный цвет, так как D3 сделает этот расчет для меня. Значение квалификация Определяет, насколько я хочу, чтобы цвет был. Около 50% Я установил истинный цвет в наборе данных. На краю я хочу, чтобы цвет немного темнее, давая появление тени. Логически, есть также d3.rgb (). темнее (k) что мы можем использовать.

 GradientRadial.append («Стоп»)
.attr ("смещение", "0%")
.attr ("Стоп-цвет", функция (d) {
return d3.rgb (d.color) .bright (1); });
gradientradial.append ("Стоп")
.attr («смещение», «50%»)
.attr ("Стоп-цвет", функция (d) {return d.color;});
gradientradial.append ("Стоп")
.attr («смещение», «100%»)
.attr ("Стоп-цвет", функция (d) {
return d3.rgb (d.color). Arker (2.5); }); 

Если бы вы проверили HTML после запуска этого, присутствуют восемь разных радиальных градиентов. Последнее, нам нужно создать восемь кругов, дать им радиус, как определено данные, и заполнить их правильным градиентом.

 SVG.SELECTALL («. Планеты»)
.дата (планеты)
.enter (). Добавить («круг»)
/ * Установите класс, расположение и атрибуты радиуса ... * /
.style («заполнение», функция (D) {
Вернуть "URL (# градиент-" + d.clanet + ")"; }); 

Я также добавил солнце, у которого есть свой радиальный градиент, но я оставил усадьба , цитан и р с настройкой по умолчанию 50% Чтобы это выглядеть так, будто солнце светящееся от центра наружу.

Отказ от ответственности: хотя диаметры всех сфер верны относительно друг друга, расстояния, конечно, полностью поддельные. И мне жаль, что у Сатурна нет колец

Игра с ориентациями

Мы исследовали, как установить цветные аспекты на основе данных, но есть гораздо больше возможностей. Мы можем установить практически все на основе данных - даже ориентации каждого градиента.

Чтобы попробовать это, давайте сделаем диаграмму аккорды D3, показывающую совместные отношения между мстителями в кинематографической вселенной Marvel (рис. 5). Аккорды, проводимые между шестью мстителями, рассчитаны в соответствии с количеством фильмов, в которых они оба появляются. Мы собираемся заполнить эти аккорды простым линейным градиентом, меняемся от цвета одного мстителя в другую.

Аккорд обычно не совсем горизонтальный или вертикальный. Так что нам придется установить X1, х2. , y1. и Y2. Значения основаны на местах внешней дуги каждого Мстителя. Эти данные не в нашем оригинальном наборе данных, но после того, как мы поставляем его в D3's d3.layout.chord Функция, мы вернемся с новым набором данных, содержащим начало и концевые углы каждой дуги (как D.Source.Startangle и d.target.endangle ). Это набор данных, который мы предоставляем при создании градиентов.

Нам нужно знать позиции пикселей невидимой линии, которая проходит с одного конца аккорда к другому. Затем они используются, чтобы дать x1, .., y2 атрибуты каждого градиента. Мы можем применить некоторую тригонометрию, используя радиус диаграммы аккордов и местоположение на полпути вдоль дуги каждого Авельса, чтобы вернуть эти позиции. Полная тригонометрическая формула была удалена из следующего кода, но вы найдете его в репо Github, который сопровождает эту статью Отказ

Чтобы сделать уникальный идентификатор для каждого аккорда, мы создаем строку сочетание значения индекса мстителя на каждом конце аккорда. D3's d3.layout.chord всегда устанавливает один (из мстителей) в источник а другой, чтобы цель , что делает уникальную пару. Позже, при нанесении аккордов мы можем использовать ту же технику, чтобы вызвать правильный градиент.

 var grads = svg.append ("defs"). Selectall («LinearSradient»)
.дата (Chord.Chords ())
.enter (). Добавить («линеаримент»)
.attr ("ID", функция (d) {return "Gradientchord-" + d.source.
Индекс + "-" + d.target.index; })
.attr ("Градиентники", "userspaceonuse")
// Пиксель расположение одного конца аккорда
.attr ("x1", функция (d, i) {return / * ... trigonometry на основе
d. Значения ... * /; })
.attr ("y1", функция (d, i) {return / * ... * /})
// Пиксель расположение другого конца аккорда
.attr ("x2", функция (d, i) {return / * ... * /})
.attr ("y2", функция (d, i) {return / * ... * /}); 

Поскольку каждый мститель определяется своим собственным номером индекса, мы можем сделать цветную функцию, цвета , это возвращает цвет каждого мстителя на значение индекса. Это позволяет легко обратиться к правильному цвету, при добавлении двух цветов останавливается.

 GARTS.Append («Стоп»)
.attr ("смещение", "0%")
.attr («Стоп-цвет», функция (D) {возвратные цвета (D.Source.index);
});
grads.append ("Стоп")
.attr («смещение», «100%»)
.attr («Стоп-цвет», функция (D) {возвратные цвета (D.Target.index);
}); 

Все, что остается, - это позвонить в правильный градиент ID при установке стиля заполнения аккордов (с той же функцией, так как мы использовали для установки идентификатора градиента).

Округления

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

Поэтому в следующий раз вы разработаете визуализацию данных, дайте вашему творчеству бесплатно. С D3.js вы не должны быть ограничены тем, что вы считаете границами инструмента. С небольшим количеством мышления и усилий, вы можете сделать самые удивительные вещи.

Не пропустите сессию Надя, SVG за простынями формы, при генерировании Лондона, 21-23 сентября. Забронируйте сейчас !

Эта статья изначально появилась в Чистый журнал Выпуск 280; Купить это здесь !