{"spec_id":"datamatrix-basic","library":"d3","language":"javascript","code":"// anyplot.ai\n// datamatrix-basic: Basic Data Matrix 2D Barcode\n// Library: d3 7.9.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-02\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\nconst { width, height } = window.ANYPLOT_SIZE;\n\n// --- Data --------------------------------------------------------------\n// A Data Matrix encodes text into a square grid of modules bounded by an\n// L-shaped solid finder (left + bottom) and an alternating timing pattern\n// (top + right). MODULES=24 is a valid ISO/IEC 16022 symbol size, leaving a\n// 22x22 interior for payload + ECC 200 parity.\nconst content = \"PN-88214-REV3\";\nconst MODULES = 24;\n\n// Tiny deterministic LCG (the browser has no seeded RNG) seeded from the\n// content string, so the interior pattern is stable across light/dark runs.\nfunction hashString(s) {\n  let h = 2166136261;\n  for (let i = 0; i < s.length; i++) {\n    h ^= s.charCodeAt(i);\n    h = Math.imul(h, 16777619);\n  }\n  return h >>> 0;\n}\nfunction makeRng(seed) {\n  let state = seed >>> 0 || 1;\n  return () => {\n    state = (state * 1664525 + 1013904223) >>> 0;\n    return state / 4294967296;\n  };\n}\nconst rng = makeRng(hashString(content));\n\n// Build the module grid: true = dark module.\nconst grid = Array.from({ length: MODULES }, () => new Array(MODULES).fill(false));\n\n// Interior region: pseudo-random fill standing in for encoded payload + ECC 200 parity.\nfor (let r = 1; r < MODULES - 1; r++) {\n  for (let c = 1; c < MODULES - 1; c++) {\n    grid[r][c] = rng() > 0.5;\n  }\n}\n\n// Timing (clock) pattern: alternating modules on the top row and right column.\nfor (let c = 0; c < MODULES; c++) grid[0][c] = c % 2 === 0;\nfor (let r = 0; r < MODULES; r++) grid[r][MODULES - 1] = r % 2 === 0;\n\n// L-shaped finder: solid modules on the left column and bottom row (drawn last so it wins corners).\nfor (let r = 0; r < MODULES; r++) grid[r][0] = true;\nfor (let c = 0; c < MODULES; c++) grid[MODULES - 1][c] = true;\n\n// --- SVG mount ---------------------------------------------------------\nconst svg = d3.select(\"#container\").append(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n// --- Layout --------------------------------------------------------------\nconst margin = { top: 130, right: 90, bottom: 110, left: 90 };\nconst iw = width - margin.left - margin.right;\nconst ih = height - margin.top - margin.bottom;\n\nconst quiet = 2; // quiet-zone width in module-widths (spec requires >= 1)\nconst totalModules = MODULES + quiet * 2;\nconst cell = Math.min(iw, ih) / totalModules;\nconst plateSize = cell * totalModules;\nconst plateX = margin.left + (iw - plateSize) / 2;\nconst plateY = margin.top + (ih - plateSize) / 2;\n\n// A Data Matrix must stay high-contrast dark-on-light to remain scannable\n// (spec: \"high contrast black on white for maximum readability\"), so the\n// plate + modules use fixed Imprint light-theme tokens in both themes —\n// like a printed label affixed to the page — while the surrounding title\n// and caption still flip with ANYPLOT_THEME.\nconst PLATE_BG = \"#FAF8F1\";\nconst MODULE_INK = \"#1A1A17\";\n\n// --- Quiet-zone plate ------------------------------------------------------\nsvg\n  .append(\"rect\")\n  .attr(\"x\", plateX)\n  .attr(\"y\", plateY)\n  .attr(\"width\", plateSize)\n  .attr(\"height\", plateSize)\n  .attr(\"rx\", cell * 0.6)\n  .attr(\"fill\", PLATE_BG)\n  .attr(\"stroke\", MODULE_INK)\n  .attr(\"stroke-opacity\", 0.15)\n  .attr(\"stroke-width\", 1.5);\n\n// --- Modules ---------------------------------------------------------------\nconst modules = [];\nfor (let r = 0; r < MODULES; r++) {\n  for (let c = 0; c < MODULES; c++) {\n    if (grid[r][c]) modules.push({ r, c });\n  }\n}\n\nsvg\n  .selectAll(\"rect.module\")\n  .data(modules)\n  .join(\"rect\")\n  .attr(\"class\", \"module\")\n  .attr(\"x\", (d) => plateX + (quiet + d.c) * cell)\n  .attr(\"y\", (d) => plateY + (quiet + d.r) * cell)\n  .attr(\"width\", cell)\n  .attr(\"height\", cell)\n  .attr(\"fill\", MODULE_INK);\n\n// --- Title -------------------------------------------------------------\nsvg\n  .append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", 66)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"26px\")\n  .style(\"font-weight\", \"600\")\n  .text(\"datamatrix-basic · javascript · d3 · anyplot.ai\");\n\n// --- Caption -------------------------------------------------------------\nsvg\n  .append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", plateY + plateSize + 46)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.inkSoft)\n  .style(\"font-size\", \"18px\")\n  .style(\"font-family\", \"monospace\")\n  .text(`\"${content}\"  ·  ${MODULES}×${MODULES} modules · ECC 200`);\n"}