{"spec_id":"map-tilegrid","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// map-tilegrid: Tile Grid Map for Equal-Area Geographic Comparison\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-09-05\n\n//# anyplot-orientation: square\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: US state tile grid, per-capita income ($k) ----------------------\n// Grid positions approximate real-world geography (row 0 = north, col 0 = west);\n// AK and HI sit in their conventional detached top-left / bottom-left slots.\n// Values are deterministic synthetic per-capita income figures, not census data.\nconst states = [\n  { region: \"WA\", name: \"Washington\", row: 0, col: 0, value: 69.8 },\n  { region: \"AK\", name: \"Alaska\", row: 0, col: 1, value: 48.0 },\n  { region: \"MT\", name: \"Montana\", row: 0, col: 2, value: 56.4 },\n  { region: \"ND\", name: \"North Dakota\", row: 0, col: 3, value: 55.3 },\n  { region: \"NH\", name: \"New Hampshire\", row: 0, col: 7, value: 68.4 },\n  { region: \"OR\", name: \"Oregon\", row: 1, col: 0, value: 74.1 },\n  { region: \"ID\", name: \"Idaho\", row: 1, col: 1, value: 54.3 },\n  { region: \"SD\", name: \"South Dakota\", row: 1, col: 3, value: 45.7 },\n  { region: \"MN\", name: \"Minnesota\", row: 1, col: 4, value: 54.2 },\n  { region: \"WI\", name: \"Wisconsin\", row: 1, col: 5, value: 62.8 },\n  { region: \"MI\", name: \"Michigan\", row: 1, col: 6, value: 58.5 },\n  { region: \"VT\", name: \"Vermont\", row: 1, col: 7, value: 60.7 },\n  { region: \"ME\", name: \"Maine\", row: 1, col: 8, value: 49.0 },\n  { region: \"MA\", name: \"Massachusetts\", row: 1, col: 9, value: 61.1 },\n  { region: \"UT\", name: \"Utah\", row: 2, col: 0, value: 47.9 },\n  { region: \"WY\", name: \"Wyoming\", row: 2, col: 2, value: 57.4 },\n  { region: \"NE\", name: \"Nebraska\", row: 2, col: 3, value: 50.5 },\n  { region: \"IA\", name: \"Iowa\", row: 2, col: 4, value: 65.2 },\n  { region: \"IN\", name: \"Indiana\", row: 2, col: 5, value: 57.5 },\n  { region: \"NY\", name: \"New York\", row: 2, col: 6, value: 71.5 },\n  { region: \"CT\", name: \"Connecticut\", row: 2, col: 7, value: 59.4 },\n  { region: \"PA\", name: \"Pennsylvania\", row: 2, col: 8, value: 52.2 },\n  { region: \"RI\", name: \"Rhode Island\", row: 2, col: 9, value: 71.8 },\n  { region: \"NV\", name: \"Nevada\", row: 3, col: 1, value: 65.2 },\n  { region: \"CO\", name: \"Colorado\", row: 3, col: 2, value: 54.0 },\n  { region: \"KS\", name: \"Kansas\", row: 3, col: 3, value: 63.7 },\n  { region: \"MO\", name: \"Missouri\", row: 3, col: 4, value: 54.0 },\n  { region: \"IL\", name: \"Illinois\", row: 3, col: 5, value: 45.7 },\n  { region: \"OH\", name: \"Ohio\", row: 3, col: 6, value: 62.7 },\n  { region: \"WV\", name: \"West Virginia\", row: 3, col: 7, value: 48.3 },\n  { region: \"DE\", name: \"Delaware\", row: 3, col: 8, value: 64.9 },\n  { region: \"CA\", name: \"California\", row: 4, col: 0, value: 75.4 },\n  { region: \"OK\", name: \"Oklahoma\", row: 4, col: 4, value: 62.1 },\n  { region: \"TN\", name: \"Tennessee\", row: 4, col: 5, value: 58.7 },\n  { region: \"MD\", name: \"Maryland\", row: 4, col: 6, value: 67.6 },\n  { region: \"NJ\", name: \"New Jersey\", row: 4, col: 7, value: 66.9 },\n  { region: \"DC\", name: \"District of Columbia\", row: 4, col: 8, value: 72.5 },\n  { region: \"AZ\", name: \"Arizona\", row: 5, col: 1, value: 50.4 },\n  { region: \"NM\", name: \"New Mexico\", row: 5, col: 2, value: 47.0 },\n  { region: \"LA\", name: \"Louisiana\", row: 5, col: 3, value: 50.8 },\n  { region: \"AR\", name: \"Arkansas\", row: 5, col: 4, value: 66.2 },\n  { region: \"KY\", name: \"Kentucky\", row: 5, col: 5, value: 49.9 },\n  { region: \"NC\", name: \"North Carolina\", row: 5, col: 6, value: 59.1 },\n  { region: \"VA\", name: \"Virginia\", row: 5, col: 7, value: 77.3 },\n  { region: \"TX\", name: \"Texas\", row: 6, col: 3, value: 63.2 },\n  { region: \"AL\", name: \"Alabama\", row: 6, col: 4, value: 51.5 },\n  { region: \"MS\", name: \"Mississippi\", row: 6, col: 5, value: 47.1 },\n  { region: \"GA\", name: \"Georgia\", row: 6, col: 6, value: 65.6 },\n  { region: \"SC\", name: \"South Carolina\", row: 6, col: 7, value: 52.8 },\n  { region: \"HI\", name: \"Hawaii\", row: 7, col: 0, value: 47.7 },\n  { region: \"FL\", name: \"Florida\", row: 7, col: 6, value: 50.6 },\n];\n\nconst maxCol = Math.max(...states.map((s) => s.col));\nconst maxRow = Math.max(...states.map((s) => s.row));\nconst valueMin = Math.min(...states.map((s) => s.value));\nconst valueMax = Math.max(...states.map((s) => s.value));\n\nconst title = \"Per-Capita Income by State · map-tilegrid · javascript · highcharts · anyplot.ai\";\nconst titleFontSize = Math.max(15, Math.round(22 * Math.min(1, 67 / title.length)));\n\n// --- imprint_seq colormap (only core bundle is loaded — no coloraxis module,\n// so the value → color mapping is computed by hand and applied per point) ---\nfunction hexToRgb(hex) {\n  const n = parseInt(hex.slice(1), 16);\n  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];\n}\nfunction imprintSeq(frac) {\n  const [r1, g1, b1] = hexToRgb(t.seq[0]);\n  const [r2, g2, b2] = hexToRgb(t.seq[1]);\n  const mix = (a, b) => Math.round(a + (b - a) * frac);\n  const toHex = (c) => c.toString(16).padStart(2, \"0\");\n  return `#${toHex(mix(r1, r2))}${toHex(mix(g1, g2))}${toHex(mix(b1, b2))}`;\n}\nconst colorFor = (value) => imprintSeq((value - valueMin) / (valueMax - valueMin));\n\n// Discrete legend bins (5 buckets across the observed range, $5k-aligned edges)\nconst binStart = Math.floor(valueMin / 5) * 5;\nconst binEnd = Math.ceil(valueMax / 5) * 5;\nconst binWidth = (binEnd - binStart) / 5;\nconst legendBins = Array.from({ length: 5 }, (_, i) => {\n  const lo = binStart + i * binWidth;\n  const hi = lo + binWidth;\n  return { label: `$${Math.round(lo)}–${Math.round(hi)}k`, color: colorFor((lo + hi) / 2) };\n});\n\n// Notable extremes, called out in the subtitle for an immediate takeaway.\nconst maxState = states.reduce((a, b) => (b.value > a.value ? b : a));\nconst minState = states.reduce((a, b) => (b.value < a.value ? b : a));\nconst subtitle = `Highest: ${maxState.name} ($${maxState.value.toFixed(1)}k) · Lowest: ${minState.name} ($${minState.value.toFixed(1)}k)`;\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"scatter\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  title: {\n    text: title,\n    margin: 28,\n    style: { color: t.ink, fontSize: `${titleFontSize}px`, fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: subtitle,\n    style: { color: t.inkSoft, fontSize: \"14px\", fontStyle: \"italic\" },\n  },\n  xAxis: {\n    min: -0.7,\n    max: maxCol + 0.7,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickWidth: 0,\n    labels: { enabled: false },\n    title: { text: null },\n  },\n  yAxis: {\n    min: -0.7,\n    max: maxRow + 0.7,\n    reversed: true,\n    gridLineWidth: 0,\n    lineWidth: 0,\n    tickWidth: 0,\n    labels: { enabled: false },\n    title: { text: null },\n  },\n  legend: {\n    layout: \"horizontal\",\n    align: \"center\",\n    verticalAlign: \"bottom\",\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n    symbolWidth: 18,\n    symbolHeight: 18,\n    symbolRadius: 4,\n    itemMarginBottom: 4,\n    title: {\n      text: \"Per-capita income ($k/yr)\",\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n    },\n  },\n  tooltip: {\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    useHTML: true,\n    style: { color: t.ink, fontSize: \"13px\" },\n    formatter() {\n      const rank = states.filter((s) => s.value > this.point.value).length + 1;\n      return (\n        `<div style=\"min-width:170px\">` +\n        `<span style=\"display:inline-block;width:10px;height:10px;border-radius:2px;` +\n        `background:${this.point.color};margin-right:6px\"></span>` +\n        `<b>${this.point.name}</b><br/>` +\n        `$${this.point.value.toFixed(1)}k per capita<br/>` +\n        `<span style=\"color:${t.inkSoft}\">Rank ${rank} of ${states.length}</span>` +\n        `</div>`\n      );\n    },\n  },\n  plotOptions: {\n    series: {\n      animation: false,\n      showInLegend: false,\n      marker: {\n        symbol: \"square\",\n        radius: 42,\n        lineWidth: 2,\n        lineColor: t.pageBg,\n      },\n      dataLabels: {\n        enabled: true,\n        format: \"{point.region}\",\n        style: {\n          color: \"#FFFFFF\",\n          fontSize: \"15px\",\n          fontWeight: \"600\",\n          textOutline: \"none\",\n        },\n      },\n      states: { hover: { enabled: false } },\n    },\n  },\n  series: [\n    {\n      name: \"States\",\n      data: states.map((s) => ({\n        x: s.col,\n        y: s.row,\n        value: s.value,\n        name: s.name,\n        region: s.region,\n        color: colorFor(s.value),\n      })),\n    },\n    ...legendBins.map((bin) => ({\n      name: bin.label,\n      color: bin.color,\n      data: [],\n      showInLegend: true,\n      marker: { symbol: \"square\", radius: 9, lineWidth: 1, lineColor: t.grid },\n      dataLabels: { enabled: false },\n    })),\n  ],\n});\n"}