Продвинутая визуализация

2010 год. The New York Times публикует интерактивную визуализацию 'Mapping America' - каждая точка на карте США это один житель, окрашенный по этническому происхождению из census-данных. 300 миллионов точек, плавный zoom, фильтры по расе и доходу. Эту визуализацию читали миллионы; обычная таблица из 50 строк по штатам - сотни. Разница - в инструменте: статичный matplotlib даёт картинку, но не позволяет читателю исследовать данные на своём ритме. Интерактивная визуализация превращает данные в опыт.

• **Uber kepler.gl**: WebGL-визуализация миллионов поездок по картам, выложен в open-source; используется городскими планировщиками для анализа transportation patterns
• **Bloomberg Terminal**: интерактивные финансовые дашборды на Plotly-подобной архитектуре; миллионы трейдеров получают real-time графики с hover-tooltips и drill-down
• **Cytoscape для биоинформатики**: построение и анализ графов белок-белковых взаимодействий, метаболических путей, регуляторных сетей - наука держится на network-визуализации

Plotly: интерактивные графики

В прошлом уроке storytelling-нарратив требовал, чтобы CFO принимал решение за 60 секунд. Но что если аудитория - дата-инженер, который хочет покрутить hover-tooltip, отфильтровать когорты, увеличить временной диапазон? Статичный matplotlib для этого мёртв. **Plotly** - библиотека интерактивных графиков на JavaScript (plotly.js) с биндингами в Python, R, Julia. Каждый график - это JSON, рендерится в браузере через WebGL для больших данных (миллионы точек). Plotly Express - high-level API в стиле seaborn: одна строка кода даёт hoverable, zoomable, filterable chart, готовый к embed в Jupyter, Streamlit или Dash.

Архитектура Plotly: figure = data (traces) + layout (axes, titles, legend) + frames (для анимации). Trace - один слой данных (scatter, bar, choropleth и т.д.); figure может содержать любое число trace. Renderer выбирается контекстом: notebook (inline HTML), browser (открывает локальный HTML), static (kaleido для PNG/SVG в pipeline). Для больших данных - WebGL trace (scattergl, parcoords), который масштабируется до 10M точек. Production-альтернативы: Bokeh (тот же подход, реактивный), Altair (декларативный grammar of graphics).

Плата за интерактивность - размер HTML. Один Plotly-чарт с 10K точек = ~500KB JSON в HTML; дашборд из 10 графиков = 5MB. Для embed в email или PDF используйте static export (fig.write_image('chart.png', engine='kaleido')). Для production-дашбордов лучше Dash или Streamlit с серверным data-fetching - иначе frontend тонет в данных.

D3.js: визуализация без рамок

Plotly даёт стандартные типы графиков с быстрой кривой обучения. Но если нужен custom-визуал, которого нет в библиотеках - sankey-диаграмма с кастомной анимацией, force-directed граф 5000 узлов с физикой, или интерактивная карта молекулярных взаимодействий - выбор один: **D3.js** (Data-Driven Documents, Mike Bostock 2011). D3 - не библиотека готовых графиков, а низкоуровневый toolkit для манипуляции SVG/Canvas через data binding. The New York Times, FiveThirtyEight, Pudding делают свои знаковые визуализации именно на D3 - потому что у каждой истории своя форма.

Философия D3: data binding (selectAll('.bar').data(arr) - связать элементы DOM с данными), scales (d3.scaleLinear() - конвертация значений в координаты), axes, force simulation (физика для графов: репульсия + связи + центр), transitions (animated state changes). Кривая обучения - крутая: для первого bar chart нужно 50 строк vs 1 строка в Plotly. Но за крутой кривой - неограниченная гибкость. Современный фронтенд часто использует react-d3 или Observable Plot (новый высокоуровневый API от Bostock) для уменьшения boilerplate.

Геопространственная визуализация

Когда данные имеют координаты широта/долгота - продажи по регионам, поездки такси, миграция, метеосенсоры - простой scatter plot не работает. Нужна **картографическая проекция**: преобразование 3D-сферы в 2D-плоскость. Меркатор (классическая навигация, искажает площадь Гренландии), Albers Equal Area (для статистики - сохраняет площадь), Mollweide (компромисс между формой и площадью). Стандартные форматы: GeoJSON (геометрия + properties в JSON), Shapefile (бинарный, ESRI), TopoJSON (компактный GeoJSON с топологией). Для production - PostGIS (геопространственные расширения PostgreSQL) и tile-серверы (Mapbox, OpenStreetMap).

Типы геовизуализаций: (1) **Choropleth** - заливка регионов по значению (примеры: COVID-карты, election maps); подходит для нормализованных метрик per capita, не для абсолютных чисел (большие штаты будут доминировать); (2) **Heatmap** - плотность точек на сетке (распределение преступлений, поездки такси); (3) **Hexbin** - агрегация точек в гексагональные ячейки (избегает Modifiable Areal Unit Problem - артефакт из административных границ); (4) **Flow map** - линии между источником и destination (миграция, авиамаршруты). Инструменты: Plotly choropleth, Folium (Python wrapper на Leaflet), kepler.gl (для больших WebGL-датасетов от Uber), deck.gl.

Проекция Меркатора занимает 90% мировых карт (Google Maps по умолчанию) - но искажает площадь у полюсов. Гренландия выглядит как Африка, хотя её площадь в 14 раз меньше. Для глобальных стат-карт (COVID, ВВП per capita) использовать Equal Area проекции (Albers, Eckert IV) - иначе визуальный bias преувеличит роль северных стран.

Графы сетей: связи как первичный объект

Когда первичные данные - не значения по объектам, а **связи между объектами**: репост-сеть в соцмедиа, граф транзакций между банковскими счетами, web hyperlink graph, нейронная сеть мозга. Граф = узлы (nodes) + рёбра (edges, могут быть направленные/ненаправленные, взвешенные). Визуализация графа требует решить fundamental problem: **layout** - где разместить узлы в 2D-пространстве, чтобы структура связей была читаема. Готового решения нет; используют силовые алгоритмы (Fruchterman-Reingold, ForceAtlas2): узлы 'отталкиваются' друг от друга, рёбра 'тянут' их обратно, система ищет минимум энергии.

Метрики графа для cherry-pick узлов: degree centrality (число прямых связей), betweenness centrality (через сколько кратчайших путей проходит узел - брокеры/мосты), closeness centrality (среднее расстояние до всех остальных - 'центральность'), PageRank (рекурсивный вес от важных соседей, Google search). Алгоритмы кластеризации: Louvain, Label Propagation, K-Core - выделяют комьюнити в графе. Инструменты: NetworkX (Python, академический), Graph-tool (быстрее, C++), Gephi (GUI для exploration), Cytoscape (биология), vis.js/d3-force (web-визуализация).

Ключевые идеи

• **Plotly** - default-выбор для интерактивных графиков с hover, zoom, filter; стандартные типы покрыты high-level API
• **D3.js** - low-level toolkit для уникальных story-driven визуализаций; крутая кривая обучения, но неограниченная гибкость
• **Геопространственные данные** требуют выбора проекции (Mercator vs Equal Area), нормализации метрики (per capita) и правильного типа карты (choropleth vs heatmap vs flow map)
• **Графы сетей** визуализируются через force-directed layout; ключевые инсайты - через метрики центральности (betweenness для брокеров, PageRank для авторитетов) и community detection (Louvain)

Связанные темы

Mapping America из вступления невозможен на статичных инструментах прошлого урока - сложные данные требуют сложных интерактивных инструментов. Продвинутая визуализация работает в связке с другими навыками:

• Storytelling с данными — Интерактивная визуализация без нарратива - это data dump; продвинутые инструменты работают, когда есть структурированный месседж (setup/conflict/resolution)
• Большие данные и ETL — WebGL-визуализации на миллионы точек требуют backend-агрегации; нельзя пушить raw data в браузер - сначала pipeline aggregates
• Дашборды и BI — Plotly/D3 - фундамент production-дашбордов (Dash, Streamlit, Superset); BI-инструменты добавляют data layer + permissions + scheduling

Вопросы для размышления

• NYT Mapping America грузит 300M точек через клиентский WebGL - вам пришлось бы тратить большие ресурсы. Когда вложение в интерактивную визуализацию оправдано бизнес-результатом, а когда статичный PNG достаточен?
• D3.js требует месяцы освоения для нестандартных кейсов; Plotly решает 80% задач за часы. Стоит ли отделу аналитики инвестировать в D3-экспертизу, или лучше использовать готовые инструменты?
• Геокарта с проекцией Меркатора визуально преувеличивает северные страны (Гренландия выглядит как Африка). Какие data-storytelling решения вы видели, которые манипулируют восприятием через выбор визуальной формы?

Связанные уроки

• ds-13 — Storytelling - фундамент перед выбором инструмента
• ds-15 — NLP добавляет текстовые данные в визуальный пайплайн
• alg-12-bfs — Граф-визуализация строится через BFS/DFS обход
• ds-12-service-discovery — Топология сети - частный случай network graph
• stat-08-correlation