update(qrcode-basic): altair — scannable QR codes (#5224)

## Summary

Updated **altair** implementation for **qrcode-basic**.

**Changes:** Use `qrcode` library for real scannable QR code generation
instead of manual matrix construction (fixes #3413)

### Changes
- Replaced manual QR matrix with `qrcode` library for proper encoding
- QR code now encodes "https://pyplots.ai" and is scannable by standard
readers
- Maintained library-idiomatic rendering approach
- Spec updated to require scannable output

## Test Plan

- [x] Preview images uploaded to GCS staging
- [x] Implementation file passes ruff format/check
- [x] Metadata YAML updated with current versions
- [ ] Automated review triggered

---
Generated with [Claude Code](https://claude.com/claude-code) `/update`
command

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: MarkusNeusinger

plots/qrcode-basic/implementations/altair.py

@@ -1,122 +1,100 @@
 """ pyplots.ai
 qrcode-basic: Basic QR Code Generator
-Library: altair 6.0.0 | Python 3.13.11
-Quality: 91/100 | Created: 2026-01-07
+Library: altair 6.0.0 | Python 3.14.3
+Quality: 91/100 | Updated: 2026-04-07
 """
 
 import altair as alt
 import numpy as np
 import pandas as pd
+import qrcode
 
 
-# Data - Generate QR code pattern (Version 1, 21x21 modules)
-# Creates a proper QR code structure with finder patterns
-np.random.seed(42)
-
-size = 21  # Version 1 QR code size
-quiet_zone = 4  # Standard quiet zone (white border)
-total_size = size + 2 * quiet_zone
-
-# Initialize matrix with white (0)
-matrix = np.zeros((total_size, total_size), dtype=int)
-
-# Add finder pattern at top-left
-for i in range(7):
-    matrix[quiet_zone + i, quiet_zone] = 1
-    matrix[quiet_zone + i, quiet_zone + 6] = 1
-    matrix[quiet_zone, quiet_zone + i] = 1
-    matrix[quiet_zone + 6, quiet_zone + i] = 1
-for i in range(2, 5):
-    for j in range(2, 5):
-        matrix[quiet_zone + i, quiet_zone + j] = 1
-
-# Add finder pattern at top-right
-tr_col = quiet_zone + size - 7
-for i in range(7):
-    matrix[quiet_zone + i, tr_col] = 1
-    matrix[quiet_zone + i, tr_col + 6] = 1
-    matrix[quiet_zone, tr_col + i] = 1
-    matrix[quiet_zone + 6, tr_col + i] = 1
-for i in range(2, 5):
-    for j in range(2, 5):
-        matrix[quiet_zone + i, tr_col + j] = 1
-
-# Add finder pattern at bottom-left
-bl_row = quiet_zone + size - 7
-for i in range(7):
-    matrix[bl_row + i, quiet_zone] = 1
-    matrix[bl_row + i, quiet_zone + 6] = 1
-    matrix[bl_row, quiet_zone + i] = 1
-    matrix[bl_row + 6, quiet_zone + i] = 1
-for i in range(2, 5):
-    for j in range(2, 5):
-        matrix[bl_row + i, quiet_zone + j] = 1
-
-# Add timing patterns (alternating black/white lines between finder patterns)
-for i in range(8, size - 8):
-    matrix[quiet_zone + 6, quiet_zone + i] = (i + 1) % 2
-    matrix[quiet_zone + i, quiet_zone + 6] = (i + 1) % 2
-
-# Add dark module (always black, required in QR codes)
-matrix[quiet_zone + size - 8, quiet_zone + 8] = 1
-
-# Fill data area with deterministic pattern representing encoded data
+# Data - Generate a real, scannable QR code encoding "https://pyplots.ai"
 content = "https://pyplots.ai"
-hash_val = hash(content)
-for row in range(total_size):
-    for col in range(total_size):
-        qr_row = row - quiet_zone
-        qr_col = col - quiet_zone
-
-        # Skip quiet zone
-        if row < quiet_zone or row >= total_size - quiet_zone:
-            continue
-        if col < quiet_zone or col >= total_size - quiet_zone:
-            continue
-
-        # Skip finder patterns and separators
-        if qr_row < 9 and qr_col < 9:
-            continue
-        if qr_row < 9 and qr_col >= size - 8:
-            continue
-        if qr_row >= size - 8 and qr_col < 9:
-            continue
-
-        # Skip timing patterns
-        if qr_row == 6 or qr_col == 6:
-            continue
 
-        # Create deterministic pattern from position and content hash
-        idx = row * total_size + col
-        matrix[row, col] = ((hash_val >> (idx % 32)) ^ (idx * 7)) % 2
-
-# Convert matrix to DataFrame for Altair
-data = []
-for row in range(total_size):
-    for col in range(total_size):
-        data.append({"x": col, "y": total_size - 1 - row, "value": matrix[row, col]})
-df = pd.DataFrame(data)
-
-# Create QR code visualization using mark_rect
+qr = qrcode.QRCode(version=1, error_correction=qrcode.constants.ERROR_CORRECT_M, box_size=1, border=0)
+qr.add_data(content)
+qr.make(fit=True)
+
+# Convert QR code to numpy matrix and add quiet zone
+qr_matrix = np.array(qr.get_matrix(), dtype=int)
+quiet_zone = 4
+padded = np.zeros((qr_matrix.shape[0] + 2 * quiet_zone, qr_matrix.shape[1] + 2 * quiet_zone), dtype=int)
+padded[quiet_zone : quiet_zone + qr_matrix.shape[0], quiet_zone : quiet_zone + qr_matrix.shape[1]] = qr_matrix
+total_size = padded.shape[0]
+
+# Build DataFrame with region classification and color encoding
+rows, cols = np.where(np.ones_like(padded, dtype=bool))
+region_colors = {"Finder Pattern": "#1B3A5C", "Timing Pattern": "#2A7F62", "Data": "#306998", "Quiet Zone": "#FFFFFF"}
+records = []
+for r, c in zip(rows, cols, strict=True):
+    qr_r, qr_c = r - quiet_zone, c - quiet_zone
+    if qr_r < 0 or qr_r >= qr_matrix.shape[0] or qr_c < 0 or qr_c >= qr_matrix.shape[1]:
+        region = "Quiet Zone"
+    elif (
+        (qr_r < 7 and qr_c < 7)
+        or (qr_r < 7 and qr_c >= qr_matrix.shape[1] - 7)
+        or (qr_r >= qr_matrix.shape[0] - 7 and qr_c < 7)
+    ):
+        region = "Finder Pattern"
+    elif qr_r == 6 or qr_c == 6:
+        region = "Timing Pattern"
+    else:
+        region = "Data"
+    val = padded[r, c]
+    display_region = region if val == 1 else "Background"
+    records.append({"x": c, "y": total_size - 1 - r, "value": val, "region": region, "display": display_region})
+
+data = pd.DataFrame(records)
+
+# Color mapping: dark modules get region-specific colors, background is white
+display_domain = ["Finder Pattern", "Timing Pattern", "Data", "Background"]
+display_colors = ["#1B3A5C", "#2A7F62", "#306998", "#FFFFFF"]
+
+# Plot - QR code with color-encoded structural regions
 chart = (
-    alt.Chart(df)
-    .mark_rect(stroke=None)
+    alt.Chart(data)
+    .mark_rect(stroke=None, strokeWidth=0)
     .encode(
         x=alt.X("x:O", axis=None),
         y=alt.Y("y:O", axis=None),
-        color=alt.Color("value:N", scale=alt.Scale(domain=[0, 1], range=["#FFFFFF", "#000000"]), legend=None),
+        color=alt.Color(
+            "display:N",
+            scale=alt.Scale(domain=display_domain, range=display_colors),
+            legend=alt.Legend(
+                title="QR Code Regions",
+                titleFontSize=16,
+                labelFontSize=14,
+                orient="bottom",
+                direction="horizontal",
+                values=["Finder Pattern", "Timing Pattern", "Data"],
+            ),
+        ),
+        tooltip=[
+            alt.Tooltip("region:N", title="Region"),
+            alt.Tooltip("x:O", title="Col"),
+            alt.Tooltip("y:O", title="Row"),
+        ],
     )
     .properties(
         width=800,
         height=800,
-        title=alt.Title("qrcode-basic · altair · pyplots.ai", fontSize=28, anchor="middle", dy=-10),
+        title=alt.Title(
+            "qrcode-basic · altair · pyplots.ai",
+            subtitle="Structural regions: Finder Patterns (navy) for orientation · Timing Patterns (green) for alignment · Data modules (blue)",
+            fontSize=28,
+            subtitleFontSize=16,
+            subtitleColor="#555555",
+            anchor="middle",
+            dy=-10,
+        ),
     )
     .configure_view(strokeWidth=0)
     .configure_axis(grid=False)
+    .configure_legend(symbolStrokeWidth=0, padding=20)
 )
 
-# Save as PNG (square format: 3600 x 3600 px with scale_factor)
+# Save
 chart.save("plot.png", scale_factor=4.5)
-
-# Save interactive HTML version
 chart.save("plot.html")