feat(altair): implement ecdf-basic

[github-actions]

Implementation: ecdf-basic - python/altair

Implements the python/altair version of ecdf-basic.

File: plots/ecdf-basic/implementations/python/altair.py

Parent Issue: #976

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot renders on a warm off-white #FAF8F1 background. A single brand-green (#009E73) ECDF step-function line (strokeWidth=3.5) climbs from 0% at ~20ms to 100% at ~260ms, with a steep sigmoid rise concentrated around 100–150ms. The x-axis is labeled "API Response Time (ms)" and the y-axis shows "Cumulative Proportion" as percentages (0%–100% in 10% increments). Both-axis grid lines are present at 10% opacity — subtle and non-dominant. The title "ecdf-basic · altair · anyplot.ai" appears in dark ink at the top. There is no legend box (single-series, appropriate). All title, axis label, and tick text is clearly readable against the light background. No view border box (strokeWidth=0). Legibility verdict: PASS.

Dark render (plot-dark.png): The same plot on a warm near-black #1A1A17 background. The ECDF line is identically #009E73 — no color shift from the light render. The title appears in light cream (#F0EFE8) and is clearly readable at the top. Axis labels and tick labels are rendered in light gray tones (#B8B7B0 / #F0EFE8) and are distinctly visible against the dark surface. Grid lines flip to a light-tinted 10% opacity. No dark-on-dark failure observed — all chrome elements correctly adapt to the dark theme. Legibility verdict: 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	9	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	86	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 28px, axis labels 22px, tick labels 18px; all text readable in both themes
• VQ-02: No Overlap (6/6) — No overlapping text or data elements
• VQ-03: Element Visibility (6/6) — strokeWidth=3.5 is appropriate for the 4800×2700px canvas; step line clearly visible in both renders
• VQ-04: Color Accessibility (2/2) — Single CVD-safe Okabe-Ito brand green; no red-green-only signaling
• VQ-05: Layout & Canvas (4/4) — Chart fills canvas well with balanced margins; nothing cut off
• VQ-06: Axis Labels & Title (2/2) — "API Response Time (ms)" includes units; "Cumulative Proportion" is descriptive
• VQ-07: Palette Compliance (2/2) — First (only) series is #009E73; light bg #FAF8F1, dark bg #1A1A17; all chrome theme-correct in both renders

Design Excellence (9/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured library default: brand green, proper theme handling, clean look. No intentional visual hierarchy or design layering beyond the baseline template.
• DE-02: Visual Refinement (3/6) — strokeWidth=0 removes the view border box (clean L-frame via domain lines), gridOpacity=0.10 is genuinely subtle. Above default but not fully polished.
• DE-03: Data Storytelling (2/6) — Data is displayed correctly but no visual emphasis: no reference line at median (~120ms), no percentile callout, no focal point to guide the viewer to an insight.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — mark_line(interpolate="step-after") is the correct ECDF step function
• SC-02: Required Features (4/4) — Step function ✓, Y-axis [0,1] as percentages ✓, grid lines ✓, distinct line style (brand green) ✓
• SC-03: Data Mapping (3/3) — X=latency values, Y=cumulative proportion [0–1]; full data range visible
• SC-04: Title & Legend (3/3) — Exact format "ecdf-basic · altair · anyplot.ai"; no legend (single series, appropriate)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 250 observations (within spec's 50–500 ideal range); shows full ECDF from 0% to 100% with realistic distribution shape
• DQ-02: Realistic Context (5/5) — API response latency from a production web service — neutral, real-world, immediately comprehensible
• DQ-03: Appropriate Scale (4/4) — Normal(μ=120ms, σ=35ms) clipped at 20ms; realistic for web API latency; values ~20–260ms are domain-appropriate

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat Imports → Tokens → Data → Chart → Save; no functions or classes
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set
• CQ-03: Clean Imports (2/2) — os, altair, numpy, pandas — all used
• CQ-04: Code Elegance (2/2) — Clean, idiomatic Altair; appropriate complexity; no over-engineering
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html with scale_factor=3.0

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Well-executed Altair patterns: typed encodings (:Q), alt.X/alt.Y with alt.Axis, alt.Title, configure_view/configure_axis/configure_title for theming; above default
• LM-02: Distinctive Features (3/5) — .interactive() (zoom/pan), hover tooltips with format strings, and interpolate="step-after" are Altair-native features; uses them correctly

Score Caps Applied

• None

Strengths

• Correct ECDF step function using interpolate="step-after" — the most important spec requirement
• Complete and correct theme adaptation (light/dark) with all chrome tokens properly threaded through configure_* calls
• Realistic, neutral data context (API latency) with np.random.seed(42) for reproducibility
• Axis labeled with units ("ms"), Y-axis displayed as percentages with explicit 11-tick formatting (.0%)
• Interactive tooltips and HTML output leveraging Altair's native interactivity strengths

Weaknesses

• No visual emphasis or focal point — no reference line at the median (~120ms), no 90th/95th percentile annotation to guide the viewer to an insight
• Design feels like a well-themed default rather than a purposeful composition — no intentional hierarchy beyond color
• Grid shows on both axes; for a line chart the style guide prefers Y-axis-only grid to reduce visual noise

Issues Found

1. DE-03 LOW: No data storytelling — the ECDF is displayed but the viewer must do all interpretive work themselves.
   • Fix: Add a vertical reference line at the median (~120ms) or mark the 90th/95th percentile with a subtle annotation rule + label
2. DE-01 BELOW POTENTIAL: The design is correct but generic — only the brand color differentiates it from defaults.
   • Fix: Consider removing the x-axis grid lines (Y-axis only for line charts per style guide), or add a subtle shaded region below the ECDF curve to improve aesthetic sophistication

AI Feedback for Next Attempt

The implementation is technically excellent and passes all spec/data/code checks with full marks. To reach 90+, focus on Design Excellence: (1) add a vertical reference rule at the p50 (~120ms) and/or p90 percentile with a small text annotation to create a clear focal point and tell a story about latency distribution; (2) restrict grid to Y-axis only (gridOpacity on X-axis = 0) for cleaner line-chart aesthetics; (3) consider adding a subtle filled area under the ECDF curve with low opacity for visual weight. These changes would push DE from 9→14+ without touching the correct implementation logic.

Verdict: REJECTED