Boost D3.js графіки з градієнтами SVG

Nadieh Bremer буде Генерувати Лондон У вересні, де вона буде демонструвати, як взяти SVG за межами вільних форм , використовуючи JavaScript, CSS та D3.JS, щоб зробити візуалізації даних ще більш веселим та захоплюючим. Забронювати квиток зараз !

D3.JS взяв світ інтерактивної візуалізації даних. Можна знайти величезну кількість прикладів, кожен демонструє свій власний веселий та корисний поворот у бібліотеці. Ви бачите, D3 не є бібліотекою графіків, але щось набагато краще. Це дає вам лише основні інструменти для створення візуалізації даних, а при цьому дозволяємо вам створити практично все, що ви можете думати. Незважаючи на те, що деякі ідеї можуть зайняти більше часу, ніж інші, ви в кінцевому підсумку ви потрапляєте. І ця свобода саме те, що я люблю близько D3.

На його ядрі кожен V3 візуальний побудований з елементів SVG. Наприклад, для кожної DatApoint у діаграмі ScatterPlot, щоб створити діаграму бару, як вісь, паралельні координати або графік схилу, як етикетки, а надзвичайно корисно для практично все інше. Крім того, SVGS є незалежними від дозволу, таким чином виглядають чудово на будь-якому рівні відображення або збільшення.

Навіть якщо ви просто використовуєте SVGS для своїх форм, ви можете створювати чудові візуалізації. Однак вони можуть зробити набагато більше - подумайте про фільтри SVG, наприклад. У цьому підручнику ми будемо глибоко зануритися в один конкретний аспект і подивіться на кілька різних способів, які можна застосувати, щоб прикрасити візуалізацію. Дозвольте познайомити вас з градієнтами SVG!

Знайти всі потрібні файли для цього підручника тут .

Лінійні градієнти

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

Я хочу, щоб градієнт біг вертикально з вершини (де це той же колір, як і лінія, але легша відтінок) донизу (де вона повинна стати білим, або прозорим). Це те, що називається лінійним градієнтом; щось, що змінює колір по прямій лінії.

Ми починаємо з SVG. Це полотно, на якому буде намальовано нашу лінійну діаграму. Потім ми створюємо дефіс елемент на який ми можемо додати a лінійка ради елемент. Дуже важливо дати градієнт унікальний ідентифікатор - ми будемо використовувати це пізніше, коли нам потрібно дати область нижче лінії його заповнення.

 Var areaGradient = svg.append ("defs")
.append ("lineargradient")
.attr ("id", "areagradient")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "0%"). attr ("y2", "100%"); 

Останні два рядки коду вище визначають, як слід запустити градієнт. Подумайте про це як невидима лінія: x1 і y1 є вихідними позиціями невидимої лінії і x2 і y2 Вкажіть його кінцеву точку, щоб дати напрямок градієнта. Часто це найпростіше визначити ці відсотки, хоча можна використовувати точні місця Pixel. За замовчуванням розташування відносяться до обмежувальної коробки елемента, на який застосовується градієнт. Ми хочемо, щоб градієнт біг вертикально, так x1 і x2 повинні бути однаковими ( 0% добре), y1 повинен бути 0% і y2 100% .

Тепер ми можемо визначити кольори градієнта. Для градієнта необхідні принаймні два кольори, але ви можете використовувати стільки, скільки вам подобається. Для кожного кольору в градієнті ви додаєте a Стоп елемент. У цьому ви вкажете тінь зупинка та місце розташування (вздовж невидимої лінії), де ви хочете, щоб цей колір був чистий (точний колір) зсув .

За бажанням, ми також можемо встановити непрозорість кожного кольору зупинка . Тут я роблю тінь трохи легше у верхній і абсолютно прозорої внизу.

areagradient.append ("Стоп")
.attr ("компенсація", "0%")
.attr ("stop-color", "# 21825C")
.attr ("зупинка непрозорість", 0,6);
areagradient.append ("Стоп")
.attr ("компенсація", "80%")
.attr ("Стоп-колір", "білий")
.attr ("зупинка непрозорість", 0); 

Тепер налаштований лінійний градієнт, ми можемо створити схему області та заповнити його градієнтом. Для цього використовуйте URL (# градієнт-ідентифікатор) У стилі заповнення разом з унікальним ідентифікатором ми встановили раніше.

 SVG.Append ("Шлях")
.Style ("заповнити", "URL (#areagientient)")
.attr ("d", областьфункція (набір даних)); 

Після цього, намалюйте лінію на верхній частині цієї області діаграми, щоб переглядач міг читати результати з вашого графіка. У моїй діаграмі я також розмістив кола, щоб підкреслити місцезнаходження конкретних точок даних.

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

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

У деяких діаграмах ви будете використовувати колір для дискримінації дискретних випадків (наприклад, різних країн), в цьому випадку кольори часто дуже різні. Однак ви також можете використовувати колір для позначення кількісного значення.

Тут ми представляємо температуру зовні (див. Рис. 2). Колір змінюється поступово, щоб вказати температуру, що йде від низького до високого. Щоб показати це у легенді, ми збираємося створити довгий прямокутник і заповнити його градієнтом, що йде зліва направо. Ми можемо повторно використовувати градієнт, який ми створили для нашого діаграму лінії, але перевернули на 90 градусів (так x2 тепер працює 100% , а не y2 ). Хоча, як правило, палітра веселки не рекомендується в візуалізації даних, люди використовуються для перегляду барвистих температурних карток, і я вибрав дев'ять кольорів у нашому прикладі.

Замість того, щоб писати кожен Стоп Щоб додати, ми можемо поставити всі кольори в набору даних та використовувати NFTY D3 дані Крок, щоб зробити процес швидше. З D3 можна отримати доступ до будь-якої властивості набору даних у наступних етапах ланцюга, використовуючи анонімну функцію, тим самим дозволяє нам встановити колір та зміщення всього за два рядки.

 svg.append ("defs")
.append ("lineargradient")
.attr ("id", "Legendgradientmulti")
.attr ("x1", "0%"). attr ("y1", "0%")
.attr ("x2", "100%"). attr ("y2", "0%")
.Виберіть ("Стоп")
.data ([
{offset: "0%", колір: "# 2C7BB6"},
{Офсет: "12,5%", колір: "# 00a6ca"},
{offset: "25%", колір: "# 00ccbc"},
{offset: "37,5%", колір: "# 90eb9d"},
{Офсет: "50%", колір: "# ffff8c"},
{offset: "62,5%", колір: "# f9d057"},
{offset: "75%", колір: "# f29e2e"},
{Офсет: "87,5%", колір: "# E76818"},
{Офсет: "100%", колір: "# D7191C"}])
.Ender (). Додаток ("Зупинка")
.attr ("offset", функція (d) {return d.offset;})
.attr ("stop-color", функція (d) {return d.color;}); 

Як і раніше, остаточний крок - створити rect і заповнити це за допомогою унікального ідентифікатора градієнта.

 svg.append ("rect")
.attr ("x", 0) .attr ("y", 0)
.attr ("ширина", 500) .attr ("висота", 20)
.style ("заповнити", "URL (#legendgradientmulti)"); 

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

Градієнти на основі даних

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

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

 var gradientradial = svg.append ("defs")
.Виберіть ("Радіалградієнт")
.data (планети)
.Ender (). Додаток ("Радиалградієнт")
.attr ("ID", функція (d) {return "градієнт-" + d.planet;})
.attr ("CX", "15%")
.attr ("Cy", "50%")
.attr ("R", "85%"); 

Код трохи відрізняється тут: замість того, щоб спочатку додати градієнтного елемента, ми зараз негайно додайте планети набір даних і тільки після вводити ми створюємо градієнтним елементом (у цьому випадку радіалградієнт ). Таким чином, градієнт створюється для кожної точки в наборі даних. Тримайте ідентифікатор кожної точки унікальним, базуючи його на даних. Індекс я Зазвичай працює, але тут назва планети безпечніше. Це гарантує, що ми можемо отримати доступ до правильного градієнта пізніше.

Радіальний градієнт трохи відрізняється від лінійного. Ми створюємо його аналогічним чином до SVG Circle: постачати центр градієнта по відношенню до меж об'єкта, до якого він буде застосовуватися, використовуючи кадр і кіл . Ці значення за замовчуванням 50% , який є центром об'єкта.

Для того, щоб імітувати появу зірки, що світить на планетах з одного боку, ми переміщаємо центр градієнта ліворуч, встановивши кадр до 15% . Радіус градієнта (де градієнтна зупинка 100% слід закінчити) вказується г . Це також за замовчуванням 50% , але через нашу кадр Зсув, це зараз 85% Таким чином, він заповнює весь коло.

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

 GradientRadial.Append ("Зупинка")
.attr ("компенсація", "0%")
.attr ("stop-color", функція (d) {d) {
повернення d3.rgb (d.color) .Brighter (1); });
gradientradial.append ("Стоп")
.attr ("компенсація", "50%")
.attr ("stop-color", функція (d) {return d.color;});
gradientradial.append ("Стоп")
.attr ("компенсація", "100%")
.attr ("stop-color", функція (d) {d) {
Повернення d3.rgb (d.color) .darker (2.5); }); 

Якщо ви оглянули HTML після того, як це було, буде вісім різних радіальних градієнтів. Остання, нам потрібно створити вісім кола, дайте їм радіус, як визначено даних, і заповнити їх правильним градієнтом.

 svg.selectall (". Планети")
.data (планети)
.Ender (). Додаток ("Коло")
/ * Встановіть клас, розташування та атрибути радіуса ... * /
.style ("заповнити", функцію (d) {
Повернення "URL (# градієнт -" + d.planet + ")"; }); 

Я також додав сонце, який має свій власний радіальний градієнт, але я залишив кадр , кіл і г з налаштуванням за замовчуванням 50% Щоб це виглядати, як сонце світиться від центру зовні.

Відмова від відповідальності: Хоча діаметри всіх сфер правильно відносно один одного, відстані, звичайно, повністю фальшиві. І мені шкода, що Сатурн не має кільця

Граючи з орієнтаціями

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

Щоб спробувати це, давайте зробимо діаграму D3-акорду, яка показує співпрацю між месенчами в Marvel Cinematic Всесвіт (рис. 5). Акорди, які пропускаються між шістьма засувками, розміщуються відповідно до кількості фільмів, в яких вони обидва з'являються. Ми збираємося заповнити ці акорди простим лінійним градієнтом, змінюючись від кольору одного месника до іншого.

Акорд, як правило, не точно горизонтальний або вертикальний. Отже, нам доведеться встановити x1, x2 , y1 і y2 Значення, засновані на місцях зовнішньої дуги кожного месника. Ці дані не в нашому оригінальному наборі даних, але після того, як ми поставили його до D3 d3.layout.chord Функція, ми повернемо новий набір даних, що містить початковий та кінцевий кути кожної дуги (як d.source.startangle і d.target.endangle ). Це набір даних, який ми поставляємо при створенні градієнтів.

Ми повинні знати позиції пікселів невидимої лінії, яка працює від одного кінця акорду до іншого. Потім вони використовуються, щоб дати x1, .., y2 Атрибути кожного градієнта. Ми можемо застосувати деяку тригонометрію, використовуючи радіус схеми хордової діаграми, а місцезнаходження на півдорозі по кожній ARCENG ARC, щоб повернути ці позиції. Повна тригонометрична формула була вилучена з наступного коду, але ви знайдете його в Github Repo, який супроводжує цю статтю .

Щоб зробити унікальний ідентифікатор для кожного акорду, ми створюємо рядок комбінації індексу месника на кожному кінці акорду. D3 d3.layout.chord Завжди встановлює один (месників) до джерело а інший мішень , що робить унікальну пару. Пізніше, коли намалюючи акорди, ми можемо використовувати таку ж техніку, щоб зателефонувати до правильного градієнта.

 var grads = svg.append ("defs"). SelectAll ("лінійдрегітант")
.data (chord.chords ())
.Ender (). Додаток ("лінійдрінство")
.attr ("ID", функція (d) {return "gradientchord-" + d.source.
індекс + "-" + d.target.index; })
.attr ("Gradientunits", "userspaceonuse")
// розташування пікселів одного кінця акорду
.attr ("x1", функція (d, i) {return / * ... тригонометрія на основі
D.Source значення ... * /; })
.attr ("y1", функція (d, i) {return / * ... * /})
// Pixel розташування іншого кінця акорду
.attr ("x2", функція (d, i) {return / * ... * /})
.attr ("y2", функція (d, i) {return / * ... * /}); 

Оскільки кожен Avenger визначається власним номером індексу, ми можемо зробити кольорову функцію, кольори , що повертає колір кожного месника за значення індексу. Це дозволяє легко посилатися на правильний колір, при додавши двох кольорових зупинок.

 grads.append ("stop")
.attr ("компенсація", "0%")
.attr ("stop-color", функція (d) {повернення кольорів (d.source.index);
});
grads.append ("Стоп")
.attr ("компенсація", "100%")
.attr ("stop-color", функція (d) {повернення кольорів (d.target.index);
}); 

Все, що залишається, - це називати правильний ідентифікатор градієнта під час встановлення стилю заповнення акордів (з тією ж функцією, як ми використовували для встановлення ідентифікатора градієнта).

Округлення

Під час цього навчального посібника ми розглянули чотири різних способи використання градієнтів SVG у візуалізації даних, але завжди є більше речей, які ви можете зробити. З градієнтними анімаціями ви можете імітувати потік з однієї частини візуалізації даних до іншої, наприклад.

Отже, наступного разу ви розробляєте візуалізацію даних, нехай ваша творчість запускається. З d3.js, ви не повинні бути обмеженими тим, що ви думаєте, є межі інструменту. З трохи позашлюбним мисленням і зусиллям, ви можете зробити найдивовижніші речі.

Не пропустіть сесію Надіха, SVG за межами якості, при створенні Лондона, 21-23 вересня. Резервувати зараз !

Ця стаття спочатку з'явилася чистий журнал випуск 280; купити його тут !