feat(plotly): implement venn-labeled-items

[github-actions]

Implementation: venn-labeled-items - python/plotly

Implements the python/plotly version of venn-labeled-items.

File: plots/venn-labeled-items/implementations/python/plotly.py

Parent Issue: #5364

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Three overlapping circles rendered on a warm off-white #FAF8F1 background in the canonical Imprint palette order — top circle in brand green (#009E73, "OVERHYPED"), bottom-left in lavender (#C475FD, "ACTUALLY USEFUL"), bottom-right in blue (#4467A3, "SECRETLY LOVED"). Each circle has a matching semi-transparent fill (≈26% opacity) creating visible overlap tints. Category labels in bold uppercase appear outside each circle in their respective circle color. All 15 items are placed as small black dot markers with serif (Georgia) text labels; items are well-distributed across zones A, B, C, AB, AC, BC, ABC, and one "outside" item (Beige Walls) in the upper-left corner with a "Neither here nor there" italic hint. The editorial subtitle "An entirely subjective taxonomy of things, ranked by vibe." appears in italic INK_SOFT below the bold title. All text is clearly readable against the warm off-white background. Significant empty whitespace occupies the bottom ~20–25% of the 2400×2400 canvas below the lowest diagram elements.

Dark render (plot-dark.png): Same layout on warm near-black #1A1A17 background. Item labels and markers switch to near-white (#F0EFE8), the subtitle and hint label render in #B8B7B0, and the main title in near-white — all clearly legible. The three Imprint palette data colors (green/lavender/blue) are identical to the light render, only chrome flips. Circle fills darken appropriately against the near-black surface, with overlapping regions reading as darker-tinted zones. No dark-on-dark failures observed. The "Neither here nor there" label is readable in muted light tone. Bottom whitespace issue is equally present. Both renders pass the theme-readability check.

Score: 84/100

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

Visual Quality (25/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; title 20px, labels 13px, category labels 15px, editorial annotations 11px. Everything readable in both themes. Hint label and subtitle at 11px are slightly small at mobile scale.
• VQ-02: No Overlap (5/6) — AB zone (ChatGPT / Slack) uses only 0.24-unit vertical spread; they are readable but slightly crowded. All other zones well-spaced.
• VQ-03: Element Visibility (5/6) — Circle shapes clearly visible; item markers at size 8 are slightly small for a sparse 15-item diagram — could be 10–12 for visual prominence.
• VQ-04: Color Accessibility (2/2) — Imprint green/lavender/blue are perceptually distinct under deuteranopia/protanopia; category labels in circle color reinforce identity redundantly.
• VQ-05: Layout & Canvas (2/4) — y-axis range [-2.11, 2.66] = 4.77 units but diagram content ends around y≈-1.35; roughly 20–25% of canvas height below the bottom circle/label pair is blank. Diagram not vertically centred.
• VQ-06: Axis Labels & Title (2/2) — No axes needed (Venn); category names outside circles are fully descriptive.
• VQ-07: Palette Compliance (2/2) — First circle #009E73 ✓, second #C475FD ✓, third #4467A3 ✓. Backgrounds #FAF8F1 / #1A1A17 ✓. Data colors identical across both renders ✓.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong editorial execution: serif Georgia throughout, CHARTGEIST prefix echoes the WIRED "Chartgeist" style specified in the brief, category labels coloured to match their circle, "Neither here nor there" zone label adds wit. Clearly above a well-configured default; not yet publication-ready due to the bottom dead space and slightly cramped intersection labels.
• DE-02: Visual Refinement (4/6) — No axes, no grid, no legend — correct minimalist approach. Semi-transparent fills tasteful. Bottom whitespace imbalance is the main refinement gap; the inside of the overlapping zones feels slightly dense while the lower canvas is empty.
• DE-03: Data Storytelling (4/6) — Editorial subtitle frames the subjective nature of the taxonomy. Witty zone assignments (NFTs → Overhyped, Dolly Parton → BC, Sourdough → ABC) create narrative delight. Visual hierarchy from bold circle labels guiding the eye is effective.

Spec Compliance (13/15)

• SC-01: Plot Type (5/5) — Three-circle symmetric Venn with labelled items, semi-transparent fills, category labels outside circles ✓.
• SC-02: Required Features (4/4) — All zones represented (A/B/C/AB/AC/BC/ABC/outside), hint label for outside zone, editorial subtitle, magazine-print aesthetic ✓.
• SC-03: Data Mapping (3/3) — 15 items placed in correct zones per the data definition; spread offsets correctly applied ✓.
• SC-04: Title & Legend (1/3) — Title is missing the required {language} component. Current: "CHARTGEIST · venn-labeled-items · plotly · anyplot.ai". Required: "CHARTGEIST · venn-labeled-items · python · plotly · anyplot.ai". The python segment between spec-id and library is mandatory.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 interior Venn zones plus the outside zone used; items demonstrate the full taxonomy concept ✓.
• DQ-02: Realistic Context (5/5) — Current tech/culture items (NFTs, ChatGPT, Dolly Parton, Sourdough, etc.) are real, comprehensible, and politically neutral ✓.
• DQ-03: Appropriate Scale (4/4) — 15 items within the 10–25 spec range; exactly 3 circles as required ✓.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear structure: tokens → data → geometry → traces → layout → save ✓.
• CQ-02: Reproducibility (2/2) — All data hardcoded; no random generation ✓.
• CQ-03: Clean Imports (2/2) — os, numpy, plotly.graph_objects — all used ✓.
• CQ-04: Code Elegance (2/2) — Grouping traces by textposition to mix alignment modes is a neat Plotly-idiomatic pattern ✓.
• CQ-05: Output & API (1/1) — plot-{THEME}.png + plot-{THEME}.html ✓; autosize=False with explicit dimensions ✓.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — fill="toself" on go.Scatter for custom shapes, add_annotation with xref="paper" for the subtitle, hoverinfo="skip" on circle traces and hoverinfo="text" on item traces — correct Plotly idioms throughout.
• LM-02: Distinctive Features (3/5) — HTML interactive output alongside PNG is Plotly-distinctive; hover tooltips expose zone membership. Core shape rendering via Scatter fill="toself" rather than Plotly layout.shapes is a pragmatic but not deeply distinctive choice.

Score Caps Applied

• None

Strengths

• Strong editorial aesthetic: Georgia serif font, CHARTGEIST title prefix, category labels coloured to match circles — immediately evokes the WIRED Chartgeist look specified in the brief
• Witty, culturally-relevant data (NFTs/Overhyped, Sourdough/ABC, Dolly Parton/BC) with a clear subjective taxonomy narrative
• Correct Imprint palette with proper #009E73 first circle; both themes fully functional with no dark-on-dark failures
• Clean code: trace-grouping by textposition to mix label alignments is idiomatic Plotly
• Correct canvas size (2400×2400) with autosize=False and explicit margins

Weaknesses

• Title missing python language identifier: current "CHARTGEIST · venn-labeled-items · plotly · anyplot.ai" must become "CHARTGEIST · venn-labeled-items · python · plotly · anyplot.ai" — insert python · between spec-id and library.
• Significant bottom dead space (~20–25% of canvas): y-axis range -2.11 to 2.66 leaves a large blank zone below the bottom circle labels. Tighten the bottom of the y-range to approximately -1.6 (or shift the entire range upward by ~0.4 units, e.g. -1.7 to 3.06) so the diagram is vertically centred.
• Item markers too small for a sparse layout: marker size=8 for only 15 items; increase to size=10 or size=12 to make each dot more prominent against the filled circles.
• AB zone vertical spread too tight: ChatGPT and Slack offset ±0.12 units; increase to ±0.18 to avoid crowding in that zone.

Issues Found

1. SC-04 FAIL: Title missing required python language component
   • Fix: Change title text to "<b>CHARTGEIST</b> · venn-labeled-items · python · plotly · anyplot.ai"
2. VQ-05 LOW: ~20–25% empty canvas at bottom — diagram not vertically centred
   • Fix: Change yaxis range from [-2.11, 2.66] to approximately [-1.7, 3.06] (shift up ≈ 0.41 units) to balance vertical whitespace
3. VQ-03 MINOR: Markers at size=8 are small for a 15-item diagram
   • Fix: Increase marker size from 8 to 11
4. VQ-02 MINOR: AB zone labels (ChatGPT/Slack) only ±0.12 apart
   • Fix: Increase zone_offsets for n=2 from [(0.0, 0.12), (0.0, -0.12)] to [(0.0, 0.18), (0.0, -0.18)]

AI Feedback for Next Attempt

Fix the title format first (add python · between spec-id and library — this alone costs 2 SC-04 points). Then tighten the bottom y-range by shifting it up ~0.4 units to eliminate the blank lower canvas and bring the diagram to visual centre. Increase marker size from 8 to 11 for a sparse 15-item diagram. Widen AB zone vertical offsets from ±0.12 to ±0.18 units. These four targeted changes should push the score to ≥ 90.

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. Title "CHARTGEIST · venn-labeled-items · python · plotly · anyplot.ai" in bold Georgia serif at the top. Italic subtitle "An entirely subjective taxonomy of things, ranked by vibe." appears below in muted ink. Three overlapping circles with 26%-opacity semi-transparent fills: green (#009E73, Overhyped – top), lavender (#C475FD, Actually Useful – bottom-left), blue (#4467A3, Secretly Loved – bottom-right). Fifteen labeled items with small black dot markers are distributed across all 7 zones plus the outside region. Category labels in colored bold uppercase serif appear outside each circle. "Beige Walls" sits in the outside zone beneath a "Neither here nor there" italic hint. All text is rendered in dark ink on the warm cream background — legibility PASS.

Dark render (plot-dark.png): Near-black (#1A1A17) background. Circle fills and stroke colors are identical to the light render (Imprint palette unchanged). Title and item labels render in warm near-white (#F0EFE8), the italic subtitle in soft secondary text. Item dot markers appear as light dots against the dark surface. Category labels retain their Imprint circle colors. Chrome flips cleanly: no dark-on-dark text failures detected anywhere. All text is readable against the dark background — legibility PASS.

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

Score: 84/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (6/8) — Title (20px) and category labels (15px) are clearly readable in both themes. Item labels at 13px (52 source px) are adequate at full resolution but approach the lower limit when scaled to ~400 px mobile width. Subtitle and "Neither here nor there" hint at 11px (44 source px) are notably small; legible at full res but borderline at mobile scale.
• VQ-02: No Overlap (5/6) — Labels well-distributed within zones via vertical offsets. Slight visual crowding in the AB/ABC region (ChatGPT → Slack → Sourdough are close in the centre-left area) but no actual pixel overlap of text.
• VQ-03: Element Visibility (5/6) — Dot markers at plotly size=11 (44 source px) are visible and adequate. Semi-transparent circle fills allow clear overlap visualization. Items in all zones are individually distinguishable.
• VQ-04: Color Accessibility (2/2) — Imprint palette used (green/lavender/blue); ink-colored dot markers ensure maximum contrast on both surfaces; no red-green-as-sole-signal issue.
• VQ-05: Layout & Canvas (4/4) — 2400×2400 square canvas (correct for a symmetric Venn). Canvas gate passed. Diagram centered with generous whitespace. No clipping at any edge. Title spans ~80–85% of width — acceptable given the prefixed CHARTGEIST title.
• VQ-06: Axis Labels & Title (2/2) — Title matches CHARTGEIST · venn-labeled-items · python · plotly · anyplot.ai format (valid descriptive prefix). Axes hidden (appropriate for Venn). Category labels are clear and descriptive.
• VQ-07: Palette Compliance (2/2) — First circle is #009E73 (brand green) ✓. Palette in canonical order (green → lavender → blue) ✓. Backgrounds #FAF8F1 / #1A1A17 ✓. Data colors identical across both renders; only chrome flips ✓.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Editorial serif typography (Georgia) throughout gives a genuine magazine-print feel. "CHARTGEIST" branding prefix, italic subtitle "ranked by vibe", and the "Neither here nor there" outside-zone label all contribute personality above the default. Semi-transparent fills and Imprint palette are well-applied. Could be elevated further with tighter typographic hierarchy between zone items and category header labels.
• DE-02: Visual Refinement (3/6) — No grid, no visible axes — appropriate and clean for a Venn diagram. Generous whitespace around the diagram. However, much of the minimalism is the natural baseline for this plot type rather than deliberate extra refinement (e.g., no spine removal decision needed).
• DE-03: Data Storytelling (3/6) — The editorial subtitle sets context and tone. Category label colors matching their circles creates clear visual anchoring. Outside-zone framing ("Neither here nor there") adds wit. The item distribution across all 7 zones demonstrates the full set-membership taxonomy effectively.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Three equal-sized circles in symmetric Venn layout with pairwise and triple overlaps ✓.
• SC-02: Required Features (4/4) — Category names outside circles, aligned away from centre ✓. Labeled items as dot markers in correct zones ✓. Semi-transparent fills for overlap visibility ✓. Outside zone handled with spatial separation and hint label ✓. Vertical spread offsets minimize collisions ✓.
• SC-03: Data Mapping (3/3) — All 15 items placed in correct zones. All 7 interior zones + outside populated. Zone placements match the spec example pattern (NFTs→A, Google Maps→B, Dolly Parton→BC, Sourdough→ABC, etc.) ✓.
• SC-04: Title & Legend (3/3) — Title format correct with valid descriptive prefix. No legend needed; category names rendered directly as colored annotations outside each circle ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 interior zones populated plus the outside zone. 15 items (within spec's 10–25 range). Demonstrates the full set-membership taxonomy.
• DQ-02: Realistic Context (5/5) — Contemporary tech/culture items (NFTs, ChatGPT, VS Code, Slack) mixed with pop culture (ABBA, Dolly Parton) and lifestyle (Sourdough, Crocs, Slippers) — witty, neutral, relatable editorial content. Classifications are defensible and humorous (Sourdough in ABC is particularly apt).
• DQ-03: Appropriate Scale (4/4) — 15 items across 8 zones, max 3 per single-circle zone. No zone overcrowded.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes. Linear script flow with data dicts for geometry lookups.
• CQ-02: Reproducibility (2/2) — No random elements; fully deterministic output.
• CQ-03: Clean Imports (2/2) — os, numpy, plotly.graph_objects only — all used.
• CQ-04: Code Elegance (2/2) — Clean zone_anchors and zone_offsets lookup tables. Type hint dict[str, list[str]] is a nice touch. Grouping traces by text-position is an idiomatic plotly optimization.
• CQ-05: Output & API (1/1) — write_image(f"plot-{THEME}.png", width=600, height=600, scale=4) ✓ and write_html(f"plot-{THEME}.html") ✓. autosize=False with explicit dimensions ✓.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — go.Scatter with fill="toself" for circle polygons, hoverinfo="skip" on decorative traces, fig.add_annotation() for positioned text, update_layout() for global settings. Grouping items by text-position to minimize trace count is idiomatic. Minor: could use scaleanchor + scaleratio instead of the manual equal-scale comment, but the explicit range approach works and is deliberate.
• LM-02: Distinctive Features (3/5) — Leverages plotly's native interactivity: hovertext shows zone context per item, hoverinfo="text" on item traces, plus write_html() for the interactive artifact. Could extend with custom hover templates or animation-ready trace IDs, but solid use of the core interactive layer.

Score Caps Applied

• None

Strengths

• All 7 zones + outside region populated; 15 well-chosen pop-culture items that demonstrate the full set-membership taxonomy
• Editorial serif typography (Georgia), CHARTGEIST branding prefix, and italic subtitle give a genuine magazine-print feel matching the spec
• Theme tokens correctly applied: both renders pass the dark-on-dark and light-on-light checks; Imprint palette data colors are identical across themes
• Idiomatic plotly code: traces grouped by text-position, fill="toself" circles, native hover tooltips, HTML export
• Square 2400×2400 canvas is appropriate for the symmetric Venn; canvas gate passed

Weaknesses

• Item text labels at 13px (52 source px) and subtitle/hint text at 11px (44 source px) are at the lower limit for mobile readability (~400 px); consider bumping item labels to 14–15px and subtitle to 12px
• Slight visual crowding in the AB / ABC central region (ChatGPT → Slack → Sourdough cluster); zone_offsets for AB could be spread slightly further or the AB anchor moved a few units away from the ABC centroid
• Design Excellence is adequate but not elevated: no explicit typographic scale difference between zone-item labels (currently all same 13px) and the category headers (15px) is modest; increasing the contrast between the two sizes would add hierarchy

Issues Found

1. VQ-01 MINOR: Item labels (13px) and decorative text (11px) are slightly undersized for mobile scale (~400 px width)
   • Fix: Increase item textfont size to 14–15px; subtitle and hint to 12px
2. VQ-02 MINOR: AB/ABC zone cluster (ChatGPT, Slack, Sourdough) is visually crowded in the left-centre
   • Fix: Shift AB zone anchor slightly more to the upper-left, e.g. from (-0.50, 0.30) to (-0.60, 0.38)
3. DE-01 MODERATE: Typographic hierarchy between zone item labels and category headers is subtle (13px vs 15px)
   • Fix: Increase category label size to 17–18px or add a weight/case differentiation to create a clearer two-level hierarchy

AI Feedback for Next Attempt

Strong foundation — all spec requirements met, correct canvas, correct palette, clean code. Focus improvements on: (1) bump item labels to 14–15px and category labels to 17px for clearer typographic hierarchy and mobile readability; (2) reduce crowding in the AB zone by shifting its anchor from (-0.50, 0.30) to (-0.65, 0.40); (3) consider a slight increase to marker size (13–14) so dots are more prominent at mobile scale.

Verdict: APPROVED