{"spec_id":"dendrogram-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// dendrogram-basic: Basic Dendrogram\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-18\n\nconst t = window.ANYPLOT_TOKENS;\n\nconst COOL = t.palette[0];  // #009E73 brand green — cool climates\nconst WARM = t.palette[3];  // #BD8233 ochre — warm climates\n\n// Leaf city labels — sized for readability at mobile viewports\nconst LEAF_LABEL = {\n  show: true,\n  position: \"right\",\n  verticalAlign: \"middle\",\n  align: \"left\",\n  fontSize: 17,\n  color: t.inkSoft,\n  distance: 10,\n};\n\n// Sub-group cluster label (Nordic, Temperate, etc.) — italic annotation above node\nconst clusterLabel = (color) => ({\n  show: true,\n  position: \"top\",\n  verticalAlign: \"bottom\",\n  align: \"center\",\n  fontSize: 12,\n  fontStyle: \"italic\",\n  color,\n  distance: 8,\n});\n\n// Leaf node helper — still needs per-node lineStyle/itemStyle since ECharts tree\n// does not cascade edge color from ancestor nodes to descendant edges\nconst city = (name, color) => ({\n  name,\n  label: LEAF_LABEL,\n  lineStyle: { color },\n  itemStyle: { color },\n});\n\n// 12 world cities hierarchically clustered by climate profile (topology only —\n// ECharts tree uses uniform level spacing, not proportional merge distances)\nconst treeData = {\n  name: \"\",\n  label: { show: false },\n  symbolSize: 4,\n  itemStyle: { color: t.inkSoft },\n  children: [\n    {\n      name: \"Cool Climates\",\n      label: { show: false },\n      lineStyle: { color: COOL },\n      itemStyle: { color: COOL },\n      children: [\n        {\n          name: \"Nordic\",\n          label: clusterLabel(COOL),\n          lineStyle: { color: COOL },\n          itemStyle: { color: COOL },\n          children: [\n            city(\"Oslo\", COOL),\n            city(\"Stockholm\", COOL),\n            city(\"Helsinki\", COOL),\n          ],\n        },\n        {\n          name: \"Temperate\",\n          label: clusterLabel(COOL),\n          lineStyle: { color: COOL },\n          itemStyle: { color: COOL },\n          children: [\n            city(\"London\", COOL),\n            city(\"Paris\", COOL),\n            city(\"Amsterdam\", COOL),\n          ],\n        },\n      ],\n    },\n    {\n      name: \"Warm Climates\",\n      label: { show: false },\n      lineStyle: { color: WARM },\n      itemStyle: { color: WARM },\n      children: [\n        {\n          name: \"Mediterranean\",\n          label: clusterLabel(WARM),\n          lineStyle: { color: WARM },\n          itemStyle: { color: WARM },\n          children: [\n            city(\"Barcelona\", WARM),\n            city(\"Rome\", WARM),\n            city(\"Athens\", WARM),\n          ],\n        },\n        {\n          name: \"Tropical\",\n          label: clusterLabel(WARM),\n          lineStyle: { color: WARM },\n          itemStyle: { color: WARM },\n          children: [\n            city(\"Singapore\", WARM),\n            city(\"Bangkok\", WARM),\n            city(\"Mumbai\", WARM),\n          ],\n        },\n      ],\n    },\n  ],\n};\n\n// Init\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"dendrogram-basic · javascript · echarts · anyplot.ai\",\n    subtext: \"Hierarchical clustering of 12 world cities by climate profile\",\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: \"500\" },\n    subtextStyle: { color: t.inkSoft, fontSize: 14 },\n  },\n  graphic: [\n    {\n      type: \"group\",\n      left: 80,\n      bottom: 28,\n      children: [\n        { type: \"circle\", shape: { cx: 8, cy: 8, r: 7 }, style: { fill: COOL } },\n        {\n          type: \"text\",\n          left: 22,\n          top: 0,\n          style: { text: \"Cool Climates\", fill: t.inkSoft, fontSize: 13, fontFamily: \"sans-serif\" },\n        },\n        { type: \"circle\", shape: { cx: 166, cy: 8, r: 7 }, style: { fill: WARM } },\n        {\n          type: \"text\",\n          left: 180,\n          top: 0,\n          style: { text: \"Warm Climates\", fill: t.inkSoft, fontSize: 13, fontFamily: \"sans-serif\" },\n        },\n      ],\n    },\n  ],\n  series: [\n    {\n      type: \"tree\",\n      data: [treeData],\n      layout: \"orthogonal\",\n      orient: \"LR\",\n      left: \"6%\",\n      right: \"18%\",\n      top: \"16%\",\n      bottom: \"12%\",\n      symbol: \"circle\",\n      symbolSize: 8,\n      expandAndCollapse: false,\n      initialTreeDepth: -1,\n      roam: false,\n      lineStyle: {\n        width: 1.8,\n        curveness: 0,\n      },\n      label: {\n        show: false,\n      },\n    },\n  ],\n});\n"}