{"spec_id":"qrcode-basic","library":"d3","language":"javascript","code":"// anyplot.ai\n// qrcode-basic: Basic QR Code Generator\n// Library: d3 7.9.0 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-24\n\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\nconst { width, height } = window.ANYPLOT_SIZE;\n\nconst ENCODED_URL = \"https://anyplot.ai\";\n\n// QR code matrix for https://anyplot.ai (Version 2, Error Correction M)\nconst QR_MATRIX = [\n  [1,1,1,1,1,1,1,0,1,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1],\n  [1,0,0,0,0,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,0,0,0,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,0,0,1,1,1,1,0,1,0,1,1,1,0,1],\n  [1,0,1,1,1,0,1,0,0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,1,1,0,1],\n  [1,0,0,0,0,0,1,0,0,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,1],\n  [1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],\n  [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0],\n  [1,0,0,1,1,1,1,1,1,1,0,1,1,1,1,0,1,1,0,0,1,0,1,1,1],\n  [0,0,1,0,1,0,0,1,0,0,1,0,0,0,1,1,1,0,0,1,1,1,1,1,0],\n  [1,0,0,0,0,1,1,1,1,0,1,1,0,0,1,1,0,0,0,1,1,1,0,0,1],\n  [0,1,1,1,1,1,0,1,0,1,0,1,0,0,1,0,0,1,0,0,0,1,1,1,1],\n  [1,0,1,1,1,0,1,0,1,1,1,1,0,1,1,1,0,0,1,1,0,0,0,0,1],\n  [1,0,0,0,1,0,0,0,0,0,1,0,1,0,0,1,1,1,0,0,1,0,0,1,0],\n  [1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1,1,1],\n  [1,0,0,1,0,1,0,0,1,0,0,0,1,1,1,1,0,1,1,1,0,1,1,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,1,1,0,0,0,1,1,1,1,1,0,1,1,0],\n  [0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,1,0,0,0,1,0,1,1,0],\n  [1,1,1,1,1,1,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,0,0,0,1],\n  [1,0,0,0,0,0,1,0,1,0,1,1,0,1,0,1,1,0,0,0,1,0,0,0,0],\n  [1,0,1,1,1,0,1,0,1,0,1,1,0,1,0,1,1,1,1,1,1,0,0,0,1],\n  [1,0,1,1,1,0,1,0,1,1,1,0,1,1,0,0,1,1,1,0,0,0,0,1,1],\n  [1,0,1,1,1,0,1,0,0,0,0,1,0,1,0,0,1,0,0,0,1,1,1,1,1],\n  [1,0,0,0,0,0,1,0,0,1,0,1,1,1,0,0,0,1,1,1,1,0,1,1,1],\n  [1,1,1,1,1,1,1,0,1,1,0,1,1,1,0,0,1,1,1,0,0,1,0,0,1],\n];\n\nconst QR_SIZE = QR_MATRIX.length;\nconst QUIET_ZONE = 4;\nconst TOTAL_MODULES = QR_SIZE + QUIET_ZONE * 2;\n\n// Flatten QR matrix to cell objects for D3 data binding\nconst cells = QR_MATRIX.flatMap((row, ri) =>\n  row.map((val, ci) => ({ row: ri, col: ci, on: val === 1 }))\n);\nconst darkModules = cells.filter(d => d.on);\n\n// Layout\nconst TITLE_Y = 52;\nconst QR_TOP = TITLE_Y + 40;\nconst LABEL_RESERVE = 100;\nconst CELL_SIZE = Math.floor(\n  Math.min((width - 80) / TOTAL_MODULES, (height - QR_TOP - LABEL_RESERVE) / TOTAL_MODULES)\n);\nconst QR_PX = CELL_SIZE * TOTAL_MODULES;\nconst QR_X = Math.floor((width - QR_PX) / 2);\nconst QR_Y = QR_TOP;\n\n// D3 linear scales — map module grid indices to pixel coordinates\nconst xScale = d3.scaleLinear()\n  .domain([0, TOTAL_MODULES])\n  .range([QR_X, QR_X + QR_PX]);\n\nconst yScale = d3.scaleLinear()\n  .domain([0, TOTAL_MODULES])\n  .range([QR_Y, QR_Y + QR_PX]);\n\n// QR module colors — fixed high-contrast pair for reliable scanning\nconst MODULE_ON = \"#1A1A17\";\nconst MODULE_OFF = \"#FAF8F1\";\n\n// SVG mount\nconst svg = d3.select(\"#container\").append(\"svg\")\n  .attr(\"width\", width).attr(\"height\", height);\n\n// QR card background (warm white, covers quiet zone)\nsvg.append(\"rect\")\n  .attr(\"x\", QR_X)\n  .attr(\"y\", QR_Y)\n  .attr(\"width\", QR_PX)\n  .attr(\"height\", QR_PX)\n  .attr(\"fill\", MODULE_OFF)\n  .attr(\"rx\", 10)\n  .attr(\"ry\", 10);\n\n// Dark-theme card border for visual separation\nif (window.ANYPLOT_THEME === \"dark\") {\n  svg.append(\"rect\")\n    .attr(\"x\", QR_X)\n    .attr(\"y\", QR_Y)\n    .attr(\"width\", QR_PX)\n    .attr(\"height\", QR_PX)\n    .attr(\"fill\", \"none\")\n    .attr(\"stroke\", t.inkSoft)\n    .attr(\"stroke-width\", 1.5)\n    .attr(\"stroke-opacity\", 0.25)\n    .attr(\"rx\", 10)\n    .attr(\"ry\", 10);\n}\n\n// QR modules — D3 data binding: xScale/yScale position each module via grid coordinates\nsvg.selectAll(\"rect.module\")\n  .data(darkModules)\n  .join(\"rect\")\n  .attr(\"class\", \"module\")\n  .attr(\"x\", d => xScale(QUIET_ZONE + d.col))\n  .attr(\"y\", d => yScale(QUIET_ZONE + d.row))\n  .attr(\"width\", CELL_SIZE)\n  .attr(\"height\", CELL_SIZE)\n  .attr(\"fill\", MODULE_ON);\n\n// Title\nsvg.append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", TITLE_Y)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.ink)\n  .style(\"font-size\", \"22px\")\n  .style(\"font-weight\", \"600\")\n  .text(\"qrcode-basic · javascript · d3 · anyplot.ai\");\n\n// URL label below QR code\nconst LABEL_Y = QR_Y + QR_PX + 44;\nsvg.append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", LABEL_Y)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.inkSoft)\n  .style(\"font-size\", \"18px\")\n  .text(ENCODED_URL);\n\n// Caption — scan context and matrix stats\nsvg.append(\"text\")\n  .attr(\"x\", width / 2)\n  .attr(\"y\", LABEL_Y + 30)\n  .attr(\"text-anchor\", \"middle\")\n  .attr(\"fill\", t.inkSoft)\n  .style(\"font-size\", \"14px\")\n  .text(`Scan to visit anyplot.ai — ${QR_SIZE}×${QR_SIZE} matrix · ${darkModules.length} dark modules · Error correction M`);\n"}