feat(d3): implement acf-pacf

[github-actions]

Implementation: acf-pacf - javascript/d3

Implements the javascript/d3 version of acf-pacf.

File: plots/acf-pacf/implementations/javascript/d3.js

Parent Issue: #4663

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background — correct anyplot light surface. Title "Monthly Retail Sales · acf-pacf · javascript · d3 · anyplot.ai" in dark ink bold 22px, fully visible at ~80% canvas width (expected for the long mandated title format). Two stacked panels: ACF (top) in brand green #009E73 stems with dot tips — lag 0 spike at 1.0 dominates, gradual exponential decay follows. PACF (bottom) in Imprint blue #4467A3 — clear cutoff after lag 2, canonical AR(2) diagnostic pattern. Amber dashed confidence bands (±0.138) with very subtle amber fill in both panels. Y-axis labels "ACF" / "PACF" in dark bold 15px, X-axis label "Lag" at bottom. Tick labels at 13px in inkSoft. All text is clearly readable against the warm-cream background. No light-on-light failures.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct anyplot dark surface. Title and all chrome elements flip to light ink (#F0EFE8 / #B8B7B0). All text clearly readable against the dark background — no dark-on-dark failures. Data colors are identical to the light render: ACF stems in #009E73, PACF stems in #4467A3, amber dashed CI lines. The subtle amber confidence-band fill reads slightly more visible on dark bg but not distracting. Grid lines remain subtle. Complete theme adaptation confirmed.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 90/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	8	10
Total	90	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 22px, y-axis labels 15px bold, tick labels 13px, x-label 14px. Well-proportioned, readable in both themes.
• VQ-02: No Overlap (6/6) — No text overlap. Stems well-spaced across 30 lags.
• VQ-03: Element Visibility (6/6) — Stems (2.5px stroke) and dot tips (r=4.5) clearly visible, appropriate for 30-lag density.
• VQ-04: Color Accessibility (2/2) — Green/blue are CVD-safe Imprint palette members. Amber CI bands distinct from both series.
• VQ-05: Layout & Canvas (4/4) — Both panels fill canvas well. Canvas gate passed. Balanced margins (top=70, right=60, bottom=70, left=80).
• VQ-06: Axis Labels & Title (2/2) — "ACF", "PACF", "Lag" all descriptive. Units not needed for dimensionless correlation.
• VQ-07: Palette Compliance (2/2) — palette[0]=#009E73 for ACF, palette[2]=#4467A3 for PACF, #DDCC77 amber anchor for CI bands. Correct backgrounds both themes. Chrome adapts correctly to both renders.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Intentional two-color differentiation between panels, amber CI bands with subtle fill (0.08 opacity), clean stem plot design. Clearly above configured defaults; not yet at publication-ready level.
• DE-02: Visual Refinement (4/6) — Subtle horizontal grid (t.grid token), zero baseline at 0.5 opacity, CI fill + dashed lines, dot tips on stems. Good explicit refinement beyond defaults.
• DE-03: Data Storytelling (4/6) — AR(2) data creates canonical PACF cutoff after lag 2, visually demonstrating the diagnostic value of the plot. Good visual hierarchy with dominant lag-0 spike.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct ACF/PACF stem plot with two vertically stacked panels.
• SC-02: Required Features (4/4) — ACF top with lag 0=1.0, PACF bottom starting lag 1, shared x-axis, 95% CI dashed lines, Y-axis labels ACF/PACF, X-axis label Lag, 30 lags (within spec's 30–40 range).
• SC-03: Data Mapping (3/3) — Correct lag assignments, zero baseline visible, correlation values in [-1, 1].
• SC-04: Title & Legend (3/3) — Title "Monthly Retail Sales · acf-pacf · javascript · d3 · anyplot.ai" matches prescribed format with descriptive prefix.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — ACF exponential decay pattern, PACF cutoff at lag 2, lag 0=1.0, confidence bands, both significant and insignificant lags visible.
• DQ-02: Realistic Context (5/5) — Monthly Retail Sales is a plausible, neutral real-world domain where AR(2) autocorrelation is realistic.
• DQ-03: Appropriate Scale (4/4) — N=200 (within spec's 100–500 range), CI at ±1.96/√200 ≈ ±0.138 (correct formula), 30 lags as specified.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Has lcg(), randn(), and drawPanel() helpers. LCG is necessary given browser has no seeded RNG; drawPanel is a justified DRY refactor for two nearly identical panels — but technically diverges from the no-functions guideline.
• CQ-02: Reproducibility (2/2) — Deterministic LCG with fixed _seed = 42. Fully reproducible.
• CQ-03: Clean Imports (2/2) — No imports needed; d3 global used throughout, all referenced methods are actually called.
• CQ-04: Code Elegance (2/2) — Clean D3 patterns, well-commented statistical math, no fake functionality.
• CQ-05: Output & API (1/1) — D3 is in INTERACTIVE_LIBRARIES; harness emits plot-{theme}.png + .html. Current D3 7.9.0 API used.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Excellent D3 idioms: data binding with .join(), chained selections, axisLeft/axisBottom, scaleLinear with .nice(), proper ANYPLOT_TOKENS/ANYPLOT_SIZE harness contract.
• LM-02: Distinctive Features (3/5) — D3 data-driven binding for parallel stem/dot creation, custom axis styling via token attributes, SVG transform-based panel layout. Core Durbin-Levinson algorithm is plain JS rather than a D3-specific pattern.

Score Caps Applied

• None — DE-01=5 > 2 and DE-02=4 > 2 (no boring cap); all other cap conditions clear.

Strengths

• Full Durbin-Levinson PACF algorithm implemented correctly in browser JS — correct statistical computation, not just aesthetics
• Perfect spec compliance: ACF top with lag 0=1.0, PACF bottom starting lag 1, 95% CI dashed amber lines, 30 lags
• Semantically appropriate color choices — brand green for ACF, Imprint blue for PACF, amber anchor for confidence bands
• Deterministic LCG with seed 42 elegantly solves the browser's lack of seeded RNG
• AR(2) data choice creates canonical PACF cutoff at lag 2 — excellent pedagogical data that shows what the plot type is for

Weaknesses

• Helper functions (lcg, randn, drawPanel) technically diverge from the no-functions CQ-01 rule, though pragmatically justified for browser-RNG and DRY panel rendering
• Tick label font size at 13px is 1px below the D3-recommended minimum of 14px; minor improvement available
• Design Excellence headroom: spines remain visible on all sides (acceptable for stem plots), but no subtitle or annotation to guide the viewer toward the AR(2) cutoff story

Issues Found

1. CQ-01 MINOR: Helper functions present — LCG and drawPanel are pragmatically justified but deviate from KISS no-functions guideline
   • Fix: Inline the LCG/randn into data generation; duplicate the panel drawing code to eliminate the function wrapper
2. DE-01/DE-03 HEADROOM: Good design but room to elevate toward publication quality
   • Fix: Add a brief annotation on the PACF panel pointing to the lag-2 cutoff ("AR(2) cutoff"), or a subtitle below the title to set context

AI Feedback for Next Attempt

Implementation is strong — statistical computation is correct, spec compliance is perfect, both themes render cleanly. To push above 90: inline the LCG/randn data generation to eliminate helper functions, bump tick labels to 14px, and consider a single annotation on the PACF panel highlighting the lag-2 cutoff to elevate storytelling.

Verdict: APPROVED