{"spec_id":"treemap-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// treemap-basic: Basic Treemap\n// Library: echarts 6.1.0 | JavaScript 22.23.1\n// Quality: 94/100 | Created: 2026-08-04\n\nconst t = window.ANYPLOT_TOKENS;\n// Text drawn on the data-colored tiles themselves (not the page background)\n// stays a fixed light cream in both themes, since tile fill colors are\n// identical between light/dark — only the page chrome around them flips.\nconst TILE_LABEL = \"#FAF8F1\";\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Annual R&D budget ($ thousands) by division and project\nconst divisions = [\n  {\n    name: \"Platform Engineering\",\n    children: [\n      { name: \"Core Services\", value: 1850 },\n      { name: \"Developer Tools\", value: 1120 },\n      { name: \"Infrastructure\", value: 940 },\n      { name: \"Reliability\", value: 560 },\n    ],\n  },\n  {\n    name: \"Product Design\",\n    children: [\n      { name: \"Mobile Apps\", value: 980 },\n      { name: \"Web Experience\", value: 720 },\n      { name: \"Research\", value: 390 },\n    ],\n  },\n  {\n    name: \"Data & AI\",\n    children: [\n      { name: \"Machine Learning\", value: 1040 },\n      { name: \"Analytics\", value: 610 },\n      { name: \"Data Platform\", value: 470 },\n    ],\n  },\n  {\n    name: \"Security\",\n    children: [\n      { name: \"Threat Detection\", value: 520 },\n      { name: \"Identity\", value: 340 },\n    ],\n  },\n  {\n    name: \"QA & Support\",\n    children: [\n      { name: \"Test Automation\", value: 410 },\n      { name: \"Customer Support\", value: 280 },\n    ],\n  },\n];\n\n// --- Init --------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option --------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"treemap-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  tooltip: { show: false },\n  series: [\n    {\n      type: \"treemap\",\n      top: 70,\n      bottom: 20,\n      left: 20,\n      right: 20,\n      roam: false,\n      nodeClick: false,\n      breadcrumb: { show: false },\n      // Explicit per-division color (indexed by the division's position in\n      // this array, not by ECharts' default value-descending sort) so the\n      // canonical Imprint palette order is guaranteed regardless of data.\n      data: divisions.map((d, i) => ({\n        ...d,\n        itemStyle: { color: t.palette[i] },\n      })),\n      itemStyle: {\n        borderColor: t.pageBg,\n        borderWidth: 3,\n        gapWidth: 3,\n      },\n      levels: [\n        {\n          // depth 0 — invisible root container, no header of its own\n          upperLabel: { show: false },\n          itemStyle: { borderWidth: 0, gapWidth: 0 },\n        },\n        {\n          // depth 1 — divisions: colored per Imprint palette above.\n          // colorSaturation here sets the *lightness* range ECharts uses to\n          // shade this division's own children (depth-2 project tiles) by\n          // relative value — capped low enough that even the largest child\n          // in a division stays dark enough for the fixed cream label to\n          // clear 4.5:1 contrast. borderColorSaturation darkens the\n          // division's own hue for the header strip, keeping it distinct\n          // from both the page background and the project tiles nested\n          // inside it.\n          colorSaturation: [0.12, 0.24],\n          itemStyle: { borderColorSaturation: 0.2, gapWidth: 4 },\n          upperLabel: {\n            show: true,\n            height: 36,\n            color: TILE_LABEL,\n            fontSize: 16,\n            fontWeight: 600,\n          },\n        },\n        {\n          // depth 2 — projects, shaded from the parent division color\n          itemStyle: { borderColorSaturation: 0.65, gapWidth: 2 },\n          label: {\n            show: true,\n            color: TILE_LABEL,\n            fontSize: 15,\n            fontWeight: 500,\n            overflow: \"truncate\",\n          },\n        },\n      ],\n    },\n  ],\n});\n"}