{"spec_id":"heatmap-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// heatmap-basic: Basic Heatmap\n// Library: echarts 5.5.1 | JavaScript 22.22.3\n// Quality: 90/100 | Created: 2026-06-02\n//# anyplot-orientation: square\n// anyplot.ai\n// heatmap-basic: Basic Heatmap\n// Library: echarts 5.5.1 | JavaScript 22\n// Quality: pending | Created: 2026-06-02\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: customer-feature correlation matrix (12 features) ---------------\n// Features grouped semantically so block structure shows up: demographics,\n// engagement, friction, and outcomes. Diagonal = 1.0 by construction.\nconst features = [\n  \"Age\", \"Income\", \"Tenure\",\n  \"Spend\", \"Visits\", \"Engagement\",\n  \"Returns\", \"Discount\", \"Support\",\n  \"Satisfaction\", \"NPS\", \"Churn\",\n];\n\nconst corr = [\n  [ 1.00,  0.42,  0.51, -0.12,  0.05, -0.18,  0.09,  0.22, -0.31,  0.27,  0.15, -0.34],\n  [ 0.42,  1.00,  0.61,  0.55,  0.18,  0.21, -0.05, -0.42, -0.22,  0.38,  0.31, -0.41],\n  [ 0.51,  0.61,  1.00,  0.36,  0.29,  0.45, -0.18, -0.27, -0.16,  0.51,  0.44, -0.58],\n  [-0.12,  0.55,  0.36,  1.00,  0.71,  0.64,  0.32, -0.55, -0.08,  0.42,  0.39, -0.46],\n  [ 0.05,  0.18,  0.29,  0.71,  1.00,  0.82,  0.21, -0.34,  0.12,  0.51,  0.48, -0.55],\n  [-0.18,  0.21,  0.45,  0.64,  0.82,  1.00,  0.17, -0.28,  0.04,  0.62,  0.58, -0.67],\n  [ 0.09, -0.05, -0.18,  0.32,  0.21,  0.17,  1.00,  0.11, -0.12, -0.05, -0.08,  0.13],\n  [ 0.22, -0.42, -0.27, -0.55, -0.34, -0.28,  0.11,  1.00,  0.18, -0.39, -0.31,  0.42],\n  [-0.31, -0.22, -0.16, -0.08,  0.12,  0.04, -0.12,  0.18,  1.00, -0.41, -0.38,  0.51],\n  [ 0.27,  0.38,  0.51,  0.42,  0.51,  0.62, -0.05, -0.39, -0.41,  1.00,  0.78, -0.71],\n  [ 0.15,  0.31,  0.44,  0.39,  0.48,  0.58, -0.08, -0.31, -0.38,  0.78,  1.00, -0.65],\n  [-0.34, -0.41, -0.58, -0.46, -0.55, -0.67,  0.13,  0.42,  0.51, -0.71, -0.65,  1.00],\n];\n\nconst data = [];\nfor (let i = 0; i < features.length; i++) {\n  for (let j = 0; j < features.length; j++) {\n    data.push([j, i, corr[i][j]]);\n  }\n}\n\n// --- Init -------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option -----------------------------------------------------------------\n// Imprint diverging colormap (matte-red → theme midpoint → blue) for signed data.\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"heatmap-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 28,\n    textStyle: { color: t.ink, fontSize: 26, fontWeight: \"normal\" },\n  },\n  grid: { left: 150, right: 180, top: 110, bottom: 140, containLabel: false },\n  xAxis: {\n    type: \"category\",\n    data: features,\n    axisLabel: { color: t.inkSoft, fontSize: 16, rotate: 35, margin: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitArea: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"category\",\n    data: features,\n    inverse: true,\n    axisLabel: { color: t.inkSoft, fontSize: 16, margin: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitArea: { show: false },\n    splitLine: { show: false },\n  },\n  visualMap: {\n    min: -1,\n    max: 1,\n    precision: 1,\n    calculable: true,\n    orient: \"vertical\",\n    right: 40,\n    top: \"center\",\n    itemHeight: 520,\n    itemWidth: 22,\n    text: [\"+1\", \"−1\"],\n    textStyle: { color: t.inkSoft, fontSize: 14 },\n    inRange: { color: t.div },\n    handleStyle: { color: t.inkSoft },\n  },\n  series: [{\n    name: \"Correlation\",\n    type: \"heatmap\",\n    data: data,\n    label: {\n      show: true,\n      fontSize: 14,\n      fontWeight: 500,\n      color: t.ink,\n      textBorderColor: t.pageBg,\n      textBorderWidth: 3,\n      formatter: function (p) {\n        const v = p.value[2];\n        return v.toFixed(2);\n      },\n    },\n    itemStyle: {\n      borderColor: t.pageBg,\n      borderWidth: 2,\n    },\n  }],\n});\n\n// Signal render-complete so the Playwright harness screenshots a settled frame.\nchart.on(\"finished\", function () { window.__anyplotReady = true; });\n"}