Использование Javascript для создания интерактивных визуализаций данных с помощью D3.js

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");
 });

Zoom и Pan

Для больших наборов данных или данных временных рядов масштабирование и панорамирование помогают пользователям сосредоточиться на интересующих областях. Поведение 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 становится медленным. Используйте canvas , визуализируя через D3-canvas или рассмотрите WebGL с библиотеками, такими как deck.gl. Для визуальных эффектов на основе SVG уменьшайте сложность DOM, используя группы, и избегайте обновления каждого элемента на каждом кадре. Используйте , о котором , обработчики событий и селекторы кэша.

Доступность и отзывчивость

Визуализация должна быть ощутима всеми пользователями. Предоставьте теги на элементах 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 на наблюдаемом D3 демонстрирует сотни примеров, от анимированных хороплит до интерактивных временных линий. Новостные организации, такие как The New York Times, используют D3 для пользовательских историй данных. В корпоративных настройках D3 позволяет использовать пользовательские панели инструментов для финансовых данных или ленты датчиков IoT в реальном времени. Его гибкость означает, что вы можете объединить несколько типов диаграмм в единый сплоченный интерфейс.

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 и бесплатных учебников по Наблюдаемым . Работайте через наблюдаемые ноутбуки, которые предоставляют живой код, который вы можете вилить. Также прочитайте «Интерактивная визуализация данных для Интернета» Скотта Мюррея для тщательного введения. Практика путем воссоздания классических диаграмм (бар, линия, рассеяние) с нуля, затем добавьте интерактивность. Эксперимент с для карт деревьев или для карт.

Заключение

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