feat(chartjs): implement venn-labeled-items

[github-actions]

Implementation: venn-labeled-items - javascript/chartjs

Implements the javascript/chartjs version of venn-labeled-items.

File: plots/venn-labeled-items/implementations/javascript/chartjs.js

Parent Issue: #5364

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (`plot-light.png`): Three-circle Venn diagram on a warm off-white (#FAF8F1) background. Circle A ("Hyped Online", green #009E73) sits top-left, circle B ("Actually Useful", lavender #C475FD) top-right, circle C ("Secretly Beloved", blue #4467A3) bottom-center, in an equilateral-triangle arrangement. Circle fills are semi-transparent (13% alpha), outlines at 60% alpha. Category names appear in bold Georgia serif outside each circle in their palette color. Item labels (NFTs, Metaverse, ChatGPT, Slack, TikTok, Vinyl Records, Wikipedia, Duct Tape, RSS Feeds, Fax Machines, The Internet, Coffee) render in dark inkSoft inside the 7 zones. Title "Tech Zeitgeist · venn-labeled-items · javascript · chartjs · anyplot.ai" in bold at top. All text is clearly readable against the light background.

Dark render (`plot-dark.png`): Same layout on near-black (#1A1A17) background. Title and item labels shift to light off-white (t.inkSoft = #B8B7B0 in dark) — readable throughout. Category labels retain their Imprint palette colors (green/lavender/blue), which read well on dark. Circle fill regions become nearly invisible at 13% alpha blended into the dark background, but 60% outlines keep zone boundaries legible. Data colors are identical to the light render — only chrome flips. No dark-on-dark failures observed. Both renders pass legibility check.

Score: 87/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8) — All sizes explicitly set via proportional formulas (r*0.11, r*0.085, dynamic title scaling). Well-proportioned in both renders. Item labels slightly small for mobile widths.
• VQ-02: No Overlap (6/6) — No text overlaps. Items stacked vertically with correct line spacing in all zones.
• VQ-03: Element Visibility (5/6) — Item labels and outlines clear. Circle fills at 13% alpha are quite faint; zone regions barely distinct in dark theme where fills blend into the background.
• VQ-04: Color Accessibility (2/2) — Imprint palette (green/lavender/blue) is CVD-safe. Good contrast.
• VQ-05: Layout & Canvas (3/4) — Venn occupies ~55-60% of canvas width; visible empty margins left/right. Good vertical use but could fill the landscape canvas more.
• VQ-06: Axis Labels & Title (2/2) — No traditional axes needed. Title correct. Circle category labels serve as semantic axis labels outside each circle.
• VQ-07: Palette Compliance (2/2) — Circles use Imprint positions 1-3 (#009E73, #C475FD, #4467A3) canonically. Background reads from t.pageBg. Chrome via t.ink/t.inkSoft. Data colors identical between themes.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Georgia serif delivers the editorial "Chartgeist" feel the spec calls for. Imprint palette with intentional placement. Above generic defaults. Not yet publication-ready — a witty subtitle and more deliberate category-label positioning would push it higher.
• DE-02: Visual Refinement (4/6) — No grid, no axes, clean composition. Subtle fills and moderate outlines are tasteful. Good whitespace. Slightly more fill opacity would improve the dark theme readability.
• DE-03: Data Storytelling (4/6) — Witty, coherent tech-zeitgeist taxonomy. NFTs/Metaverse as hype-only, Coffee/The Internet as universally beloved — immediately relatable. Visual hierarchy through bold colored category labels.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Three-circle Venn with labeled items, semi-transparent fills, symmetric equilateral layout. Exactly as specified.
• SC-02: Required Features (4/4) — 3 circles, category labels outside, item labels inside all 7 zones, semi-transparent fills, magazine-print aesthetic, generous whitespace.
• SC-03: Data Mapping (3/3) — All 14 items correctly placed in their declared zones.
• SC-04: Title & Legend (3/3) — "Tech Zeitgeist · venn-labeled-items · javascript · chartjs · anyplot.ai" matches {Descriptive} · {spec-id} · javascript · chartjs · anyplot.ai.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 interior zones (A, B, C, AB, AC, BC, ABC) populated with 2 items each.
• DQ-02: Realistic Context (5/5) — Relatable tech-cultural commentary. Real products/concepts with defensible zone placements. Neutral, non-controversial.
• DQ-03: Appropriate Scale (4/4) — Placements plausible: NFTs/Metaverse as hype-only, Google Maps purely useful, The Internet and Coffee universally beloved.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Data → Mount → Plugin → Chart. vennPlugin object is the correct Chart.js plugin API, not a function/class.
• CQ-02: Reproducibility (2/2) — Fully deterministic; all data hardcoded.
• CQ-03: Clean Imports (2/2) — No unused globals. All tokens used.
• CQ-04: Code Elegance (2/2) — Clean, no over-engineering, no fake UI elements. Good proportional sizing constants.
• CQ-05: Output & API (1/1) — animation: false set. Canvas appended to #container. Harness handles PNG output.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — afterDraw plugin with chart.ctx is the idiomatic Chart.js approach for non-native chart types. Correct options.
• LM-02: Distinctive Features (3/5) — Uses Chart.js plugin lifecycle (afterDraw) distinctively. However the core Venn geometry is raw Canvas 2D API; the Chart.js-specific contribution is mostly the plugin hook architecture rather than Chart.js drawing primitives.

Score Caps Applied

• None

Strengths

• Full spec coverage: all 7 Venn zones populated, editorial Chartgeist tone nailed
• Correct Imprint palette in canonical order; theme-adaptive chrome throughout
• Idiomatic Chart.js afterDraw plugin pattern for custom canvas drawing
• Proportional font sizing scales gracefully with canvas dimensions
• Perfect spec/data/code scores — implementation is technically sound

Weaknesses

• Circle fills at 13% alpha are too faint — zone boundaries barely read as regions, especially in dark theme where fills blend into the background; raise to 0.20-0.22
• Canvas underutilized — Venn occupies ~55% of canvas width; increase radius coefficient from 0.295 to ~0.32 and re-tune circle centers to better use the landscape canvas
• Item label font size (r * 0.085) is slightly small; raise to r * 0.095 for better mobile readability
• No optional witty subtitle; category-name labels could be larger (r * 0.13 instead of r * 0.11) with slightly more separation from the circles
• LM-02 gap: core Venn geometry is raw Canvas 2D API — using Chart.js dataset-driven positioning for item labels or annotation plugin patterns would be more library-distinctive

Issues Found

1. VQ-03 LOW — Circle fills (globalAlpha=0.13) too faint, zones barely distinct in dark theme
   • Fix: Raise fill alpha to 0.20-0.22
2. VQ-05 MINOR — Diagram undersized for the landscape canvas
   • Fix: Increase r = Math.min(W, H) * 0.295 to 0.32; re-tune d and circle center offsets accordingly
3. DE-01 MEDIUM — Missing editorial subtitle opportunity
   • Fix: Add a subtitle line in smaller italic Georgia below the title (e.g. "A taxonomy of the tech moment" at titleSize * 0.7 px)
4. LM-02 MEDIUM — Core drawing bypasses Chart.js API
   • Fix: Consider using Chart.js scatter datasets with pointStyle = 'circle' for the circle fills, reserving the afterDraw hook only for label placement

AI Feedback for Next Attempt

Increase circle fill alpha to 0.20-0.22 for both themes (the dark render especially needs more visible region fill). Grow the Venn to use more of the landscape canvas (r coefficient ~0.32). Raise item label font size to r*0.095. Add a brief italic subtitle below the title for editorial flavor. To improve Library Mastery, explore using Chart.js scatter datasets for the circle overlays rather than raw canvas arcs in afterDraw.

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 anyplot light surface. Three overlapping circles use Imprint palette positions 1-3: green (#009E73), lavender (#C475FD), and blue (#4467A3), each with semi-transparent fills (alpha 0.21) and colored outlines (alpha 0.60). Category labels "Hyped Online" (green), "Actually Useful" (lavender), and "Secretly Beloved" (blue) appear outside their circles in Georgia serif bold. Item labels (NFTs, Metaverse, Spreadsheets, Google Maps, RSS Feeds, Fax Machines, ChatGPT, Slack, TikTok, Vinyl Records, Wikipedia, Duct Tape, The Internet, Coffee) are rendered in #4A4A44 inkSoft across all 7 zones. Title "Tech Zeitgeist · venn-labeled-items · javascript · chartjs · anyplot.ai" in dark ink at top center; italic subtitle below. All text clearly readable against the light background. Minor: "Secretly Beloved" label center sits at approximately y≈886px CSS in a 900px canvas — pixels appear complete but margin is tight.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct anyplot dark surface. Data circle colors are identical to the light render (green, lavender, blue — Imprint palette stays constant). Title and subtitle render in light ink (#F0EFE8), item labels in #B8B7B0 (inkSoft dark). Category circle labels maintain their respective Imprint colors — visible and readable. No dark-on-dark failures observed; all text contrasts properly against the dark background. Chrome adaptation is fully correct.

Both renders pass the theme-readability check. No AR-09 edge clipping detected.

Score: 85/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set via formula (category ~37px CSS, items ~27px CSS, title scaled by length ~21px CSS). Readable in both themes. Minor: bottom category label approaches canvas boundary.
• VQ-02: No Overlap (5/6) — Clean label placement; minor crowding in ABC triple intersection with 2 stacked items at 1.65× lineHeight.
• VQ-03: Element Visibility (5/6) — Circles clearly visible with layered alpha fills and outlines; all labels distinguishable.
• VQ-04: Color Accessibility (2/2) — Imprint positions 1-3 are CVD-safe; inkSoft neutral item labels; no red-green sole signal.
• VQ-05: Layout & Canvas (3/4) — Venn fills 60-65% of canvas, balanced left/right. "Secretly Beloved" label center at y886px CSS in 900px canvas — very close to bottom edge.
• VQ-06: Axis Labels & Title (2/2) — Descriptive prefixed title in correct format; subtitle adds editorial context. No traditional axes needed for Venn.
• VQ-07: Palette Compliance (2/2) — First circle #009E73 (Imprint pos 1); pos 2 (#C475FD) and pos 3 (#4467A3) correct; pageBg theme-adaptive backgrounds; ink/inkSoft chrome correct in both renders.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Deliberate editorial Georgia serif throughout; carefully calculated alpha layers (0.21 fill, 0.60 outline); witty subtitle. Above "well-configured default" (4) but layout is competent without being visually striking.
• DE-02: Visual Refinement (4/6) — No grid, no spurious axes; deliberate alpha tuning on fills and outlines; clean whitespace. Good refinement above library defaults.
• DE-03: Data Storytelling (4/6) — Subtitle frames the editorial question; opinionated category names create a narrative lens; items like NFTs vs Google Maps vs RSS Feeds tell a recognizable tech-culture story.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Three-circle symmetric Venn diagram with all 7 interior zones populated.
• SC-02: Required Features (4/4) — Semi-transparent fills, category names outside circles, item labels inside zones, gridless editorial background — all spec requirements met.
• SC-03: Data Mapping (3/3) — 14 items across all 7 zones; within spec's 10-25 range.
• SC-04: Title & Legend (3/3) — "Tech Zeitgeist · venn-labeled-items · javascript · chartjs · anyplot.ai" — correct {Descriptive Title} · {spec-id} · {lang} · {lib} · anyplot.ai format.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 Venn zones (A, B, C, AB, AC, BC, ABC) populated; full intersection pattern coverage.
• DQ-02: Realistic Context (5/5) — Real, recognizable tech culture references; neutral — no controversial topics; genuine editorial voice.
• DQ-03: Appropriate Scale (4/4) — 14 items in spec range; per-zone density appropriate for label legibility.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions/classes; clean data → mount → plugin → chart sequence.
• CQ-02: Reproducibility (2/2) — Fully hardcoded deterministic data; no randomness.
• CQ-03: Clean Imports (2/2) — No imports needed; Chart is a harness-provided global.
• CQ-04: Code Elegance (2/2) — Clean geometry calculations; iteration-over-groups for label rendering; no over-engineering.
• CQ-05: Output & API (1/1) — animation: false, responsive: true, maintainAspectRatio: false all set; harness handles file output correctly.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (3/5) — Correct use of Chart.js plugin system (afterDraw hook) as the idiomatic way to extend Chart.js beyond its 8 native types. Using a scatter chart with empty dataset as a canvas container is the accepted Chart.js pattern for custom layouts. Default (3) because most rendering is raw canvas 2D rather than Chart.js data primitives.
• LM-02: Distinctive Features (3/5) — Chart.js afterDraw plugin lifecycle hook is library-specific; intercepting the render pipeline to draw custom geometry leverages Chart.js extensibility architecture distinctively.

Score Caps Applied

• None — all cap conditions checked, none triggered.

Strengths

• All 7 Venn zones correctly populated with appropriate items in correct positions
• Editorial Georgia serif typography creates authentic WIRED Chartgeist feel — deliberate and consistent
• Semi-transparent fills (alpha 0.21) + outlines (alpha 0.60) produce professional depth layering
• Title scaling formula (22 × 67 / titleLength) correctly handles the long mandated title string
• Witty subtitle "Where does it live — hype, utility, or quiet devotion?" frames a clear editorial narrative
• Imprint palette positions 1-3 correctly assigned; full theme-adaptive chrome in both renders — no dark-on-dark failures
• Deterministic hardcoded data; fully reproducible

Weaknesses

• "Secretly Beloved" category label center is at y≈886px CSS in a 900px canvas with ~37px CSS font — bottom of letter descenders approach the canvas boundary; reduce r by 5-8% or adjust C.y + r * 1.05 to C.y + r * 0.90 to restore safe margin
• Triple intersection (ABC) zone holds 2 items ("The Internet", "Coffee") with only 1.65× lineHeight — visually cramped in the geometrically small overlap region; consider using a smaller itemFontSize (e.g. r * 0.080) for zones with ≥2 items, or a tighter lineHeight multiplier of 1.4
• LM-02 could reach 4-5 by using Chart.js bubble/scatter datasets with radius encoding for the circle areas rather than raw canvas 2D, showing deeper use of Chart.js data primitives alongside the plugin system

Issues Found

1. VQ-05 MINOR: "Secretly Beloved" label too close to bottom canvas edge
   • Fix: catPos[2].y = C.y + r * 0.90 or reduce overall r by 5%
2. VQ-02 MINOR: ABC zone crowding with 2 stacked items
   • Fix: Use itemFontSize = Math.round(r * 0.080) for zones with labels.length >= 2, or reduce lineH multiplier to 1.4

AI Feedback for Next Attempt

The implementation is solid and APPROVED at this attempt. If a third attempt is triggered: (1) shift the bottom circle category label up slightly to clear the canvas edge — C.y + r * 0.90 instead of 1.05; (2) use a slightly smaller item font or tighter lineHeight for multi-item zones to reduce crowding in the triple intersection; (3) consider encoding circle membership as Chart.js bubble datasets to deepen library mastery beyond pure canvas 2D drawing.

Verdict: APPROVED