feat(echarts): implement acf-pacf

[github-actions]

Implementation: acf-pacf - javascript/echarts

Implements the javascript/echarts version of acf-pacf.

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

Parent Issue: #4663

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Two stacked panels on a warm off-white #FAF8F1 background. The top ACF panel shows 36 vertical bars (lags 0–35): significant bars in brand green #009E73 with full opacity, insignificant bars in the same green at ~28% opacity. An amber dashed CI bound (≈ ±0.113) spans the width; a solid near-black zero baseline is visible. The ACF shows the expected gradual geometric decay of an AR(2) process. The bottom PACF panel shows 35 bars (lags 1–35) in Imprint blue #4467A3 (significant) and pale blue (insignificant), with the same amber CI and baseline. Clear spikes at lags 1 and 2 with near-zero values beyond, correctly illustrating AR(2) partial autocorrelation cutoff. Title centered at the top; subtext with AR(2) context below. Y-axis labels "ACF" / "PACF", x-axis label "Lag" at the bottom. All text is clearly readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): Same layout on a warm near-black #1A1A17 background. Data colors are identical to the light render — brand green #009E73 for significant ACF bars, Imprint blue #4467A3 for significant PACF bars; only chrome flips. Title and subtitle render in light ink, axis labels and tick labels in lighter secondary ink — all clearly readable against the dark surface. Grid lines subtle. Amber CI dashes remain visible. No dark-on-dark failures detected. Legibility verdict: PASS.

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

Score: 87/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	13	20
Spec Compliance	14	15
Data Quality	15	15
Code Quality	9	10
Library Mastery	7	10
Total	87	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 22 CSS px, subtitle 14, axis names 15, tick labels 13. Well-proportioned in both themes, no clipping, balanced labels.
• VQ-02: No Overlap (6/6) — No text collisions in either render.
• VQ-03: Element Visibility (6/6) — barWidth=3 effectively creates stem-plot appearance; significant (full-color) vs insignificant (28% opacity) bars clearly distinguishable.
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe; opacity contrast between significant and insignificant bars adds redundant encoding.
• VQ-05: Layout & Canvas (4/4) — Dual stacked panels fill the canvas well, balanced margins, nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — "ACF", "PACF", and "Lag" are descriptive; dimensionless correlations need no units.
• VQ-07: Palette Compliance (1/2) — PACF uses t.palette[2] (#4467A3, blue) but canonical Imprint order requires position 2 (#C475FD, lavender) as the second distinct series. No semantic label justification for skipping position 2.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Significant/insignificant opacity coding is a genuinely thoughtful design choice beyond defaults. Amber CI anchored to semantic token. Informative subtext. Above a "well-configured default" but not publication-ready sophistication.
• DE-02: Visual Refinement (4/6) — No top/right spines; Y-axis grid subtle; ACF x-axis labels hidden with PACF serving as shared reference; clean panel separation. Solid refinement.
• DE-03: Data Storytelling (4/6) — AR(2) process purposefully chosen to produce characteristic patterns (PACF cutoff at lag 2, gradual ACF decay). Opacity-based significance coding gives immediate visual hierarchy — "which lags matter" is clear at a glance.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct dual-panel ACF/PACF stem plot.
• SC-02: Required Features (3/4) — All features present (CI dashed lines, zero baseline, lag 0 in ACF, PACF from lag 1, 35 lags). Minor: ACF panel has 36 categories (lags 0–35) while PACF has 35 categories (lags 1–35) on separate x-axes; bar positions don't perfectly vertically align between panels, undermining the spec's intent of "sharing the x-axis".
• SC-03: Data Mapping (3/3) — Lags on x, correlation values on y; all data visible.
• SC-04: Title & Legend (3/3) — Title "acf-pacf · javascript · echarts · anyplot.ai" matches required format exactly. Y-axis names serve as panel labels; no separate legend needed.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Demonstrates ACF decay, PACF cutoff, significant vs insignificant lags, and CI bounds — all core features of ACF/PACF plots.
• DQ-02: Realistic Context (5/5) — "AR(2) daily temperature anomaly residuals (°C)", N=300 — scientifically neutral, realistic, and representative.
• DQ-03: Appropriate Scale (4/4) — AR(2) with φ₁=0.6, φ₂=0.25 produces realistic correlation magnitudes; CI at ±1.96/√300 ≈ ±0.113 is mathematically correct.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Five helper functions defined (_lcg, _randn, sampleACF, samplePACF, ciMarkLine). Statistical complexity justifies the main ones, but the structure deviates from the flat data→plot pattern.
• CQ-02: Reproducibility (2/2) — Fixed-seed LCG (_seed = 42), fully deterministic.
• CQ-03: Clean Imports (2/2) — No imports; ECharts is global; no dead code.
• CQ-04: Code Elegance (2/2) — Statistical algorithms correctly implemented; no over-engineering; no fake UI elements.
• CQ-05: Output & API (1/1) — ECharts harness produces plot-{theme}.png and plot-{theme}.html; current API used.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good use of ECharts multi-grid layout, markLine for reference lines, per-item itemStyle for conditional coloring, animation: false, transparent background via token.
• LM-02: Distinctive Features (3/5) — Per-item data-level itemStyle for significance distinction is ECharts-specific. markLine with mixed line types (solid zero + dashed CI) in one declaration is idiomatic ECharts. Multi-grid stacked panels leverage ECharts' native layout system.

Score Caps Applied

• None applied — all category scores above zero, DE-01=5 > 2.

Strengths

• Significant vs. insignificant lag opacity coding is an elegant, information-rich design choice unique to this implementation
• AR(2) data is pedagogically optimal — produces both the characteristic PACF cutoff and ACF decay pattern, immediately illustrating when ACF/PACF analysis is useful
• Amber semantic token used correctly for CI bounds (warning/threshold role)
• Both themes render correctly with full theme-adaptive chrome; no dark-on-dark or light-on-light failures
• Durbin-Levinson PACF recursion and sample ACF computation are mathematically correct

Weaknesses

• PACF uses t.palette[2] (#4467A3, blue) — canonical Imprint order requires position 2 (t.palette[1], lavender #C475FD) for the second categorical series; change SIG_PACF = t.palette[2] to t.palette[1] and update INSIG_PACF rgba to rgba(196,117,253,0.28)
• ACF x-axis has 36 categories (lags 0–35) and PACF has 35 categories (lags 1–35); bars don't vertically align between panels — fix by prepending a null entry to PACF data so both grids use 36 slots, making lag N line up visually between the two panels

Issues Found

1. VQ-07 PARTIAL: PACF series skips Imprint palette position 2 (lavender #C475FD) and uses position 3 (blue #4467A3) without semantic justification — fix: SIG_PACF = t.palette[1] and INSIG_PACF = 'rgba(196,117,253,0.28)'
2. SC-02 MINOR: ACF (36 categories) and PACF (35 categories) on separate x-axes causes bar misalignment between panels — fix: prepend a transparent dummy bar at lag 0 to PACF data and update PACF xAxis data to start from '0', giving both panels 36 equal-width slots

AI Feedback for Next Attempt

Two targeted fixes for approval: (1) Change PACF color to canonical Imprint position 2 — SIG_PACF = t.palette[1] (lavender #C475FD) and update INSIG_PACF accordingly to rgba(196,117,253,0.28). (2) Fix bar alignment: prepend a null/transparent dummy entry at lag 0 to the PACF barData array so both x-axes have 36 categories — this makes lag N in ACF and PACF line up vertically. Keep PACF xAxis data as ['0', '1', ..., '35'] with the dummy first item set to { value: null, itemStyle: { opacity: 0 } }. Keep all other design choices unchanged (opacity significance coding, amber CI, Durbin-Levinson, subtext).

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Two vertically stacked panels share the same x-axis (lags 0–35). Top panel (ACF): vertical bars in brand green (#009E73) for significant lags (including lag 0 at ~1.0), semi-transparent muted green for insignificant lags. Classic exponential decay pattern is clearly visible through approximately lag 20, after which values fall within the CI band. Bottom panel (PACF): lavender/purple bars (#C475FD), with two prominent spikes at lags 1 (~0.70) and 2 (~0.13), then all remaining lags are noise-level. Both panels show amber (#DDCC77) dashed CI lines at ±1.96/√300 ≈ ±0.113, plus a solid baseline at 0. Y-axes labeled "ACF" and "PACF" respectively, x-axis labeled "Lag". Title "acf-pacf · javascript · echarts · anyplot.ai" and subtitle "AR(2) daily temperature anomalies · N = 300 · 95% CI shown" centered at top. All text (title, subtitle, axis labels, tick labels) is clearly readable against the light background. No light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Identical data colors: ACF bars remain brand green (#009E73), PACF bars remain lavender (#C475FD), CI lines remain amber (#DDCC77). Chrome flips: title, subtitle, axis labels, and tick labels are rendered in light-colored text, clearly readable against the near-black background. Grid lines are subtle light-colored rules. No dark-on-dark text failures observed — all labels, ticks, and annotations are legible. The two panels maintain the same structure and visual hierarchy as the light render.

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

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	88	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 22px, subtitle 14px, axis names 15px, tick labels 13px). Readable in both themes. Minor: tick labels at 13px CSS are 1px below the 14px guide default.
• VQ-02: No Overlap (6/6) — Clean two-panel layout with no text collisions.
• VQ-03: Element Visibility (5/6) — 3px bars appropriate for 36 lags; muted insignificant bars visible but faint in the PACF panel on dark.
• VQ-04: Color Accessibility (2/2) — Green/lavender pairing across distinct hue families; amber CI lines; CVD-safe.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed; two-panel layout fills canvas well with balanced margins.
• VQ-06: Axis Labels & Title (2/2) — "Lag", "ACF", "PACF" per spec; title format correct.
• VQ-07: Palette Compliance (2/2) — ACF = palette[0] (#009E73), PACF = palette[1] (#C475FD), CI = amber (#DDCC77); transparent background shows page bg tokens; data colors identical across themes; all chrome uses theme-adaptive tokens.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above generic defaults: per-item alpha encoding for significant vs. insignificant bars adds a meaningful visual layer. Informative subtitle with model details. Two-color series with semantic CI lines. Not quite FiveThirtyEight-level polish.
• DE-02: Visual Refinement (4/6) — Tick marks removed; upper panel's x-axis tick labels hidden (clean shared-axis design); grid only on y-axis; good whitespace in grid config.
• DE-03: Data Storytelling (4/6) — AR(2) model signature (exponential ACF decay + 2-spike PACF cutoff) is immediately readable. Significant/insignificant differentiation via alpha creates clear visual hierarchy. Subtitle explicitly anchors the interpretation.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct dual-panel ACF/PACF layout with narrow stem-style bars.
• SC-02: Required Features (4/4) — ACF (top) + PACF (bottom); shared lag x-axis; 95% CI dashed lines; lag 0 in ACF; PACF from lag 1; 35 lags (within 30–40 range); zero baseline.
• SC-03: Data Mapping (3/3) — Lag on x-axis; correlation values on y; axes correctly ranged.
• SC-04: Title & Legend (3/3) — Title matches {spec-id} · javascript · echarts · anyplot.ai. Panels labeled via y-axis names; no redundant legend needed.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Both ACF and PACF shown; significant/insignificant coding; correct lag-0 in ACF; correct Durbin-Levinson recursion for PACF; CI bounds.
• DQ-02: Realistic Context (5/5) — AR(2) daily temperature anomaly residuals — neutral scientific domain, N=300 appropriate for reliable estimates.
• DQ-03: Appropriate Scale (4/4) — Correlation values in [-1, 1]; y-axis ranges matched to data; AR(2) signature (slow ACF decay, 2 PACF spikes) factually consistent.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Minimal LCG helpers for determinism, otherwise flat data → config → setOption.
• CQ-02: Reproducibility (2/2) — Fixed-seed LCG (seed=42); fully deterministic.
• CQ-03: Clean Imports (2/2) — No imports; echarts is global per harness contract.
• CQ-04: Code Elegance (2/2) — Clean, well-organized; per-item itemStyle is idiomatic for conditional coloring; no fake UI.
• CQ-05: Output & API (1/1) — Harness generates plot-{theme}.png + plot-{theme}.html; ECharts 5.5.1 API throughout.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Multiple grids, xAxisIndex/yAxisIndex association, markLine within series, per-item itemStyle with value+color object format — all idiomatic ECharts patterns.
• LM-02: Distinctive Features (3/5) — markLine for reference/CI lines (ECharts-specific — not a separate series), multiple grid instances for aligned panel layout, per-item data object format. Distinctive usage above generic.

Score Caps Applied

• None

Strengths

• Correct PACF computation via Durbin-Levinson recursion — mathematically rigorous, not approximate
• Significant vs. insignificant bar alpha encoding adds an analytical layer true to ACF/PACF best practices
• Full Imprint palette compliance with amber CI lines as semantic anchors (threshold/caution role)
• Complete theme adaptation: all chrome tokens thread through both panels in both renders
• Subtitle ("AR(2) daily temperature anomalies · N = 300 · 95% CI shown") provides rich interpretive context
• Clean shared-axis design: upper panel's x-axis labels hidden, tick marks removed throughout

Weaknesses

• Tick label font size is 13px CSS (one point below the 14px echarts guide default) — nudge up to 14px for full compliance
• Muted insignificant PACF bars (rgba alpha ~0.28) are slightly faint on dark background — consider bumping alpha to 0.35–0.40 for dark theme

Issues Found

1. VQ-01 MINOR: Tick labels at 13px CSS are marginally below the 14px guide default
   • Fix: Change to in both and both
2. VQ-03 MINOR: Insignificant bars in PACF panel slightly faint in dark render
   • Fix: Increase alpha of from to ; similarly from to

AI Feedback for Next Attempt

Strong implementation — spec fully met with mathematically rigorous ACF/PACF computation. To polish further: (1) nudge all tick label fontsizes from 13px to 14px for guide compliance; (2) slightly increase the insignificant-bar alpha (0.28 → ~0.35–0.38) so muted bars remain subtly visible in dark mode. Design is above median already; these are small refinements.

Verdict: APPROVED

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Two vertically stacked panels share the same x-axis (lags 0–35). Top panel (ACF): vertical bars in brand green (#009E73) for significant lags (including lag 0 at ~1.0), semi-transparent muted green for insignificant lags. Classic exponential decay pattern is clearly visible through approximately lag 20, after which values fall within the CI band. Bottom panel (PACF): lavender/purple bars (#C475FD), with two prominent spikes at lags 1 (~0.70) and 2 (~0.13), then all remaining lags are noise-level. Both panels show amber (#DDCC77) dashed CI lines at ±1.96/√300 ≈ ±0.113, plus a solid baseline at 0. Y-axes labeled "ACF" and "PACF" respectively, x-axis labeled "Lag". Title "acf-pacf · javascript · echarts · anyplot.ai" and subtitle "AR(2) daily temperature anomalies · N = 300 · 95% CI shown" centered at top. All text (title, subtitle, axis labels, tick labels) is clearly readable against the light background. No light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Identical data colors: ACF bars remain brand green (#009E73), PACF bars remain lavender (#C475FD), CI lines remain amber (#DDCC77). Chrome flips: title, subtitle, axis labels, and tick labels are rendered in light-colored text, clearly readable against the near-black background. Grid lines are subtle light-colored rules. No dark-on-dark text failures observed — all labels, ticks, and annotations are legible. The two panels maintain the same structure and visual hierarchy as the light render.

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

Score: 88/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	88	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 22px, subtitle 14px, axis names 15px, tick labels 13px). Readable in both themes. Minor: tick labels at 13px CSS are 1px below the 14px guide default.
• VQ-02: No Overlap (6/6) — Clean two-panel layout with no text collisions.
• VQ-03: Element Visibility (5/6) — 3px bars appropriate for 36 lags; muted insignificant bars visible but faint in the PACF panel on dark.
• VQ-04: Color Accessibility (2/2) — Green/lavender pairing across distinct hue families; amber CI lines; CVD-safe.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed; two-panel layout fills canvas well with balanced margins.
• VQ-06: Axis Labels & Title (2/2) — "Lag", "ACF", "PACF" per spec; title format correct.
• VQ-07: Palette Compliance (2/2) — ACF = palette[0] (#009E73), PACF = palette[1] (#C475FD), CI = amber (#DDCC77); transparent background shows page bg tokens; data colors identical across themes; all chrome uses theme-adaptive tokens.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above generic defaults: per-item alpha encoding for significant vs. insignificant bars adds a meaningful visual layer. Informative subtitle with model details. Two-color series with semantic CI lines. Not quite FiveThirtyEight-level polish.
• DE-02: Visual Refinement (4/6) — Tick marks removed; upper panel's x-axis tick labels hidden (clean shared-axis design); grid only on y-axis; good whitespace in grid config.
• DE-03: Data Storytelling (4/6) — AR(2) model signature (exponential ACF decay + 2-spike PACF cutoff) is immediately readable. Significant/insignificant differentiation via alpha creates clear visual hierarchy. Subtitle explicitly anchors the interpretation.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct dual-panel ACF/PACF layout with narrow stem-style bars.
• SC-02: Required Features (4/4) — ACF (top) + PACF (bottom); shared lag x-axis; 95% CI dashed lines; lag 0 in ACF; PACF from lag 1; 35 lags (within 30–40 range); zero baseline.
• SC-03: Data Mapping (3/3) — Lag on x-axis; correlation values on y; axes correctly ranged.
• SC-04: Title & Legend (3/3) — Title matches {spec-id} · javascript · echarts · anyplot.ai. Panels labeled via y-axis names; no redundant legend needed.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Both ACF and PACF shown; significant/insignificant coding; correct lag-0 in ACF; correct Durbin-Levinson recursion for PACF; CI bounds.
• DQ-02: Realistic Context (5/5) — AR(2) daily temperature anomaly residuals — neutral scientific domain, N=300 appropriate for reliable estimates.
• DQ-03: Appropriate Scale (4/4) — Correlation values in [-1, 1]; y-axis ranges matched to data; AR(2) signature (slow ACF decay, 2 PACF spikes) factually consistent.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Minimal LCG helpers for determinism, otherwise flat data → config → setOption.
• CQ-02: Reproducibility (2/2) — Fixed-seed LCG (seed=42); fully deterministic.
• CQ-03: Clean Imports (2/2) — No imports; echarts is global per harness contract.
• CQ-04: Code Elegance (2/2) — Clean, well-organized; per-item itemStyle is idiomatic for conditional coloring; no fake UI.
• CQ-05: Output & API (1/1) — Harness generates plot-{theme}.png + plot-{theme}.html; ECharts 5.5.1 API throughout.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Multiple grids, xAxisIndex/yAxisIndex association, markLine within series, per-item itemStyle with value+color object format — all idiomatic ECharts patterns.
• LM-02: Distinctive Features (3/5) — markLine for reference/CI lines (ECharts-specific — not a separate series), multiple grid instances for aligned panel layout, per-item data object format. Distinctive usage above generic.

Score Caps Applied

• None

Strengths

• Correct PACF computation via Durbin-Levinson recursion — mathematically rigorous
• Significant vs. insignificant bar alpha encoding adds an analytical layer true to ACF/PACF best practices
• Full Imprint palette compliance with amber CI lines as semantic anchors (threshold/caution role)
• Complete theme adaptation: all chrome tokens thread through both panels in both renders
• Subtitle ("AR(2) daily temperature anomalies · N = 300 · 95% CI shown") provides rich interpretive context
• Clean shared-axis design: upper panel x-axis labels hidden, tick marks removed throughout

Weaknesses

• Tick label font size is 13px CSS (one point below the 14px echarts guide default) — nudge up to 14px for full compliance
• Muted insignificant PACF bars (rgba alpha ~0.28) are slightly faint on dark background — consider bumping alpha to 0.35–0.40 for dark theme

Issues Found

1. VQ-01 MINOR: Tick labels at 13px CSS are marginally below the 14px guide default
   • Fix: Change fontSize from 13 to 14 in xAxis[1].axisLabel and both yAxis[*].axisLabel
2. VQ-03 MINOR: Insignificant bars in PACF panel slightly faint in dark render
   • Fix: Increase alpha of INSIG_PACF from rgba(196,117,253,0.28) to rgba(196,117,253,0.38); similarly INSIG_ACF from 0.28 to 0.35

AI Feedback for Next Attempt

Strong implementation — spec fully met with mathematically rigorous ACF/PACF computation. To polish further: (1) nudge all tick label fontsizes from 13px to 14px for guide compliance; (2) slightly increase the insignificant-bar alpha (0.28 → ~0.35–0.38) so muted bars remain subtly visible in dark mode. Design is above median already; these are small refinements.

Verdict: APPROVED