{"spec_id":"sankey-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// sankey-basic: Basic Sankey Diagram\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 88/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Budget allocation: revenue sources -> departments -> expense categories.\nconst nodes = [\n  { name: \"Product Sales\", itemStyle: { color: t.palette[0] } },\n  { name: \"Subscriptions\", itemStyle: { color: t.palette[1] } },\n  { name: \"Services\", itemStyle: { color: t.palette[2] } },\n  { name: \"Engineering\", itemStyle: { color: t.palette[3] } },\n  { name: \"Marketing\", itemStyle: { color: t.palette[5] } },\n  { name: \"Operations\", itemStyle: { color: t.palette[6] } },\n  { name: \"Sales\", itemStyle: { color: t.palette[7] } },\n  { name: \"Salaries\", itemStyle: { color: t.ink }, label: { position: \"left\" } },\n  { name: \"Marketing Spend\", itemStyle: { color: t.ink }, label: { position: \"left\" } },\n  { name: \"Infrastructure\", itemStyle: { color: t.ink }, label: { position: \"left\" } },\n  { name: \"Travel\", itemStyle: { color: t.ink }, label: { position: \"left\" } },\n];\n\n// The Engineering -> Salaries link (380) is the single largest flow in the\n// budget; it gets a higher-opacity ribbon so it reads as the focal path.\nconst links = [\n  { source: \"Product Sales\", target: \"Engineering\", value: 320 },\n  { source: \"Product Sales\", target: \"Sales\", value: 180 },\n  { source: \"Subscriptions\", target: \"Engineering\", value: 150 },\n  { source: \"Subscriptions\", target: \"Marketing\", value: 90 },\n  { source: \"Subscriptions\", target: \"Operations\", value: 60 },\n  { source: \"Services\", target: \"Operations\", value: 140 },\n  { source: \"Services\", target: \"Sales\", value: 70 },\n  {\n    source: \"Engineering\",\n    target: \"Salaries\",\n    value: 380,\n    lineStyle: { opacity: 0.85 },\n  },\n  { source: \"Engineering\", target: \"Infrastructure\", value: 90 },\n  { source: \"Marketing\", target: \"Salaries\", value: 40 },\n  { source: \"Marketing\", target: \"Marketing Spend\", value: 50 },\n  { source: \"Operations\", target: \"Salaries\", value: 120 },\n  { source: \"Operations\", target: \"Infrastructure\", value: 60 },\n  { source: \"Operations\", target: \"Travel\", value: 20 },\n  { source: \"Sales\", target: \"Salaries\", value: 180 },\n  { source: \"Sales\", target: \"Travel\", value: 70 },\n];\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"sankey-basic · javascript · echarts · anyplot.ai\",\n    subtext: \"Engineering → Salaries is the largest single allocation ($380K)\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n    subtextStyle: { color: t.inkSoft, fontSize: 15 },\n  },\n  tooltip: { trigger: \"item\", triggerOn: \"mousemove\" },\n  series: [\n    {\n      type: \"sankey\",\n      left: 40,\n      right: 90,\n      top: 130,\n      bottom: 50,\n      nodeWidth: 26,\n      nodeGap: 22,\n      layoutIterations: 100,\n      draggable: false,\n      emphasis: { focus: \"adjacency\" },\n      label: {\n        color: t.ink,\n        fontSize: 19,\n        fontWeight: 500,\n      },\n      lineStyle: {\n        color: \"source\",\n        opacity: 0.6,\n        curveness: 0.45,\n      },\n      itemStyle: { borderWidth: 0 },\n      data: nodes,\n      links: links,\n    },\n  ],\n});\n"}