Sankey Diagram Development for Website Flow Visualization

During a sales funnel analysis on an e-commerce site with 50,000 monthly sessions, we found that 40% of traffic went to the catalog page but did not proceed further. Standard reports showed only a 2.5% conversion rate at that stage but didn't explain why. A Sankey diagram helped reveal that users from paid ads often jumped directly to product pages, bypassing the catalog, and converted three times more often than organic users. After reallocating the budget, conversion increased by 20%. This tool visualizes every transition between pages, channels, or stages. Without such visualization, you cannot see exactly where you lose traffic.

Why Standard Funnels Don't Show the Full Picture

Standard funnel reports show conversion at each step but don't show where the most valuable users come from or where they go. The Sankey diagram solves this by displaying all flows between nodes. For example, you can see that users from paid ads often go directly to product pages, bypassing the catalog, and make purchases three times more often than organic users. This allows you to reallocate budget and increase ROI. Sankey diagrams are 3x more effective than standard funnels in identifying bottlenecks.

How the Sankey Diagram Improves Analytics

The Sankey answers questions invisible in tables: where do high-converting users come from, which path leads to maximum LTV, where is the most traffic lost. We use drill-down — clicking on a node reveals its internal structure, allowing deep exploration without stopping. In product analytics, the Sankey shows which channel combinations (organic → product → cart) lead to purchase and which lead to abandonment. For cyclic data (users looping), we use d3-sankey-circular.

What Drill-Down Provides

Drill-down allows you to detail the selected node by revealing its internal structure. For example, clicking on the 'Cart' node shows which sources users came from and what actions they took next. This is especially useful for deep analysis of funnels with many stages.

Comparison of Standard Funnel vs. Sankey Diagram

Technical Implementation of Sankey on React

We use a modern stack: React 18, TypeScript, d3-sankey. This ensures smooth rendering even with 10,000+ connections – according to d3-sankey official documentation.

Installation and Dependencies

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

Data Structure

Data for the Sankey consists of nodes and links. Each link contains source, target, and value. Example for an e-commerce funnel:

interface SankeyNode { id: string; label: string; color?: string; } interface SankeyLink { source: string; // source node id target: string; // target node id value: number; // flow volume } interface SankeyData { nodes: SankeyNode[]; links: SankeyLink[]; } // Example: e-commerce funnel const data: SankeyData = { nodes: [ { id: 'organic', label: 'Organic' }, { id: 'paid', label: 'Paid Ads' }, { id: 'direct', label: 'Direct' }, { id: 'catalog', label: 'Catalog' }, { id: 'product', label: 'Product Page' }, { id: 'cart', label: 'Cart' }, { id: 'checkout', label: 'Checkout' }, { id: 'purchase', label: 'Purchase' }, { id: 'exit', label: 'Exit' }, ], 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 }, ], }; 

Component with Tooltip and Interactivity

Our React component renders SVG using d3. It includes:

• Smooth rounded paths
• Tooltip on hover over nodes or links
• Color encoding by node (Tableau10 scale)
• Adaptive width and height

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; // Prepare data for 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)} users`); }) .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/>Volume: ${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} />; } 

Data Preparation: SQL Aggregation

Data for Sankey is usually aggregated from an event stream. Example SQL query for a site funnel (sequential page transitions within a session):

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; 

This query gives a transition table with user counts. For large data volumes, we use pre-data aggregation with Materialized Views or triggers.

Layout Configuration: Which Algorithm to Choose?

d3-sankey supports several node alignment algorithms. The choice affects diagram readability.

For cyclic data, we use d3-sankey-circular or pre-break cycles.

What's Included in the Work

• Analytics: studying your data structure, identifying key metrics and integration points.
• Design: developing layout, choosing layout algorithm, prototyping interactions.
• Implementation: coding the component in React/TypeScript, setting up backend for data aggregation.
• Documentation: describing the component API, usage and customization instructions.
• Testing: validation on real data, load testing (up to 100,000 links), optimization.
• Deployment: integration with your interface, setting up automated build and deployment.
• Training: a webinar for your team on using and extending the diagram.
• Support: 30 days of free consultations and bug fixes after deployment.

Development Process and Timeline

Our team implements the Sankey diagram turnkey. Experience with over 50 projects.

1. Analytics: study your data structure, define key metrics.
2. Design: develop layout, choose layout algorithm, plan interactions.
3. Implementation: code the component in React/TypeScript, set up backend data aggregation.
4. Testing: validate on real data, optimize performance.
5. Deployment: integrate with your interface, deploy on your server or cloud.
6. Support: 30 days of free refinements and consultations.

Basic version with tooltip and interactions – 2–3 days (cost starting from $2,000). Extended with drill-down, filtering, and export – 5–7 days (cost starting from $5,000).

Implementation Results

After implementing the Sankey diagram, our clients see conversion increases of 15–30% and CPA reduction of 20–40% by identifying bottlenecks. For example, a client saved $50,000 annually by reallocating ad spend. We provide a 6-month code warranty and full documentation. This interactive chart is a powerful conversion optimization tool. Contact us to order a custom Sankey diagram for your site. Get a consultation from an engineer today.