{"spec_id":"waffle-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// waffle-basic: Basic Waffle Chart\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-09-09\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Annual engineering-org budget allocation, in whole percentage points\n// (sums to 100 — each of the 100 squares below represents exactly 1%).\nconst categories = [\n  { name: \"Product Development\", value: 32 },\n  { name: \"Marketing\", value: 24 },\n  { name: \"Sales Operations\", value: 18 },\n  { name: \"Customer Support\", value: 14 },\n  { name: \"Research & Development\", value: 12 },\n];\n\n// Fill a 10x10 grid top-to-bottom, left-to-right, one cell per percentage\n// point, in category order — the largest category anchors the top row.\nconst GRID = 10;\nlet cursor = 0;\nconst series = categories.map((cat, i) => {\n  const points = [];\n  for (let n = 0; n < cat.value; n += 1) {\n    const col = cursor % GRID;\n    const row = GRID - 1 - Math.floor(cursor / GRID);\n    points.push([col, row]);\n    cursor += 1;\n  }\n  const s = {\n    name: `${cat.name} — ${cat.value}%`,\n    type: \"scatter\",\n    symbol: \"rect\",\n    symbolSize: 72,\n    data: points,\n    itemStyle: {\n      color: t.palette[i],\n      borderColor: t.pageBg,\n      borderWidth: 3,\n    },\n  };\n  // Callout on the largest category's corner square, anchored via markPoint\n  // so echarts positions it in data space rather than hand-computed pixels.\n  if (i === 0) {\n    s.markPoint = {\n      symbol: \"circle\",\n      symbolSize: 1,\n      itemStyle: { color: \"transparent\", borderColor: \"transparent\" },\n      label: {\n        show: true,\n        position: \"top\",\n        distance: 50,\n        color: t.ink,\n        fontSize: 13,\n        fontWeight: 600,\n        formatter: `Largest share — ${cat.value}%`,\n      },\n      data: [{ coord: [0, GRID - 1] }],\n    };\n  }\n  return s;\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: \"waffle-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 24,\n    textStyle: { color: t.ink, fontSize: 22, fontWeight: 500 },\n  },\n  legend: {\n    bottom: 16,\n    left: \"center\",\n    itemWidth: 16,\n    itemHeight: 16,\n    icon: \"rect\",\n    textStyle: { color: t.inkSoft, fontSize: 15 },\n    itemGap: 20,\n  },\n  grid: {\n    top: 150,\n    bottom: 150,\n    left: 150,\n    right: 150,\n  },\n  xAxis: {\n    type: \"value\",\n    min: -0.5,\n    max: GRID - 0.5,\n    interval: 1,\n    show: false,\n  },\n  yAxis: {\n    type: \"value\",\n    min: -0.5,\n    max: GRID - 0.5,\n    interval: 1,\n    show: false,\n  },\n  series,\n});\n"}