{"spec_id":"sunburst-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// sunburst-basic: Basic Sunburst Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-07-26\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: R&D budget allocation, department -> team -> project ($k) -------\n// Each branch carries its own radial tint hierarchy (root / team / project)\n// plus a WCAG-luminance-picked label color per tint, precomputed offline from\n// the Imprint palette so the ring color + text pairing stays a flat literal.\nconst branches = [\n  {\n    name: \"Engineering\",\n    fill: t.palette[0], text: \"#FFFFFF\",\n    teamFill: \"#59C0A4\", teamText: \"#1A1A17\",\n    projectFill: \"#99D8C7\", projectText: \"#1A1A17\",\n    teams: [\n      { name: \"Platform\", projects: [[\"Core API\", 420], [\"Infra Migration\", 260]] },\n      { name: \"Product\", projects: [[\"Mobile App\", 380], [\"Web App\", 310]] },\n      { name: \"Data Science\", projects: [[\"ML Models\", 300], [\"Analytics\", 190]] },\n    ],\n  },\n  {\n    name: \"Sales\",\n    fill: t.palette[1], text: \"#FFFFFF\",\n    teamFill: \"#D9A5FE\", teamText: \"#1A1A17\",\n    projectFill: \"#E7C8FE\", projectText: \"#1A1A17\",\n    teams: [\n      { name: \"Enterprise\", projects: [[\"Key Accounts\", 340], [\"New Business\", 210]] },\n      { name: \"SMB\", projects: [[\"Inbound\", 160], [\"Outbound\", 140]] },\n    ],\n  },\n  {\n    name: \"Marketing\",\n    fill: t.palette[2], text: \"#FFFFFF\",\n    teamFill: \"#859CC3\", teamText: \"#FFFFFF\",\n    projectFill: \"#B4C2DA\", projectText: \"#1A1A17\",\n    teams: [\n      { name: \"Brand\", projects: [[\"Content\", 150], [\"Design\", 120]] },\n      { name: \"Growth\", projects: [[\"Paid Ads\", 220], [\"SEO\", 130]] },\n    ],\n  },\n  {\n    name: \"Operations\",\n    fill: t.palette[3], text: \"#FFFFFF\",\n    teamFill: \"#D4AE7A\", teamText: \"#1A1A17\",\n    projectFill: \"#E5CDAD\", projectText: \"#1A1A17\",\n    teams: [\n      { name: \"Finance\", projects: [[\"Accounting\", 130], [\"Payroll\", 110]] },\n      { name: \"HR\", projects: [[\"Recruiting\", 95], [\"Benefits\", 85]] },\n    ],\n  },\n];\n\n// Engineering is the single largest department ($1.86M, 49.6% of the $3.75M\n// total) — call it out with a subtitle and a glowing root wedge so the chart\n// surfaces that insight instead of leaving it implicit in the radial sizing.\nconst data = branches.map((branch) => {\n  const isLargest = branch.name === \"Engineering\";\n  return {\n    name: branch.name,\n    itemStyle: {\n      color: branch.fill,\n      borderWidth: isLargest ? 5 : 3,\n      shadowBlur: isLargest ? 18 : 0,\n      shadowColor: isLargest ? \"rgba(0, 158, 115, 0.45)\" : \"transparent\",\n    },\n    label: { color: branch.text },\n    children: branch.teams.map((team) => ({\n      name: team.name,\n      itemStyle: { color: branch.teamFill },\n      label: { color: branch.teamText },\n      children: team.projects.map(([name, budget]) => ({\n        name,\n        value: budget,\n        itemStyle: { color: branch.projectFill },\n        label: { color: branch.projectText },\n      })),\n    })),\n  };\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: \"sunburst-basic · javascript · echarts · anyplot.ai\",\n    subtext: \"Engineering leads all departments — $1.86M, 49.6% of total R&D spend\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22 },\n    subtextStyle: { color: t.inkSoft, fontSize: 15 },\n  },\n  tooltip: { formatter: (p) => `${p.name}: $${p.value}k` },\n  series: [\n    {\n      type: \"sunburst\",\n      center: [\"50%\", \"56%\"],\n      sort: null,\n      emphasis: { focus: \"ancestor\" },\n      itemStyle: { borderColor: t.pageBg, borderWidth: 3 },\n      label: { rotate: \"radial\", overflow: \"truncate\" },\n      levels: [\n        {},\n        { r0: 0, r: \"38%\", label: { fontSize: 19, fontWeight: \"bold\" } },\n        { r0: \"38%\", r: \"64%\", label: { fontSize: 15 } },\n        { r0: \"64%\", r: \"80%\", label: { fontSize: 13, rotate: \"tangential\" } },\n      ],\n      data,\n    },\n  ],\n});\n"}