feat(chartjs): implement waveform-audio

[github-actions]

Implementation: waveform-audio - javascript/chartjs

Implements the javascript/chartjs version of waveform-audio.

File: plots/waveform-audio/implementations/javascript/chartjs.js

Parent Issue: #4563

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "Plucked String · waveform-audio · javascript · chartjs · anyplot.ai" in dark ink spans ~60-65% of plot width at fontsize 22. X-axis title "Time (s)" and Y-axis title "Amplitude" in dark ink at fontsize 18. Tick labels (0.0s–2.0s, -1.0 to 1.0) in secondary ink at fontsize 14. Dense oscillating waveform in #009E73 (brand green) with 0.3-alpha semi-transparent green fill using fill:"origin". Exponential decay from peak amplitude ~0.7 at t=0 to near-silence at t=2.0s. Dashed zero-reference line in inkSoft color. All text clearly readable against the warm off-white background. No dark-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title in light (#F0EFE8) text, clearly visible. Axis titles in primary light ink; tick labels in secondary light ink (#B8B7B0). All text remains readable against the dark surface. Waveform data colors are identical to the light render — same #009E73 green line. The 0.3-alpha fill over dark background produces a dark teal fill that recedes appropriately without losing the envelope shape. No dark-on-dark failures detected. Brand green #009E73 clearly visible throughout both the line and fill elements.

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

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title:22, axes:18, ticks:14). Well-proportioned in both themes; title spans ~60–65% of plot width.
• VQ-02: No Overlap (6/6) — No text overlaps. Dense waveform does not collide with labels. Legend suppressed for single series.
• VQ-03: Element Visibility (6/6) — 17,640 samples rendered with borderWidth:1.2 and pointRadius:0 — appropriate for dense audio waveform. Decay envelope clearly visible.
• VQ-04: Color Accessibility (2/2) — Single series in #009E73 with high contrast on both backgrounds. Zero line in inkSoft. CVD-safe.
• VQ-05: Layout & Canvas (4/4) — Landscape canvas, plot fills ~75% of area. Balanced margins. No content cut off. Canvas gate passed.
• VQ-06: Axis Labels & Title (2/2) — X: "Time (s)" with units. Y: "Amplitude" descriptive. Title format correct with descriptive prefix.
• VQ-07: Palette Compliance (2/2) — First series is palette[0]=#009E73. Background #FAF8F1 light / #1A1A17 dark. All chrome theme-adaptive. Data colors identical across themes.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: correct Imprint palette, semi-transparent envelope fill, descriptive physics-context title ("Plucked String"). Above defaults but not quite FiveThirtyEight-level polish.
• DE-02: Visual Refinement (4/6) — Subtle grid, no legend for single series, clean layout. However Chart.js default 4-spine border is present (top/right not removed per style guide).
• DE-03: Data Storytelling (4/6) — Exponential decay envelope immediately communicates the plucked string physics. Clear focal point at t=0 transient. Viewer reads the story without annotation.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct waveform type: dense line with bilateral area fill symmetric around zero.
• SC-02: Required Features (4/4) — Filled area (fill:origin), semi-transparent fill, zero reference line, time x-axis, normalized amplitude y-axis (-1 to +1), synthetic audio data all present.
• SC-03: Data Mapping (3/3) — X=time in seconds, Y=amplitude. Full range displayed.
• SC-04: Title & Legend (3/3) — "Plucked String · waveform-audio · javascript · chartjs · anyplot.ai" — correct format with descriptive prefix. Legend correctly suppressed.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Four-harmonic model shows transient attack, sustain, and decay to silence — covers all waveform inspection scenarios mentioned in spec.
• DQ-02: Realistic Context (5/5) — A3 plucked string (220 Hz) is a neutral, real-world acoustic scenario. Not controversial.
• DQ-03: Appropriate Scale (4/4) — 220 Hz A3 note, 8820 Hz sample rate, 2s duration, normalized amplitude — all acoustically correct.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: tokens → data → mount → chart. No functions or classes.
• CQ-02: Reproducibility (2/2) — Fully deterministic — pure math, no RNG.
• CQ-03: Clean Imports (2/2) — No imports needed (Chart is global). No unused variables.
• CQ-04: Code Elegance (2/2) — Clean, well-structured. Hex-to-RGB parsing is concise and purposeful.
• CQ-05: Output & API (1/1) — Harness handles output. Current Chart.js 4.4.7 API used.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Expert use: parsing:false + normalized:true for large dataset performance, fill:"origin" for symmetric envelope, tension:0 for crisp waveform, pointRadius:0 for density.
• LM-02: Distinctive Features (3/5) — Uses Chart.js-specific parsing:false + normalized:true performance optimization, fill:"origin" for bilateral area, and two-dataset composition for waveform+zero-reference line.

Score Caps Applied

• None

Strengths

• Physically accurate plucked-string model (4 harmonics with frequency-proportional decay) produces a realistic, story-telling waveform
• Correct use of Chart.js performance optimizations: parsing:false + normalized:true for 17,640 data points
• Semi-transparent fill:"origin" creates effective bilateral waveform envelope without obscuring the signal
• Dashed zero-reference line using inkSoft token is acoustically meaningful and theme-adaptive
• Legend correctly suppressed for single-series plot; descriptive title prefix "Plucked String" adds domain context
• Fully deterministic (pure math, no RNG); all font sizes explicitly set

Weaknesses

• Chart.js default chart-area border (all 4 spines visible) — the style guide calls for removing top and right spines; add border.display:false to top/right axis scale config
• Y-axis label says "Amplitude" — "Normalized Amplitude" would be more precise to match the -1 to +1 range context
• Spec notes min/max envelope rendering for dense waveforms to avoid aliasing artifacts; implementation renders all 17,640 raw samples without envelope reduction (visually acceptable at this canvas size, but the technique is absent)

Issues Found

1. DE-02 MINOR: Default Chart.js 4-spine border visible (top and right frame lines)
   • Fix: Add border: { display: false } inside non-axis scales or configure axis border settings to remove top/right spines
2. LM-02 MODERATE: Two-dataset composition is good but min/max envelope rendering (a distinctive Chart.js technique for high-sample-count data) is absent
   • Fix: Add min/max decimation or envelope pre-processing to showcase Chart.js's handling of DAW-style waveform data

AI Feedback for Next Attempt

This is a high-quality first attempt with perfect spec compliance, data quality, and code quality. To push toward publication-ready: (1) remove top and right chart border spines in Chart.js axis config, (2) consider relabeling Y-axis to "Normalized Amplitude", (3) optionally implement min/max envelope decimation to showcase Chart.js waveform handling. Core design and physics model are excellent — keep the plucked-string model and all palette choices.

Verdict: APPROVED