{"spec_id":"network-hierarchical","library":"echarts","language":"javascript","code":"// anyplot.ai\n// network-hierarchical: Hierarchical Network Graph with Tree Layout\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 94/100 | Created: 2026-09-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// One Imprint hue per management level (0=CEO..3=individual contributors)\n// makes the four levels the spec calls for instantly scannable. ECharts'\n// tree series has no per-depth \"levels\" config (unlike sunburst/graph), so\n// style is set directly on each data node and applied recursively below.\nfunction styleByDepth(node, depth = 0) {\n  const style = [\n    {\n      color: t.palette[0],\n      symbolSize: 22,\n      label: { fontSize: 18, fontWeight: \"bold\" },\n    },\n    { color: t.palette[1], symbolSize: 17 },\n    { color: t.palette[2], symbolSize: 13 },\n    { color: t.palette[3], symbolSize: 9 },\n  ][depth];\n  node.itemStyle = { color: style.color, borderColor: style.color };\n  node.lineStyle = { color: style.color, width: 2.5 - depth * 0.4 };\n  node.symbolSize = style.symbolSize;\n  if (style.label) node.label = style.label;\n  (node.children || []).forEach((child) => styleByDepth(child, depth + 1));\n  return node;\n}\n\n// --- Data (in-memory, deterministic) -----------------------------------\n// Org chart: CEO -> VPs -> Directors -> individual contributors (4 levels)\nconst orgChart = styleByDepth({\n  name: \"Alex Chen — CEO\",\n  children: [\n    {\n      name: \"Morgan Lee — VP Engineering\",\n      children: [\n        {\n          name: \"Jordan Kim — Dir. Platform\",\n          children: [\n            { name: \"Priya Nair — Staff Engineer\" },\n            { name: \"Sam Ortiz — Senior Engineer\" },\n            { name: \"Devon Park — Engineer\" },\n          ],\n        },\n        {\n          name: \"Casey Brooks — Dir. Product Eng.\",\n          children: [\n            { name: \"Riley Chen — Senior Engineer\" },\n            { name: \"Taylor Wood — Engineer\" },\n          ],\n        },\n        {\n          name: \"Avery Singh — Dir. Infrastructure\",\n          children: [\n            { name: \"Jamie Fox — Senior Engineer\" },\n            { name: \"Quinn Adams — Engineer\" },\n            { name: \"Reese Cole — Engineer\" },\n          ],\n        },\n      ],\n    },\n    {\n      name: \"Dana Whitfield — VP Sales\",\n      children: [\n        {\n          name: \"Harper Diaz — Dir. Enterprise Sales\",\n          children: [\n            { name: \"Skyler James — Account Exec.\" },\n            { name: \"Rowan Blake — Account Exec.\" },\n          ],\n        },\n        {\n          name: \"Emerson Vale — Dir. SMB Sales\",\n          children: [\n            { name: \"Finley Grant — Account Exec.\" },\n            { name: \"Charlie West — Account Exec.\" },\n            { name: \"Blair Hughes — Account Exec.\" },\n          ],\n        },\n      ],\n    },\n    {\n      name: \"Noah Whitaker — VP Operations\",\n      children: [\n        {\n          name: \"Sage Delgado — Dir. Logistics\",\n          children: [\n            { name: \"River Chen — Analyst\" },\n            { name: \"Micah Reyes — Analyst\" },\n          ],\n        },\n        {\n          name: \"Tatum Ellis — Dir. Facilities\",\n          children: [\n            { name: \"Kai Sullivan — Coordinator\" },\n            { name: \"Drew Barnes — Coordinator\" },\n          ],\n        },\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: \"network-hierarchical · javascript · echarts · anyplot.ai\",\n    subtext: \"Node color and size encode organizational depth: CEO → VP → Director → IC\",\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: 27 },\n    subtextStyle: { color: t.inkSoft, fontSize: 14 },\n  },\n  series: [\n    {\n      type: \"tree\",\n      data: [orgChart],\n      orient: \"LR\",\n      top: \"12%\",\n      bottom: \"6%\",\n      left: \"16%\",\n      right: \"24%\",\n      symbol: \"circle\",\n      // A page-bg backdrop keeps each label a legible island where the\n      // parent/child connector lines pass behind the text, not through it.\n      label: {\n        position: \"left\",\n        verticalAlign: \"middle\",\n        align: \"right\",\n        fontSize: 14,\n        color: t.ink,\n        backgroundColor: t.pageBg,\n        padding: [3, 4],\n      },\n      leaves: {\n        label: {\n          position: \"right\",\n          verticalAlign: \"middle\",\n          align: \"left\",\n          fontSize: 14,\n          color: t.ink,\n          backgroundColor: t.pageBg,\n          padding: [3, 4],\n        },\n      },\n      edgeShape: \"polyline\",\n      edgeForkPosition: \"60%\",\n      expandAndCollapse: false,\n      initialTreeDepth: -1,\n      roam: false,\n      emphasis: { focus: \"descendant\" },\n    },\n  ],\n});\n"}