feat(bokeh): implement errorbar-basic

[github-actions]

Implementation: errorbar-basic - python/bokeh

Implements the python/bokeh version of errorbar-basic.

File: plots/errorbar-basic/implementations/python/bokeh.py

Parent Issue: #973

---

🤖 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 with six categorical groups (Control, Treatment A–E) on the x-axis and "Response Value (units)" on the y-axis. Each group has a large circular scatter marker (size 28) and a Whisker+TeeHead error bar, each coloured in Imprint palette canonical order: Control=#009E73 (brand green), Treatment A=#C475FD (lavender), Treatment B=#4467A3 (blue), Treatment C=#BD8233 (ochre), Treatment D=#AE3030 (matte red), Treatment E=#2ABCCD (cyan). Error bars have prominent TeeHead caps (size 40) and line_width=5, clearly visible. Treatment C carries an italic "highest variability" annotation in INK_MUTED. A subtle y-only grid is present. Title "errorbar-basic · bokeh · anyplot.ai" is dark-ink, left-aligned. All text — title, axis labels, tick labels, annotation — is clearly readable against the light background. No overlap or clipping observed.

Dark render (plot-dark.png): The same chart on a warm near-black #1A1A17 background. Title and axis labels render in #F0EFE8 light ink; tick labels in #B8B7B0 INK_SOFT; the annotation in #A8A79F INK_MUTED — all clearly readable with no dark-on-dark failures. The six Imprint palette data colours are identical to the light render (only chrome flips). Brand green #009E73 on Control is clearly visible against the dark surface. All proportions, marker sizes, and error bar widths are consistent with the light render. Both renders pass the theme-readability check.

Score: 85/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (50pt title, 42pt axis labels, 34pt tick labels, 20pt annotation); fully readable in both themes
• VQ-02: No Overlap (6/6) — No text or data element overlaps in either render
• VQ-03: Element Visibility (6/6) — size=28 markers and line_width=5 whiskers with TeeHead size=40 are prominent and appropriate for 6 sparse data points
• VQ-04: Color Accessibility (2/2) — Imprint palette in canonical order; colorblind-safe by design
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed; 3200×1800 with correct min_border reservations; good whitespace; no overflow
• VQ-06: Axis Labels & Title (2/2) — Descriptive labels with units: "Experimental Group" and "Response Value (units)"
• VQ-07: Palette Compliance (2/2) — First series = #009E73; positions 1–6 in canonical order; backgrounds #FAF8F1/#1A1A17; both renders theme-correct

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Above baseline: per-group Imprint coloring applied to both error bars and markers (not just markers), and the "highest variability" annotation show design intent; not exceptional — no spine removal or strong visual hierarchy beyond colour differentiation
• DE-02: Visual Refinement (3/6) — Y-only subtle grid at 15% alpha, correct background tokens; deduction for outline_line_color = INK_SOFT which creates a full rectangular box border rather than the preferred L-shaped frame (remove top/right)
• DE-03: Data Storytelling (3/6) — "highest variability" annotation guides viewer attention to Treatment C; asymmetric error bars tell an interesting story; no dramatic focal point or additional emphasis technique beyond the annotation

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) — Correct error bar chart with scatter markers and Whisker+TeeHead error bars
• SC-02: Required Features (4/4) — Visible caps (TeeHead), consistent widths, per-group colours, asymmetric errors — all present and correct
• SC-03: Data Mapping (3/3) — Categorical x-axis, numeric y-axis, correct asymmetric upper/lower error mapping
• SC-04: Title & Legend (1/3) — Title is missing the required python language component. Actual: errorbar-basic · bokeh · anyplot.ai. Required: errorbar-basic · python · bokeh · anyplot.ai. No legend needed (groups labelled on the categorical x-axis).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Asymmetric errors, multiple coloured groups, annotation — all key error bar features are demonstrated
• DQ-02: Realistic Context (5/5) — Control + Treatments A–E with response values is a realistic, plausible, and neutral experimental context
• DQ-03: Appropriate Scale (4/4) — Values 23–50 units with trimmed y-range and 15% padding

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes; clean linear structure
• CQ-02: Reproducibility (2/2) — np.random.seed(42) present
• CQ-03: Clean Imports (2/2) — All imports used; no extras
• CQ-04: Code Elegance (2/2) — Clean loop for per-group whiskers; zip(strict=True) is a nice touch; no fake UI
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html as required for Bokeh

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Correct ColumnDataSource, Whisker, TeeHead, Label, figure(x_range=categories) for categorical axis, add_layout — all idiomatic Bokeh patterns
• LM-02: Distinctive Features (3/5) — Bokeh-specific Whisker+TeeHead for error bars; per-group ColumnDataSource enabling individual color control; Label annotation — solid Bokeh mastery but not exceptional

Score Caps Applied

• None

Strengths

• Both themes render correctly: warm-off-white / warm-near-black backgrounds, Imprint palette, all chrome tokens adaptive — no dark-on-dark failures
• Per-group Whisker+TeeHead colour (not just markers) is a beautiful use of Bokeh's model layer; the loop over individual ColumnDataSources to achieve this is clean and idiomatic
• Font sizing (50pt/42pt/34pt/20pt) is well-calibrated for the 3200×1800 canvas — all text is proportional and legible
• "highest variability" annotation on Treatment C adds genuine data storytelling with an idiomatic Bokeh Label model
• Excellent code quality: seed, linear structure, all imports used, no abstractions beyond what's needed

Weaknesses

• Title missing python language component — change title="errorbar-basic · bokeh · anyplot.ai" to title="errorbar-basic · python · bokeh · anyplot.ai" (same fix in output_file(...))
• outline_line_color = INK_SOFT creates a closed rectangular border; prefer outline_line_color = None to achieve the L-shaped frame (top/right spines absent) that the style guide calls for
• Design competent but not exceptional — no strong emphasis technique beyond the single annotation; consider adding a subtle reference line or reducing the box outline for a cleaner look

Issues Found

1. SC-04 FAIL: Title missing python — actual: "errorbar-basic · bokeh · anyplot.ai", required: "errorbar-basic · python · bokeh · anyplot.ai"
   • Fix: Update both the figure(title=...) and output_file(title=...) calls
2. DE-02 LOW: Full rectangular box outline instead of preferred L-shape
   • Fix: Set p.outline_line_color = None to remove the top and right border

AI Feedback for Next Attempt

Fix the title first — add · python · between spec-id and library. Then remove outline_line_color (set to None) to produce the preferred L-shaped frame. For a design boost, consider adding a subtle horizontal reference line at the Control group mean to give the comparison groups a visual baseline to read against.

Verdict: APPROVED

[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): The plot shows six experimental groups (Control, Treatment A–E) along the x-axis on a warm off-white #FAF8F1 background. Each group displays a mean scatter point and asymmetric error bar (Whisker with TeeHead caps) in a distinct Imprint palette color: Control in brand green (#009E73), Treatment A in lavender (#C475FD), Treatment B in blue (#4467A3), Treatment C in ochre (#BD8233), Treatment D in matte red (#AE3030), Treatment E in cyan (#2ABCCD). Y-axis shows "Response Value (units)" from ~20 to 52. A small italic "highest variability" annotation appears near the lower bound of Treatment C's error bar. Subtle horizontal grid lines are visible. Title, axis labels, and tick labels are all clearly readable in dark text on the light background.

Dark render (plot-dark.png): Identical plot on a warm near-black #1A1A17 background. All six data series retain exactly the same Imprint palette colors as the light render — data colors are identical across themes. Title, axis labels ("Experimental Group", "Response Value (units)"), and all tick labels render in light/near-white tones and are clearly readable against the dark background. The "highest variability" annotation remains visible in muted light text. No dark-on-dark text failures observed. Grid lines adapt subtly to the dark surface.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All sizes explicitly set: 50pt title, 42pt axis labels, 34pt tick labels; proportional and readable in both themes
• VQ-02: No Overlap (6/6) — No collisions; annotation placed in a clear area between Treatment C and D
• VQ-03: Element Visibility (6/6) — size=28 scatter points and line_width=5 whiskers with TeeHead size=40 are prominent for 6 sparse groups
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe; scatter markers have page-background edge highlight for additional contrast
• VQ-05: Layout & Canvas (4/4) — 3200x1800 with calibrated min_border (left=180, bottom=160, top=110, right=50); no clipping
• VQ-06: Axis Labels & Title (2/2) — "Experimental Group" and "Response Value (units)" are descriptive with units
• VQ-07: Palette Compliance (2/2) — First series #009E73; canonical Imprint order for 6 groups; backgrounds #FAF8F1 light / #1A1A17 dark; chrome theme-adaptive in both renders

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above-default: per-group colored Whiskers matching scatter points is a deliberate design choice; warm background and scatter edge highlights add polish; not yet at full publication-ready level
• DE-02: Visual Refinement (4/6) — Y-only grid at alpha=0.15, no outer border (outline_line_color=None), L-shaped spine, no minor ticks, generous whitespace from min_border
• DE-03: Data Storytelling (4/6) — Color contrast differentiates all six groups; "highest variability" annotation creates a clear focal point; asymmetric errors reinforce the Treatment C story

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct error bar plot: scatter means + Whisker error bars with TeeHead caps
• SC-02: Required Features (4/4) — Visible caps; consistent bar widths; per-group colors; asymmetric errors correctly implemented (lower_errors != upper_errors for Treatment C and D)
• SC-03: Data Mapping (3/3) — X = categorical groups, Y = response values; all 6 groups plotted
• SC-04: Title & Legend (3/3) — Title "errorbar-basic · python · bokeh · anyplot.ai" matches format; no legend needed (x-axis labels identify groups)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows symmetric errors (Control, Treatment E), asymmetric errors (Treatment C: 6.5 lower / 2.8 upper), and varying magnitudes across groups
• DQ-02: Realistic Context (5/5) — Scientific experimental context: Control + Treatment A–E groups; neutral, non-controversial
• DQ-03: Appropriate Scale (4/4) — Means 25–48 units, errors 2–6.5 units; plausible proportions for a scientific response variable

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → constants → data → figure → whiskers → scatter → annotation → style → save
• CQ-02: Reproducibility (2/2) — np.random.seed(42) set
• CQ-03: Clean Imports (2/2) — All imports used; no unused packages
• CQ-04: Code Elegance (2/2) — zip(..., strict=True) pattern for per-group whisker loop is clean; individual ColumnDataSource per group elegantly solves per-color Whisker limitation
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.html and plot-{THEME}.png using current Bokeh API + Selenium screenshot pattern

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Correct categorical x_range; ColumnDataSource throughout; figure() with min_border reservations; Whisker via add_layout()
• LM-02: Distinctive Features (4/5) — Bokeh-specific Whisker + TeeHead model for capped error bars; per-group ColumnDataSource for individual Whisker colors; Label annotation model; CDP viewport override for exact canvas dimensions

Score Caps Applied

• None

Strengths

• Per-group colored Whiskers + TeeHead caps via individual ColumnDataSources — an elegant Bokeh-specific pattern enabling per-element color without manual glyph hacks
• Full Imprint palette compliance in canonical order; both theme backgrounds correct; all chrome theme-adaptive with no dark-on-dark failures in either render
• All text sizes explicitly set with correct hierarchy — well-proportioned and readable at desktop and mobile widths
• Asymmetric error bars correctly implemented with distinct lower and upper error arrays
• "highest variability" annotation elevates the plot above a plain data display and guides the viewer to the key insight

Weaknesses

• The "highest variability" annotation has no visual connector (arrow or line) to the error bar cap it references, which could be ambiguous when the plot is displayed at small sizes
• Design lacks one standout finishing touch to reach "strong design" tier — an annotation arrow or a thin reference line at the Control mean would close the gap

Issues Found

1. DE-01 MODERATE: Per-group coloring is thoughtful but no standout finishing detail pushes to the next design tier

AI Feedback for Next Attempt

Implementation is solid and well above the attempt-2 threshold. To push toward 96+: (1) Add a connector arrow or line from the "highest variability" label to the lower TeeHead cap of Treatment C so the reference is visually unambiguous. (2) Consider a thin reference line at the Control mean for comparison context. (3) A slightly bolder or larger Treatment C marker would reinforce the focal point with an additional visual hierarchy layer.

Verdict: APPROVED