feat(bokeh): implement scatter-animated-controls

[github-actions]

Implementation: scatter-animated-controls - bokeh

Implements the bokeh version of scatter-animated-controls.

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

Parent Issue: #3067

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a Gapminder-style scatter plot showing 15 countries with GDP per Capita (USD) on the x-axis (ranging from 0 to 80,000) and Life Expectancy (Years) on the y-axis (ranging from 40 to 95). The data points are color-coded by region using five distinct colors: blue (North), yellow (South), red (East), teal (West), and green (Central). Bubble sizes vary to represent population. A large, faded "2014" year indicator is visible in the bottom-right corner. The title "scatter-animated-controls · bokeh · pyplots.ai" appears at the top-left. The background is a light gray (#fafafa) with subtle dashed grid lines. This is a static PNG snapshot showing the middle year (2014) of the animation.

Quality Score: 88/100

Criteria Checklist

Visual Quality (35/40 pts)

• VQ-01: Text Legibility (8/10) - Title, axis labels, and tick labels are readable but could be slightly larger for the canvas size
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (7/8) - Bubbles are well-sized with good alpha (0.7), but some smaller bubbles could be slightly larger
• VQ-04: Color Accessibility (5/5) - Colorblind-safe palette with good contrast between regions
• VQ-05: Layout Balance (4/5) - Good use of canvas, but the year label could be more prominently centered
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "GDP per Capita (USD)" and "Life Expectancy (Years)"
• VQ-07: Grid & Legend (1/2) - Grid is subtle (alpha 0.3), but legend is only visible in HTML version, not in PNG export

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct animated scatter plot with bubble sizes
• SC-02: Data Mapping (5/5) - X=GDP, Y=Life Expectancy, Size=Population, Color=Region correctly mapped
• SC-03: Required Features (4/5) - Play/pause button, timeline slider, year display all present in HTML; PNG is static snapshot as expected
• SC-04: Data Range (3/3) - Axes show all data points with appropriate ranges
• SC-05: Legend Accuracy (1/2) - Legend exists in HTML via Div element but not visible in PNG export
• SC-06: Title Format (2/2) - Correct format: "scatter-animated-controls · bokeh · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows variation in GDP, life expectancy, population, and regional groupings; good spread of data
• DQ-02: Realistic Context (7/7) - Gapminder-style country development data is a perfect, neutral, real-world scenario
• DQ-03: Appropriate Scale (4/5) - GDP values (5k-60k) and life expectancy (58-77 years) are realistic, though some countries could show more extreme values

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Linear structure with clear sections: data generation, figure creation, callbacks, layout
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Uses current Bokeh API
• CQ-05: Output Correct (0/1) - Saves both plot.html and plot.png correctly

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Good use of ColumnDataSource, CustomJS callbacks, Slider, Button widgets, and HoverTool. Could utilize more advanced Bokeh features like linked panning or selection tools.

Strengths

• Excellent Gapminder-style visualization with realistic country development data
• Proper use of Bokeh's interactive widgets (Button, Slider) with CustomJS callbacks for animation
• Clean implementation of play/pause functionality with proper interval management
• Good colorblind-safe palette for regional differentiation
• Appropriate bubble sizing based on population with good alpha transparency
• Year label as large background text follows spec requirement
• Both HTML (interactive) and PNG (static snapshot) outputs generated

Weaknesses

• Legend is not visible in PNG export - only shown via HTML Div element which is not rendered in export_png()
• The PNG shows only the static snapshot without any indication of the animation controls (expected, but legend should still be visible)
• Font sizes could be slightly larger for optimal readability at 4800x2700 (title is 42pt but could be larger)

Verdict: REJECTED

The implementation is solid and well-structured with good use of Bokeh's interactive features. The main issue is that the legend is not visible in the PNG export because it's implemented as an HTML Div rather than being integrated into the Bokeh figure itself. For a score of 90+, the legend should be visible in the static export as well.

[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 shows a Gapminder-style scatter plot with the title "scatter-animated-controls · bokeh · pyplots.ai" at the top left. The X-axis displays "GDP per Capita (USD)" ranging from 0 to 80,000, and the Y-axis shows "Life Expectancy (Years)" ranging from 40 to 95. There are 15 colored bubbles representing countries, with varying sizes indicating population. Colors include blue, yellow, green, red/coral, and teal representing 5 different regions. A large watermark "2014" appears in light gray in the lower right area, indicating the current year frame. The legend in the top right corner is extremely small and nearly illegible. The background is a light gray (#fafafa) with subtle dashed grid lines.

Quality Score: 85/100

Criteria Checklist

Visual Quality (33/40 pts)

• VQ-01: Text Legibility (8/10) - Title, axis labels, and tick marks are readable but the legend text in the top right is too small to read
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (7/8) - Bubbles are well-sized and visible with good alpha, but some smaller bubbles are hard to distinguish
• VQ-04: Color Accessibility (4/5) - Five distinct colors are used, reasonably distinguishable but yellow on light background is slightly low contrast
• VQ-05: Layout Balance (3/5) - Good canvas utilization but legend is tiny and cut off in corner
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "GDP per Capita (USD)" and "Life Expectancy (Years)"
• VQ-07: Grid & Legend (1/2) - Grid is subtle and appropriate, but legend is nearly invisible

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct animated scatter plot (PNG shows static snapshot)
• SC-02: Data Mapping (5/5) - GDP on X, Life Expectancy on Y, Population as size, Region as color
• SC-03: Required Features (4/5) - Has animation controls in HTML, year label visible, but PNG legend is poorly rendered
• SC-04: Data Range (3/3) - Axes show full data range appropriately
• SC-05: Legend Accuracy (1/2) - Legend exists but is too small to verify accuracy
• SC-06: Title Format (2/2) - Correct format: "scatter-animated-controls · bokeh · pyplots.ai"

Data Quality (19/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows countries with varying GDP, life expectancy, and population; good spread but could show more temporal variation in static frame
• DQ-02: Realistic Context (7/7) - Gapminder-style country development data is a classic, neutral, realistic scenario
• DQ-03: Appropriate Scale (5/5) - GDP 5,000-80,000 USD and life expectancy 40-90 years are realistic ranges

Code Quality (7/10 pts)

• CQ-01: KISS Structure (1/3) - Code uses functions/loops for data generation, more complex than necessary
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Uses current Bokeh API
• CQ-05: Output Correct (0/1) - Saves as plot.png but also saves plot.html

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses ColumnDataSource, CustomJS for animation, factor_cmap, HoverTool, but legend rendering in PNG could be better optimized

Strengths

• Excellent Gapminder-style visualization with realistic country development data
• Good use of Bokeh's interactive features: CustomJS animation, slider, play/pause button, hover tooltips
• Year label watermark ("2014") clearly visible in the plot as specified
• Proper title format and descriptive axis labels with units
• Good color palette with 5 distinct region colors
• Appropriate bubble sizing based on population

Weaknesses

• Legend in PNG export is extremely small and nearly illegible despite code setting larger font sizes (28pt title, 24pt labels) - the legend appears cut off in the top right corner
• The legend positioning and sizing need adjustment for static PNG export to match the intended 4800x2700 canvas

Verdict: REJECTED

The implementation is well-constructed with good animation features and data, but the legend rendering in the PNG export is a significant visual quality issue. The legend is nearly invisible in the exported image, making it difficult to understand which colors correspond to which regions without examining the code.

[github-actions]

🔧 Repair Attempt 2/3

Applied fixes based on AI review feedback.

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

---

🤖 impl-repair

[claude]

AI Review - Attempt 3/3

Image Description

The plot displays a Gapminder-style animated scatter plot showing country development data for the year 2014 (middle frame). The visualization features 15 data points (countries) plotted with GDP per Capita (USD) on the x-axis (ranging 0-80,000) and Life Expectancy (Years) on the y-axis (ranging 40-95). Points are color-coded by region using a 5-color palette: blue (North), yellow (South), coral/salmon (East), teal (West), and green (Central). Point sizes vary based on population, with larger bubbles indicating higher populations. A large watermark "2014" appears in light gray in the lower-right portion of the plot. The legend is positioned in the top-left corner with clear region labels. The title follows the required format: "scatter-animated-controls · bokeh · pyplots.ai". The background is a subtle off-white (#fafafa) with dashed grid lines at low opacity.

Quality Score: 91/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 48pt, axis labels at 36pt, tick labels at 28pt - all perfectly readable at 4800x2700
• VQ-02: No Overlap (8/8) - No overlapping text elements, legend well-positioned, year watermark doesn't interfere
• VQ-03: Element Visibility (7/8) - Bubble sizes well-scaled with population encoding, alpha=0.7 appropriate for 15 points, white outlines help distinguish overlapping bubbles
• VQ-04: Color Accessibility (5/5) - Five distinct, colorblind-friendly colors (blue, yellow, coral, teal, green) with good contrast
• VQ-05: Layout Balance (4/5) - Good use of canvas space, adequate margins, legend inside plot area works well
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "GDP per Capita (USD)" and "Life Expectancy (Years)"
• VQ-07: Grid & Legend (0/2) - Grid is subtle with dashed lines and alpha=0.3, but legend glyph circles are too small relative to the actual bubble sizes in the plot

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct animated scatter plot with bubble sizing
• SC-02: Data Mapping (5/5) - X=GDP, Y=Life Expectancy, Size=Population, Color=Region - all correctly mapped
• SC-03: Required Features (5/5) - Play/pause button, timeline slider, year display, color coding, size encoding all present
• SC-04: Data Range (3/3) - Axes show full range of data with appropriate padding
• SC-05: Legend Accuracy (2/2) - Legend correctly shows all 5 regions with matching colors
• SC-06: Title Format (2/2) - Correct format: "scatter-animated-controls · bokeh · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows variation in GDP, life expectancy, and population across regions; good spread of data points demonstrating the Gapminder concept
• DQ-02: Realistic Context (7/7) - Simulated country development data with plausible GDP ranges (5K-60K), life expectancy (58-78 years), and regional groupings
• DQ-03: Appropriate Scale (4/5) - Values are realistic for country-level metrics, though some GDP values on the higher end

Code Quality (9/10 pts)

• CQ-01: KISS Structure (2/3) - Code is mostly linear but has some complexity with data generation loops; acceptable for animation requirements
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42) for deterministic data
• CQ-03: Clean Imports (2/2) - All imports are used appropriately
• CQ-04: No Deprecated API (1/1) - Uses current Bokeh 3.x API
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Good use of ColumnDataSource, CustomJS callbacks for interactivity, factor_cmap for categorical coloring, HoverTool. Could leverage more Bokeh-specific animation features.

Strengths

• Excellent implementation of Gapminder-style animated visualization with all required interactive controls
• Text sizing is well-calibrated for the 4800x2700 canvas with clear hierarchy
• Color palette is distinctive and colorblind-friendly with good contrast
• Year watermark provides clear temporal context without obscuring data
• Smooth animation implementation using CustomJS with proper play/pause toggle
• Hover tooltips provide detailed information for each country
• PNG snapshot shows middle frame (2014) as representative static view

Weaknesses

• Legend glyph sizes (60px) appear small compared to actual bubble sizes in the plot, making it harder to associate legend entries with data points
• Grid styling with dashed lines could be slightly more subtle (alpha 0.2 instead of 0.3)

Verdict: APPROVED