update(bump-basic): plotly — comprehensive quality review

[MarkusNeusinger]

Summary

Updated plotly implementation for bump-basic.

Changes

• Switched to F1 driver standings data (6 drivers, 8 races)
• Changed to per-driver color mapping dict for clearer code
• Better data with more rank crossovers
• Quality self-assessment: 93/100

Test Plan

• Preview images uploaded to GCS staging
• Implementation file passes ruff format/check
• Metadata YAML updated with current versions
• Automated review triggered

---

Generated with Claude Code /update command

[Copilot]

Pull request overview

This PR updates the plotly implementation for the bump-basic plot specification with enhanced Formula 1 driver standings data and improved visualization features.

Changes:

• Updated data from generic "Team" names to F1 driver standings with 6 drivers across 8 races
• Changed color mapping from list-based to dictionary-based for clearer code organization
• Added end-of-line driver labels and disabled legend for cleaner visualization
• Enhanced styling with white-bordered markers and horizontal gridlines

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.

File	Description
plots/bump-basic/specification.yaml	Updated timestamp and added timeseries/comparison tags
plots/bump-basic/specification.md	Added Formula 1 driver standings example to data requirements
plots/bump-basic/metadata/plotly.yaml	Updated library versions, generator, timestamp; set quality_score to null
plots/bump-basic/implementations/plotly.py	Complete rewrite with F1 data, dict-based colors, end-of-line labels, enhanced styling

[Copilot]

The updated timestamp uses a different format (T12:00:00Z) compared to the convention in specification.yaml files. Most specification.yaml files use ISO 8601 format without quotes (e.g., 2025-12-15T20:42:43Z), but this PR includes 2026-02-22T12:00:00Z. The timestamp format should be consistent with the rest of the codebase.

Suggested change

	updated: 2026-02-22T12:00:00Z
	updated: 2026-02-22T20:42:43Z

[Copilot]

The quality score in the header shows "/100" (missing the actual score), but the PR description mentions "Quality self-assessment: 93/100". The header should include the actual score (93/100) or be consistent with the metadata file which has quality_score set to null.

Suggested change

	Quality: /100 | Updated: 2026-02-22
	Quality: 93/100 | Updated: 2026-02-22

[Copilot]

The timestamp uses a different format ('+00:00' timezone suffix) compared to the convention in metadata YAML files. Most metadata files use 'Z' suffix for UTC timestamps (e.g., '2025-12-23T09:18:15Z'), not '+00:00'. This should be consistent with the rest of the codebase.

Suggested change

	updated: '2026-02-22T20:55:00+00:00'
	updated: '2026-02-22T20:55:00Z'

[Copilot]

Python version and library version fields are quoted strings in this update, while looking at the created field which is also quoted, this appears intentional. However, the quality_score field is set to null rather than omitted or set to a numeric value. According to the PR description mentioning "Quality self-assessment: 93/100", this should either be set to 93 or remain null if automated review will populate it later.

Suggested change

	quality_score: null
	quality_score: 93

[Copilot]

The docstring header format is inconsistent with the convention used in the codebase. Most implementations use """ pyplots.ai (with a space after the triple quotes), but this file uses """pyplots.ai (without a space). This should match the established convention.

Suggested change

	"""pyplots.ai
	""" pyplots.ai

[claude]

AI Review - Attempt 1/3

Image Description

The plot shows a bump chart tracking Formula 1 driver championship standings over 8 races (Bahrain through Silverstone). The Y-axis is inverted with rank 1 at the top, labeled "Championship Position". The X-axis shows race names labeled "Race". Six drivers are plotted with distinct colored lines and large circular markers with white edges: Verstappen (dark blue) starts P1 and drops to P2 by Silverstone; Hamilton (red) rises from P4 to P1; Norris (green) peaks at P1 mid-season then falls to P3; Leclerc (orange) declines from P2 to P4; Piastri (purple) drops from P3 to P5; Sainz (gray) stays at P6 throughout. End-of-line labels to the right identify each driver. The background is clean white with subtle horizontal gridlines and no vertical gridlines. The title reads "bump-basic · plotly · pyplots.ai".

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set: title 28pt, axis titles 22pt, ticks 18pt, annotations 16pt. All text clearly readable.
• VQ-02: No Overlap (6/6) - No text overlap. End-of-line labels are at different rank positions. Line crossings are inherent to the chart type.
• VQ-03: Element Visibility (6/6) - Markers size 14 with white edge (width 2), lines width 4. Well-adapted for 48 data points across 6 entities.
• VQ-04: Color Accessibility (3/4) - Custom palette with 6 distinct colors, but includes red (#e74c3c) and green (#2ecc71) which cross frequently — problematic for deuteranopia.
• VQ-05: Layout & Canvas (4/4) - Plot fills ~65% of canvas. Right margin of 120px accommodates end labels. Balanced proportions.
• VQ-06: Axis Labels & Title (2/2) - "Championship Position" and "Race" are descriptive. Units not applicable for ordinal rankings. Title matches required format.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) - Custom color palette starting with Python Blue, plotly_white template, white-edged markers, end-of-line labels instead of legend. Clearly above defaults but not publication-level polish.
• DE-02: Visual Refinement (4/6) - Uses plotly_white template, removed x-grid, custom y-grid opacity (0.08), adjusted right margin for labels. Shows intentional refinement.
• DE-03: Data Storytelling (3/6) - Data creates natural interest with crossovers and rank changes. End-of-line labels help interpretation. However, no visual emphasis guides the viewer to the key story (e.g., Hamilton's rise, Verstappen's decline). No focal point through color contrast or size variation.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct bump chart with lines connecting rankings over time periods.
• SC-02: Required Features (4/4) - Y-axis inverted ✓, distinct colors per entity ✓, dot markers at each period ✓, lines connect same entity ✓.
• SC-03: Data Mapping (3/3) - X = races (periods), Y = rank positions. All data correctly mapped and visible.
• SC-04: Title & Legend (3/3) - Title "bump-basic · plotly · pyplots.ai" matches format. End-of-line labels serve as legend with correct driver names.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows rank changes (multiple crossovers), stability (Sainz P6), dramatic rise (Hamilton P4→P1), decline (Piastri P3→P5), tight mid-pack competition. Excellent variety of ranking patterns.
• DQ-02: Realistic Context (5/5) - F1 championship standings with real driver names and actual circuit names. Neutral, comprehensible domain. Rankings are plausible for a fictional season.
• DQ-03: Appropriate Scale (4/4) - 6 drivers, 8 races, rankings 1-6. Sensible for F1 championship scenario.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Clean linear flow: imports → data → colors → figure creation → trace loop → layout → save. No functions or classes.
• CQ-02: Reproducibility (2/2) - All data is hardcoded/deterministic. No random elements.
• CQ-03: Clean Imports (2/2) - Only plotly.graph_objects as go imported and used.
• CQ-04: Code Elegance (2/2) - Clean loop for traces and annotations. Dictionary-based data is clear. Appropriate complexity.
• CQ-05: Output & API (1/1) - Saves as plot.png (1600×900×3 = 4800×2700). Also saves HTML. Uses current API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) - Proper use of go.Figure(), go.Scatter(), fig.add_trace(), fig.add_annotation(), fig.update_layout(). Idiomatic Graph Objects approach. Could have explored express API for comparison.
• LM-02: Distinctive Features (3/5) - HTML export with built-in interactivity (hover, zoom, pan) is distinctive to plotly. Annotation system with xanchor positioning is plotly-specific. However, doesn't leverage more advanced features like custom hover templates or animation frames.

Score Caps Applied

• None — no caps triggered

Strengths

• Perfect spec compliance with all required features (inverted Y-axis, distinct colors, markers, connected lines)
• Excellent data choice with F1 championship context — creates natural storytelling through rank crossovers
• End-of-line labels instead of legend is a smart design decision that reduces clutter
• Clean, well-structured code with deterministic data
• Subtle grid styling (y-axis only, low opacity) shows visual refinement

Weaknesses

• Red-green color pair (Hamilton/Norris) is problematic for colorblind users — lines cross frequently making them hard to distinguish
• No visual hierarchy or emphasis to guide the viewer's eye to the main story
• Could leverage more plotly-distinctive features (custom hover templates, animation)

Issues Found

1. VQ-04 MINOR: Red (#e74c3c) and green (#2ecc71) lines cross frequently, creating accessibility issues for colorblind users
   • Fix: Replace green with a colorblind-safe alternative like teal (#17becf) or a darker blue-green
2. DE-01 MODERATE: Design is above defaults but lacks publication-level polish
   • Fix: Consider strategic line thickness variation (thicker for key storyline drivers), or color saturation differences to create hierarchy
3. DE-03 MODERATE: No visual hierarchy guides the viewer to the key narrative
   • Fix: Use thicker/more saturated lines for the main storyline (e.g., Hamilton's rise) and thinner/more muted lines for static entities (e.g., Sainz). Or add a subtle annotation at the key lead change

AI Feedback for Next Attempt

Replace the green color (#2ecc71) with a colorblind-safe alternative to fix the red-green accessibility issue. Create visual hierarchy by varying line thickness or opacity — make the most dynamic storylines (Hamilton's rise, Norris's peak) more prominent and the static rankings (Sainz) more subdued. These changes would push the score above 90.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/3

Applied fixes based on AI review feedback.

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

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

The plot displays a bump chart of Formula 1 championship standings across 8 races (Bahrain through Silverstone) for 6 drivers. Verstappen (dark blue) holds rank 1 through Miami before dropping. Hamilton (red) starts at P4 and climbs to P1 by Silverstone. Norris (teal/cyan) rises dramatically from P5 to P1 at Imola before settling at P3. Leclerc (orange) starts at P2 and gradually falls to P4. Piastri (purple) and Sainz (gray) remain in the lower positions and are visually de-emphasized with thinner lines and lower opacity. The Y-axis is inverted with rank 1 at top. End-of-line labels identify each driver on the right margin. Title reads "bump-basic · plotly · pyplots.ai" top-left. Background is clean white with very subtle horizontal gridlines on the y-axis only. White marker borders add polish. Bold labels mark the most dynamic drivers (Hamilton, Norris).

Score: 91/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 28pt, axis titles 22pt, tick fonts 18pt, annotation labels 16pt, hover labels 16pt. All clearly readable.
• VQ-02: No Overlap (6/6) — No text overlap. End-of-line labels are well-separated at distinct rank positions. Race names on x-axis are spaced adequately.
• VQ-03: Element Visibility (5/6) — Lines and markers well-sized with visual hierarchy (widths 2-5, marker sizes 10-16). Sainz at 0.45 opacity is quite faded, though intentional for storytelling.
• VQ-04: Color Accessibility (4/4) — Colorblind-safe palette with explicit note about teal replacing green to avoid red-green issues. All 6 colors are distinguishable.
• VQ-05: Layout & Canvas (4/4) — Good margins (r=130 for labels, t=80, l=80, b=70). Plot fills canvas well with balanced whitespace. No content cut off.
• VQ-06: Axis Labels & Title (1/2) — "Race" and "Championship Position" are descriptive but lack units. For categorical/ordinal data, units are inherently N/A, but per strict criteria this scores 1.

Design Excellence (16/20)

• DE-01: Aesthetic Sophistication (6/8) — Custom colorblind-safe palette (not defaults), visual hierarchy via line width/marker size/opacity based on rank dynamism, end-of-line labels instead of legend, white marker borders, bold text for dynamic drivers. Clearly above "well-configured default" — this is strong, intentional design.
• DE-02: Visual Refinement (5/6) — plotly_white template, x-grid hidden, y-grid extremely subtle (rgba 0.06 opacity), transparent background, generous margins, white marker edge highlights. Significant refinement visible.
• DE-03: Data Storytelling (5/6) — Visual hierarchy through opacity/width/size based on rank dynamism guides viewer to the most interesting storylines (Hamilton's rise, Norris's surge). Static drivers (Sainz) are appropriately muted. The viewer immediately understands which championship battles matter.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct bump chart showing rankings over time with connected lines.
• SC-02: Required Features (4/4) — Y-axis inverted (rank 1 at top), distinct colors per entity, dot markers at each period, lines connect same entity across all periods, clear entity labels.
• SC-03: Data Mapping (3/3) — X = periods (races), Y = rank (championship position). All data visible.
• SC-04: Title & Legend (3/3) — Title "bump-basic · plotly · pyplots.ai" in correct format. End-of-line labels replace traditional legend — appropriate and clear for bump charts.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows rank changes (Norris 5→1), stability (Verstappen holds P1 early), stagnation (Sainz at P6), overtakes, convergence, and divergence patterns.
• DQ-02: Realistic Context (5/5) — Formula 1 driver standings with real driver names and real circuit names. Neutral sports topic. Specific rankings are fictional but plausible.
• DQ-03: Appropriate Scale (4/4) — 6 drivers and 8 races within spec recommendation (5-10 entities, 4-8 periods). Rankings 1-6 correct.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean Imports → Data → Plot → Save flow. No functions or classes.
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data, no random elements.
• CQ-03: Clean Imports (2/2) — Single import plotly.graph_objects as go, fully used.
• CQ-04: Code Elegance (2/2) — Dictionary-based visual hierarchy calculation is clean and purposeful. No fake UI or over-engineering.
• CQ-05: Output & API (1/1) — Saves as plot.png (4800×2700 via scale=3) and plot.html. Current API used.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Proper use of go.Figure(), go.Scatter(), fig.add_annotation(), fig.update_layout(). Standard Graph Objects approach which is appropriate for this level of customization.
• LM-02: Distinctive Features (3/5) — Custom hovertemplate with formatted position display ("P%{y}"), interactive HTML export, Plotly's built-in hover behavior. These are Plotly-specific features that add value beyond static output.

Score Caps Applied

• None — No cap conditions triggered.

Strengths

• Excellent visual hierarchy system based on rank dynamism (line width, marker size, opacity, bold labels)
• Clean end-of-line labeling instead of traditional legend — optimal for bump charts
• Thoughtful colorblind-safe palette with explicit consideration for accessibility
• Perfect spec compliance with all required features present
• Data tells a clear story with realistic F1 context
• Dual output (PNG + interactive HTML) leverages Plotly's strengths

Weaknesses

• Sainz line at 0.45 opacity is borderline too faded for comfortable viewing
• Axis labels lack units (though units are inherently N/A for this data type)
• Could leverage more advanced Plotly features (e.g., animation, range slider)

Issues Found

• No significant issues found. Implementation addresses all spec requirements with strong design.

AI Feedback for Next Attempt

Strong implementation with effective data storytelling through visual hierarchy. Minor refinements possible: consider slightly higher minimum opacity (0.5-0.55) for the most muted lines to ensure all data remains comfortably visible, and explore additional Plotly-specific features to strengthen library mastery.

Verdict: APPROVED