feat(plotly): implement spectrum-basic

[github-actions]

Implementation: spectrum-basic - python/plotly

Implements the python/plotly version of spectrum-basic.

File: plots/spectrum-basic/implementations/python/plotly.py

Parent Issue: #2926

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The spectrum plot renders on a warm off-white background (#FAF8F1) with dark title "spectrum-basic · plotly · anyplot.ai" at the top. The frequency axis (0-500 Hz) and amplitude axis (-80 to 0 dB) are labeled descriptively with units. The spectrum is displayed as a green line (#009E73) with a semi-transparent green fill beneath the curve, clearly showing three dominant frequency peaks at 50 Hz, 120 Hz, and 300 Hz—each annotated with a label and arrow. The noise floor is visible throughout, and subtle grid lines aid readability. All text is perfectly readable against the light background.

Dark render (plot-dark.png): The same spectrum plot renders identically on a warm near-black background (#1A1A17) with the title and labels rendered in light text color (#F0EFE8). Critically, the spectrum line color remains the identical green (#009E73) as the light render, confirming data colors don't flip—only the theme-adaptive chrome (background and text) adapts. The three peak annotations are equally visible and readable. No "dark-on-dark" issues detected; all elements maintain excellent contrast against the dark surface. Grid lines are equally subtle.

Score: 93/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set (title 28px, labels 22px, ticks 18px). Perfectly readable in both light and dark themes.
• VQ-02: No Overlap (6/6) - No overlapping elements. All text fully readable and well-spaced.
• VQ-03: Element Visibility (6/6) - Spectrum line and fill optimally visible. Peak annotations clearly marked with arrows. Data density appropriate.
• VQ-04: Color Accessibility (2/2) - Okabe-Ito green (#009E73) provides excellent contrast in both themes. Colorblind-safe.
• VQ-05: Layout & Canvas (4/4) - Plot fills 70-80% of canvas with balanced margins. Excellent whitespace utilization.
• VQ-06: Axis Labels & Title (2/2) - Descriptive labels with units: "Frequency (Hz)", "Amplitude (dB)". Correct title format.
• VQ-07: Palette Compliance (2/2) - First series #009E73 brand green. Backgrounds #FAF8F1 (light) and #1A1A17 (dark). Theme-adaptive chrome perfect. Data colors identical between renders.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) - Professional design with intentional color choices and clean layout. Uses well-configured defaults with brand green and theme tokens effectively, but more library-default than distinctively custom.
• DE-02: Visual Refinement (4/6) - Subtle grid styling and good whitespace balance. Relies primarily on Plotly's built-in refinement rather than custom visual tweaks.
• DE-03: Data Storytelling (4/6) - Clear visual hierarchy through peak annotations and arrows highlighting dominant frequencies. Story is readable but relatively straightforward—no additional visual emphasis techniques.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct frequency spectrum plot using line chart with filled area.
• SC-02: Required Features (4/4) - All spec features present: frequency axis, amplitude axis, spectrum line, peak frequency annotations.
• SC-03: Data Mapping (3/3) - X-axis (0-500 Hz) and Y-axis (dB) correctly mapped. All 256 frequency bins displayed.
• SC-04: Title & Legend (3/3) - Title "spectrum-basic · plotly · anyplot.ai" correctly formatted. Legend appropriately disabled for single series.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all spectrum features: dominant peaks (50, 120, 300 Hz), noise floor, complete frequency coverage.
• DQ-02: Realistic Context (5/5) - Real signal processing scenario with realistic parameters: 1000 Hz sample rate, 1-second window. Neutral scientific context.
• DQ-03: Appropriate Scale (4/4) - Factually correct: FFT of synthetic signal with specified components. Amplitude scale (dB) and frequency values accurate.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Linear flow: imports → signal generation → FFT → plot → save. No unnecessary functions or classes.
• CQ-02: Reproducibility (2/2) - Uses np.random.seed(42) for reproducible noise generation.
• CQ-03: Clean Imports (2/2) - All imports necessary: os (THEME), numpy (FFT), plotly (plotting). No unused imports.
• CQ-04: Code Elegance (2/2) - Pythonic, well-structured. No over-engineering or fake functionality.
• CQ-05: Output & API (1/1) - Correct output format: plot-{THEME}.png and plot-{THEME}.html. Current Plotly API.

Library Mastery (10/10)

• LM-01: Idiomatic Usage (5/5) - Expert use of Plotly patterns: go.Figure(), go.Scatter(), update_layout(), annotations. High-level API used effectively.
• LM-02: Distinctive Features (5/5) - Leverages Plotly-specific features: fill='tozeroy' with custom alpha, annotation arrows, hover templates, hovermode unified.

Score Caps Applied

• None - No score caps apply. All criteria meet expected thresholds.

Strengths

• Excellent visual quality with perfect text legibility in both light and dark themes
• Flawless palette compliance using Okabe-Ito brand green with correct theme-adaptive chrome
• Professional data visualization with clear storytelling through peak frequency annotations
• Perfect spec compliance with realistic signal processing example data
• Expert use of Plotly-specific features including area fills and annotation arrows
• Clean, reproducible code with clear structure and explicit font sizing

Weaknesses

• DE-01: Design sophistication relies on well-configured defaults rather than distinctive custom aesthetic choices
• DE-03: Data storytelling is clear but straightforward—could emphasize the frequency components more dramatically through visual hierarchy

Issues Found

None - implementation meets all quality standards and exceeds initial review threshold.

AI Feedback for Next Attempt

N/A - Approved on first attempt at 93/100. No repairs needed.

Verdict: APPROVED

This implementation demonstrates excellent technical quality across all dimensions. Visual quality is flawless (30/30) with perfect text legibility, no overlap, and correct palette compliance in both light and dark themes. Spec compliance is perfect (15/15) with all required features present and correctly implemented. Data quality is excellent (15/15) with realistic signal processing context. Code quality is perfect (10/10) with clean, reproducible structure. Library mastery is perfect (10/10) with expert use of Plotly-specific features including distinctive annotation and fill techniques. The only minor opportunity for improvement is in design excellence (13/20), where the implementation relies on library defaults rather than custom aesthetic choices, and data storytelling could be more dramatic—but these do not prevent approval at this strong score.

---

Impl Tags: data-generation, annotations, html-export, alpha-blending