feat(plotly): implement errorbar-basic

[github-actions]

Implementation: errorbar-basic - python/plotly

Implements the python/plotly version of errorbar-basic.

File: plots/errorbar-basic/implementations/python/plotly.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. Six groups (Control, Treatment A–E) are plotted as scatter points with asymmetric error bars, each in a distinct Imprint palette hue — Control in brand green #009E73, Treatment A in lavender, Treatment B in blue, Treatment C in ochre, Treatment D in cyan, Treatment E in rose. Markers have a white outline ring for definition. A subtle gray reference band spans the control group's CI, and a dotted baseline line marks the control mean. A "Peak response" callout annotation (with arrow) labels Treatment D as the highest mean. A "Control baseline" label appears at the right edge of the dashed line. The legend sits in the top-right corner with elevated off-white background. All title, axis labels, tick labels, and legend text are clearly readable against the light background.

Dark render (plot-dark.png): The same plot renders on a near-black (#1A1A17) background. All data colors are identical to the light render — Control green, Treatment A lavender, Treatment B blue, Treatment C ochre, Treatment D cyan, Treatment E rose — confirming data colors are theme-invariant. Chrome elements (title, axis labels, tick labels, legend text, annotation text) all render in light tones (#F0EFE8 / #B8B7B0) — no dark-on-dark failures detected. Grid lines are subtle light strokes, and the legend and annotation boxes use the dark elevated background (#242420). All text is clearly readable against the dark background.

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

Score: 89/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All sizes explicitly set (title 16px, axis labels 12px, ticks 10px, legend 10px). Minor deduction: annotation text at size=8px is at the lower bound and may be tight at mobile scale (~400px viewport).
• VQ-02: No Overlap (6/6) — No overlapping text or data elements; all labels well-spaced.
• VQ-03: Element Visibility (6/6) — Markers at size=20 (Plotly units) are prominent for 6 sparse data points; error bar caps clearly visible.
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe; white ring on markers adds contrast definition.
• VQ-05: Layout & Canvas (4/4) — Landscape 3200×1800, balanced margins (l=80, r=80, t=80, b=60), legend well-positioned, content fills canvas appropriately.
• VQ-06: Axis Labels & Title (2/2) — X: "Experimental Group", Y: "Response (mg/dL)" with units.
• VQ-07: Palette Compliance (2/2) — First series #009E73 ✓; multi-series uses Imprint palette positions 1–4 + 6–7 (correctly skipping slot 5 semantic red for neutral treatment groups); light bg #FAF8F1 ✓, dark bg #1A1A17 ✓; both renders theme-correct.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Clearly above defaults: intentional control reference band, dashed baseline, "Peak response" annotation, white outline rings on markers, elevated annotation backgrounds. Strong design intent with thoughtful use of the Imprint palette.
• DE-02: Visual Refinement (4/6) — Y-axis-only subtle grid (rgba 0.15 opacity), L-shaped frame (only left+bottom spines), no tick marks, elevated legend/annotation boxes. Good refinement, not every detail polished.
• DE-03: Data Storytelling (4/6) — Clear focal point: the "Peak response" annotation guides the viewer to Treatment D; control CI reference band provides meaningful context for comparison; "Control baseline" label anchors the reference line.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Correct error bar plot with scatter markers.
• SC-02: Required Features (4/4) — Asymmetric error bars, visible caps, distinct group colors, consistent bar widths all present.
• SC-03: Data Mapping (3/3) — Categories on X, response values on Y; all data visible within range [28, 88].
• SC-04: Title & Legend (2/3) — Title format is missing the "python" language token. Actual: "Clinical Response by Group · errorbar-basic · plotly · anyplot.ai". Required: "Clinical Response by Group · errorbar-basic · python · plotly · anyplot.ai". Legend labels match data correctly.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Shows all aspects: symmetric vs. asymmetric CIs, varying CI widths, groups overlapping and exceeding the control baseline.
• DQ-02: Realistic Context (5/5) — Clinical trial response (mg/dL) comparing control vs. five treatment groups — real-world, neutral scientific scenario.
• DQ-03: Appropriate Scale (4/4) — Mean values 42–72 mg/dL with 3.6–9.3 mg/dL CI half-widths are plausible for a biomarker clinical study.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear: imports → theme tokens → data → figure → traces → annotations → layout → save.
• CQ-02: Reproducibility (2/2) — Hardcoded deterministic data; no random elements.
• CQ-03: Clean Imports (2/2) — Only os, numpy, plotly.graph_objects — all used.
• CQ-04: Code Elegance (2/2) — Clean zip() iteration for multi-trace loop; idiomatic customdata + hovertemplate usage; no over-engineering.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; autosize=False with explicit dimensions; current Plotly API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good use of add_hrect(), add_hline(), add_annotation(), write_html(); error_y with symmetric=False for asymmetric bars. Loop-per-trace approach is correct but slightly verbose.
• LM-02: Distinctive Features (3/5) — Uses Plotly-specific helpers (add_hrect, add_hline), styled annotation boxes with bgcolor/borderpad, interactive hover via customdata+hovertemplate, and HTML export — features not easily replicated in static libraries.

Score Caps Applied

• None

Strengths

• Control CI reference band (add_hrect) + dashed baseline (add_hline) create meaningful visual context for group comparisons
• "Peak response" annotation with arrow effectively guides the viewer to the key finding
• Asymmetric error bars with correct array/arrayminus implementation — shows real CI data properly
• White marker outline rings (marker.line) add definition and visual polish
• Full theme-adaptive chrome: all tokens correctly mapped for both light and dark renders
• Hover tooltips with formatted 95% CI range display Plotly's interactive strength

Weaknesses

• Title missing "python" language token — must be "Clinical Response by Group · errorbar-basic · python · plotly · anyplot.ai"
• Annotation text at size=8 (baseline label) is at the lower readability bound — increase to size=10 for better mobile legibility
• Annotation text at size=9 (peak response box) could also benefit from increase to size=10

Issues Found

1. SC-04 FAIL: Title is missing the mandatory "python" language segment.
   • Fix: Change title to
2. VQ-01 MINOR: Annotation font sizes (8–9px) are at the lower bound for tertiary text.
   • Fix: Increase both annotation font sizes to size=10 for mobile readability.

AI Feedback for Next Attempt

Fix the title to include the "python" language token: "Clinical Response by Group · errorbar-basic · python · plotly · anyplot.ai". Also increase annotation font sizes from 8–9px to 10px for improved mobile legibility. The design, data storytelling, and code structure are all strong — only these two minor fixes are needed to clear the 90-point threshold.

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 #FAF8F1 background — correct. Title "Clinical Response by Group · errorbar-basic · python · plotly · anyplot.ai" is centered and spans ~80% of plot width (expected for the longer mandated format with descriptive prefix). Six scatter markers with asymmetric error bars in Imprint palette order: Control (#009E73 brand green), Treatment A (#C475FD lavender), Treatment B (#4467A3 blue), Treatment C (#BD8233 ochre), Treatment D (#2ABCCD cyan), Treatment E (#954477 rose). A subtle gray reference band marks the control CI, a dashed baseline runs horizontally at the control mean, and a "Peak response" callout annotation points to Treatment D (highest mean). "Control baseline" label appears near the right edge. All text — title, axis labels, tick labels, legend, annotations — is clearly readable in dark ink on the light surface.

Dark render (plot-dark.png): Warm near-black #1A1A17 background — correct. Chrome flips to light: title, axis labels ("Experimental Group", "Response (mg/dL)"), tick labels, and legend text are all rendered in #F0EFE8/#B8B7B0 — high contrast against the dark surface. No dark-on-dark failures observed anywhere. All six Imprint data colors are identical to the light render — only the background, text, grid, and legend-box fill flip between themes. Brand green #009E73 remains clearly visible on the dark surface. The reference band fill adapts correctly (rgba alpha preserves contrast on the dark bg). Both annotations remain readable in dark mode.

Both paragraphs confirm legibility in both renders. PASS for both themes.

Score: 91/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — all font sizes explicitly set (title=16, axis=12, tick=10, annotations=10); both themes pass readability; proportions balanced
• VQ-02: No Overlap (6/6) — no text or data collisions; legend positioned in top-right without interfering with data
• VQ-03: Element Visibility (6/6) — 6 sparse points with marker size=20 (80 source-px) correctly sized for sparse density; error bar thickness=3 and cap width=12 clearly visible
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe; white marker borders add redundant encoding beyond hue
• VQ-05: Layout & Canvas (4/4) — 3200×1800 canvas; plot fills ~65% of area; balanced margins (l=80, r=80, t=80, b=60); nothing clipped
• VQ-06: Axis Labels & Title (2/2) — Y: "Response (mg/dL)" with units; X: "Experimental Group" descriptive
• VQ-07: Palette Compliance (2/2) — first series #009E73 ✓; 6-color Imprint subset correctly skips slot 5 (#AE3030) as treatment groups are neutral categories, not error/loss semantic; #FAF8F1/#1A1A17 backgrounds correct; both renders fully theme-adaptive

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: control CI reference band (add_hrect), dashed baseline, styled annotation callout box, white-border markers — clearly above configured defaults. Short of FiveThirtyEight-level polish due to uniform font weight across the title/label hierarchy.
• DE-02: Visual Refinement (4/6) — Y-axis grid only at subtle rgba opacity; X-axis no grid; Plotly default removes top/right frame; white marker borders; generous margins. Legend border is present but appropriately styled.
• DE-03: Data Storytelling (4/6) — Control reference band contextualizes all treatment groups vs. baseline; "Peak response" annotation highlights the key clinical finding; per-group color differentiation and clear visual hierarchy guide the reader.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct error bar chart via go.Scatter with error_y
• SC-02: Required Features (4/4) — Visible caps (width=12), asymmetric errors, consistent widths, different colors per group — all spec requirements met
• SC-03: Data Mapping (3/3) — X: categorical groups; Y: response values in mg/dL; all 6 data points visible with full error ranges
• SC-04: Title & Legend (3/3) — "Clinical Response by Group · errorbar-basic · python · plotly · anyplot.ai" matches {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai; legend labels match group names

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All error bar aspects covered: visible caps, asymmetric errors, varying means, varying error magnitudes, multiple groups
• DQ-02: Realistic Context (5/5) — Clinical trial response data (mg/dL) — real, neutral, comprehensible scenario
• DQ-03: Appropriate Scale (4/4) — Values 42–72 mg/dL are realistic clinical range; 6 groups within spec's 3–20 range

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear script: imports → theme tokens → data → per-group traces → annotations → layout → save
• CQ-02: Reproducibility (2/2) — Fully deterministic; hardcoded clinical data values
• CQ-03: Clean Imports (2/2) — importlib/os/sys necessary for plotly path workaround; go and np are the only plotting/numerical deps; all used
• CQ-04: Code Elegance (2/2) — zip(..., strict=False) for multi-array iteration; clean per-group loop; no over-engineering
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html; write_image with explicit width/height/scale; current Plotly API

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — go.Scatter with error_y is idiomatic for per-group error bars; add_hrect, add_hline, add_annotation are high-level idiomatic layout methods
• LM-02: Distinctive Features (3/5) — Uses plotly-specific features: add_hrect for reference band, customdata with hovertemplate for rich interactive hover, HTML output with CDN plotlyjs. Reaches "some library-specific features" but stops short of features that cannot be replicated elsewhere (e.g., layout buttons for group toggling, range slider, updatemenus).

Score Caps Applied

• None — no score caps triggered

Strengths

• Perfect visual quality (30/30): all font sizes explicitly set; both light and dark themes pass readability with zero light-on-light or dark-on-dark failures
• Principled Imprint palette application: correctly skips slot 5 (#AE3030) for neutral treatment-group categories, following the deferred-semantic-red rule
• Effective data storytelling: control reference band + dashed baseline + "Peak response" annotation create a clear clinical narrative without overcrowding
• Full spec compliance: asymmetric 95% CI error bars with visible caps, per-group color coding, clinically realistic domain data

Weaknesses

• LM-02 limited scope: add_hrect and custom hover templates are solid plotly-specific features but miss an opportunity for layout buttons or updatemenus (group toggling/filtering) that are distinctively plotly-native and would push LM-02 to 4–5
• DE-01 ceiling: design is clearly above defaults but lacks typographic weight variation — title, axis labels, and tick labels use the same font family at the same weight (400), missing hierarchy reinforcement that would elevate to 8/8

Issues Found

1. LM-02 MODEST: customdata/hovertemplate and add_hrect are good but only reach "some library-specific features"
   • Fix: Consider adding a updatemenus button to toggle between "show all groups" and "highlight significant groups only", or a range slider on the x-axis — features that showcase Plotly's interactive capabilities beyond static PNG output

AI Feedback for Next Attempt

Implementation is high quality with excellent spec compliance and visual polish. To reach 95+: (1) add a layout updatemenus or buttons array to demonstrate Plotly's interactive group-selection capability (LM-02 → 4–5); (2) differentiate font weight between title and axis labels (e.g., font_weight: 600 for title) to strengthen the typographic hierarchy and push DE-01 toward 8. No structural changes needed — the Imprint palette, theme adaptability, and error bar design are all correct.

Verdict: APPROVED