feat(echarts): implement venn-labeled-items

[github-actions]

Implementation: venn-labeled-items - javascript/echarts

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

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

Parent Issue: #5364

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "venn-labeled-items · javascript · echarts · anyplot.ai" is dark ink, centered at top. Italic serif subtitle "Where hype, utility, and cult status overlap" in secondary ink below. Three overlapping circles — green (#009E73, "Overhyped"), lavender (#C475FD, "Actually Useful"), blue (#4467A3, "Secretly Loved") — with semi-transparent fills that layer visually. Category names in their respective bold serif (Georgia) colors positioned outside each circle. Item labels in secondary dark ink placed inside each zone (A: NFTs/Metaverse/Web3; B: Google Maps/Spreadsheets/Git; C: Wikipedia/RSS Feeds/Notepad; AB: AI Assistants/Cloud Storage; AC: Twitter / X/Crypto Wallets; BC: Linux Terminal/Plain Text; ABC: Markdown). All text is readable against the light background. One layout note: the diagram content ends at roughly 75% of canvas height, leaving ~25% blank below the bottom category labels.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title is light-colored and clearly readable. Category labels retain their Imprint colors (green, lavender, blue) — all visible and readable on the dark surface with no dark-on-dark failures. Item labels use t.inkSoft (#B8B7B0 in dark mode) — light gray on near-black, clearly readable. Data colors are identical to the light render — circles remain #009E73, #C475FD, #4467A3; only the backgrounds and text chrome flip. The layered overlapping circles create an attractive deep-toned effect. All text readable against dark background.

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

Score: 89/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title=22px, subtitle=14px, category=17px bold, items=13px). Readable in both themes. Item labels at 13 CSS px (26 source px) are on the smaller end; 14–15px would improve mobile readability.
• VQ-02: No Overlap (6/6) — No text overlap in either render. Items well-distributed with vertical spacing.
• VQ-03: Element Visibility (6/6) — Circles and labels clearly visible in both themes.
• VQ-04: Color Accessibility (2/2) — Imprint positions 1–3 are CVD-safe. Adequate contrast between circles and background.
• VQ-05: Layout & Canvas (2/4) — Bottom ~25% of canvas is empty below the category labels. Diagram cluster ends at y≈895/1200 CSS px leaving significant dead space below.
• VQ-06: Axis Labels & Title (2/2) — No axes (appropriate for Venn). Title correct. Descriptive category names. Editorial subtitle.
• VQ-07: Palette Compliance (2/2) — First circle = #009E73 ✓. Positions 2–3 = #C475FD/#4467A3 in canonical Imprint order ✓. backgroundColor: t.pageBg — theme-adaptive ✓. Data colors identical in both renders ✓.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong editorial design: Georgia/serif for category labels, italic serif subtitle, colored bold category names outside circles. Intentional Imprint palette with semi-transparent fills. Clearly above defaults, approaching the strong-design tier.
• DE-02: Visual Refinement (4/6) — No grid/axes (appropriate). Minimal chrome. Good whitespace within diagram area. Deducted for the ~25% bottom dead zone that reduces overall canvas utilisation.
• DE-03: Data Storytelling (4/6) — Witty, opinionated item choices tell a coherent tech-culture narrative. Markdown at ABC intersection is clever. Subtitle reinforces the commentary. Guides viewer through the editorial lens.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct three-circle symmetric Venn diagram with labeled items. Equilateral triangle arrangement.
• SC-02: Required Features (4/4) — All 7 interior zones populated, 16 items (within 10–25 spec range), category names outside circles, semi-transparent fills, magazine aesthetic.
• SC-03: Data Mapping (3/3) — Items correctly placed in their assigned zones.
• SC-04: Title & Legend (3/3) — Title exactly venn-labeled-items · javascript · echarts · anyplot.ai. Category labels serve as legend.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All 7 zones (A, B, C, AB, AC, BC, ABC) populated. Single, pairwise, and triple intersections all shown.
• DQ-02: Realistic Context (5/5) — Real, recognizable tech/internet items in a WIRED-style cultural commentary. Not controversial.
• DQ-03: Appropriate Scale (4/4) — Categorisations reflect broadly-shared cultural consensus. Markdown in ABC is clever and defensible.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script: data → geometry → init → graphics → option. No classes or functions.
• CQ-02: Reproducibility (2/2) — Fully deterministic hard-coded data.
• CQ-03: Clean Imports (2/2) — No imports; uses window globals as designed.
• CQ-04: Code Elegance (2/2) — Clean .map() / forEach for graphic element generation. Appropriate complexity.
• CQ-05: Output & API (1/1) — animation: false ✓, correct echarts.init (no explicit size/DPR) ✓, //# anyplot-orientation: square ✓.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — Correct use of ECharts graphic component for custom Venn composition. Token-driven theme adaptation throughout. Right approach given ECharts has no native Venn chart type.
• LM-02: Distinctive Features (3/5) — Uses ECharts graphic API (circle + text primitives with zIndex layering) — a genuinely ECharts-specific capability. However, this uses ECharts as a drawing API rather than leveraging high-level chart-type features (custom series, coordinate systems, etc.) that are truly distinctive to ECharts.

Score Caps Applied

• None — no category scored 0; no cap triggered.

Strengths

• Editorial magazine aesthetic delivered: Georgia serif for category labels, italic serif subtitle, coloured bold category names — matches the "WIRED Chartgeist" spec tone precisely
• All 7 Venn zones populated with thematically coherent, clever items; Markdown at ABC intersection is genuinely insightful
• Perfect Imprint palette compliance: circles use positions 1–3 (#009E73, #C475FD, #4467A3) with semi-transparent fills; both themes render correctly with data colours identical and chrome fully adaptive
• Clean, idiomatic ECharts graphic API usage — all font sizes explicitly set, animation:false, no size/DPR override

Weaknesses

• Bottom ~25% of the 2400×2400 canvas is empty whitespace below the category labels — the diagram (circles + category names) ends at roughly y=895/1200 CSS px; vertically centering the diagram on the canvas (shift centroid down ~80–100 CSS px, e.g. increase cAy, cBy, cCy by ~80 px and adjust label y-coords accordingly) would eliminate the dead zone
• LM-02: ECharts used as a drawing API (graphic primitives) rather than leveraging high-level ECharts chart features — using a custom series or ECharts coordinate system would push this higher
• Item labels at ITEM_FS=13 CSS px (26 source px) are on the small end for a 2400×2400 canvas; bump to 14–15 CSS px for better mobile readability at the 400px srcset width

Issues Found

1. VQ-05 LOW (2/4): Diagram cluster occupies only the top ~75% of canvas height; ~25% dead space below category labels
   • Fix: Shift the entire diagram down by adding ~80–100 CSS px to cAy, cBy, cCy, and the three catLabelGraphics y-values so the content is vertically centred on the 1200px mount
2. LM-02 PARTIAL (3/5): ECharts graphic primitives used correctly but not leveraging distinctive high-level ECharts features
   • Fix: Consider wrapping item labels in a scatter series with invisible markers (so ECharts handles layout) or use a custom series for ECharts-native tooltip / animation integration even if animation is off
3. VQ-01 MINOR (7/8): Item labels at 13px CSS are slightly small for the canvas size
   • Fix: Increase ITEM_FS from 13 to 14 or 15 CSS px

AI Feedback for Next Attempt

Priority fix: vertically centre the diagram by shifting cAy/cBy/cCy and category label y-coords each down by ~80–100 CSS px — this eliminates the 25% bottom dead zone that costs VQ-05 and DE-02 points. Also increase ITEM_FS from 13 to 14–15 px for better mobile readability. The editorial aesthetic and palette are already strong; focus the repair on layout balance and optionally pushing LM-02 by exploring ECharts custom series or coordinate system integration.

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 anyplot light surface. Title "venn-labeled-items · javascript · echarts · anyplot.ai" in dark ink at top-center (22px, readable). Subtitle "Where hype, utility, and cult status overlap" in italic serif, 14px, clearly visible. Three overlapping circles with semi-transparent fills: Imprint position 1 (#009E73 green) for "Overhyped" at top, position 2 (#C475FD lavender) for "Actually Useful" bottom-left, position 3 (#4467A3 blue) for "Secretly Loved" bottom-right. Category labels in bold serif font colored to match their circles, placed outside. Item labels in soft ink (#4A4A44) with bullet-dot prefix distributed across all 7 zones. No axes or grid (appropriate). All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct anyplot dark surface. Title and subtitle render in light-colored tokens (F0EFE8/B8B7B0), clearly visible against the dark surface. Data colors are identical to the light render — #009E73, #C475FD, and #4467A3 circles are unchanged, only chrome flips. Category labels retain the same hues and are readable on the dark surface. Item labels render in the dark-theme inkSoft token (B8B7B0), legible on near-black. No dark-on-dark failures detected. Both renders pass the theme-readability check.

Score: 86/100

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

Visual Quality (26/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set with theme-adaptive colors. Category labels at 17px bold serif, item labels at 14px sans-serif. Item labels adequate but on the smaller side for mobile — minor deduction.
• VQ-02: No Overlap (5/6) — No visible overlaps. BC zone and ABC zone items sit close but remain readable. Minor proximity in some zones.
• VQ-03: Element Visibility (6/6) — Circles clearly visible with semi-transparent fills. Overlapping regions visible through each other. All item text readable.
• VQ-04: Color Accessibility (2/2) — Three Imprint palette colors well-separated under CVD. No red-green reliance.
• VQ-05: Layout & Canvas (3/4) — Good use of square canvas. Diagram fills ~65-70% of canvas area. Slight whitespace excess above diagram, within acceptable range. No clipping. Canvas gate passed.
• VQ-06: Axis Labels & Title (2/2) — Title correct format. Subtitle adds editorial context. No axes needed for Venn diagram.
• VQ-07: Palette Compliance (2/2) — Imprint positions 1–3 used correctly (#009E73, #C475FD, #4467A3). pageBg used for theme-adaptive background. Both renders have correct chrome.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Clearly above defaults. Editorial approach with bold serif category labels colored to match their circles, italic serif subtitle, gridless clean layout. Genuine magazine-print feel above "configured default" tier.
• DE-02: Visual Refinement (4/6) — No axes or grid, semi-transparent circle fills, clean background, generous whitespace. Good refinement visible. Could push further with slightly higher fill alpha to make overlap zones more visually distinct.
• DE-03: Data Storytelling (4/6) — Items and zone placements tell a coherent tech-culture story. "Markdown" in ABC and "NFTs/Metaverse/Web3" in A-only are insightful choices. Witty subtitle reinforces the narrative. Visual hierarchy created through colored category labels.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Three-circle Venn with labeled items, symmetric equilateral-triangle layout.
• SC-02: Required Features (4/4) — Semi-transparent fills, category names outside circles, labeled items inside zones, all 7 interior zones populated, 16 items total (within 10–25 spec range).
• SC-03: Data Mapping (3/3) — Items correctly placed in their assigned zones with verified geometry.
• SC-04: Title & Legend (3/3) — Title format correct. No legend — categories directly labeled with colored text on the diagram.

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — All 7 interior zones used with distinct items. Minor: the outside zone mentioned in the spec as optional is not used — a small demonstration opportunity missed.
• DQ-02: Realistic Context (5/5) — Recognizable tech/internet culture items, witty categorizations, neutral content with no controversial material.
• DQ-03: Appropriate Scale (4/4) — 16 items distributed naturally across zones. Appropriate density for chart size.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Clean linear flow: geometry constants → data → init → graphic elements → option.
• CQ-02: Reproducibility (2/2) — Fully hard-coded, completely deterministic.
• CQ-03: Clean Imports (2/2) — No imports; uses echarts and ANYPLOT_TOKENS globals.
• CQ-04: Code Elegance (2/2) — Clean code, good use of .map() for graphic element generation, no over-engineering.
• CQ-05: Output & API (1/1) — Square orientation directive correctly set, animation: false in place, harness handles file output.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Good ECharts graphic component usage, correct token mapping, no explicit sizing passed to init. More manual/primitive-level than the highest-level ECharts API.
• LM-02: Distinctive Features (3/5) — Creative use of ECharts graphic component for a non-native chart type. Z-order layering and compositing circles + text is ECharts-specific. Could leverage additional native ECharts features for higher mastery.

Score Caps Applied

• None

Strengths

• Editorial magazine aesthetic achieved: bold serif category labels in Imprint palette colors, italic serif subtitle, and no-axes layout create a genuine WIRED Chartgeist feel
• All 7 Venn zones populated with recognizable, witty tech-culture items; "Markdown" in ABC and "NFTs/Metaverse/Web3" in A are defensible and story-rich placements
• Correct square orientation with clean Imprint palette usage: circles use positions 1–3 (#009E73, #C475FD, #4467A3), theme-adaptive chrome works perfectly in both renders
• Perfect code quality: deterministic hard-coded data, clean linear structure, idiomatic zoneData.forEach pattern, no over-engineering
• ECharts graphic component used creatively to render a non-native chart type with semi-transparent rgba fills for overlapping circle visibility

Weaknesses

• Item label font size (14px CSS = 28px source) is on the smaller side for a 2400×2400 canvas; increasing to 15–16px CSS would improve mobile readability without causing overlap
• The outside zone mentioned in the spec as optional is not used — adding 1–2 items clearly outside all circles would demonstrate the full Venn model
• BC zone ("Linux Terminal", "Plain Text") sits close to the ABC zone ("Markdown") — a slight y-offset for the BC zone center would add breathing room
• Circle fill alpha (0.18) is slightly low; 0.22–0.25 would make the overlap intersection zones more visually distinct while remaining transparent

Issues Found

1. VQ-01 MINOR: Item labels at 14px CSS are adequate but slightly small at mobile widths
   • Fix: Increase item label fontSize from 14 to 15–16px CSS; compensate with slight zone-center adjustments if needed
2. DQ-01 MINOR: outside zone not used
   • Fix: Add 1–2 items (e.g., "Fax Machines", "Clippy") placed in the whitespace surrounding the circles
3. DE-02 REFINEMENT: Overlap intersection visibility could be improved
   • Fix: Increase circle fill alpha from 0.18 to 0.22–0.25 for more visible intersection zones

AI Feedback for Next Attempt

Strong implementation that earns approval. If a repair is triggered: (1) increase item label fontSize to 15–16px, (2) add 1–2 "outside" zone items in the surrounding whitespace, (3) raise circle fill alpha to 0.22 for more visible intersections, (4) add slight y-offset to BC zone center to separate it from the ABC "Markdown" label. Keep the serif editorial aesthetic for category labels — it's the design's best feature.

Verdict: APPROVED