#StandWithUkraine 🇺🇦

Підтримай / Поддержи / Donate

SaveLife.in.ua / Pritula Foundation

Infographica

Украинский блог об инфографике и визуализации данных

Створюємо градіент в d3.js

Кольоровий градієнт — сильна та поширена штука в дизайні. Вона і приваблива ззовні, та й дає змогу за допомогою кольорів розрізняти кількісні дані без групування, хоча варто враховувати складність в розрізненні близьких значень.

Для свого домашнього проекту (або як це люблять називати, PET-проекту) потрібно було додати легенду та відповідне кольорове кодування відсоткових значень, тому вирішив звернутися до градієнту, оскільки в даному випадку точність розділення між значеннями менш важлива, ніж загальне сприйняття ситуації. Всю візуалізацію робив за допомогою бібліотеки d3.js, тому мова йтиме про SVG.

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

Основні елементи svg-«магії»: defs та linearGradient.

Що ще глянути: