feat(plotly): implement scatter-animated-controls

[github-actions]

Implementation: scatter-animated-controls - plotly

Implements the plotly version of scatter-animated-controls.

File: plots/scatter-animated-controls/implementations/plotly.py

Parent Issue: #3067

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a Gapminder-style animated scatter visualization showing 8 countries across 4 regions (North, South, East, West). The x-axis shows "GDP per Capita ($)" ranging from 0 to 40k, and the y-axis shows "Life Expectancy (years)" ranging from 50 to 85. Bubble sizes represent population. The first animation frame (Year 2000) is shown with a large watermark "2000" in the top-right corner. Four colors are used: blue for North, yellow/gold for South, red/coral for East, and green for West. Play/Pause buttons are visible at the bottom-left, and a timeline slider spans the bottom showing years 2000-2020. The current year "Year: 2000" is displayed below the x-axis label. The title "scatter-animated-controls · plotly · pyplots.ai" is centered at the top.

Quality Score: 92/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 32pt, axis labels at 24pt, ticks at 18pt, all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements, legend well-positioned in top-left
• VQ-03: Element Visibility (7/8) - Markers well-sized with size_max=80, good opacity at 0.85, though some markers in the low-GDP cluster overlap slightly
• VQ-04: Color Accessibility (5/5) - Four distinct colors (blue, yellow, red, green) with good contrast against white background
• VQ-05: Layout Balance (4/5) - Good use of canvas, slight imbalance with most data clustered on left side of plot area
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "GDP per Capita ($)" and "Life Expectancy (years)"
• VQ-07: Grid & Legend (0/2) - Grid is very subtle which is good, but legend could be positioned better to not overlap plot area

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct animated scatter plot
• SC-02: Data Mapping (5/5) - GDP on X, Life Expectancy on Y, Population as size, Region as color
• SC-03: Required Features (5/5) - Play/Pause controls, timeline slider, year display (watermark + slider label), smooth transitions
• SC-04: Data Range (3/3) - Axes show all data with appropriate padding
• SC-05: Legend Accuracy (2/2) - Legend correctly shows Region categories
• SC-06: Title Format (2/2) - Uses exact format "scatter-animated-controls · plotly · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows growth trends over time, regional groupings, population variation; could show more dramatic changes
• DQ-02: Realistic Context (7/7) - Gapminder-style country data with GDP, life expectancy, and population - classic, neutral scenario
• DQ-03: Appropriate Scale (4/5) - GDP 3k-20k, life expectancy 58-78 years, populations 20-120M are reasonable; some base values could be more varied

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Clean imports → data → plot → save structure, no functions/classes
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only numpy, pandas, plotly.express imported and used
• CQ-04: No Deprecated API (1/1) - Uses current Plotly Express API
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (3/5 pts)

• LF-01: Distinctive Features (3/5) - Good use of px.scatter animation_frame, custom updatemenus for Play/Pause, custom sliders. Could use hover_data more extensively or add animation trails.

Strengths

• Excellent Gapminder-style visualization with all key elements: play/pause controls, timeline slider, year watermark
• Clean code structure with realistic simulated country data showing growth over 20 years
• Proper use of Plotly's animation features including smooth transitions (cubic-in-out easing)
• Good accessibility with distinct colors and proper font sizing throughout
• Both PNG and HTML outputs generated for static and interactive viewing

Weaknesses

• Some bubble overlap in the lower-left cluster makes individual countries harder to distinguish in year 2000
• Legend positioned inside the plot area could potentially overlap with data points in some frames
• Year watermark annotation shows static "2000" and doesn't update with animation frames

Verdict: APPROVED