${l.source.label} → ${l.target.label}\n${fmt(l.value)} visits

3f:null 40:["$","title",null,{"children":"Website traffic visualization | Trang Vu | Observable"}] 46:T2473,//Sankey lib import import * as sankeyLib from "npm:d3-sankey"; //Build the Sankey diagram using d3-sankey. const allLinks = [...channelToPage, ...pageToDestination]; const nodeNames = Array.from(new Set(allLinks.flatMap(l => [l.source, l.target]))); function stageOf(id) { return id[0]; // 'C', 'P', or 'D' } function labelOf(id) { return id.slice(2); } const sankeyNodes = nodeNames.map(id => ({id, stage: stageOf(id), label: labelOf(id)})); const sankeyLinks = allLinks.map(l => ({...l})); const {sankey, sankeyLinkHorizontal} = sankeyLib; const width = 1100; const height = 640; const sankeyGen = sankey() .nodeId(d => d.id) .nodeWidth(14) .nodePadding(8) .extent([[1, 40], [width - 200, height - 20]]); const graph = sankeyGen({ nodes: sankeyNodes.map(d => ({...d})), links: sankeyLinks.map(d => ({...d})) }); //display(graph.nodes.length); //display(graph.links.length); //Render the Sankey with SVG const stageColor = {C: "#4F8DF9", P: "#FF8100", D: "#1B2653"}; const stageLabel = {C: "Marketing Channel", P: "Landing Page", D: "Outgoing Destination"}; const color = d3.scaleOrdinal() .domain(["C", "P", "D"]) .range([stageColor.C, stageColor.P, stageColor.D]); const fmt = d3.format(",.0f"); // Build interactive sankey: hovering a node highlights its connected links + neighboring nodes const linkPaths = graph.links.map((l, i) => svg`${l.source.label} → ${l.target.label}\n${fmt(l.value)} visits`); const nodeRects = graph.nodes.map(n => svg`${n.label}\n${fmt(n.value)} visits`); const nodeLabels = graph.nodes.map(n => svg`${n.label}`); const interactiveSvg = svg``; // Precompute, for each node id, the set of connected node ids (neighbors) and link indices const neighborsOf = new Map(); const linksOf = new Map(); for (const n of graph.nodes) { neighborsOf.set(n.id, new Set([n.id])); linksOf.set(n.id, new Set()); } graph.links.forEach((l, i) => { neighborsOf.get(l.source.id).add(l.target.id); neighborsOf.get(l.target.id).add(l.source.id); linksOf.get(l.source.id).add(i); linksOf.get(l.target.id).add(i); }); function highlight(nodeId) { const neighbors = neighborsOf.get(nodeId); const activeLinks = linksOf.get(nodeId); linkPaths.forEach((path, i) => { path.setAttribute("stroke-opacity", activeLinks.has(i) ? 0.7 : 0.03); }); nodeRects.forEach(rect => { const id = rect.getAttribute("data-id"); rect.style.opacity = neighbors.has(id) ? 1 : 0.15; }); nodeLabels.forEach(label => { const id = label.getAttribute("data-label-for"); const isActive = neighbors.has(id); label.style.opacity = isActive ? 1 : 0.2; label.style.fontWeight = id === nodeId ? "700" : "400"; }); } function clearHighlight() { linkPaths.forEach(path => path.setAttribute("stroke-opacity", 0.35)); nodeRects.forEach(rect => rect.style.opacity = 1); nodeLabels.forEach(label => { label.style.opacity = 1; label.style.fontWeight = "400"; }); } nodeRects.forEach(rect => { rect.addEventListener("mouseenter", () => highlight(rect.getAttribute("data-id"))); rect.addEventListener("mouseleave", clearHighlight); }); // Also allow hovering the label to trigger the same highlight nodeLabels.forEach(label => { label.style.cursor = "pointer"; label.addEventListener("mouseenter", () => highlight(label.getAttribute("data-label-for"))); label.addEventListener("mouseleave", clearHighlight); }); display(interactiveSvg); //Now let’s rebuild the Sankey with this custom tooltip instead of native browser titles, wiring it into both node and link hover events. // Total for the % line in node tooltips — sum the first stage only, // since summing all three stages triple-counts every visit. const totalVisits = d3.sum(graph.nodes.filter(n => n.stage === "C"), n => n.value); const tooltip = document.createElement("div"); Object.assign(tooltip.style, { position: "fixed", // pairs with clientX/clientY pointerEvents: "none", // never steal the hover from the SVG zIndex: 9999, display: "none", maxWidth: "260px" }); document.body.appendChild(tooltip); invalidation.then(() => tooltip.remove()); // avoid orphans on re-run function moveTooltip(x, y) { const pad = 12; const r = tooltip.getBoundingClientRect(); let left = x + pad; let top = y + pad; if (left + r.width > innerWidth - pad) left = x - r.width - pad; if (top + r.height > innerHeight - pad) top = y - r.height - pad; tooltip.style.left = `${Math.max(pad, left)}px`; tooltip.style.top = `${Math.max(pad, top)}px`; } function showTooltip(content, x, y) { tooltip.innerHTML = content; tooltip.style.display = "block"; // must be visible before measuring moveTooltip(x, y); } function hideTooltip() { tooltip.style.display = "none"; } // Native browser tooltips now compete with the custom one for (const t of interactiveSvg.querySelectorAll("title")) t.remove(); //Styling: 12px corners, light background, border, soft shadow, 16px base font tooltip.style.background = "#ffffff"; tooltip.style.color = "#111827"; tooltip.style.border = "1px solid rgba(0,0,0,0.08)"; tooltip.style.borderRadius = "12px"; tooltip.style.boxShadow = "0 8px 24px rgba(0,0,0,0.12)"; tooltip.style.font = "16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; tooltip.style.padding = "12px 16px"; // Update tooltip content generators to match the light theme function nodeTooltipHtml2(n) { const pct = ((n.value / totalVisits) * 100).toFixed(1); return `

${n.label}

${stageLabel[n.stage]}

${fmt(n.value)}

visits (${pct}% of total)

`; } function linkTooltipHtml2(l) { return `

${l.source.label} → ${l.target.label}

${fmt(l.value)}

visits

`; } // Rewire event listeners to use the updated content functions nodeRects.forEach((rect, i) => { const n = graph.nodes[i]; rect.onpointerenter = (e) => { highlight(n.id); showTooltip(nodeTooltipHtml2(n), e.clientX, e.clientY); }; rect.onpointermove = (e) => moveTooltip(e.clientX, e.clientY); rect.onpointerleave = () => { clearHighlight(); hideTooltip(); }; }); linkPaths.forEach((path, i) => { const l = graph.links[i]; path.onpointerenter = (e) => showTooltip(linkTooltipHtml2(l), e.clientX, e.clientY); path.onpointermove = (e) => moveTooltip(e.clientX, e.clientY); path.onpointerleave = () => hideTooltip(); }); nodeLabels.forEach((label, i) => { const n = graph.nodes[i]; label.onpointerenter = (e) => { highlight(n.id); showTooltip(nodeTooltipHtml2(n), e.clientX, e.clientY); }; label.onpointermove = (e) => moveTooltip(e.clientX, e.clientY); label.onpointerleave = () => { clearHighlight(); hideTooltip(); }; }); //Let’s wrap it with a title, subtitle, and legend for a polished final chart (INTERACTIVE) const interactiveLegend = html`

${["C","P","D"].map(s => html`${stageLabel[s]}`)}

`; const interactiveChart = html`

Adidas.com (US) traffic flow: channel → landing page → outbound destination

Jun–Aug 2026 · United States · Hover over any node to trace its connected flows · Modeled joint volumes from independent channel, page, and destination shares

${interactiveLegend} ${interactiveSvg}

`; display(interactiveChart); clearHighlight();47:[{"id":"c5c943349ace00d2adda7036bd9e2e6e3b8934708ac6391bd8500c140e19316ae14f1697847c552ecd9b57c78f1f4cccdf8a0e8fa5a9a029c97892b94b6a48f8","href":"https://static.observableusercontent.com/files/c5c943349ace00d2adda7036bd9e2e6e3b8934708ac6391bd8500c140e19316ae14f1697847c552ecd9b57c78f1f4cccdf8a0e8fa5a9a029c97892b94b6a48f8","name":"channels.csv","type":"text/csv","lastModified":1789556819675,"size":629},{"id":"65c373d19a1626a05f300c5a4b7e9bb0c4b7d7816ba9853dd1bb7d30f405a237a6f80c0351d78366ae5057f9f331115f79ddad7592d4eeb367c42c0d4c1fe958","href":"https://static.observableusercontent.com/files/65c373d19a1626a05f300c5a4b7e9bb0c4b7d7816ba9853dd1bb7d30f405a237a6f80c0351d78366ae5057f9f331115f79ddad7592d4eeb367c42c0d4c1fe958","name":"destinations.csv","type":"text/csv","lastModified":1789556824046,"size":1043},{"id":"571cf12b4cefce17930e5fdd6663f1f8116b741b91fba0046fcfa7ae0d375513d0e251fde7e04c3fcd3113ce5f30deaa544f91896ae771e6cfabafd1c344c97e","href":"https://static.observableusercontent.com/files/571cf12b4cefce17930e5fdd6663f1f8116b741b91fba0046fcfa7ae0d375513d0e251fde7e04c3fcd3113ce5f30deaa544f91896ae771e6cfabafd1c344c97e","name":"flows_modeled.csv","type":"text/csv","lastModified":1789556816846,"size":70952},{"id":"e9cd409aa6f3fc8de596eb228228dd880b4aa6ee4e8a2ee590dbe47b934b93b89c8651596949a206e352efab5d991f9347a08266b4e5317df8e8a3b1c17f3793","href":"https://static.observableusercontent.com/files/e9cd409aa6f3fc8de596eb228228dd880b4aa6ee4e8a2ee590dbe47b934b93b89c8651596949a206e352efab5d991f9347a08266b4e5317df8e8a3b1c17f3793","name":"pages.csv","type":"text/csv","lastModified":1789556821852,"size":692}] 44:{"id":"e163849d93f63bd9","slug":"website-traffic-visualization","title":"Website traffic visualization","thumbnail":"64396c77bccdaf24c7aed07eb84ab6d9fdeea334ba5af99c1ec4b98557aa9ac4","access_level":"public","create_time":"$D2026-09-16T11:16:00.225Z","update_time":"$D2026-09-16T12:12:13.699Z","view_time":null,"first_public_time":"$D2026-09-16T11:57:14.564Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b30d603e6a04b823","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":"starter_2024","bio":"A software product designer with passion for data storytelling","following":false},"version":104,"publish_version":104,"role":null,"authored":false,"authors":[{"type":"individual","id":"920ef950194a10f7","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":null,"bio":"A software product designer with passion for data storytelling","following":false}],"members":[{"type":"team","id":"b30d603e6a04b823","login":"itstrangvu","name":"Trang Vu","avatar_url":"https://avatars-next.observableusercontent.com/1f8443134d04a90ff609d93c8bb48d7bdb260eacec6ebd2d2578d58235939971","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Website traffic visualization","cells":[{"id":1,"value":"# Website traffic visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const channels = FileAttachment(\"channels.csv\").csv({typed: \"auto\"});\ndisplay(Inputs.table(channels));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const pages = FileAttachment(\"pages.csv\").csv({typed: \"auto\"});\ndisplay(Inputs.table(pages));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const destinations = FileAttachment(\"destinations.csv\").csv({typed: \"auto\"});\ndisplay(Inputs.table(destinations));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const flowsModeled = FileAttachment(\"flows_modeled.csv\").csv({typed: \"auto\"});\ndisplay(Inputs.table(flowsModeled));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"// Aggregate the modeled flows into the two Sankey stages\nconst channelToPage = d3.rollups(\n flowsModeled,\n v => d3.sum(v, d => d.value),\n d => d.channel,\n d => d.page\n).flatMap(([channel, pages]) => pages.map(([page, value]) => ({source: `C:${channel}`, target: `P:${page}`, value})));\n\nconst pageToDestination = d3.rollups(\n flowsModeled,\n v => d3.sum(v, d => d.value),\n d => d.page,\n d => d.destination\n).flatMap(([page, dests]) => dests.map(([destination, value]) => ({source: `P:${page}`, target: `D:${destination}`, value})));\n\ndisplay(channelToPage.length);\ndisplay(pageToDestination.length);\ndisplay(channelToPage.slice(0,5));","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"# Website traffic flow chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$46","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 45:"$44:body"