Чому D3.js для візуалізації даних

Візуалізація даних містить розрив між сирими номерами та розумінням людини. Серед багатьох інструментів, доступних D3.js (Data-Driven Документи) виділяється як універсальна, низький рівень JavaScript бібліотека, яка дає розробникам прямий контроль над моделлю об'єкта документа (DOM). На відміну від бібліотек, що мають обмежену настройку, D3 дозволяє вам точно ремеслати візуальне значення, від простих діаграм барів до складних географічних карт та мережевих діаграм. Його модель обробки даних забезпечує, що будь-які зміни у вашому метаданих автоматично оновлюють візуальні елементи, що робить його ідеальним для інтерактивних панелей та розвідувальних даних. D3 використовується основними організаціями для її різноманітної гнучкості.

Основні поняття D3.js

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

Вибір та обробка даних

D3 використовує CSS-підбирачі для цільових елементів, потім прикріплює дані до них. Метод поєднує в собі масив значень з вибраними вершинами, а метод створює нові елементи для будь-яких точок даних, які не мають відповідного DOM-вузла. Цей шаблон дозволяє ефективно обробляти динамічні дані.

Наприклад, для створення кола для набору даних:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

Ваги та осі

Сирі дані часто пропускають діапазони, які не картують безпосередньо до координат піксель. D3 забезпечує , масштаби], які на карті домена (значень даних) до діапазону (піксельних позицій). Загальні ваги включають , , і . Ось після чого генеруються за допомогою або . Разом, масштаби і осі утворюють основу будь-якої кількісної візуалізації.

Приклад лінійної ваги:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

Інтерактивні візуалізації будівель з D3.js

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

Інструмент для та висот

Інструментіпси забезпечують точні значення даних на конюшині. Використовуючи систему заходу D3, ви можете створити плаваючу , яка показує деталі. Наприклад, розширення діаграми бару з інструментами вже було показано в оригінальному коді; тут ми також додаємо , що змінюють колір] на конюшині:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

Зомбі та пан

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

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

Оновлення даних

Інтерактивні панелі часто повинні оновлювати дані без перевантаження сторінки. Оновлення D3 граціозно ручок додавання, видалення та модифікації елементів. Ключ полягає в тому, щоб перезапустити приєднання до нових даних та використовувати для додаткових вузлів.

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

Розширені методи D3

Виставки та географічні візуалізації

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

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

Переходи та анімації

Смутні переходи покращують досвід користувача. D3 змін атрибутів анімати за час. Ви можете контролювати тривалість, знижуючи і затримку. Наприклад, анімаційні стовпчики для вирощування:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

Кращі практики для виробництва-читати D3

Оптимізація продуктивності

Для великих даних (тис точок), прямі DOM-маніпуляції стає повільним. Використовуйте канва], що надає через D3-канва або розглянути WebGL з бібліотеками, такими як палуба.gl. Для SVG-на основі візуальних зображень, зменшити складності DOM за допомогою груп, і уникнути оновлення кожного елемента на кожному кадрі. Використовуйте debounced ручники подій та cache selectors.

Доступність та відповідальність

Візуалізація повинні бути перцевими за допомогою всіх користувачів. Забезпечити теги на SVG елементи, використовувати атрибути ARIA, і включати в себе текст на основі таблиці як випадаючий. Для чуйного дизайну, базові розміри SVG на ширину контейнера за допомогою і слухайте вікна змінного струму з D3.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

Організація коду

Навіть в одноразовій заявці, структурувати ваш D3-код в модулі: один для кешування даних, один для масштабів / вісок, один для малювання, і для взаємодії. Використовуйте модулі ES6 або джгут, як Webpack. Уникайте змішування D3 логіки з рамками життєвих циклів безпосередньо; замість того, щоб створити клас D3, який викликає вашу рамку.

Інтеграція D3 з сучасними рамками

React, Angular і Vue керувати власним DOM. Щоб уникнути конфліктів, використовуйте D3 тільки для розрахунку (розміри, форми) і дозволяють каркасу рендерити SVG. Крім того, використовуйте спеціальну обгортку, як або . Однак для повного контролю можна використовувати D3 всередині (React) або (Angular) з посиланням на елемент. Це зберігає ефективні цикли оновлення D3, відокремлені від рамкових рементів.

Приклади та приклади використання реальних країн

D3 працює багато проектів візуалізації файлів: D3 Gallery on Observable] показує сотні прикладів, від анімованих хоронтів до інтерактивних часових ліній. Новини організації, як New York Times використовують D3 для користувацьких оповідань даних. У налаштуваннях підприємства D3 дозволяє налаштувати панельи для фінансових даних або в режимі реального часу IoT-сенсори. Його гнучкість означає, що ви можете об'єднати декілька типів діаграм в єдиний когейний інтерфейс.

Приклад: Інтерактивний Scatter Plot з інструментами та брухтами

Уявіть на розмір 500 точок з x, y, і категорії. Використовуючи D3, ви можете створити розсіювач ділянки з колами, кольоровими категоріями, інструментом, що показує точну координати, і пензлик, яка висвітлює вибрані точки. Структура коду випливає з вищезгаданих шаблонів. Узаємодія пензлів буде виглядати:

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}

Навчальні ресурси та наступні кроки

Щоб оволодіти D3, почніть з офіційної D3.js документація і безкоштовні уроки на Observable]. Робота через оглядові блокноти, які забезпечують живий код, який можна виделити. Також читайте "Інтерактивна візуалізація даних для Веба" від Scott Murray для ретельної запровадження. Практика шляхом відновлення класичних діаграм (бар, лінія, скатер) з нуля, потім додати інтерактивну активність. Експеримент з [[FLT: 30][F[F:][F:][F:][F: 31 /:31F: 31F: 31 / 31 / 31F:] [[F:] [[F:] [F:] [[F:] [[FLT:] [FLT:] [[FLT:] [[FLT:] [[FLT:] [[FLT:] [[FLT:] [FLT:

Висновок

D3.js залишається золотою стандартом для візуалізації інтерактивних даних на сайті. Її крута крива навчання зміщується неперевершеною гнучкістю, продуктивністю та підтримкою спільноти. Освоєння її основних концепцій — виділень, зв'язування даних, масштабів та обробки подій — ви можете побудувати візуалізацію, які перетворюють дані на інсайт. Чи можна ви будувати простий діаграму бару або складну багатоглядову панель, D3 дає вам інструменти для створення виробничо-читацьких, захоплюючих та доступних візуалізацій. Починайте невеликий, ітерат, і використовувати багату екосистему прикладів, щоб керувати вашою подорож.