feat(plotly): implement scatter-basic

[github-actions]

Implementation: scatter-basic - python/plotly

Implements the python/plotly version of scatter-basic.

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

Parent Issue: #611

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot renders on a warm off-white background consistent with #FAF8F1. The title "scatter-basic · plotly · anyplot.ai" appears in dark ink, centered at the top. The x-axis label "Study Hours per Day" and y-axis label "Exam Score (%)" are both dark and clearly readable. Tick labels (0, 2, 4, 6, 8, 10 on x; 40, 50, … 100 on y) use the secondary ink tone and are all legible. Grid lines are extremely subtle (10% opacity), barely visible. The 160 data markers render in #009E73 (brand green) at opacity 0.7 with white edges for definition; a clear upward trend is visible from lower-left to upper-right with moderate clustering in the 3–5 hour range. All text is readable against the light background. Legibility: PASS.

Dark render (plot-dark.png): The plot renders on a warm near-black background consistent with #1A1A17. The title and all axis labels/tick labels switch to light off-white/secondary ink tokens and remain clearly readable — no dark-on-dark failures observed. The data markers are identical in color to the light render (#009E73 brand green with white edges), confirming that only chrome flips between themes. Brand green reads well on the near-black surface. Legibility: PASS.

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

Score: 86/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title=28px, axis=22px, ticks=18px; perfectly readable in both themes
• VQ-02: No Overlap (6/6) — No text or label overlap; single-series plot with no legend
• VQ-03: Element Visibility (6/6) — Marker size 13 + opacity 0.7 appropriate for 160 points; white edges aid definition in denser regions
• VQ-04: Color Accessibility (2/2) — Single series in CVD-safe #009E73; adequate contrast on both backgrounds
• VQ-05: Layout & Canvas (4/4) — Balanced margins, data fills chart area, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — "Study Hours per Day" and "Exam Score (%)" — descriptive with units
• VQ-07: Palette Compliance (2/2) — #009E73 first series; #FAF8F1/#1A1A17 backgrounds; all chrome tokens theme-correct in both renders

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library default: brand color, warm background, marker edges. Not exceptional — lacks design hierarchy, trend line, or any element that would impress a visualization professional
• DE-02: Visual Refinement (4/6) — Very subtle grid (10% opacity), L-shaped spines (showline=True, mirror=False), generous margins; clearly above DE-02=2 default but not fully polished
• DE-03: Data Storytelling (2/6) — The positive correlation is visible from data distribution alone, but no visual hierarchy, trend line, or focal point guides the viewer toward an insight

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct basic scatter plot
• SC-02: Required Features (4/4) — Transparency 0.7, axis labels, grid lines, balanced point size — all spec requirements present
• SC-03: Data Mapping (3/3) — Study hours on x (independent), exam scores on y (dependent); full data range visible
• SC-04: Title & Legend (3/3) — "scatter-basic · plotly · anyplot.ai" correct; no legend appropriate for single series

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows correlation, distribution, clustering, and boundary outliers (scores clipped at 100)
• DQ-02: Realistic Context (5/5) — Study hours vs exam scores: real, neutral, comprehensible educational scenario
• DQ-03: Appropriate Scale (4/4) — 1–10 hours/day, 40–100% scores; clipped values realistic; noise level appropriate

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → data → plot → save; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42)
• CQ-03: Clean Imports (2/2) — os, numpy, plotly.graph_objects — all used
• CQ-04: Code Elegance (2/2) — Clean, Pythonic, appropriate complexity
• CQ-05: Output & API (1/1) — plot-{THEME}.png + plot-{THEME}.html; current Plotly API

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Correct go.Figure + go.Scatter pattern, proper update_layout, hovertemplate — idiomatic but not advanced
• LM-02: Distinctive Features (2/5) — hovertemplate and HTML export are Plotly-specific but basic; no use of shapes, updatemenus, or other capabilities that distinguish Plotly from static libraries

Score Caps Applied

• None — DE-01=4 > 2 and DE-02=4 > 2, so the "correct but boring" cap (75) does not trigger; no other caps apply

Strengths

• Perfect spec compliance: all required features present (scatter type, opacity 0.7, descriptive labels with units, grid lines)
• Perfect code quality: KISS structure, seed set, clean imports, correct plot-{THEME}.png + plot-{THEME}.html output
• Explicit font sizing meets pixel-based requirements exactly (28/22/18px for title/axis/ticks)
• Full theme-adaptive chrome: #FAF8F1/#1A1A17 backgrounds and all INK/INK_SOFT/GRID tokens correctly applied in both renders
• Realistic, neutral educational data (study hours vs exam scores) with proper correlation and clipped scores

Weaknesses

• DE-03 LOW (2/6): No visual hierarchy or data storytelling — positive correlation is visible but nothing guides the viewer; adding a regression/trend line via go.Scatter(mode='lines') with np.polyfit would score +2–4
• DE-01 moderate (4/8): Design is a well-configured default, not publication-ready — lacks sophistication; a subtle annotation showing the correlation coefficient (e.g. "r = 0.87") or slight marker opacity variation by study-hour density would elevate this
• LM-02 LOW (2/5): Only basic Plotly features used; could leverage fig.add_shape for a trend line, go.layout.Shape for reference lines, or custom hover with customdata for richer statistics

Issues Found

1. DE-03 LOW: No visual hierarchy — scatter shows correlation but viewer must find the story themselves
   • Fix: Add a linear regression trend line using np.polyfit rendered as go.Scatter(mode='lines') with low opacity; this also raises LM-02
2. DE-01 MODERATE: Well-configured but generic — no design element beyond correct palette + background
   • Fix: Add a small text annotation showing correlation strength (e.g. "r = 0.87, n = 160"); or vary marker size slightly to indicate density
3. LM-02 LOW: Basic hovertemplate + HTML export; not distinctive
   • Fix: The trend line approach above naturally uses Plotly shapes or a second Scatter trace, which is distinctly Plotly — two birds, one stone

AI Feedback for Next Attempt

Add a linear regression trend line (compute with np.polyfit, render as a second go.Scatter(mode='lines') in a muted color like INK_SOFT at ~0.5 opacity) to create visual hierarchy and guide the viewer toward the positive correlation. Optionally, add a small annotation with the correlation coefficient. This single change addresses DE-03 (+4), DE-01 (+1), and LM-02 (+1) simultaneously for an estimated score of ~92.

Verdict: REJECTED