Разработка Sankey-диаграмм для визуализации потоков на сайте

При анализе воронки продаж на сайте электронной коммерции с 50 000 ежемесячных сессий мы обнаружили, что 40% трафика уходит на страницу каталога и не переходит дальше. Стандартные отчёты показывали только конверсию 2,5% на этом этапе, но не объясняли причины. Sankey-диаграмма помогла выявить, что пользователи из платной рекламы часто переходят прямо на карточку товара, минуя каталог, и конвертируются в 3 раза чаще, чем из органики. После перераспределения бюджета конверсия выросла на 20%. Это инструмент, который визуализирует каждый переход между страницами, каналами или этапами. Без такой визуализации вы не увидите, где конкретно теряете трафик.

Почему стандартные воронки не показывают полную картину?

Стандартные отчёты по воронке показывают конверсию на каждом шаге, но не показывают, откуда приходят самые ценные пользователи и куда они уходят. Sankey-диаграмма решает эту проблему, выводя все потоки между узлами. Например, вы можете увидеть, что пользователи из платной рекламы часто переходят прямо на карточку товара, минуя каталог, и совершают покупки в 3 раза чаще, чем из органики. Это позволяет перераспределить бюджет и повысить ROI.

Как Sankey-диаграмма улучшает аналитику?

Санкей даёт ответы на вопросы, которые не видны в таблицах: откуда приходят самые конверсионные пользователи, какой путь приводит к максимальному LTV, где теряется больше всего трафика. Мы используем drill-down — клик по узлу раскрывает внутреннюю структуру, что позволяет копать вглубь без остановки. В товарной аналитике Sankey покажет, какие комбинации каналов (organic → product → cart) ведут к покупке, а какие — к отказу. Для циклических данных (когда пользователи ходят по кругу) применяем d3-sankey-circular.

Что даёт drill-down?

Drill-down позволяет детализировать выбранный узел, раскрывая его внутреннюю структуру. Например, кликнув на узел «Корзина», можно увидеть, из каких источников пришли пользователи и какие действия они совершили дальше. Это особенно полезно для глубокого анализа воронок с множеством этапов.

Сравнение стандартной воронки и Sankey-диаграммы

Техническая реализация Sankey на React

Мы используем современный стек: React 18, TypeScript, d3-sankey. Это обеспечивает плавный рендеринг даже при 10 000+ связях – по данным официальной документации d3-sankey.

Установка и зависимости

npm install d3-sankey d3 npm install --save-dev @types/d3-sankey 

Структура данных

Данные для Sankey состоят из узлов (nodes) и связей (links). Каждая связь содержит source, target и value. Пример для воронки e-commerce:

interface SankeyNode { id: string; label: string; color?: string; } interface SankeyLink { source: string; // id узла-источника target: string; // id узла-цели value: number; // объём потока } interface SankeyData { nodes: SankeyNode[]; links: SankeyLink[]; } // Пример: воронка e-commerce const data: SankeyData = { nodes: [ { id: 'organic', label: 'Органика' }, { id: 'paid', label: 'Платная реклама' }, { id: 'direct', label: 'Прямые' }, { id: 'catalog', label: 'Каталог' }, { id: 'product', label: 'Карточка товара' }, { id: 'cart', label: 'Корзина' }, { id: 'checkout', label: 'Оформление' }, { id: 'purchase', label: 'Покупка' }, { id: 'exit', label: 'Выход' }, ], links: [ { source: 'organic', target: 'catalog', value: 4200 }, { source: 'organic', target: 'product', value: 1800 }, { source: 'paid', target: 'catalog', value: 2100 }, { source: 'paid', target: 'product', value: 3400 }, { source: 'direct', target: 'catalog', value: 900 }, { source: 'catalog', target: 'product', value: 5600 }, { source: 'catalog', target: 'exit', value: 3100 }, { source: 'product', target: 'cart', value: 2900 }, { source: 'product', target: 'exit', value: 4800 }, { source: 'cart', target: 'checkout', value: 1600 }, { source: 'cart', target: 'exit', value: 1300 }, { source: 'checkout', target: 'purchase', value: 1100 }, { source: 'checkout', target: 'exit', value: 500 }, ], }; 

Компонент с tooltip и интерактивом

Наш компонент на React рендерит SVG с использованием d3. В нём реализованы:

• Плавные пути с закруглениями
• Tooltip при наведении на узел или связь
• Цветовая кодировка узлов (шкала Tableau10)
• Адаптивная ширина и высота

import { useEffect, useRef } from 'react'; import * as d3 from 'd3'; import { sankey, sankeyLinkHorizontal, sankeyLeft } from 'd3-sankey'; export function SankeyDiagram({ data, width = 800, height = 500 }: { data: SankeyData; width?: number; height?: number }) { const svgRef = useRef<SVGSVGElement>(null); const margin = { top: 20, right: 20, bottom: 20, left: 20 }; useEffect(() => { if (!svgRef.current) return; const svg = d3.select(svgRef.current); svg.selectAll('*').remove(); const iw = width - margin.left - margin.right; const ih = height - margin.top - margin.bottom; // Подготовка данных для d3-sankey const nodeMap = new Map(data.nodes.map((n, i) => [n.id, { ...n, index: i }])); const sankeyData = { nodes: data.nodes.map(n => ({ ...n })), links: data.links.map(l => ({ source: data.nodes.findIndex(n => n.id === l.source), target: data.nodes.findIndex(n => n.id === l.target), value: l.value, })), }; const sankeyLayout = sankey() .nodeWidth(20) .nodePadding(12) .nodeAlign(sankeyLeft) .extent([[0, 0], [iw, ih]]); const { nodes, links } = sankeyLayout(sankeyData as any); const colorScale = d3.scaleOrdinal(d3.schemeTableau10); const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`); // Tooltip const tooltip = d3.select('body').append('div') .style('position', 'absolute') .style('display', 'none') .style('background', 'rgba(0,0,0,0.8)') .style('color', '#fff') .style('padding', '8px 12px') .style('border-radius', '4px') .style('font-size', '13px') .style('pointer-events', 'none'); // Links g.append('g') .selectAll('.link') .data(links) .join('path') .attr('class', 'link') .attr('d', sankeyLinkHorizontal()) .attr('fill', 'none') .attr('stroke', (d: any) => colorScale(String(d.source.index))) .attr('stroke-width', (d: any) => Math.max(1, d.width)) .attr('stroke-opacity', 0.4) .on('mouseover', (event, d: any) => { d3.select(event.currentTarget).attr('stroke-opacity', 0.7); tooltip .style('display', 'block') .style('left', `${event.pageX + 12}px`) .style('top', `${event.pageY - 28}px`) .html(`<strong>${d.source.label} → ${d.target.label}</strong><br/>${d3.format(',.0f')(d.value)} пользователей`); }) .on('mouseout', (event) => { d3.select(event.currentTarget).attr('stroke-opacity', 0.4); tooltip.style('display', 'none'); }); // Nodes const nodeG = g.append('g') .selectAll('.node') .data(nodes) .join('g') .attr('class', 'node'); nodeG.append('rect') .attr('x', (d: any) => d.x0) .attr('y', (d: any) => d.y0) .attr('width', (d: any) => d.x1 - d.x0) .attr('height', (d: any) => Math.max(1, d.y1 - d.y0)) .attr('fill', (d: any) => colorScale(String(d.index))) .attr('rx', 3) .on('mouseover', (event, d: any) => { tooltip .style('display', 'block') .style('left', `${event.pageX + 12}px`) .style('top', `${event.pageY - 28}px`) .html(`<strong>${d.label}</strong><br/>Объём: ${d3.format(',.0f')(d.value)}`); }) .on('mouseout', () => tooltip.style('display', 'none')); // Labels nodeG.append('text') .attr('x', (d: any) => d.x0 < iw / 2 ? d.x1 + 6 : d.x0 - 6) .attr('y', (d: any) => (d.y0 + d.y1) / 2) .attr('dy', '0.35em') .attr('text-anchor', (d: any) => d.x0 < iw / 2 ? 'start' : 'end') .attr('font-size', 12) .attr('fill', '#374151') .text((d: any) => d.label); return () => { tooltip.remove(); }; }, [data, width, height]); return <svg ref={svgRef} width={width} height={height} />; } 

Подготовка данных: SQL-агрегация

Данные для Sankey обычно агрегируются из событийного потока. Пример SQL-запроса для воронки сайта (последовательные переходы между страницами в рамках сессии):

WITH ranked_events AS ( SELECT session_id, page_type, LAG(page_type) OVER (PARTITION BY session_id ORDER BY created_at) AS prev_page_type, ROW_NUMBER() OVER (PARTITION BY session_id ORDER BY created_at) AS step FROM page_views WHERE created_at > NOW() - INTERVAL '30 days' ) SELECT COALESCE(prev_page_type, 'entry') AS source, page_type AS target, COUNT(*) AS value FROM ranked_events WHERE prev_page_type IS NOT NULL OR step = 1 GROUP BY 1, 2 HAVING COUNT(*) > 50 ORDER BY value DESC; 

Этот запрос даёт таблицу переходов с количеством пользователей. Для больших объёмов данных мы используем предварительную агрегацию с помощью Materialized View или триггеров.

Настройка раскладки: какой алгоритм выбрать?

d3-sankey поддерживает несколько алгоритмов выравнивания узлов. Выбор влияет на читаемость диаграммы.

Для циклических данных используем d3-sankey-circular или предварительно разрываем циклы.

Что входит в работу

• Аналитика: изучение структуры данных, определение ключевых метрик и точек интеграции.
• Проектирование: разработка макета, выбор алгоритма раскладки, прототипирование интеракций.
• Реализация: кодирование компонента на React/TypeScript, настройка бэкенда для агрегации данных.
• Документация: описание API компонента, инструкция по эксплуатации и кастомизации.
• Тестирование: проверка на реальных данных, нагрузочное тестирование (до 100 000 связей), оптимизация.
• Деплой: интеграция с вашим интерфейсом, настройка автоматической сборки и развёртывания.
• Обучение: вебинар для вашей команды по использованию и доработке диаграммы.
• Поддержка: 30 дней бесплатных консультаций и исправления ошибок после внедрения.

Процесс разработки и сроки

Наша команда реализует Sankey-диаграмму под ключ. Опыт более 50 проектов за последние годы.

1. Аналитика: изучаем вашу структуру данных, определяем ключевые метрики.
2. Проектирование: разрабатываем макет, выбираем алгоритм раскладки, продумываем интеракции.
3. Реализация: кодируем компонент на React/TypeScript, настраиваем бэкенд для агрегации.
4. Тестирование: проверяем на реальных данных, оптимизируем производительность.
5. Деплой: интегрируем с вашим интерфейсом, разворачиваем на вашем сервере или облаке.
6. Поддержка: 30 дней бесплатных доработок и консультации.

Базовая версия с tooltip и взаимодействиями — 2–3 дня. Расширенная с drill-down, фильтрацией и экспортом — 5–7 дней.

Результаты внедрения

После внедрения Sankey-диаграммы наши клиенты видят рост конверсии на 15–30% и снижение CPA на 20–40% за счёт выявления узких мест. Мы предоставляем гарантию на код 6 месяцев и полную документацию. Свяжитесь с нами, чтобы заказать разработку кастомной Sankey-диаграммы для вашего сайта. Получите консультацию инженера уже сегодня.