Учебник D3.js

Введение в D3.js и экосистему визуализации
- Что такое D3.js и зачем он нужен
- Философия D3: данные, привязанные к DOM
- D3 vs Chart.js, Highcharts, Vega-Lite: когда выбирать D3
- Обзор версий D3: от v4 до v7, ключевые изменения
- Инструменты разработки: браузер, редактор, DevTools
- Подключение D3: CDN, npm, ES-модули
- Структура проекта и сборка через Vite/Webpack
- Observable Notebook как среда для прототипирования
Основы работы с DOM и выборками
- Концепция выборок (selections) в D3
- d3.select и d3.selectAll: синтаксис и поведение
- Цепочки вызовов (method chaining)
- Установка атрибутов: .attr(), .style(), .classed(), .property()
- Установка текстового и HTML-содержимого
- Вложенные выборки и контекст this
- Фильтрация выборок: .filter()
- Сортировка элементов: .sort() и .order()
- Обход выборок: .each() и .call()
- Объединение нескольких выборок: .merge()
Привязка данных
- Паттерн enter-update-exit: теория и смысл
- .data(): привязка массива к выборке
- Ключевая функция в .data(): зачем и как использовать
- Enter-выборка: создание новых элементов
- Update-выборка: обновление существующих элементов
- Exit-выборка: удаление лишних элементов
- .join(): современный способ управления данными
- .datum(): привязка одного значения к элементу
- Работа с вложенными данными: .data() внутри .data()
- Отладка привязки данных через DevTools
Масштабы (Scales)
- Что такое масштаб в D3: домен и диапазон
- Линейный масштаб: d3.scaleLinear()
- Степенной масштаб: d3.scalePow() и d3.scaleSqrt()
- Логарифмический масштаб: d3.scaleLog()
- Масштаб с временными значениями: d3.scaleTime()
- Последовательный масштаб: d3.scaleSequential()
- Расходящийся масштаб: d3.scaleDiverging()
- Дискретные масштабы: d3.scaleOrdinal()
- Полосовой масштаб: d3.scaleBand()
- Точечный масштаб: d3.scalePoint()
- Квантовый и квантильный масштабы: scaleQuantize, scaleQuantile
- Пороговый масштаб: d3.scaleThreshold()
- Инверсия масштаба: .invert()
- Clamp, nice и tickFormat: тонкая настройка масштабов
- Цветовые схемы D3: d3-scale-chromatic
Оси (Axes)
- Генераторы осей: axisTop, axisBottom, axisLeft, axisRight
- Привязка оси к масштабу
- Настройка делений: .ticks(), .tickValues(), .tickSize()
- Форматирование подписей: .tickFormat()
- Смещение осей через transform
- Стилизация осей через CSS
- Убирание лишних линий и делений
- Динамическое обновление осей при изменении данных
- Вторичные оси и оси на нескольких уровнях
SVG и Canvas в D3
- Основы SVG: элементы, координатная система, viewport
- Создание SVG-контейнера через D3
- Группировка элементов: элемент g и трансформации
- Базовые фигуры: rect, circle, ellipse, line, polyline, polygon
- Элемент path: команды M, L, C, Q, A, Z
- Атрибуты заливки, обводки и прозрачности
- clipPath: обрезка содержимого
- Маски (mask) в SVG
- Градиенты в SVG: linearGradient и radialGradient
- Символы и паттерны: defs, symbol, pattern
- Текст в SVG: text, tspan, textPath
- Когда использовать Canvas вместо SVG
- d3 и Canvas 2D API: рендеринг без DOM
- Гибридный подход: SVG для интерактивности, Canvas для производительности
Генераторы фигур и путей
- Концепция генераторов в D3
- Линейный генератор: d3.line()
- Кривые (curves): curveBasis, curveCardinal, curveCatmullRom, curveStep и другие
- Генератор площади: d3.area()
- Стекируемая площадь с d3.stack()
- Генератор дуги: d3.arc()
- Генератор круговой диаграммы: d3.pie()
- Генератор символов: d3.symbol()
- Генератор радиальной линии: d3.lineRadial()
- Генератор радиальной площади: d3.areaRadial()
- Замкнутые формы и настройка defined()
- Пользовательские генераторы путей
Работа с данными и форматами
- Загрузка данных: d3.csv(), d3.tsv(), d3.json(), d3.text(), d3.xml()
- Парсинг и типизация данных при загрузке
- d3.autoType: автоматическое определение типов
- Загрузка нескольких источников: Promise.all
- Работа с числовыми данными: d3.min, d3.max, d3.extent, d3.mean, d3.median
- Группировка данных: d3.group() и d3.rollup()
- Сортировка и фильтрация массивов через d3-array
- d3.bin(): построение гистограмм из сырых данных
- Работа с временными данными: d3-time и d3-time-format
- Парсинг и форматирование дат
- d3.format(): числовые форматы (процент, валюта, экспоненциальный)
- Сводные таблицы и трансформации данных
Переходы и анимация
- Концепция переходов в D3: .transition()
- Длительность и задержка: .duration() и .delay()
- Функции смягчения (easing): d3-ease
- Анимация атрибутов и стилей
- Анимация путей SVG: attrTween и d3.interpolate
- Интерполяция значений: d3-interpolate
- Интерполяция цветов
- Интерполяция строк и путей: d3.interpolatePath
- Цепочки переходов: .transition().transition()
- Прерывание и отмена переходов
- Событие end у перехода
- Анимация при обновлении данных: enter-update-exit с переходами
- Staggered-анимация: задержка через функцию от индекса
- Производительность анимаций: requestAnimationFrame и Canvas
События и интерактивность
- Добавление обработчиков событий: .on()
- Мышиные события: click, mouseover, mouseout, mousemove
- Тач-события и мобильная поддержка
- Доступ к данным внутри обработчика события
- Объект события и d3.pointer()
- Тултипы: реализация через div и SVG
- Кросс-фильтрация: связанные визуализации
- Выделение элементов и подсветка при наведении
- Клавиатурные события и доступность (a11y)
Зум и панорамирование
- d3.zoom(): основы
- Трансформация через ZoomTransform
- Ограничение зума: scaleExtent и translateExtent
- Программный зум: .scaleTo(), .translateTo(), .translateBy()
- Синхронизация зума между несколькими элементами
- Зум на Canvas
- Семантический зум vs геометрический зум
- Сброс зума по кнопке
Перетаскивание (Drag)
- d3.drag(): подключение и основы
- События drag: start, drag, end
- Ограничение перемещения в пределах контейнера
- Перетаскивание с привязкой к сетке (snap to grid)
- Drag на сенсорных экранах
- Сохранение позиции после drag
- Drag в сочетании с zoom
Иерархические данные и макеты
- Представление иерархии в D3: d3.hierarchy()
- Обход дерева: .each(), .eachBefore(), .eachAfter(), .descendants(), .links()
- Дерево (Tree): d3.tree() и d3.cluster()
- Горизонтальные и радиальные деревья
- Дендрограммы
- Treemap: d3.treemap()
- Стратегии тайлинга: treemapSquarify, treemapSlice, treemapDice
- Упаковка кругами: d3.pack()
- Sunburst-диаграмма через d3.partition()
- Icicle-диаграмма
- Загрузка стратифицированных данных: d3.stratify()
Сетевые данные и диаграммы связей
- Модель данных для графов: узлы и рёбра
- Симуляция силовых схем: d3.forceSimulation()
- Силы: forceLink, forceManyBody, forceCenter, forceCollide, forceX, forceY
- Настройка параметров симуляции: alpha, alphaDecay, velocityDecay
- Тик симуляции и рендеринг
- Перетаскивание узлов в force layout
- Рендеринг графов на Canvas для больших наборов данных
- Chord-диаграмма: d3.chord() и d3.ribbon()
- Sankey-диаграммы через плагин d3-sankey
- Матричные диаграммы связей
Географические данные и карты
- GeoJSON и TopoJSON: форматы и отличия
- Проекции: d3.geoMercator, geoOrthographic, geoAlbersUsa и другие
- Настройка проекции: .center(), .scale(), .translate(), .rotate()
- Генератор пути: d3.geoPath()
- Отрисовка стран, регионов, городов
- Хороплеты: привязка данных к географическим объектам
- Масштабирование карты: zoom на geoPath
- Точки и пузырьки на карте
- Линии и маршруты на карте: d3.geoGraticule()
- Работа с TopoJSON: topojson.feature(), topojson.mesh()
- Тайловые карты и интеграция с внешними тайлами
- Расчёт расстояний и площадей: d3.geoDistance(), d3.geoArea()
Цвет в D3
- Цветовые пространства: RGB, HSL, HSV, Lab, HCL
- Объекты цвета в D3: d3.color, d3.rgb, d3.hsl, d3.lab, d3.hcl
- Преобразование и манипуляции с цветом
- Последовательные, расходящиеся и качественные палитры
- Интерполяция цветов в разных пространствах
- Выбор цветовой шкалы для данных: рекомендации и подводные камни
- Доступность: контрастность и восприятие цвета при дальтонизме
Компоненты, переиспользование и архитектура
- Паттерн переиспользуемых компонентов по Бостоку
- Замыкания как основа конфигурируемых компонентов
- Разделение логики данных и отображения
- Интеграция D3 с React: useRef, useEffect, подходы
- Интеграция D3 с Vue: ref, onMounted, watch
- Интеграция D3 с Svelte: использование D3 в onMount
- Управление состоянием в интерактивных D3-приложениях
- Тестирование D3-компонентов: jsdom и d3-selection
Производительность и оптимизация
- Когда SVG становится узким местом
- Виртуализация: рендеринг только видимых элементов
- Пакетное обновление DOM
- Рендеринг на Canvas: подходы и ограничения
- WebGL и D3: regl, PIXI.js в связке с D3
- Профилирование визуализаций в Chrome DevTools
- Оптимизация force-симуляций для больших графов
- Работа с большими CSV и GeoJSON: стриминг и упрощение данных
- Упрощение геометрии: topojson.simplify()
Типовые виды диаграмм: реализация и детали
- Столбчатая диаграмма: вертикальная и горизонтальная
- Сгруппированная и стекированная столбчатая диаграмма
- Линейный график: одна и несколько серий
- Диаграмма рассеяния (scatter plot)
- Пузырьковая диаграмма
- Круговая и кольцевая диаграмма
- Гистограмма и плотностная кривая
- Box plot и violin plot
- Тепловая карта (heatmap)
- Лепестковая диаграмма (radar chart)
- Waterfall-диаграмма
- Bump chart и slope chart
- Диаграмма Ганта
- Streamgraph
- Swarm plot и beeswarm
Текст, подписи и аннотации
- Стратегии размещения текстовых подписей
- Предотвращение наложения подписей
- d3-annotation: библиотека аннотаций
- Форматирование числовых и временных подписей
- Обёртка длинного текста в SVG: foreignObject vs ручной перенос
- Адаптивный размер шрифта при зуме
Адаптивные и отзывчивые визуализации
- Стратегии отзывчивости: viewBox vs пересчёт размеров
- ResizeObserver и реакция на изменение контейнера
- Адаптация осей и делений под маленькие экраны
- Упрощение визуализации на мобильных устройствах
- Медиазапросы и D3
Доступность визуализаций
- Семантика SVG: role, aria-label, title, desc
- Навигация с клавиатуры по интерактивным элементам
- Поддержка скринридеров
- Альтернативные текстовые представления данных
- Проверка доступности: инструменты и чеклист