feat(plotly): implement bar-race-animated

[github-actions]

Implementation: bar-race-animated - python/plotly

Implements the python/plotly version of bar-race-animated.

File: plots/bar-race-animated/implementations/python/plotly.py

Parent Issue: #3653

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background — correct theme surface. Title "GDP Rankings · bar-race-animated · python · plotly · anyplot.ai" centered in dark text, clearly readable. X-axis label "GDP (Trillion USD) — 2023 snapshot" with units. Country names on y-axis and numeric tick labels in dark secondary text, all readable. Seven horizontal bars in Okabe-Ito canonical order: USA (#009E73 green, 26.1T), China (#D55E00 orange-red, 13.1T), Japan (#0072B2 blue, 7.7T), Germany (#CC79A7 pink, 7.2T), France (#56B4E9 sky-blue, 4.1T), UK (#E69F00 amber, 3.7T), Brazil (#F0E442 yellow, 3.4T). Value labels outside bars in dark ink. Subtle vertical grid lines. Bars sorted descending (USA top). All text readable against light background — PASS.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct. Title and all labels rendered in light tokens (#F0EFE8 / #B8B7B0), clearly visible against dark surface. No dark-on-dark failures. Bar colors are identical to light render (data colors theme-independent as required). Value labels use INK token for dark mode (#F0EFE8) — visible. All text readable against dark background — PASS.

Both renders pass the theme-readability check.

Score: 86/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All sizes explicitly set: title 28px, axis labels 22px, tick labels 18-20px, bar value labels 18px; readable in both themes
• VQ-02: No Overlap (6/6) — No collisions; bars, labels, and tick marks well-spaced
• VQ-03: Element Visibility (6/6) — All 7 bars visible; Okabe-Ito colors clearly distinct
• VQ-04: Color Accessibility (2/2) — CVD-safe Okabe-Ito palette; no red-green sole signal
• VQ-05: Layout & Canvas (3/4) — Good proportions; minor: right side has visible empty space as USA bar reaches only ~85% of x-axis range
• VQ-06: Axis Labels & Title (2/2) — Title correctly formatted; x-axis label has units ("Trillion USD") and snapshot year
• VQ-07: Palette Compliance (2/2) — USA (first entity) = #009E73; Okabe-Ito canonical order; backgrounds correct (#FAF8F1 light / #1A1A17 dark); data colors identical across themes

Design Excellence (9/20)

• DE-01: Aesthetic Sophistication (4/8) — Clean well-configured appearance with correct palette and no legend; but no typographic weight hierarchy, no rank number labels, no emphasis on key data moments — well-configured default
• DE-02: Visual Refinement (2/6) — Grid at 25% opacity exceeds the 10-15% style guide; no spine removal on axes; minimal refinement beyond colors
• DE-03: Data Storytelling (3/6) — Sorted bars communicate ranking; animation in HTML is inherently storytelling; but static PNG lacks any emphasis on interesting dynamics (China's rise, Germany overtaking Japan)

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Animated horizontal bar chart with full Plotly animation API
• SC-02: Required Features (4/4) — Bars sorted per frame, entity labels on y-axis, year slider as time indicator, play/pause controls, consistent entity colors across frames
• SC-03: Data Mapping (3/3) — X=GDP, Y=countries sorted by GDP per frame, horizontal orientation
• SC-04: Title & Legend (3/3) — "GDP Rankings · bar-race-animated · python · plotly · anyplot.ai"; no legend (appropriate)

Data Quality (13/15)

• DQ-01: Feature Coverage (6/6) — Multiple entities, time evolution, ranking reversals, value display, animated transitions
• DQ-02: Realistic Context (5/5) — Country GDP over time is a canonical, neutral bar-race use case
• DQ-03: Appropriate Scale (2/4) — Japan shows 7.7T (actual 2023 ~4.2T, 84% over), Germany 7.2T (actual ~4.5T, 60% over), France 4.1T (actual ~2.9T, 41% over); additionally Germany surpassed Japan in 2023 but data shows Japan>Germany, reversing the historical fact

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat: imports → data → frames → figure → save
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set
• CQ-03: Clean Imports (2/2) — os, numpy, pandas, plotly.graph_objects all used
• CQ-04: Code Elegance (2/2) — List comprehensions for frames, clean animation vs PNG separation
• CQ-05: Output & API (1/1) — plot-{THEME}.png + plot-{THEME}.html with correct naming

Library Mastery (10/10)

• LM-01: Idiomatic Usage (5/5) — go.Figure(frames=[...]) with go.Frame objects; updatemenus and sliders are Plotly's canonical animation API
• LM-02: Distinctive Features (5/5) — Frames + play/pause updatemenus + year slider are Plotly-exclusive; impossible to replicate in static libraries

Score Caps Applied

• None (DE-01=4 > 2, so the "correct but boring" cap does not apply)

Strengths

• Full Plotly animation: go.Figure(frames=...) with updatemenus (play/pause) and sliders (year scrubber) — expert idiomatic usage of Plotly's animation API
• Correct Okabe-Ito palette in canonical order; USA (first entity) gets #009E73; all 7 colors used
• Theme adaptation fully correct: all chrome tokens (PAGE_BG, INK, INK_SOFT, GRID) flip correctly; no dark-on-dark failures
• Clean flat code with seed, correct output files, all font sizes explicitly set
• HTML deliverable satisfies all interactive spec requirements (play/pause, time indicator, smooth transitions)

Weaknesses

• Grid at 25% opacity — reduce to 10-15% per style guide (rgba(26,26,23,0.10) / rgba(240,239,232,0.10))
• No spine removal on the PNG axes — remove top/right axis lines for visual refinement
• Static PNG lacks storytelling: add rank number labels (Add workflow diagram for new prototype discovery #1, Add Claude Code GitHub Workflow #2...) alongside country names, or a subtitle noting key insights; the PNG should hint at the race narrative even without animation
• DQ-03 data accuracy: Japan/Germany growth rates produce values ~60-80% above 2023 actual nominal GDP; also Germany overtook Japan in 2023 so the final ranking order is historically wrong — correct the growth rates so Japan ~4-5T and Germany ~4-5T with Germany slightly above Japan by the final year

Issues Found

1. DE-02 LOW: Grid opacity at 25% too high; axes have no spine removal
   • Fix: Change GRID to rgba(26,26,23,0.10) / rgba(240,239,232,0.10); add fig_png.update_layout(xaxis_showline=False, yaxis_showline=False) or hide top/right spines
2. DE-03 LOW: Static PNG tells no story beyond "here are final rankings"
   • Fix: Add rank position labels ("Add workflow diagram for new prototype discovery #1", "Add Claude Code GitHub Workflow #2"...) at the start of each bar inside the plot, or a subtitle like "2023 final standings — China rose from 5th in 1995 to 2nd"
3. DQ-03 ACCURACY: Japan and Germany growth rates are too high; final ranking has Japan ahead of Germany (historically incorrect for 2023)
   • Fix: Use Japan growth rate of ~0.8%/year (stagnant), Germany ~2.5%/year, so by 2023: Japan ~5T, Germany ~5.5T with Germany just above Japan

AI Feedback for Next Attempt

Three improvements needed: (1) Reduce grid opacity from 25% to 10% and remove plot axis lines for visual refinement. (2) Add rank number labels ("#1" through "#7") alongside or inside bars to reinforce the racing/ranking narrative in the static PNG. (3) Fix GDP growth rates for Japan (too optimistic — Japan has had minimal nominal growth since 1995; aim for 2023 value ~4-5T) and Germany (aim for ~4.5-5T, slightly above Japan to reflect the 2023 reversal). These three fixes address the DE-02, DE-03, and DQ-03 gaps that prevented reaching 90.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

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

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Horizontal bar chart showing 7 countries sorted descending by 2023 GDP. USA leads at 26.1T in #009E73 (brand green), followed by China in #D55E00 (vermillion), Germany in #CC79A7 (reddish purple), Japan in #0072B2 (blue), UK in #E69F00 (orange), France in #56B4E9 (sky blue), and Brazil in #F0E442 (yellow). Rank labels (#1–#7) with GDP values appear outside bars in dark INK text. Title "GDP Rankings · bar-race-animated · python · plotly · anyplot.ai" is centered in 28px dark text. A subtitle "China surges from last to 2nd; Germany overtakes Japan in the final years" appears below the title in smaller gray text. X-axis label "GDP (Trillion USD) — 2023 snapshot" is readable. All text is clearly legible against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): Near-black background (#1A1A17). Identical bar colors to the light render — data colors do not change, confirming correct Okabe-Ito usage. Title, subtitle, axis labels, tick labels, and rank/value labels outside bars all render in light cream/off-white text. No dark-on-dark failures observed — all text elements are clearly distinguishable against the near-black surface. Brand green #009E73 for the USA bar remains vivid. Legibility verdict: PASS.

Both paragraphs confirmed. Both renders pass the theme-readability check.

Score: 88/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 28px, axis labels 22px, tick labels 18px, bar labels 18px); readable in both themes. Minor deduction: subtitle rendered at smaller size than the standard text hierarchy.
• VQ-02: No Overlap (6/6) — No overlapping elements in either render.
• VQ-03: Element Visibility (6/6) — All bars clearly visible; value/rank labels positioned outside bars for readability.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is CVD-safe; no red-green-only encoding.
• VQ-05: Layout & Canvas (4/4) — 1600×900 at scale=3 (4800×2700px); balanced margins; nothing cut off.
• VQ-06: Axis Labels & Title (2/2) — X-axis "GDP (Trillion USD) — 2023 snapshot" is descriptive with units; title correctly formatted.
• VQ-07: Palette Compliance (2/2) — USA (#009E73) is first; Okabe-Ito order follows for all 7 countries; light bg #FAF8F1, dark bg #1A1A17; all chrome tokens flip correctly between themes.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (4/8) — Well-configured defaults with correct Okabe-Ito palette. Rank labels are a functional addition but the overall design stays at the configured-default level without typographic or hierarchical innovation.
• DE-02: Visual Refinement (3/6) — Margins are generous and layout is clean, but the grid opacity is set to 0.25 (style guide specifies 0.10) making grid lines slightly more prominent than intended.
• DE-03: Data Storytelling (4/6) — The subtitle explicitly identifies the key narrative; rank labels provide visual hierarchy. The animation (HTML output) delivers the race story dynamically. The static PNG is limited to the final snapshot but the subtitle saves the storytelling.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Animated horizontal bar chart race with per-frame sorted bars.
• SC-02: Required Features (4/4) — Bars sorted at each frame ✓; entity labels consistently attached ✓; year indicator via slider ✓; play/pause controls ✓; configurable frame duration (600ms) and transition (300ms) ✓; consistent entity colors across all frames ✓.
• SC-03: Data Mapping (3/3) — Horizontal orientation, GDP on x-axis, countries on y-axis, 29 time points.
• SC-04: Title & Legend (3/3) — "GDP Rankings · bar-race-animated · python · plotly · anyplot.ai" matches required format. No legend needed; entity identity conveyed by y-axis labels.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows multiple entities competing over time with rank changes, featuring both dominant leaders (USA) and dramatic risers (China).
• DQ-02: Realistic Context (5/5) — Major economy GDP data is real, comprehensible, and politically neutral (economics, not political comparisons).
• DQ-03: Appropriate Scale (4/4) — GDP values (USA ~26T, China ~13T, Japan ~4T in 2023) match approximately correct real-world proportions with realistic growth trajectories.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script: constants → data generation → animation frames → animated figure → PNG figure → save.
• CQ-02: Reproducibility (2/2) — np.random.seed(42) present.
• CQ-03: Clean Imports (2/2) — os, numpy, pandas, plotly.graph_objects — all used, nothing extraneous.
• CQ-04: Code Elegance (2/2) — Appropriate complexity; clean separation of animation and PNG figures; no fake UI elements.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; correct dimensions (width=1600, height=900, scale=3).

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Uses go.Frame, go.Figure(frames=...), updatemenus (play/pause), and sliders — all are the recommended Plotly patterns for animation.
• LM-02: Distinctive Features (4/5) — Plotly animation with timeline slider and play/pause controls is genuinely distinctive to this library and cannot be replicated in static libraries. Small deduction: animated hover templates in frames are not customized.

Score Caps Applied

• None — no caps triggered.

Strengths

• Full Plotly animation API used correctly: go.Frame array, updatemenus play/pause, sliders timeline scrubber — these are distinctly Plotly features
• Perfect spec compliance: sorted bars per frame, consistent entity colors, visible time indicator, configurable animation speed
• Both renders theme-adapt correctly; GRID, INK, INK_SOFT, PAGE_BG, and ELEVATED_BG tokens all wired through to every relevant layout element
• Realistic GDP data with accurate proportions and genuine rank changes (China's rise, Germany overtaking Japan) makes for compelling animation content

Weaknesses

• Grid opacity set to 0.25 instead of the style guide-specified 0.10 — grid lines are 2.5× more prominent than intended; fix: GRID = "rgba(26,26,23,0.10)" / "rgba(240,239,232,0.10)"
• DE-01 remains at configured-default level: no typographic hierarchy beyond font sizes, no emphasis on the leading bar or the fastest-rising entity
• Only 7 entities in the dataset; specification recommends 10-20 for richer competitive dynamics and a more engaging race

Issues Found

1. GRID opacity non-compliant: Uses rgba(…,0.25) instead of rgba(…,0.10)
   • Fix: GRID = "rgba(26,26,23,0.10)" if THEME == "light" else "rgba(240,239,232,0.10)"
2. DE-01 LOW: No visual differentiation beyond palette — leader bar and fastest-riser could be emphasized
   • Fix: Bold/larger text for the Add workflow diagram for new prototype discovery #1 bar label, or slight bar edge highlight on the top-ranked country
3. Entity count below recommended range: 7 countries vs 10-20 recommended
   • Fix: Add India, Canada, South Korea, Italy for richer competitive dynamics

AI Feedback for Next Attempt

Primary fix: correct the GRID opacity from 0.25 to 0.10. Secondary: add 3-5 more countries to reach the recommended 10+ entity count. Optional design improvement: visually distinguish the top-ranked bar (e.g., slightly bolder label text or a thin white border) to create a focal point. Current implementation is already high quality — the grid fix alone would polish it to near-perfect.

Verdict: APPROVED