UI-компоненти Складна

Sankey Chart

A complex flow diagram (Sankey) built with D3.js. Features splitting and merging flows, automatic node positioning, and interactive link highlighting. Perfect for visualizing income statements or resource allocations.

Відкрити в Lab

vanilla-js d3 svg react tailwind vue svelte

Цілі: TS JS HTML React Vue Svelte

Код

:root {
  --bg: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;
  --border: #e2e8f0;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #1e293b;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
}

/* ── Tablet (iPad) ─────────────────────────── */
@media (max-width: 1024px) {
  body {
    padding: 1.25rem;
  }
}

/* ── Phone landscape / large phone ─────────── */
@media (max-width: 768px) {
  body {
    padding: 1rem 0.75rem;
  }
}

/* ── Small phone ────────────────────────────── */
@media (max-width: 480px) {
  body {
    padding: 0.75rem 0.5rem;
  }
}

.chart-container {
  width: 100%;
  max-width: 1200px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 3rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px) {
  .chart-container {
    padding: 2rem;
    border-radius: 18px;
  }
}

@media (max-width: 768px) {
  .chart-container {
    padding: 1.25rem 1rem;
    border-radius: 14px;
  }
}

@media (max-width: 480px) {
  .chart-container {
    padding: 1rem 0.75rem;
    border-radius: 10px;
  }
}

.chart-header {
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .chart-header {
    margin-bottom: 1.25rem;
  }
}

.main-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--google-blue);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

@media (max-width: 1024px) {
  .main-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .main-title {
    font-size: 1.35rem;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 1.1rem;
  }
}

.source-info {
  font-size: 0.9rem;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .source-info {
    font-size: 0.75rem;
  }
}

.url {
  color: var(--google-blue);
  opacity: 0.8;
}

.sankey-wrapper {
  margin: 2rem 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .sankey-wrapper {
    margin: 1rem 0;
  }
}

#sankey-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

.node-label {
  font-size: 14px;
  font-weight: 600;
  fill: var(--text);
}

.node-value {
  font-size: 16px;
  font-weight: 700;
}

.node-change {
  font-size: 12px;
  font-weight: 500;
  fill: var(--text-muted);
}

.node-label.revenue {
  font-size: 18px;
  fill: var(--google-blue);
}

.link {
  transition: opacity 0.3s ease;
}

.chart-footer {
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .chart-footer {
    margin-top: 1rem;
    padding-top: 1rem;
  }
}

.brand {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .brand {
    font-size: 0.65rem;
  }
}

.brand .accent {
  color: var(--google-blue);
}

const nodes = [
  { name: "Search advertising", color: "#4285F4", val: "$48.5B", change: "+14% Y/Y", logo: "🔍" },
  { name: "YouTube", color: "#FF0000", val: "$8.7B", change: "+13% Y/Y", logo: "📺" },
  { name: "Google AdMob", color: "#FBBC05", val: "$7.4B", change: "-5% Y/Y", logo: "📱" },
  { name: "Google Play", color: "#34A853", val: "$9.3B", change: "+14% Y/Y", logo: "▶️" },
  { name: "Google Cloud", color: "#4285F4", val: "$10.3B", change: "+29% Y/Y", logo: "☁️" },
  { name: "Other", color: "#64748b", val: "$0.5B", change: "", logo: "➕" },
  { name: "Ad Revenue", color: "#4285F4", val: "$64.6B", change: "+11% Y/Y" },
  { name: "Revenue", color: "#4285F4", val: "$84.7B", change: "+14% Y/Y" },
  { name: "Gross profit", color: "#34A853", val: "$49.2B", change: "58% margin" },
  { name: "Cost of revenues", color: "#EA4335", val: "$35.5B", change: "" },
  { name: "Operating profit", color: "#34A853", val: "$27.4B", change: "32% margin" },
  { name: "Operating expenses", color: "#EA4335", val: "$21.8B", change: "" },
  { name: "Net profit", color: "#34A853", val: "$23.6B", change: "28% margin" },
  { name: "Tax", color: "#EA4335", val: "$3.9B", change: "" },
  { name: "Other (P/L)", color: "#1e293b", val: "$0.1B", change: "" },
  { name: "R&D", color: "#EA4335", val: "$11.9B", change: "14% of rev" },
  { name: "S&M", color: "#EA4335", val: "$6.8B", change: "8% of rev" },
  { name: "G&A", color: "#EA4335", val: "$3.1B", change: "4% of rev" },
];

const links = [
  { source: 0, target: 6, value: 48.5 },
  { source: 1, target: 6, value: 8.7 },
  { source: 2, target: 6, value: 7.4 },
  { source: 6, target: 7, value: 64.6 },
  { source: 3, target: 7, value: 9.3 },
  { source: 4, target: 7, value: 10.3 },
  { source: 5, target: 7, value: 0.5 },
  { source: 7, target: 8, value: 49.2 },
  { source: 7, target: 9, value: 35.5 },
  { source: 8, target: 10, value: 27.4 },
  { source: 8, target: 11, value: 21.8 },
  { source: 10, target: 12, value: 23.6 },
  { source: 10, target: 13, value: 3.7 },
  { source: 10, target: 14, value: 0.1 },
  { source: 11, target: 15, value: 11.9 },
  { source: 11, target: 16, value: 6.8 },
  { source: 11, target: 17, value: 3.1 },
];

function getBreakpoint() {
  const w = window.innerWidth;
  if (w < 480) return "xs"; // small phone
  if (w < 768) return "sm"; // phone landscape / large phone
  if (w < 1024) return "md"; // tablet / iPad
  return "lg"; // desktop
}

function getConfig(bp) {
  switch (bp) {
    case "xs":
      return {
        marginH: 100,
        marginV: 40,
        totalH: 520,
        labelGap: 8,
        iconOffsetLeft: -70,
        iconOffsetRight: 70,
        labelFontSize: 9,
        valueFontSize: 11,
        changeFontSize: 9,
        logoFontSize: 16,
        nodeWidth: 10,
        nodePadding: 20,
      };
    case "sm":
      return {
        marginH: 130,
        marginV: 50,
        totalH: 580,
        labelGap: 10,
        iconOffsetLeft: -90,
        iconOffsetRight: 90,
        labelFontSize: 10,
        valueFontSize: 12,
        changeFontSize: 10,
        logoFontSize: 18,
        nodeWidth: 12,
        nodePadding: 28,
      };
    case "md":
      return {
        marginH: 150,
        marginV: 55,
        totalH: 640,
        labelGap: 12,
        iconOffsetLeft: -110,
        iconOffsetRight: 110,
        labelFontSize: 12,
        valueFontSize: 14,
        changeFontSize: 11,
        logoFontSize: 20,
        nodeWidth: 14,
        nodePadding: 34,
      };
    default:
      return {
        marginH: 180,
        marginV: 60,
        totalH: 700,
        labelGap: 10,
        iconOffsetLeft: -130,
        iconOffsetRight: 130,
        labelFontSize: 14,
        valueFontSize: 16,
        changeFontSize: 12,
        logoFontSize: 24,
        nodeWidth: 16,
        nodePadding: 40,
      };
  }
}

function initSankey() {
  const bp = getBreakpoint();
  const cfg = getConfig(bp);

  const margin = { top: cfg.marginV, right: cfg.marginH, bottom: cfg.marginV, left: cfg.marginH };
  const chartArea = document.querySelector(".sankey-wrapper");
  const totalWidth = chartArea.clientWidth;
  const width = totalWidth - margin.left - margin.right;
  const height = cfg.totalH - margin.top - margin.bottom;

  const svg = d3
    .select("#sankey-svg")
    .attr("viewBox", `0 0 ${totalWidth} ${cfg.totalH}`)
    .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

  const sankey = d3
    .sankey()
    .nodeWidth(cfg.nodeWidth)
    .nodePadding(cfg.nodePadding)
    .size([width, height]);

  const graph = sankey({
    nodes: nodes.map((d) => Object.assign({}, d)),
    links: links.map((d) => Object.assign({}, d)),
  });

  // Links
  svg
    .append("g")
    .selectAll(".link")
    .data(graph.links)
    .enter()
    .append("path")
    .attr("class", "link")
    .attr("d", d3.sankeyLinkHorizontal())
    .attr("stroke-width", (d) => Math.max(1, d.width))
    .attr("fill", "none")
    .attr("stroke", (d) => d.source.color)
    .attr("opacity", 0.2)
    .on("mouseenter", (e) => {
      d3.select(e.target).attr("opacity", 0.5);
    })
    .on("mouseleave", (e) => {
      d3.select(e.target).attr("opacity", 0.2);
    });

  // Node groups
  const node = svg
    .append("g")
    .selectAll(".node")
    .data(graph.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", (d) => `translate(${d.x0},${d.y0})`);

  node
    .append("rect")
    .attr("height", (d) => d.y1 - d.y0)
    .attr("width", sankey.nodeWidth())
    .attr("fill", (d) => d.color || "#666")
    .attr("rx", 3);

  // Labels
  node.each(function (d) {
    const group = d3.select(this);
    const isLeft = d.x0 < width / 2;
    const xPos = isLeft ? -cfg.labelGap : sankey.nodeWidth() + cfg.labelGap;
    const align = isLeft ? "end" : "start";
    const midY = (d.y1 - d.y0) / 2;

    // Emoji icon
    if (d.logo) {
      group
        .append("text")
        .attr("x", isLeft ? cfg.iconOffsetLeft : sankey.nodeWidth() + cfg.iconOffsetRight)
        .attr("y", midY)
        .attr("dy", "0.35em")
        .attr("text-anchor", "middle")
        .attr("font-size", `${cfg.logoFontSize}px`)
        .text(d.logo);
    }

    const labelGroup = group.append("g").attr("transform", `translate(${xPos}, ${midY})`);

    labelGroup
      .append("text")
      .attr("text-anchor", align)
      .attr("dy", "-1em")
      .attr("class", "node-label")
      .attr("font-size", `${cfg.labelFontSize}px`)
      .text(d.name);

    labelGroup
      .append("text")
      .attr("text-anchor", align)
      .attr("dy", "0.4em")
      .attr("class", "node-value")
      .attr("font-size", `${cfg.valueFontSize}px`)
      .attr("fill", d.color)
      .text(d.val);

    if (d.change) {
      labelGroup
        .append("text")
        .attr("text-anchor", align)
        .attr("dy", "1.6em")
        .attr("class", "node-change")
        .attr("font-size", `${cfg.changeFontSize}px`)
        .text(d.change);
    }
  });
}

let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    d3.select("#sankey-svg").selectAll("*").remove();
    initSankey();
  }, 100);
});

document.addEventListener("DOMContentLoaded", initSankey);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alphabet Income Statement - Sankey Chart</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="chart-container">
        <div class="chart-header">
            <h1 class="main-title">Alphabet Q2 FY24 Income Statement</h1>
            <p class="source-info">Source: Quarterly results | <span class="url">appeconomyinsights.com</span></p>
        </div>

        <div id="sankey-chart" class="sankey-wrapper">
            <svg id="sankey-svg"></svg>
        </div>

        <div class="chart-footer">
            <div class="brand">APP ECONOMY <span class="accent">INSIGHTS</span></div>
        </div>
    </div>

    <!-- D3.js via CDN -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <!-- Sankey plugin for D3 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-sankey.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

import { useState } from "react";

/* Simplified Sankey — Google revenue flow (no D3, pure SVG) */
type SNode = {
  id: number;
  name: string;
  color: string;
  val: string;
  change?: string;
  logo?: string;
  x: number;
  y: number;
  h: number;
};
type SLink = { source: number; target: number; value: number; color: string };

const RAW_NODES = [
  { name: "Search ads", color: "#4285F4", val: "$48.5B", change: "+14%", logo: "🔍" },
  { name: "YouTube", color: "#FF0000", val: "$8.7B", change: "+13%", logo: "📺" },
  { name: "AdMob", color: "#FBBC05", val: "$7.4B", change: "-5%", logo: "📱" },
  { name: "Google Play", color: "#34A853", val: "$9.3B", change: "+14%", logo: "▶️" },
  { name: "Google Cloud", color: "#4285F4", val: "$10.3B", change: "+29%", logo: "☁️" },
  { name: "Other", color: "#64748b", val: "$0.5B", logo: "+" },
  { name: "Ad Revenue", color: "#4285F4", val: "$64.6B", change: "+11%" },
  { name: "Revenue", color: "#4285F4", val: "$84.7B", change: "+14%" },
  { name: "Gross Profit", color: "#34A853", val: "$49.2B", change: "58% margin" },
  { name: "Cost of Rev", color: "#EA4335", val: "$35.5B" },
  { name: "Op. Profit", color: "#34A853", val: "$27.4B", change: "32% margin" },
  { name: "Op. Expenses", color: "#EA4335", val: "$21.8B" },
  { name: "Net Profit", color: "#34A853", val: "$23.6B", change: "28% margin" },
  { name: "Tax", color: "#EA4335", val: "$3.9B" },
  { name: "Other P/L", color: "#64748b", val: "$0.1B" },
  { name: "R&D", color: "#EA4335", val: "$11.9B" },
  { name: "S&M", color: "#EA4335", val: "$6.8B" },
  { name: "G&A", color: "#EA4335", val: "$3.1B" },
];
const RAW_LINKS = [
  { s: 0, t: 6, v: 48.5 },
  { s: 1, t: 6, v: 8.7 },
  { s: 2, t: 6, v: 7.4 },
  { s: 6, t: 7, v: 64.6 },
  { s: 3, t: 7, v: 9.3 },
  { s: 4, t: 7, v: 10.3 },
  { s: 5, t: 7, v: 0.5 },
  { s: 7, t: 8, v: 49.2 },
  { s: 7, t: 9, v: 35.5 },
  { s: 8, t: 10, v: 27.4 },
  { s: 8, t: 11, v: 21.8 },
  { s: 10, t: 12, v: 23.6 },
  { s: 10, t: 13, v: 3.7 },
  { s: 10, t: 14, v: 0.1 },
  { s: 11, t: 15, v: 11.9 },
  { s: 11, t: 16, v: 6.8 },
  { s: 11, t: 17, v: 3.1 },
];

// Manual column layout
const COLS = [
  [0, 1, 2, 3, 4, 5], // col 0: sources
  [6], // col 1: ad revenue
  [7], // col 2: total revenue
  [8, 9], // col 3: gross profit / cost
  [10, 11], // col 4: op profit / op expenses
  [12, 13, 14, 15, 16, 17], // col 5: net profit + breakdowns
];

function buildLayout(W: number, H: number) {
  const NW = 14;
  const colX = COLS.map((_, ci) => 60 + (ci / (COLS.length - 1)) * (W - 120));
  const nodes: SNode[] = [];
  const PAD = 10;

  COLS.forEach((col, ci) => {
    const totalVal = col.reduce((sum, ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      return sum + (incoming || outgoing || 1);
    }, 0);
    const availH = H - PAD * (col.length - 1);
    let cy = 0;
    col.forEach((ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      const val = incoming || outgoing || 1;
      const nh = Math.max(20, (val / totalVal) * availH);
      nodes[ni] = { ...RAW_NODES[ni], id: ni, x: colX[ci], y: cy, h: nh };
      cy += nh + PAD;
    });
  });

  const links: SLink[] = RAW_LINKS.map((l) => ({
    source: l.s,
    target: l.t,
    value: l.v,
    color: nodes[l.s]?.color || "#818cf8",
  }));
  return { nodes, links, NW };
}

export default function ChartSankeyRC() {
  const [tooltip, setTooltip] = useState<{ text: string; x: number; y: number } | null>(null);
  const [hovered, setHovered] = useState<number | null>(null);
  const W = 700,
    H = 500;
  const { nodes, links, NW } = buildLayout(W, H);

  // Source/target offsets for links
  const srcOffset: Record<number, number> = {};
  const tgtOffset: Record<number, number> = {};
  nodes.forEach((n) => {
    srcOffset[n.id] = 0;
    tgtOffset[n.id] = 0;
  });

  const renderedLinks = links
    .map((l) => {
      const src = nodes[l.source],
        tgt = nodes[l.target];
      if (!src || !tgt) return null;
      const totalOut = links
        .filter((ll) => ll.source === l.source)
        .reduce((a, ll) => a + ll.value, 0);
      const totalIn = links
        .filter((ll) => ll.target === l.target)
        .reduce((a, ll) => a + ll.value, 0);
      const lh = Math.max(2, (l.value / (totalOut || 1)) * src.h);
      const lh2 = Math.max(2, (l.value / (totalIn || 1)) * tgt.h);
      const sy = src.y + srcOffset[l.source] + lh / 2;
      const ty = tgt.y + tgtOffset[l.target] + lh2 / 2;
      srcOffset[l.source] = (srcOffset[l.source] || 0) + lh;
      tgtOffset[l.target] = (tgtOffset[l.target] || 0) + lh2;
      const sx = src.x + NW,
        tx = tgt.x;
      const cx = (sx + tx) / 2;
      return {
        path: `M${sx},${sy - lh / 2} C${cx},${sy - lh / 2} ${cx},${ty - lh2 / 2} ${tx},${ty - lh2 / 2} L${tx},${ty + lh2 / 2} C${cx},${ty + lh2 / 2} ${cx},${sy + lh / 2} ${sx},${sy + lh / 2} Z`,
        color: l.color,
        key: `${l.source}-${l.target}`,
        label: `${nodes[l.source].name} → ${nodes[l.target].name}: $${l.value}B`,
      };
    })
    .filter(Boolean);

  return (
    <div className="min-h-screen bg-[#0d1117] p-4 overflow-x-auto">
      <div style={{ minWidth: W }}>
        <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} className="w-full">
          {/* Links */}
          {renderedLinks.map(
            (l) =>
              l && (
                <path
                  key={l.key}
                  d={l.path}
                  fill={l.color}
                  fillOpacity={hovered === null ? 0.18 : 0.08}
                  style={{ cursor: "pointer", transition: "fill-opacity 0.15s" }}
                  onMouseEnter={(e) => {
                    setTooltip({ text: l.label, x: e.clientX, y: e.clientY });
                  }}
                  onMouseMove={(e) =>
                    setTooltip((t) => (t ? { ...t, x: e.clientX, y: e.clientY } : null))
                  }
                  onMouseLeave={() => setTooltip(null)}
                />
              )
          )}
          {/* Nodes */}
          {nodes.map(
            (n, i) =>
              n && (
                <g key={i} onMouseEnter={() => setHovered(i)} onMouseLeave={() => setHovered(null)}>
                  <rect
                    x={n.x}
                    y={n.y}
                    width={NW}
                    height={n.h}
                    rx={3}
                    fill={n.color}
                    opacity={hovered === null || hovered === i ? 1 : 0.5}
                    style={{ transition: "opacity 0.15s" }}
                  />
                  <text
                    x={n.x > W / 2 ? n.x - 6 : n.x + NW + 6}
                    y={n.y + n.h / 2 - 4}
                    textAnchor={n.x > W / 2 ? "end" : "start"}
                    fill="#e6edf3"
                    fontSize={9}
                    fontWeight={600}
                  >
                    {n.name}
                  </text>
                  <text
                    x={n.x > W / 2 ? n.x - 6 : n.x + NW + 6}
                    y={n.y + n.h / 2 + 7}
                    textAnchor={n.x > W / 2 ? "end" : "start"}
                    fill={n.color}
                    fontSize={10}
                    fontWeight={700}
                  >
                    {n.val}
                  </text>
                  {n.change && (
                    <text
                      x={n.x > W / 2 ? n.x - 6 : n.x + NW + 6}
                      y={n.y + n.h / 2 + 19}
                      textAnchor={n.x > W / 2 ? "end" : "start"}
                      fill="#484f58"
                      fontSize={9}
                    >
                      {n.change}
                    </text>
                  )}
                </g>
              )
          )}
        </svg>
      </div>
      {tooltip && (
        <div
          className="fixed pointer-events-none bg-[#161b22] border border-[#30363d] rounded-lg px-3 py-2 text-[12px] shadow-lg z-50"
          style={{ left: tooltip.x + 12, top: tooltip.y - 40 }}
        >
          <span className="text-[#e6edf3]">{tooltip.text}</span>
        </div>
      )}
    </div>
  );
}

<script setup>
import { ref, computed } from "vue";

const RAW_NODES = [
  { name: "Search ads", color: "#4285F4", val: "$48.5B", change: "+14%" },
  { name: "YouTube", color: "#FF0000", val: "$8.7B", change: "+13%" },
  { name: "AdMob", color: "#FBBC05", val: "$7.4B", change: "-5%" },
  { name: "Google Play", color: "#34A853", val: "$9.3B", change: "+14%" },
  { name: "Google Cloud", color: "#4285F4", val: "$10.3B", change: "+29%" },
  { name: "Other", color: "#64748b", val: "$0.5B" },
  { name: "Ad Revenue", color: "#4285F4", val: "$64.6B", change: "+11%" },
  { name: "Revenue", color: "#4285F4", val: "$84.7B", change: "+14%" },
  { name: "Gross Profit", color: "#34A853", val: "$49.2B", change: "58% margin" },
  { name: "Cost of Rev", color: "#EA4335", val: "$35.5B" },
  { name: "Op. Profit", color: "#34A853", val: "$27.4B", change: "32% margin" },
  { name: "Op. Expenses", color: "#EA4335", val: "$21.8B" },
  { name: "Net Profit", color: "#34A853", val: "$23.6B", change: "28% margin" },
  { name: "Tax", color: "#EA4335", val: "$3.9B" },
  { name: "Other P/L", color: "#64748b", val: "$0.1B" },
  { name: "R&D", color: "#EA4335", val: "$11.9B" },
  { name: "S&M", color: "#EA4335", val: "$6.8B" },
  { name: "G&A", color: "#EA4335", val: "$3.1B" },
];
const RAW_LINKS = [
  { s: 0, t: 6, v: 48.5 },
  { s: 1, t: 6, v: 8.7 },
  { s: 2, t: 6, v: 7.4 },
  { s: 6, t: 7, v: 64.6 },
  { s: 3, t: 7, v: 9.3 },
  { s: 4, t: 7, v: 10.3 },
  { s: 5, t: 7, v: 0.5 },
  { s: 7, t: 8, v: 49.2 },
  { s: 7, t: 9, v: 35.5 },
  { s: 8, t: 10, v: 27.4 },
  { s: 8, t: 11, v: 21.8 },
  { s: 10, t: 12, v: 23.6 },
  { s: 10, t: 13, v: 3.7 },
  { s: 10, t: 14, v: 0.1 },
  { s: 11, t: 15, v: 11.9 },
  { s: 11, t: 16, v: 6.8 },
  { s: 11, t: 17, v: 3.1 },
];
const COLS = [[0, 1, 2, 3, 4, 5], [6], [7], [8, 9], [10, 11], [12, 13, 14, 15, 16, 17]];
const W = 700;
const H = 500;
const NW = 14;

function buildLayout() {
  const colX = COLS.map((_, ci) => 60 + (ci / (COLS.length - 1)) * (W - 120));
  const nodes = [];
  const PAD = 10;

  COLS.forEach((col, ci) => {
    const totalVal = col.reduce((sum, ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      return sum + (incoming || outgoing || 1);
    }, 0);
    const availH = H - PAD * (col.length - 1);
    let cy = 0;
    col.forEach((ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      const val = incoming || outgoing || 1;
      const nh = Math.max(20, (val / totalVal) * availH);
      nodes[ni] = { ...RAW_NODES[ni], id: ni, x: colX[ci], y: cy, h: nh };
      cy += nh + PAD;
    });
  });

  const links = RAW_LINKS.map((l) => ({
    source: l.s,
    target: l.t,
    value: l.v,
    color: nodes[l.s]?.color || "#818cf8",
  }));
  return { nodes, links };
}

const layout = buildLayout();
const nodes = layout.nodes;
const links = layout.links;

const hovered = ref(null);
const tooltip = ref(null);

const renderedLinks = computed(() => {
  const srcOffset = {};
  const tgtOffset = {};
  nodes.forEach((n) => {
    srcOffset[n.id] = 0;
    tgtOffset[n.id] = 0;
  });

  return links
    .map((l) => {
      const src = nodes[l.source];
      const tgt = nodes[l.target];
      if (!src || !tgt) return null;
      const totalOut = links
        .filter((ll) => ll.source === l.source)
        .reduce((a, ll) => a + ll.value, 0);
      const totalIn = links
        .filter((ll) => ll.target === l.target)
        .reduce((a, ll) => a + ll.value, 0);
      const lh = Math.max(2, (l.value / (totalOut || 1)) * src.h);
      const lh2 = Math.max(2, (l.value / (totalIn || 1)) * tgt.h);
      const sy = src.y + srcOffset[l.source] + lh / 2;
      const ty = tgt.y + tgtOffset[l.target] + lh2 / 2;
      srcOffset[l.source] = (srcOffset[l.source] || 0) + lh;
      tgtOffset[l.target] = (tgtOffset[l.target] || 0) + lh2;
      const sx = src.x + NW;
      const tx = tgt.x;
      const cx = (sx + tx) / 2;
      return {
        path: `M${sx},${sy - lh / 2} C${cx},${sy - lh / 2} ${cx},${ty - lh2 / 2} ${tx},${ty - lh2 / 2} L${tx},${ty + lh2 / 2} C${cx},${ty + lh2 / 2} ${cx},${sy + lh / 2} ${sx},${sy + lh / 2} Z`,
        color: l.color,
        key: `${l.source}-${l.target}`,
        label: `${nodes[l.source].name} \u2192 ${nodes[l.target].name}: $${l.value}B`,
      };
    })
    .filter(Boolean);
});

function linkEnter(e, l) {
  tooltip.value = { text: l.label, x: e.clientX, y: e.clientY };
}
function linkMove(e) {
  if (tooltip.value) tooltip.value = { ...tooltip.value, x: e.clientX, y: e.clientY };
}
function linkLeave() {
  tooltip.value = null;
}

function textAnchor(n) {
  return n.x > W / 2 ? "end" : "start";
}
function textX(n) {
  return n.x > W / 2 ? n.x - 6 : n.x + NW + 6;
}
</script>

<template>
  <div class="page">
    <div class="scroll-wrap" :style="{ minWidth: W + 'px' }">
      <svg :width="W" :height="H" :viewBox="`0 0 ${W} ${H}`" class="chart-svg">
        <!-- Links -->
        <path v-for="l in renderedLinks" :key="l.key"
          :d="l.path" :fill="l.color"
          :fill-opacity="hovered === null ? 0.18 : 0.08"
          style="cursor: pointer; transition: fill-opacity 0.15s;"
          @mouseenter="linkEnter($event, l)"
          @mousemove="linkMove"
          @mouseleave="linkLeave"/>

        <!-- Nodes -->
        <g v-for="(n, i) in nodes" :key="i"
          @mouseenter="hovered = i" @mouseleave="hovered = null">
          <template v-if="n">
            <rect :x="n.x" :y="n.y" :width="NW" :height="n.h" rx="3" :fill="n.color"
              :opacity="hovered === null || hovered === i ? 1 : 0.5"
              style="transition: opacity 0.15s;"/>
            <text :x="textX(n)" :y="n.y + n.h/2 - 4" :text-anchor="textAnchor(n)"
              fill="#e6edf3" font-size="9" font-weight="600">{{ n.name }}</text>
            <text :x="textX(n)" :y="n.y + n.h/2 + 7" :text-anchor="textAnchor(n)"
              :fill="n.color" font-size="10" font-weight="700">{{ n.val }}</text>
            <text v-if="n.change" :x="textX(n)" :y="n.y + n.h/2 + 19" :text-anchor="textAnchor(n)"
              fill="#484f58" font-size="9">{{ n.change }}</text>
          </template>
        </g>
      </svg>
    </div>

    <div v-if="tooltip" class="tooltip-fixed"
      :style="{ left: tooltip.x + 12 + 'px', top: tooltip.y - 40 + 'px' }">
      <span class="tooltip-text">{{ tooltip.text }}</span>
    </div>
  </div>
</template>

<style scoped>
.page { min-height: 100vh; background: #0d1117; padding: 1rem; overflow-x: auto; font-family: system-ui, -apple-system, sans-serif; }
.scroll-wrap { min-width: 700px; }
.chart-svg { width: 100%; }
.tooltip-fixed { position: fixed; pointer-events: none; background: #161b22; border: 1px solid #30363d; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); z-index: 50; }
.tooltip-text { color: #e6edf3; }
</style>

<script>
const RAW_NODES = [
  { name: "Search ads", color: "#4285F4", val: "$48.5B", change: "+14%" },
  { name: "YouTube", color: "#FF0000", val: "$8.7B", change: "+13%" },
  { name: "AdMob", color: "#FBBC05", val: "$7.4B", change: "-5%" },
  { name: "Google Play", color: "#34A853", val: "$9.3B", change: "+14%" },
  { name: "Google Cloud", color: "#4285F4", val: "$10.3B", change: "+29%" },
  { name: "Other", color: "#64748b", val: "$0.5B" },
  { name: "Ad Revenue", color: "#4285F4", val: "$64.6B", change: "+11%" },
  { name: "Revenue", color: "#4285F4", val: "$84.7B", change: "+14%" },
  { name: "Gross Profit", color: "#34A853", val: "$49.2B", change: "58% margin" },
  { name: "Cost of Rev", color: "#EA4335", val: "$35.5B" },
  { name: "Op. Profit", color: "#34A853", val: "$27.4B", change: "32% margin" },
  { name: "Op. Expenses", color: "#EA4335", val: "$21.8B" },
  { name: "Net Profit", color: "#34A853", val: "$23.6B", change: "28% margin" },
  { name: "Tax", color: "#EA4335", val: "$3.9B" },
  { name: "Other P/L", color: "#64748b", val: "$0.1B" },
  { name: "R&D", color: "#EA4335", val: "$11.9B" },
  { name: "S&M", color: "#EA4335", val: "$6.8B" },
  { name: "G&A", color: "#EA4335", val: "$3.1B" },
];
const RAW_LINKS = [
  { s: 0, t: 6, v: 48.5 },
  { s: 1, t: 6, v: 8.7 },
  { s: 2, t: 6, v: 7.4 },
  { s: 6, t: 7, v: 64.6 },
  { s: 3, t: 7, v: 9.3 },
  { s: 4, t: 7, v: 10.3 },
  { s: 5, t: 7, v: 0.5 },
  { s: 7, t: 8, v: 49.2 },
  { s: 7, t: 9, v: 35.5 },
  { s: 8, t: 10, v: 27.4 },
  { s: 8, t: 11, v: 21.8 },
  { s: 10, t: 12, v: 23.6 },
  { s: 10, t: 13, v: 3.7 },
  { s: 10, t: 14, v: 0.1 },
  { s: 11, t: 15, v: 11.9 },
  { s: 11, t: 16, v: 6.8 },
  { s: 11, t: 17, v: 3.1 },
];
const COLS = [[0, 1, 2, 3, 4, 5], [6], [7], [8, 9], [10, 11], [12, 13, 14, 15, 16, 17]];
const W = 700;
const H = 500;
const NW = 14;

let hovered = null;
let tooltip = null;

function buildLayout() {
  const colX = COLS.map((_, ci) => 60 + (ci / (COLS.length - 1)) * (W - 120));
  const nodes = [];
  const PAD = 10;

  COLS.forEach((col, ci) => {
    const totalVal = col.reduce((sum, ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      return sum + (incoming || outgoing || 1);
    }, 0);
    const availH = H - PAD * (col.length - 1);
    let cy = 0;
    col.forEach((ni) => {
      const incoming = RAW_LINKS.filter((l) => l.t === ni).reduce((a, l) => a + l.v, 0);
      const outgoing = RAW_LINKS.filter((l) => l.s === ni).reduce((a, l) => a + l.v, 0);
      const val = incoming || outgoing || 1;
      const nh = Math.max(20, (val / totalVal) * availH);
      nodes[ni] = { ...RAW_NODES[ni], id: ni, x: colX[ci], y: cy, h: nh };
      cy += nh + PAD;
    });
  });

  const links = RAW_LINKS.map((l) => ({
    source: l.s,
    target: l.t,
    value: l.v,
    color: nodes[l.s]?.color || "#818cf8",
  }));
  return { nodes, links };
}

const layout = buildLayout();
const nodes = layout.nodes;
const links = layout.links;

$: renderedLinks = (() => {
  const srcOffset = {};
  const tgtOffset = {};
  nodes.forEach((n) => {
    srcOffset[n.id] = 0;
    tgtOffset[n.id] = 0;
  });

  return links
    .map((l) => {
      const src = nodes[l.source];
      const tgt = nodes[l.target];
      if (!src || !tgt) return null;
      const totalOut = links
        .filter((ll) => ll.source === l.source)
        .reduce((a, ll) => a + ll.value, 0);
      const totalIn = links
        .filter((ll) => ll.target === l.target)
        .reduce((a, ll) => a + ll.value, 0);
      const lh = Math.max(2, (l.value / (totalOut || 1)) * src.h);
      const lh2 = Math.max(2, (l.value / (totalIn || 1)) * tgt.h);
      const sy = src.y + srcOffset[l.source] + lh / 2;
      const ty = tgt.y + tgtOffset[l.target] + lh2 / 2;
      srcOffset[l.source] = (srcOffset[l.source] || 0) + lh;
      tgtOffset[l.target] = (tgtOffset[l.target] || 0) + lh2;
      const sx = src.x + NW;
      const tx = tgt.x;
      const cx = (sx + tx) / 2;
      return {
        path: `M${sx},${sy - lh / 2} C${cx},${sy - lh / 2} ${cx},${ty - lh2 / 2} ${tx},${ty - lh2 / 2} L${tx},${ty + lh2 / 2} C${cx},${ty + lh2 / 2} ${cx},${sy + lh / 2} ${sx},${sy + lh / 2} Z`,
        color: l.color,
        key: `${l.source}-${l.target}`,
        label: `${nodes[l.source].name} \u2192 ${nodes[l.target].name}: $${l.value}B`,
      };
    })
    .filter(Boolean);
})();

function linkEnter(e, l) {
  tooltip = { text: l.label, x: e.clientX, y: e.clientY };
}
function linkMove(e) {
  if (tooltip) tooltip = { ...tooltip, x: e.clientX, y: e.clientY };
}
function linkLeave() {
  tooltip = null;
}

function textAnchor(n) {
  return n.x > W / 2 ? "end" : "start";
}
function textX(n) {
  return n.x > W / 2 ? n.x - 6 : n.x + NW + 6;
}
</script>

<style>
  .page { min-height: 100vh; background: #0d1117; padding: 1rem; overflow-x: auto; font-family: system-ui, -apple-system, sans-serif; }
  .scroll-wrap { min-width: 700px; }
  .chart-svg { width: 100%; }
  .tooltip-fixed { position: fixed; pointer-events: none; background: #161b22; border: 1px solid #30363d; border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); z-index: 50; }
  .tooltip-text { color: #e6edf3; }
</style>

<div class="page">
  <div class="scroll-wrap">
    <svg width={W} height={H} viewBox="0 0 {W} {H}" class="chart-svg">
      <!-- Links -->
      {#each renderedLinks as l}
        <path d={l.path} fill={l.color}
          fill-opacity={hovered === null ? 0.18 : 0.08}
          style="cursor: pointer; transition: fill-opacity 0.15s;"
          on:mouseenter={(e) => linkEnter(e, l)}
          on:mousemove={linkMove}
          on:mouseleave={linkLeave}/>
      {/each}

      <!-- Nodes -->
      {#each nodes as n, i}
        {#if n}
          <g on:mouseenter={() => hovered = i} on:mouseleave={() => hovered = null}>
            <rect x={n.x} y={n.y} width={NW} height={n.h} rx="3" fill={n.color}
              opacity={hovered === null || hovered === i ? 1 : 0.5}
              style="transition: opacity 0.15s;"/>
            <text x={textX(n)} y={n.y + n.h/2 - 4} text-anchor={textAnchor(n)}
              fill="#e6edf3" font-size="9" font-weight="600">{n.name}</text>
            <text x={textX(n)} y={n.y + n.h/2 + 7} text-anchor={textAnchor(n)}
              fill={n.color} font-size="10" font-weight="700">{n.val}</text>
            {#if n.change}
              <text x={textX(n)} y={n.y + n.h/2 + 19} text-anchor={textAnchor(n)}
                fill="#484f58" font-size="9">{n.change}</text>
            {/if}
          </g>
        {/if}
      {/each}
    </svg>
  </div>

  {#if tooltip}
    <div class="tooltip-fixed" style="left:{tooltip.x + 12}px; top:{tooltip.y - 40}px;">
      <span class="tooltip-text">{tooltip.text}</span>
    </div>
  {/if}
</div>

Features

Complex Flows — visualize multiple stages of data splitting and merging
D3.js Powered — uses the industrial-standard D3-Sankey plugin for high performance
Automatic Layout — node positions and link widths are calculated mathematically
Interactive Links — hover over any branch to highlight the entire path
Responsive — automatic redraw on window resize with viewport scaling
Dark Mode Support — styled with CSS variables for seamless theme switching

How it works

Data Prep — Define an array of nodes (entities) and links (connections with value)
Sankey Engine — D3-Sankey computes the x0, x1, y0, y1 coordinates for every rectangle
SVG Paths — d3.sankeyLinkHorizontal() generates the smooth bezier curves between nodes
Color Mapping — Nodes inject their specific brand colors into the outgoing links
Dynamic Scaling — The SVG viewBox ensures the chart remains readable on any screen size

Live Example

The included snippet demonstrates a real-world use case: Alphabet’s (Google) Q2 FY24 Income Statement, showing exactly how revenue filters down through gross profit and operating expenses to net earnings.