feat(altair): implement venn-labeled-items

[github-actions]

Implementation: venn-labeled-items - python/altair

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

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

Parent Issue: #5364

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1) background — correct. Title "Pop Culture Vibes · venn-labeled-items · altair · anyplot.ai" rendered in bold serif at top, subtitle "An opinionated three-circle taxonomy" in italic serif below — both clearly readable. Three overlapping circles using Imprint palette: brand green #009E73 (Overhyped), lavender #C475FD (Actually Useful), blue #4467A3 (Secretly Loved). Circle fills are semi-transparent (opacity=0.30), outlines at 0.85 opacity. Category labels rendered in matching colors outside each circle in bold italic serif — clearly readable and well-positioned. Items in pure zones (A, B, C, AB) are cleanly readable: NFTs/Metaverse (A), Spreadsheets/USB Hubs (B), Bubble Wrap/Karaoke (C), ChatGPT/Smartphones (AB). However, the AC, ABC, and BC intersection zones are all physically proximate in the diagram center, and all six of their labels (Vinyl Records, Avocado Toast, Sourdough, Coffee, Google Maps, Dolly Parton) cluster in a dense area with visible character-level collision — multiple labels overlap horizontally. Legibility verdict for center items: FAIL (significant text collision).

Dark render (plot-dark.png): Background is warm near-black (#1A1A17) — correct. Title and subtitle render in light cream/off-white text, clearly readable against the dark background. The three Imprint data colors (green, lavender, blue) are identical to the light render — correct. Category labels "Overhyped" (green), "Actually Useful" (lavender), "Secretly Loved" (blue) remain readable in dark mode. Item labels use the theme-adaptive INK token (#F0EFE8) — light text on dark background — readable where individual. No dark-on-dark text failures in the chrome. The same label overlap issue in the AC/ABC/BC center region persists identically. The large empty area in the lower canvas (~25% of height below the diagram) is also present. Legibility verdict: PASS for chrome and pure-zone items; FAIL for intersection-zone items due to overlap.

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

Score: 49/100

Category	Score	Max
Visual Quality	19	30
Design Excellence	13	20
Spec Compliance	14	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total (raw)	78	100
Total (capped)	49	100

Visual Quality (19/30)

• VQ-01: Text Legibility (6/8) — Font sizes explicitly set (title 16px, category labels 14px, item labels 11px). Most text readable, but crowded center region makes intersection-zone items hard to parse cleanly. Sizes are proportional overall.
• VQ-02: No Overlap (0/6) — Significant text collision in the AC/ABC/BC cluster. "Vinyl Records" (center x≈207) overlaps horizontally with "Sourdough" (center x≈250) — estimated ~68px character overlap at the rendered scale. "Sourdough" also collides with "Google Maps" (center x≈293). Additionally, y-positions from the AC zone (y≈252.5) and ABC zone (y≈257.5) are only 24px apart at the final image scale (5px × 4.8px/unit), while fontSize=11 renders at ~44px — vertical collision confirmed. Six intersection-zone labels compete in a small central region.
• VQ-03: Element Visibility (5/6) — Circles well-sized with appropriate semi-transparency. In the dark render, the triple-overlap center (ABC zone) is quite dark due to color layering, though item text using INK_SOFT remains visible. Minor density concern.
• VQ-04: Color Accessibility (2/2) — Three distinct Imprint hue families (green/purple/blue), CVD-safe, no red-green reliance.
• VQ-05: Layout & Canvas (2/4) — Diagram occupies center of canvas but the lower ~25% of the 2400×2400 frame is entirely empty. The "Secretly Loved" label below the C circle is well-placed but the overall composition is top-heavy. No content cut-off; all elements within canvas.
• VQ-06: Axis Labels & Title (2/2) — Descriptive title and subtitle present. Category labels serve as the Venn equivalent of axis labels. No traditional axes needed for this plot type.
• VQ-07: Palette Compliance (2/2) — First circle is #009E73 (brand green) ✓. Subsequent circles use Imprint positions 2 (#C475FD) and 3 (#4467A3) ✓. Backgrounds correct: #FAF8F1 (light) / #1A1A17 (dark) ✓. Data colors identical across both themes ✓. Chrome is theme-adaptive ✓.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Deliberately editorial: serif italic category labels in matching Imprint colors echo a WIRED/Chartgeist magazine aesthetic. The descriptive title/subtitle pair gives voice to the diagram. Semi-transparent fills are tasteful. Clearly above generic library default, though the crowded center and large empty lower region hold it back from publication-ready.
• DE-02: Visual Refinement (4/6) — No axes, no grid, no extraneous chrome — exactly right for a Venn diagram. Clean composition. Deducted for the ~25% empty lower canvas: more visual breathing room above the diagram and tighter bottom padding would balance the layout.
• DE-03: Data Storytelling (4/6) — The witty taxonomy ("Overhyped" / "Actually Useful" / "Secretly Loved") with recognizable pop-culture items (NFTs, Dolly Parton, ChatGPT, Sourdough) creates genuine editorial commentary. The subtitle reinforces the voice. Visual hierarchy through colored category labels is intentional. The crowded center reduces readability of the most structurally interesting region (intersections).

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Three-circle Venn diagram with semi-transparent fills and labeled items in correct zones. Standard symmetric layout implemented correctly.
• SC-02: Required Features (4/4) — All required features present: 3 circles, 14 items across all 7 interior zones (A/B/C/AB/AC/BC/ABC), semi-transparent fills, category names outside circles on outer sides, labeled items inside zones, editorial serif title/subtitle.
• SC-03: Data Mapping (3/3) — Zone centroids correctly computed and items placed in geometrically correct positions within each Venn region.
• SC-04: Title & Legend (2/3) — Title format is missing the language token. Current: "Pop Culture Vibes · venn-labeled-items · altair · anyplot.ai". Required: "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai". No legend needed for this plot type (category names serve that role).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 interior Venn zones populated (2 items each). Demonstrates the full spectrum of the diagram type including all pairwise and triple intersections.
• DQ-02: Realistic Context (5/5) — Neutral, relatable pop-culture taxonomy: NFTs, Dolly Parton, Sourdough, ChatGPT, Google Maps, Vinyl Records — real-world items with no controversial or divisive content. Highly engaging for the editorial genre.
• DQ-03: Appropriate Scale (4/4) — 14 items across 7 zones (2 per zone) is a clean, well-distributed layout. Zone assignments are editorially sensible (NFTs = Overhyped, Google Maps = Actually Useful ∩ Secretly Loved, Coffee = all three, etc.).

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear flat structure: path setup → constants → data → chart layers → save → PIL padding. No functions or classes.
• CQ-02: Reproducibility (2/2) — All data is hardcoded and deterministic; no random state.
• CQ-03: Clean Imports (2/2) — All imports used: importlib, math, os, sys, collections.defaultdict, PIL. The importlib pattern is justified by the sys.path manipulation needed for script-directory conflict resolution.
• CQ-04: Code Elegance (2/2) — Clean and appropriate for the complexity. Three separate label Chart objects are necessary since mark_text static text cannot be encoded in the data binding in a single chart. Geometric Venn calculations are well-commented.
• CQ-05: Output & API (1/1) — Saves both plot-{THEME}.png and plot-{THEME}.html. PIL padding block correctly handles vl-convert size variation. No deprecated API usage.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good idiomatic Altair: alt.layer() for compositional layering, alt.Title() with detailed properties (subtitle, anchor, font styling), alt.Scale(domain=...) for coordinate-space control, alt.value() for fixed mark sizes. Correct use of scale=None to pass raw hex colors directly.
• LM-02: Distinctive Features (3/5) — Clever use of mark_point(shape='circle', size=math.pi*r*r) to render circles as accurately-sized circle marks — a creative workaround for Altair's lack of a native circle primitive. The layered composition pipeline and coordinate-space positioning demonstrate Altair-specific knowledge.

Score Caps Applied

• VQ-02 = 0 (severe overlap) → Maximum score capped at 49. Raw total was 78; capped score is 49.

Strengths

• Editorial Imprint palette application with correct canonical order (green/lavender/blue); all Venn circles exactly on-brand
• Witty, engaging pop-culture taxonomy with strong editorial voice via serif italic category labels and subtitle
• All 7 Venn zones populated with relatable, neutral items appropriate to the "Chartgeist" spec aesthetic
• Clean no-chrome Venn composition (no axes, no grid) — exactly right for this diagram type
• Code is KISS, deterministic, and well-structured; PIL padding block correctly handles vl-convert rounding

Weaknesses

• Significant text overlap in the AC/ABC/BC intersection cluster — "Vinyl Records", "Sourdough", "Google Maps", "Avocado Toast", "Coffee", "Dolly Parton" collide in the densely-packed diagram center. LINE_HEIGHT=11 data units is too small for the geometric proximity of these three zones. Fix: increase LINE_HEIGHT to ~13-15, spread item stacks toward zone edges (offset from centroid by ±15-20 units in the perpendicular direction), or reduce fontSize for items to 9-10px to create more horizontal clearance
• Large empty space (~25% of canvas) below the diagram — the composition is top-heavy. Fix: shift the Venn layout downward (increase center_y by ~20-30 units) or add generous top padding reduction so the diagram is centered on the full 2400×2400 canvas
• Title missing "python" language token — must be "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai"

Issues Found

1. VQ-02 FAIL (score cap): Label collision in the AC/ABC/BC intersection zone cluster. Six labels compete in a small central region with character-level overlap.
   • Fix: Spread item labels outward from zone centroids using perpendicular offsets per zone. For AC (x≈207): shift items left toward zone edge. For BC (x≈293): shift items right. For ABC (x≈250): items can stay centered but need more y-spread. Alternatively reduce item fontSize from 11 to 9px to widen horizontal clearance.
2. SC-04: Missing "python" in title.
   • Fix: Change title text to "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai"
3. VQ-05: Lower ~25% of 2400×2400 canvas is empty, diagram is top-heavy.
   • Fix: Increase center_y from 260 to ~280-290 to shift the Venn layout lower, better centering it vertically on the square canvas.

AI Feedback for Next Attempt

Three fixes needed, in priority order: (1) Resolve label overlap in intersection zones — increase LINE_HEIGHT from 11 to 14-15, and apply outward offsets from zone centroids for AC/BC zones (e.g., AC items shift 10-15 units left of centroid, BC items shift 10-15 units right). The ABC zone items can stay centered but increase their y-spread. Consider reducing item fontSize from 11 to 9-10px to gain horizontal breathing room. (2) Add "python" to the title — format must be "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai". (3) Vertical balance — shift center_y from 260 to ~285-290 so the Venn diagram sits more centered on the 2400×2400 canvas rather than top-heavy with empty lower space.

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 background (#FAF8F1) — correct, not pure white. Title "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai" renders in dark INK with serif font; subtitle "An opinionated three-circle taxonomy" in INK_SOFT italic. Three overlapping circles: Overhyped in brand green (#009E73), Actually Useful in lavender (#C475FD), Secretly Loved in steel blue (#4467A3). Fills are 30% opacity allowing overlap region visibility; outlines at 85% opacity give definition. Category labels outside circles are bold italic serif in their respective circle colors. Item labels (NFTs, Metaverse, ChatGPT, Smartphones, Sourdough, Coffee, etc.) are small dark text stacked within each zone — readable at full resolution. All text is legible against the warm off-white background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct, not pure black. Title and subtitle render in light cream (#F0EFE8) — clearly legible against the dark surface. Category labels retain their Imprint palette colors (green/lavender/blue) which remain visible on dark. Circle fill and outline colors are identical to the light render — Imprint palette data colors correctly unchanged. Item labels flip to #F0EFE8 (light) via the INK token, ensuring no dark-on-dark failure. Brand green #009E73 remains clearly visible. No dark-on-dark failures observed.

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

Score: 85/100

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

Visual Quality (25/30)

• VQ-01: Text Legibility (5/8) — Title/subtitle/category labels readable in both themes. Item labels at fontSize=10 are borderline small at mobile widths (~6-7 effective px at 400px display).
• VQ-02: No Overlap (5/6) — No visible overlap, but the central cluster (ABC centroid at y=254, AB at y=290) is tight; closest item labels ~22 coord-units apart.
• VQ-03: Element Visibility (6/6) — All three circles clearly visible with semi-transparent fills and outlines; colors well-distinguished.
• VQ-04: Color Accessibility (2/2) — Imprint palette is CVD-safe. No red-green as sole signal.
• VQ-05: Layout & Canvas (3/4) — Canvas gate passed (2400×2400). Noticeable empty space between subtitle and diagram start; no edge clipping detected.
• VQ-06: Axis Labels & Title (2/2) — No traditional axes needed. Title correctly formatted with descriptive prefix; subtitle descriptive.
• VQ-07: Palette Compliance (2/2) — First circle = #009E73 (brand green), positions 2-3 = #C475FD and #4467A3. Backgrounds #FAF8F1/#1A1A17 correct. Both themes pass.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Editorial serif italic category labels, semi-transparent circle fills with styled outlines, witty title+subtitle in serif font genuinely match the Chartgeist magazine aesthetic specified.
• DE-02: Visual Refinement (4/6) — No axes/spines/grid (appropriate for editorial diagram), semi-transparent circle fills for depth, clean theme-adaptive chrome throughout.
• DE-03: Data Storytelling (4/6) — Opinionated zone names and witty item placement (NFTs=Overhyped, Dolly Parton=BC overlap, Sourdough=ABC) create a clear cultural taxonomy narrative.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct three-circle Venn with labeled items in zones, semi-transparent fills, category labels outside circles.
• SC-02: Required Features (4/4) — All spec features present: symmetric layout, semi-transparent fills, item labels in zones, category names outside, magazine aesthetic, stacking to minimize collisions.
• SC-03: Data Mapping (3/3) — All 14 items correctly placed in their specified zones across all 7 interior regions.
• SC-04: Title & Legend (3/3) — "Pop Culture Vibes · venn-labeled-items · python · altair · anyplot.ai" matches required format. Category labels serve as visual legend.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 zones populated; multiple items per zone in key overlaps; varied domains (tech, food, entertainment, music).
• DQ-02: Realistic Context (5/5) — Culturally plausible, witty, and neutral. Placements make intuitive sense.
• DQ-03: Appropriate Scale (4/4) — 14 items within spec range (10-25). Circle size fits coordinate space well.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes; top-to-bottom script.
• CQ-02: Reproducibility (2/2) — Fully deterministic; no random data generation.
• CQ-03: Clean Imports (2/2) — All imports used: importlib, math, os, sys, defaultdict, altair, pandas, PIL.
• CQ-04: Code Elegance (2/2) — Clean variable names, clear zone_centers dict, well-structured layer composition.
• CQ-05: Output & API (1/1) — Saves plot-{THEME}.png and plot-{THEME}.html correctly.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good use of alt.layer(), proper :Q/:N encoding types, alt.Scale for domain control, alt.Title with font configuration.
• LM-02: Distinctive Features (3/5) — Layer composition (key Altair feature) used creatively for Venn diagram construction; creative use of mark_point size-area semantics for circle rendering.

Score Caps Applied

• None

Strengths

• Correct Imprint palette order: Overhyped=#009E73 (brand green), Actually Useful=#C475FD, Secretly Loved=#4467A3 — canonical positions 1-3 in sequence
• Fully theme-adaptive: PAGE_BG, INK, INK_SOFT all conditional; item labels use INK token so dark-render text is light (#F0EFE8) and readable
• Editorial serif italic category labels match the spec's Chartgeist / WIRED magazine aesthetic
• Semi-transparent filled circles (opacity=0.30) with styled outlines give professional overlapping-region visibility
• All 7 interior Venn zones populated with plausible, witty pop-culture items; stacking algorithm avoids label collision
• Canvas gate passed — 2400×2400 target met via PIL padding block; HTML output also saved

Weaknesses

• Item labels are fontSize=10; at scale_factor=4 that is 40 source-px in the 2400-px PNG — borderline at mobile widths. Increase to fontSize=12.
• Significant empty vertical space between the subtitle and the Venn circles. Diagram shifted down by center_y=240 in a 460-unit view, leaving ~100 empty units above the circles. Increase center_y to ~260 or reduce CANVAS_H to ~420.
• Minor crowding in the central intersection cluster: ABC centroid (250,254) and AB centroid (250,290) are only 36 units apart; nudge AB downward to (250,305) to add breathing room.
• Category label "Actually Useful" is placed near the right edge of the 500-unit coordinate space — verify it is not at risk of clipping after vl-convert padding is applied.

Issues Found

1. VQ-01 MINOR: Item labels at fontSize=10 are small for mobile readability
   • Fix: Increase item label fontSize from 10 to 12
2. VQ-05 MINOR: Empty space above Venn diagram (between subtitle and circles)
   • Fix: Increase center_y from 240 to ~260, or reduce CANVAS_H from 460 to ~420
3. VQ-02 MINOR: Tight central cluster spacing
   • Fix: Nudge AB zone center from (250, 290) to (250, 305)

AI Feedback for Next Attempt

The implementation is solid and earns approval. For the next attempt, focus on three refinements: (1) increase item label fontSize from 10 to 12 for better mobile readability, (2) tighten the empty whitespace above the diagram by shifting center_y upward by ~20 units or reducing CANVAS_H, and (3) nudge the AB zone center down slightly to (250, 305) to reduce crowding in the central cluster. The editorial aesthetic, palette compliance, and spec coverage are all strong — keep them.

Verdict: APPROVED