feat(plotly): implement donut-basic

[github-actions]

Implementation: donut-basic - python/plotly

Implements the python/plotly version of donut-basic.

File: plots/donut-basic/implementations/python/plotly.py

Parent Issue: #733

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays a donut chart on a warm off-white #FAF8F1 background with 6 budget allocation segments rendered clockwise. Engineering (42%) occupies the dominant bottom arc in #009E73 (Okabe-Ito position 1). Sales (24%) in #D55E00 sits on the left, Marketing (14%) in #0072B2 at the top, followed by Operations (10%) in #CC79A7, R&D (6%) in #E69F00, and G&A (4%) in #56B4E9 — all following the canonical Okabe-Ito order. White separator lines provide clean delineation between segments. The center hole displays a three-level annotation: "Total Budget" (medium, muted), $100M (large bold, primary ink), and "FY2026" (small, tertiary). Category labels with percentages are placed outside each segment. No legend is used — the labels serve that role. The title "donut-basic · plotly · anyplot.ai" appears in dark text at the top center. All text is clearly readable against the light background; no light-on-light text issues observed.

Dark render (plot-dark.png): The same chart renders on a near-black #1A1A17 background. The donut center hole takes on the dark surface color, matching the background. All six Okabe-Ito segment colors are identical to the light render — only chrome flips. The title, segment labels, and percentage text appear in light-colored text against the dark background. The three-level center annotation ("Total Budget" / $100M / "FY2026") is visible in appropriately adapted light tones. No dark-on-dark text failures observed. All labels readable. Theme adaptation is correct on both renders.

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	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	89	100

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 28px, center annotations 56/22/18px, segment labels 18px. Readable in both themes.
• VQ-02: No Overlap (5/6) — Mostly clean; the three small right-side segments (Operations, R&D, G&A) have labels that are close together, creating slight crowding without true overlap.
• VQ-03: Element Visibility (6/6) — Ring width (hole=0.58 → 42% ring) is thick and well-proportioned; all six segments including the 4% G&A slice are clearly visible.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette used, inherently CVD-safe; white segment dividers add further differentiation.
• VQ-05: Layout & Canvas (4/4) — Donut fills ~65% of canvas, well-centered, generous equal margins on all sides.
• VQ-06: Axis Labels & Title (2/2) — Title in correct {spec-id} · {library} · anyplot.ai format; no axes applicable to a donut chart.
• VQ-07: Palette Compliance (2/2) — First series #009E73 ✓; full Okabe-Ito canonical order ✓; #FAF8F1 light background ✓; #1A1A17 dark background ✓; theme-adaptive chrome ✓.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Custom font family (Inter), no legend (cleaner), three-level center annotation with size hierarchy, correct palette — clearly above library defaults but falls short of FiveThirtyEight-level polish. No emphasis technique on the dominant segment.
• DE-02: Visual Refinement (4/6) — No legend, white segment dividers, generous margins, appropriate absence of grid/spines. Some intentional refinement but not fully polished.
• DE-03: Data Storytelling (4/6) — Center annotation creates a clear focal point ("$100M" bold and large). Engineering's dominant 42% arc naturally guides the viewer's eye. The FY2026 label adds temporal context. Could be stronger with explicit visual emphasis (e.g., slight pull on Engineering segment).

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct donut chart via go.Pie(hole=0.58).
• SC-02: Required Features (4/4) — Center annotation ✓, percentage labels on segments ✓, consistent ordering (clockwise, sort=False) ✓, thick ring width ✓.
• SC-03: Data Mapping (3/3) — Categories correctly mapped to labels, values to segment sizes; all data visible.
• SC-04: Title & Legend (3/3) — Exact title format; labels-on-segments replace legend appropriately.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Demonstrates all donut chart features: varied segment sizes (4%–42%), center annotation with multiple levels, outside labels, thick ring.
• DQ-02: Realistic Context (5/5) — FY2026 corporate budget ($100M) across Engineering/Sales/Marketing/Operations/R&D/G&A — entirely neutral and realistic.
• DQ-03: Appropriate Scale (4/4) — $100M total is realistic; allocations sum to 100% with plausible proportions (engineering-heavy tech company).

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flow: env read → data → chart → annotations → layout → save.
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data; no random generation needed.
• CQ-03: Clean Imports (2/2) — Only plotly.graph_objects and os used.
• CQ-04: Code Elegance (2/2) — Clean, idiomatic Plotly code; three-level annotation elegantly split into separate add_annotation calls with semantic colors.
• CQ-05: Output & API (1/1) — Saves plot-light.png, plot-dark.png, plot-light.html, plot-dark.html ✓.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Uses go.Pie with hole for donut, sort=False to preserve ordering, insidetextorientation, custom hovertemplate. Theme adaptation via os.getenv. Excellent but not exhaustive of all Plotly-specific patterns.
• LM-02: Distinctive Features (3/5) — Custom hovertemplate with HTML formatting, interactive HTML export, clockwise direction + rotation=90 (Plotly-specific orientation control), automargin=True on pie. These are Plotly-specific features well-applied.

Score Caps Applied

• None — no cap conditions triggered.

Strengths

• Perfect Okabe-Ito palette compliance in canonical order, both themes fully correct
• Elegant three-level center annotation (header / bold amount / year) creates a natural focal point
• Clean no-legend design with outside labels — professional and uncluttered
• Custom Inter font family raises typography above defaults
• Excellent theme adaptation: warm off-white and near-black backgrounds, all chrome tokens applied correctly
• Realistic, neutral FY2026 budget dataset with plausible proportions
• Custom hovertemplate with HTML formatting for HTML output

Weaknesses

• Design excellence falls short of 90: the dominant Engineering segment (42%) gets no visual emphasis — a subtle pull or highlight would guide the eye and justify DE-01=6+
• Three small segments on the right (Operations 10%, R&D 6%, G&A 4%) have labels that crowd together; auto-margin helps but spacing could be improved
• DE-02 visual refinement limited — segment line colors could use theme-adaptive separator (currently white on dark theme may be slightly harsh)

Issues Found

1. DE-01 BELOW THRESHOLD: Strong but not excellent design — missing a focal-point emphasis technique (pull on dominant segment, or size variation on center text)
   • Fix: Add pull of ~0.03–0.05 on the Engineering segment (largest), making the visual hierarchy explicit rather than implied by size alone
2. DE-02 MINOR: White separator lines on dark theme (line.color: "#FAF8F1" or similar) would be more refined than a fixed white
   • Fix: Use theme-adaptive separator color (e.g., PAGE_BG for the dividers so they blend with the background surface)
3. VQ-02 CROWDING: Labels for small right-side segments are tight
   • Fix: Consider reducing textfont size for small segments or increase margins to give labels more room

AI Feedback for Next Attempt

Add a subtle pull (~0.04) on the Engineering segment to make the dominant slice visually explicit and lift DE-01. Use theme-adaptive separator line colors (match PAGE_BG) instead of fixed white. This addresses DE-01 and DE-02 and should push the score above 90.

Verdict: REJECTED