From 728266c0180ac5323b76e44be8bf511f6f819bd7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 25 Jun 2026 11:44:18 +0000 Subject: [PATCH 1/5] feat(d3): implement venn-labeled-items --- .../implementations/javascript/d3.js | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 plots/venn-labeled-items/implementations/javascript/d3.js diff --git a/plots/venn-labeled-items/implementations/javascript/d3.js b/plots/venn-labeled-items/implementations/javascript/d3.js new file mode 100644 index 0000000000..e790546224 --- /dev/null +++ b/plots/venn-labeled-items/implementations/javascript/d3.js @@ -0,0 +1,138 @@ +// anyplot.ai +// venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items +// Library: d3 7.9.0 | JavaScript 22 +// Quality: pending | Created: 2026-06-25 +//# anyplot-orientation: square + +const t = window.ANYPLOT_TOKENS; +const { width, height } = window.ANYPLOT_SIZE; +const THEME = window.ANYPLOT_THEME || "light"; +const inkMuted = THEME === "dark" ? "#A8A79F" : "#6B6A63"; + +// --- Data --- +// Three circles defining tech product categories +const CIRCLES = [ + { name: "Overhyped", cx: 600, cy: 420, r: 270, color: t.palette[0] }, + { name: "Actually Useful", cx: 738, cy: 658, r: 270, color: t.palette[1] }, + { name: "Secretly Loved", cx: 462, cy: 658, r: 270, color: t.palette[2] }, +]; + +// Centroid of each Venn zone for item placement +const ZONE_CENTROIDS = { + A: { x: 600, y: 254 }, + B: { x: 878, y: 740 }, + C: { x: 322, y: 740 }, + AB: { x: 730, y: 506 }, + AC: { x: 470, y: 506 }, + BC: { x: 600, y: 780 }, + ABC: { x: 600, y: 578 }, + outside: { x: 975, y: 300 }, +}; + +const items = [ + { label: "NFTs", zone: "A" }, + { label: "Metaverse", zone: "A" }, + { label: "Segway", zone: "A" }, + { label: "Google Glass", zone: "A" }, + { label: "Wikipedia", zone: "B" }, + { label: "GPS Navigation", zone: "B" }, + { label: "Cloud Backup", zone: "B" }, + { label: "Password Managers", zone: "B" }, + { label: "Spreadsheets", zone: "C" }, + { label: "Fax Machines", zone: "C" }, + { label: "Cable TV", zone: "C" }, + { label: "ChatGPT", zone: "AB" }, + { label: "Electric Scooters", zone: "AB" }, + { label: "TikTok", zone: "AC" }, + { label: "Gamification", zone: "AC" }, + { label: "Dark Mode", zone: "BC" }, + { label: "RSS Feeds", zone: "BC" }, + { label: "Sourdough", zone: "ABC" }, + { label: "Zoom", zone: "ABC" }, + { label: "Landlines", zone: "outside" }, +]; + +// --- SVG --- +const svg = d3.select("#container").append("svg") + .attr("width", width) + .attr("height", height); + +// --- Circles (semi-transparent fills, colored strokes) --- +CIRCLES.forEach(c => { + svg.append("circle") + .attr("cx", c.cx).attr("cy", c.cy).attr("r", c.r) + .attr("fill", c.color).attr("fill-opacity", 0.12) + .attr("stroke", c.color).attr("stroke-width", 2.5).attr("stroke-opacity", 0.65); +}); + +// --- Category labels (outside each circle, editorial serif) --- +const catFont = "Georgia, 'Times New Roman', serif"; + +// Circle A: above +svg.append("text") + .attr("x", CIRCLES[0].cx) + .attr("y", CIRCLES[0].cy - CIRCLES[0].r - 24) + .attr("text-anchor", "middle") + .attr("fill", CIRCLES[0].color) + .style("font-size", "20px").style("font-weight", "700") + .style("font-family", catFont) + .text(CIRCLES[0].name); + +// Circle B: right side (two lines) +const bx = CIRCLES[1].cx + CIRCLES[1].r + 26; +["Actually", "Useful"].forEach((word, i) => { + svg.append("text") + .attr("x", bx).attr("y", CIRCLES[1].cy - 13 + i * 28) + .attr("text-anchor", "start").attr("fill", CIRCLES[1].color) + .style("font-size", "20px").style("font-weight", "700") + .style("font-family", catFont).text(word); +}); + +// Circle C: left side (two lines) +const cx0 = CIRCLES[2].cx - CIRCLES[2].r - 26; +["Secretly", "Loved"].forEach((word, i) => { + svg.append("text") + .attr("x", cx0).attr("y", CIRCLES[2].cy - 13 + i * 28) + .attr("text-anchor", "end").attr("fill", CIRCLES[2].color) + .style("font-size", "20px").style("font-weight", "700") + .style("font-family", catFont).text(word); +}); + +// --- Items (stacked vertically within each zone) --- +const itemsByZone = d3.group(items, d => d.zone); +const SPACING = 24; + +itemsByZone.forEach((zoneItems, zone) => { + const { x: zx, y: zy } = ZONE_CENTROIDS[zone]; + const n = zoneItems.length; + const totalH = (n - 1) * SPACING; + const isOutside = zone === "outside"; + + if (isOutside) { + svg.append("text") + .attr("x", zx).attr("y", zy - totalH / 2 - 20) + .attr("text-anchor", "middle").attr("fill", inkMuted) + .style("font-size", "11px").style("font-style", "italic") + .text("outside all circles"); + } + + zoneItems.forEach((item, i) => { + const y = zy - totalH / 2 + i * SPACING; + svg.append("text") + .attr("x", zx).attr("y", y) + .attr("text-anchor", "middle").attr("dominant-baseline", "middle") + .attr("fill", isOutside ? inkMuted : t.inkSoft) + .style("font-size", "14px") + .style("font-style", isOutside ? "italic" : "normal") + .style("font-family", "system-ui, -apple-system, sans-serif") + .text(item.label); + }); +}); + +// --- Title --- +const titleText = "venn-labeled-items · javascript · d3 · anyplot.ai"; +svg.append("text") + .attr("x", width / 2).attr("y", 46) + .attr("text-anchor", "middle").attr("fill", t.ink) + .style("font-size", "22px").style("font-weight", "600") + .text(titleText); From 958efe07ab75f956b46f2469ddd35979cb9ce0c3 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 25 Jun 2026 11:44:36 +0000 Subject: [PATCH 2/5] chore(d3): add metadata for venn-labeled-items --- .../metadata/javascript/d3.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/venn-labeled-items/metadata/javascript/d3.yaml diff --git a/plots/venn-labeled-items/metadata/javascript/d3.yaml b/plots/venn-labeled-items/metadata/javascript/d3.yaml new file mode 100644 index 0000000000..50b4295329 --- /dev/null +++ b/plots/venn-labeled-items/metadata/javascript/d3.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for d3 implementation of venn-labeled-items +# Auto-generated by impl-generate.yml + +library: d3 +language: javascript +specification_id: venn-labeled-items +created: '2026-06-25T11:44:36Z' +updated: '2026-06-25T11:44:36Z' +generated_by: claude-sonnet +workflow_run: 28167148901 +issue: 5364 +language_version: 22.23.0 +library_version: 7.9.0 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From dc6ea90e33359750f32a55cd7dabc0bb0cb3ca1f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 25 Jun 2026 11:51:45 +0000 Subject: [PATCH 3/5] chore(d3): update quality score 87 and review feedback for venn-labeled-items --- .../implementations/javascript/d3.js | 4 +- .../metadata/javascript/d3.yaml | 232 +++++++++++++++++- 2 files changed, 227 insertions(+), 9 deletions(-) diff --git a/plots/venn-labeled-items/implementations/javascript/d3.js b/plots/venn-labeled-items/implementations/javascript/d3.js index e790546224..8343bb6810 100644 --- a/plots/venn-labeled-items/implementations/javascript/d3.js +++ b/plots/venn-labeled-items/implementations/javascript/d3.js @@ -1,7 +1,7 @@ // anyplot.ai // venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items -// Library: d3 7.9.0 | JavaScript 22 -// Quality: pending | Created: 2026-06-25 +// Library: d3 7.9.0 | JavaScript 22.23.0 +// Quality: 87/100 | Created: 2026-06-25 //# anyplot-orientation: square const t = window.ANYPLOT_TOKENS; diff --git a/plots/venn-labeled-items/metadata/javascript/d3.yaml b/plots/venn-labeled-items/metadata/javascript/d3.yaml index 50b4295329..7c8eb24227 100644 --- a/plots/venn-labeled-items/metadata/javascript/d3.yaml +++ b/plots/venn-labeled-items/metadata/javascript/d3.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for d3 implementation of venn-labeled-items -# Auto-generated by impl-generate.yml - library: d3 language: javascript specification_id: venn-labeled-items created: '2026-06-25T11:44:36Z' -updated: '2026-06-25T11:44:36Z' +updated: '2026-06-25T11:51:44Z' generated_by: claude-sonnet workflow_run: 28167148901 issue: 5364 @@ -15,7 +12,228 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/venn-labe preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/venn-labeled-items/javascript/d3/plot-dark.html -quality_score: null +quality_score: 87 review: - strengths: [] - weaknesses: [] + strengths: + - Perfect spec compliance — all 7 zones + outside populated with witty, editorial-quality + tech items + - Excellent Imprint palette compliance — correct canonical order, theme-adaptive + chrome, identical data colors across renders + - Editorial serif (Georgia) category labels add genuine magazine personality matching + the Chartgeist-style spec intent + - Perfect code quality — flat, deterministic, clean, idiomatic d3.group() usage + - Both light and dark renders are fully readable with no theme-adaptation failures + weaknesses: + - '"outside all circles" annotation text is 11px CSS — below the 14px recommended + minimum; increase to 13-14px to match item label sizing' + - 'Notable empty space at the bottom (~23% of canvas height): shift the diagram + center upward by ~60-80px (lower all CIRCLES cy values and ZONE_CENTROIDS y values + by ~60) to better balance top/bottom whitespace' + - 'LM-02 limited: D3 is used mostly as an SVG helper; consider using d3.forceSimulation + for label placement or d3.arc for a more sophisticated circle-path approach to + showcase D3''s distinctive capabilities' + image_description: |- + Light render (plot-light.png): + Background: Warm off-white (#FAF8F1) — correct light theme surface + Chrome: Title "venn-labeled-items · javascript · d3 · anyplot.ai" at 22px bold, fully readable in dark ink. Category labels "Overhyped" (top), "Actually Useful" (right), "Secretly Loved" (left) in their respective Imprint colors at 20px serif (Georgia), all readable. Item labels at 14px system-ui, inkSoft color. "outside all circles" annotation at 11px italic (slightly small). "Landlines" at 14px italic. + Data: Three overlapping circles — green (#009E73) for Overhyped, lavender (#C475FD) for Actually Useful, blue (#4467A3) for Secretly Loved — with 12% opacity fills and colored strokes. First series correctly uses #009E73. 20 items distributed across all zones. + Legibility verdict: PASS (minor: "outside all circles" annotation is 11px, slightly below 14px floor) + + Dark render (plot-dark.png): + Background: Warm near-black (#1A1A17) — correct dark theme surface + Chrome: Title visible in off-white ink (t.ink). Category labels retain their Imprint colors (green/lavender/blue) and are readable. Item labels appear in t.inkSoft (light-muted). "outside all circles" annotation uses dark inkMuted (#A8A79F) — readable. No dark-on-dark failures. + Data: Data colors are identical to the light render (green/lavender/blue circles unchanged). The overlapping regions appear darker but remain distinguishable. + Legibility verdict: PASS + criteria_checklist: + visual_quality: + score: 28 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: All font sizes explicitly set; 'outside all circles' annotation at + 11px CSS is below 14px floor + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: Items stacked with 24px spacing; no zone collisions + - id: VQ-03 + name: Element Visibility + score: 6 + max: 6 + passed: true + comment: Circles, fills, strokes, and labels clearly visible in both themes + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Imprint palette CVD-safe; three distinct hue families + - id: VQ-05 + name: Layout & Canvas + score: 3 + max: 4 + passed: true + comment: ~23% canvas height unused below the diagram; slightly unbalanced + vertical margins + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: No traditional axes; category labels descriptive; title correct + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: palette[0,1,2] in canonical order; theme-adaptive chrome; data colors + identical across themes + design_excellence: + score: 13 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 5 + max: 8 + passed: true + comment: Editorial serif for category names, color-coded labels, restrained + fills show genuine design intent; above default (4) but not publication-level + (6+) + - id: DE-02 + name: Visual Refinement + score: 4 + max: 6 + passed: true + comment: No grid, no spines, serif/sans hierarchy adds refinement; bottom + empty space reduces polish + - id: DE-03 + name: Data Storytelling + score: 4 + max: 6 + passed: true + comment: Witty editorial item choices create coherent tech commentary story; + Landlines outside is a nice touch + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Standard symmetric three-circle Venn with all seven interior zones + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: Semi-transparent fills, colored strokes, item labels, category names + outside, outside-zone handling all present + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: All 20 items correctly placed; all zone centroids logical + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title is exactly 'venn-labeled-items · javascript · d3 · anyplot.ai' + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: All 7 interior zones + outside populated; 20 items within 10-25 spec + range + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Real-world tech products with witty editorial categories; neutral, + relatable + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: 20 items distributed sensibly across zones + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: Flat procedural code; no functions or classes + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: All data hard-coded; fully deterministic + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No imports; d3 is the only global + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Clean, idiomatic; d3.group() used appropriately; no fake UI + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Square orientation declared; harness handles output + library_mastery: + score: 6 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: D3 selection pattern, d3.group(), method chaining, ANYPLOT_TOKENS/SIZE + usage all idiomatic + - id: LM-02 + name: Distinctive Features + score: 2 + max: 5 + passed: false + comment: d3.group() is a nice use of D3 array utilities; otherwise primarily + SVG attribute manipulation; D3-distinctive features (scales, force simulation, + data-join) unused + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: + - annotations + patterns: + - data-generation + - iteration-over-groups + dataprep: [] + styling: + - alpha-blending From f63e655e556b8d9a4cfa10a248fcf00f6ec32b0d Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Thu, 25 Jun 2026 12:08:51 +0000 Subject: [PATCH 4/5] fix(d3): address review feedback for venn-labeled-items Attempt 1/3 - fixes based on AI review --- .../implementations/javascript/d3.js | 153 +++++++++--------- 1 file changed, 75 insertions(+), 78 deletions(-) diff --git a/plots/venn-labeled-items/implementations/javascript/d3.js b/plots/venn-labeled-items/implementations/javascript/d3.js index 8343bb6810..bc271f3893 100644 --- a/plots/venn-labeled-items/implementations/javascript/d3.js +++ b/plots/venn-labeled-items/implementations/javascript/d3.js @@ -10,23 +10,27 @@ const THEME = window.ANYPLOT_THEME || "light"; const inkMuted = THEME === "dark" ? "#A8A79F" : "#6B6A63"; // --- Data --- -// Three circles defining tech product categories -const CIRCLES = [ - { name: "Overhyped", cx: 600, cy: 420, r: 270, color: t.palette[0] }, - { name: "Actually Useful", cx: 738, cy: 658, r: 270, color: t.palette[1] }, - { name: "Secretly Loved", cx: 462, cy: 658, r: 270, color: t.palette[2] }, +const circleData = [ + { name: "Overhyped", cx: 600, cy: 480, r: 270 }, + { name: "Actually Useful", cx: 738, cy: 718, r: 270 }, + { name: "Secretly Loved", cx: 462, cy: 718, r: 270 }, ]; -// Centroid of each Venn zone for item placement +// D3 ordinal scale maps category names to Imprint palette in canonical order +const colorScale = d3.scaleOrdinal() + .domain(circleData.map(d => d.name)) + .range(t.palette.slice(0, 3)); + +// Centroid of each Venn zone for label placement const ZONE_CENTROIDS = { - A: { x: 600, y: 254 }, - B: { x: 878, y: 740 }, - C: { x: 322, y: 740 }, - AB: { x: 730, y: 506 }, - AC: { x: 470, y: 506 }, - BC: { x: 600, y: 780 }, - ABC: { x: 600, y: 578 }, - outside: { x: 975, y: 300 }, + A: { x: 600, y: 314 }, + B: { x: 878, y: 800 }, + C: { x: 322, y: 800 }, + AB: { x: 730, y: 566 }, + AC: { x: 470, y: 566 }, + BC: { x: 600, y: 840 }, + ABC: { x: 600, y: 638 }, + outside: { x: 975, y: 360 }, }; const items = [ @@ -52,87 +56,80 @@ const items = [ { label: "Landlines", zone: "outside" }, ]; +// Use d3.group to partition items by zone, then compute vertical stacking positions +const SPACING = 24; +const itemsByZone = d3.group(items, d => d.zone); + +itemsByZone.forEach((zoneItems, zone) => { + const { x: zx, y: zy } = ZONE_CENTROIDS[zone]; + const totalH = (zoneItems.length - 1) * SPACING; + zoneItems.forEach((item, i) => { + item.x = zx; + item.y = zy - totalH / 2 + i * SPACING; + }); +}); + // --- SVG --- const svg = d3.select("#container").append("svg") .attr("width", width) .attr("height", height); -// --- Circles (semi-transparent fills, colored strokes) --- -CIRCLES.forEach(c => { - svg.append("circle") - .attr("cx", c.cx).attr("cy", c.cy).attr("r", c.r) - .attr("fill", c.color).attr("fill-opacity", 0.12) - .attr("stroke", c.color).attr("stroke-width", 2.5).attr("stroke-opacity", 0.65); -}); +// --- Circles (data join, semi-transparent fills, colored strokes) --- +svg.selectAll("circle.venn-circle").data(circleData).join("circle") + .attr("class", "venn-circle") + .attr("cx", d => d.cx).attr("cy", d => d.cy).attr("r", d => d.r) + .attr("fill", d => colorScale(d.name)).attr("fill-opacity", 0.12) + .attr("stroke", d => colorScale(d.name)) + .attr("stroke-width", 2.5).attr("stroke-opacity", 0.65); -// --- Category labels (outside each circle, editorial serif) --- +// --- Category labels (data join per circle, editorial serif) --- const catFont = "Georgia, 'Times New Roman', serif"; -// Circle A: above -svg.append("text") - .attr("x", CIRCLES[0].cx) - .attr("y", CIRCLES[0].cy - CIRCLES[0].r - 24) - .attr("text-anchor", "middle") - .attr("fill", CIRCLES[0].color) - .style("font-size", "20px").style("font-weight", "700") - .style("font-family", catFont) - .text(CIRCLES[0].name); +const catLabelDefs = [ + { name: "Overhyped", lines: ["Overhyped"], x: circleData[0].cx, y: circleData[0].cy - circleData[0].r - 20, anchor: "middle" }, + { name: "Actually Useful", lines: ["Actually", "Useful"], x: circleData[1].cx + circleData[1].r + 26, y: circleData[1].cy - 13, anchor: "start" }, + { name: "Secretly Loved", lines: ["Secretly", "Loved"], x: circleData[2].cx - circleData[2].r - 26, y: circleData[2].cy - 13, anchor: "end" }, +]; -// Circle B: right side (two lines) -const bx = CIRCLES[1].cx + CIRCLES[1].r + 26; -["Actually", "Useful"].forEach((word, i) => { - svg.append("text") - .attr("x", bx).attr("y", CIRCLES[1].cy - 13 + i * 28) - .attr("text-anchor", "start").attr("fill", CIRCLES[1].color) +catLabelDefs.forEach(def => { + const catG = svg.append("g"); + catG.selectAll("text").data(def.lines).join("text") + .attr("x", def.x) + .attr("y", (_, i) => def.y + i * 28) + .attr("text-anchor", def.anchor) + .attr("fill", colorScale(def.name)) .style("font-size", "20px").style("font-weight", "700") - .style("font-family", catFont).text(word); + .style("font-family", catFont) + .text(d => d); }); -// Circle C: left side (two lines) -const cx0 = CIRCLES[2].cx - CIRCLES[2].r - 26; -["Secretly", "Loved"].forEach((word, i) => { +// --- "outside all circles" annotation --- +const outsideItems = items.filter(d => d.zone === "outside"); +if (outsideItems.length) { svg.append("text") - .attr("x", cx0).attr("y", CIRCLES[2].cy - 13 + i * 28) - .attr("text-anchor", "end").attr("fill", CIRCLES[2].color) - .style("font-size", "20px").style("font-weight", "700") - .style("font-family", catFont).text(word); -}); - -// --- Items (stacked vertically within each zone) --- -const itemsByZone = d3.group(items, d => d.zone); -const SPACING = 24; - -itemsByZone.forEach((zoneItems, zone) => { - const { x: zx, y: zy } = ZONE_CENTROIDS[zone]; - const n = zoneItems.length; - const totalH = (n - 1) * SPACING; - const isOutside = zone === "outside"; + .attr("x", ZONE_CENTROIDS.outside.x) + .attr("y", d3.min(outsideItems, d => d.y) - 22) + .attr("text-anchor", "middle").attr("fill", inkMuted) + .style("font-size", "14px").style("font-style", "italic") + .text("outside all circles"); +} - if (isOutside) { - svg.append("text") - .attr("x", zx).attr("y", zy - totalH / 2 - 20) - .attr("text-anchor", "middle").attr("fill", inkMuted) - .style("font-size", "11px").style("font-style", "italic") - .text("outside all circles"); - } - - zoneItems.forEach((item, i) => { - const y = zy - totalH / 2 + i * SPACING; - svg.append("text") - .attr("x", zx).attr("y", y) - .attr("text-anchor", "middle").attr("dominant-baseline", "middle") - .attr("fill", isOutside ? inkMuted : t.inkSoft) - .style("font-size", "14px") - .style("font-style", isOutside ? "italic" : "normal") - .style("font-family", "system-ui, -apple-system, sans-serif") - .text(item.label); - }); -}); +// --- Items (data join over all items, positions from d3.group stacking) --- +svg.selectAll("text.venn-item").data(items).join("text") + .attr("class", "venn-item") + .attr("x", d => d.x) + .attr("y", d => d.y) + .attr("text-anchor", "middle") + .attr("dominant-baseline", "middle") + .attr("fill", d => d.zone === "outside" ? inkMuted : t.inkSoft) + .style("font-size", "14px") + .style("font-style", d => d.zone === "outside" ? "italic" : "normal") + .style("font-family", "system-ui, -apple-system, sans-serif") + .text(d => d.label); // --- Title --- -const titleText = "venn-labeled-items · javascript · d3 · anyplot.ai"; svg.append("text") .attr("x", width / 2).attr("y", 46) .attr("text-anchor", "middle").attr("fill", t.ink) .style("font-size", "22px").style("font-weight", "600") - .text(titleText); + .text("venn-labeled-items · javascript · d3 · anyplot.ai"); From 313d53a6cac0624f3963c40b8e2ee5efbf25defd Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 25 Jun 2026 12:15:23 +0000 Subject: [PATCH 5/5] chore(d3): update quality score 87 and review feedback for venn-labeled-items --- .../metadata/javascript/d3.yaml | 151 ++++++++++-------- 1 file changed, 82 insertions(+), 69 deletions(-) diff --git a/plots/venn-labeled-items/metadata/javascript/d3.yaml b/plots/venn-labeled-items/metadata/javascript/d3.yaml index 7c8eb24227..87ea44ee55 100644 --- a/plots/venn-labeled-items/metadata/javascript/d3.yaml +++ b/plots/venn-labeled-items/metadata/javascript/d3.yaml @@ -2,7 +2,7 @@ library: d3 language: javascript specification_id: venn-labeled-items created: '2026-06-25T11:44:36Z' -updated: '2026-06-25T11:51:44Z' +updated: '2026-06-25T12:15:23Z' generated_by: claude-sonnet workflow_run: 28167148901 issue: 5364 @@ -15,35 +15,37 @@ preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/venn-labe quality_score: 87 review: strengths: - - Perfect spec compliance — all 7 zones + outside populated with witty, editorial-quality - tech items - - Excellent Imprint palette compliance — correct canonical order, theme-adaptive - chrome, identical data colors across renders - - Editorial serif (Georgia) category labels add genuine magazine personality matching - the Chartgeist-style spec intent - - Perfect code quality — flat, deterministic, clean, idiomatic d3.group() usage - - Both light and dark renders are fully readable with no theme-adaptation failures + - 'Perfect spec compliance: all seven zones plus outside populated, semi-transparent + fills, category labels outside circles in their correct colors' + - 'Excellent data quality: real witty editorial items with believable zone assignments + that fit the WIRED Chartgeist aesthetic' + - Clean idiomatic D3 using d3.group data joins and ANYPLOT_TOKENS/ANYPLOT_SIZE correctly + - 'Full theme adaptation: both light and dark renders pass readability with no dark-on-dark + failures' + - Serif category labels (Georgia) reinforce the editorial magazine aesthetic called + for in the spec weaknesses: - - '"outside all circles" annotation text is 11px CSS — below the 14px recommended - minimum; increase to 13-14px to match item label sizing' - - 'Notable empty space at the bottom (~23% of canvas height): shift the diagram - center upward by ~60-80px (lower all CIRCLES cy values and ZONE_CENTROIDS y values - by ~60) to better balance top/bottom whitespace' - - 'LM-02 limited: D3 is used mostly as an SVG helper; consider using d3.forceSimulation - for label placement or d3.arc for a more sophisticated circle-path approach to - showcase D3''s distinctive capabilities' + - Item labels at 14px are at the lower end for a 2400 px canvas — bumping to 15-16px + would improve mobile readability without crowding zones + - 'No visual hierarchy among items: all render identically (same color, size) — + consider slightly larger or bolder text for ABC intersection items (Sourdough, + Zoom) to make the triple-overlap punchline pop' + - Optional editorial subtitle absent — adding a light subtitle like 'A Cultural + Status Report' in smaller italic serif would elevate the editorial feel + - Zone centroids for outside items (x=975) sit close to the right canvas edge; a + small left-shift would provide more breathing room image_description: |- Light render (plot-light.png): - Background: Warm off-white (#FAF8F1) — correct light theme surface - Chrome: Title "venn-labeled-items · javascript · d3 · anyplot.ai" at 22px bold, fully readable in dark ink. Category labels "Overhyped" (top), "Actually Useful" (right), "Secretly Loved" (left) in their respective Imprint colors at 20px serif (Georgia), all readable. Item labels at 14px system-ui, inkSoft color. "outside all circles" annotation at 11px italic (slightly small). "Landlines" at 14px italic. - Data: Three overlapping circles — green (#009E73) for Overhyped, lavender (#C475FD) for Actually Useful, blue (#4467A3) for Secretly Loved — with 12% opacity fills and colored strokes. First series correctly uses #009E73. 20 items distributed across all zones. - Legibility verdict: PASS (minor: "outside all circles" annotation is 11px, slightly below 14px floor) + Background: Warm off-white (#FAF8F1) — correct theme surface + Chrome: Title "venn-labeled-items · javascript · d3 · anyplot.ai" at top in dark ink (22px, weight 600) — fully readable. Category labels in bold Georgia serif in their respective palette colors (green/lavender/blue) — clearly visible. No axis labels or tick labels (not applicable for Venn). + Data: Three overlapping circles — green (#009E73) for Overhyped, lavender (#C475FD) for Actually Useful, blue (#4467A3) for Secretly Loved. 12% opacity fills show overlapping regions. Item labels in 14px sans-serif using inkSoft token. Outside items in muted italic. + Legibility verdict: PASS — all text readable against light background; no light-on-light issues Dark render (plot-dark.png): - Background: Warm near-black (#1A1A17) — correct dark theme surface - Chrome: Title visible in off-white ink (t.ink). Category labels retain their Imprint colors (green/lavender/blue) and are readable. Item labels appear in t.inkSoft (light-muted). "outside all circles" annotation uses dark inkMuted (#A8A79F) — readable. No dark-on-dark failures. - Data: Data colors are identical to the light render (green/lavender/blue circles unchanged). The overlapping regions appear darker but remain distinguishable. - Legibility verdict: PASS + Background: Warm near-black (#1A1A17) — correct theme surface + Chrome: Title and item labels switch to light-colored text (inkSoft token — light gray) — clearly readable against the dark surface. Category labels remain in the same palette colors (green/lavender/blue), all readable against dark background. No dark-on-dark failures detected. + Data: Data colors are identical to the light render — same green, lavender, and blue circle strokes and fills. The 12% opacity fills create subtle pools against the near-black background, maintaining overlap visibility. + Legibility verdict: PASS — all text readable; chrome correctly adapts to dark theme criteria_checklist: visual_quality: score: 28 @@ -54,48 +56,53 @@ review: score: 7 max: 8 passed: true - comment: All font sizes explicitly set; 'outside all circles' annotation at - 11px CSS is below 14px floor + comment: 'All font sizes explicitly set (title 22px, category labels 20px + bold, items 14px). Readable in both themes. Minor: item labels at 14px are + at the lower bound for 2400px canvas.' - id: VQ-02 name: No Overlap score: 6 max: 6 passed: true - comment: Items stacked with 24px spacing; no zone collisions + comment: Vertical stacking with 24px spacing prevents any text collision across + all seven zones plus outside. - id: VQ-03 name: Element Visibility score: 6 max: 6 passed: true - comment: Circles, fills, strokes, and labels clearly visible in both themes + comment: Circle strokes clearly delineate rings; 12% fills appropriately transparent; + text-only items suit the editorial spec. - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: Imprint palette CVD-safe; three distinct hue families + comment: Imprint palette is CVD-safe; semi-transparent fills let background + show through. - id: VQ-05 name: Layout & Canvas score: 3 max: 4 passed: true - comment: ~23% canvas height unused below the diagram; slightly unbalanced - vertical margins + comment: 'Well-centered diagram filling ~70% of canvas. Minor: upper-right + outside zone leaves some empty space.' - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: No traditional axes; category labels descriptive; title correct + comment: No axes (correct for Venn); title in required format; category names + as clear zone labels. - id: VQ-07 name: Palette Compliance score: 2 max: 2 passed: true - comment: palette[0,1,2] in canonical order; theme-adaptive chrome; data colors - identical across themes + comment: 'First circle #009E73; positions 2-3 canonical Imprint order; background + #FAF8F1 light / #1A1A17 dark; chrome adapts correctly.' design_excellence: - score: 13 + score: 12 max: 20 items: - id: DE-01 @@ -103,23 +110,22 @@ review: score: 5 max: 8 passed: true - comment: Editorial serif for category names, color-coded labels, restrained - fills show genuine design intent; above default (4) but not publication-level - (6+) + comment: 'Intentional editorial choices: bold Georgia serif for category labels, + italic for outside items, color-matched labels. Above defaults but not publication-ready.' - id: DE-02 name: Visual Refinement score: 4 max: 6 passed: true - comment: No grid, no spines, serif/sans hierarchy adds refinement; bottom - empty space reduces polish + comment: Gridless, no spines, generous whitespace, semi-transparent fills + with matching strokes. Good refinement. - id: DE-03 name: Data Storytelling - score: 4 + score: 3 max: 6 - passed: true - comment: Witty editorial item choices create coherent tech commentary story; - Landlines outside is a nice touch + passed: false + comment: Good editorial item choices but no visual hierarchy — all items render + identically, missing opportunity to emphasize the ABC triple-overlap punchline. spec_compliance: score: 15 max: 15 @@ -129,26 +135,28 @@ review: score: 5 max: 5 passed: true - comment: Standard symmetric three-circle Venn with all seven interior zones + comment: Correct three-circle Venn with symmetric layout, equally-sized circles, + clear overlaps. - id: SC-02 name: Required Features score: 4 max: 4 passed: true - comment: Semi-transparent fills, colored strokes, item labels, category names - outside, outside-zone handling all present + comment: Semi-transparent fills, category names outside circles, items as + labeled text, all 7 zones + outside populated, gridless. - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: All 20 items correctly placed; all zone centroids logical + comment: All items placed in correct zones; outside items separated from circles. - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: Title is exactly 'venn-labeled-items · javascript · d3 · anyplot.ai' + comment: Title exactly 'venn-labeled-items · javascript · d3 · anyplot.ai'. + No series legend needed; category labels fulfill the role. data_quality: score: 15 max: 15 @@ -158,21 +166,22 @@ review: score: 6 max: 6 passed: true - comment: All 7 interior zones + outside populated; 20 items within 10-25 spec - range + comment: All 7 zones plus outside populated; good distribution across zone + types. - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: Real-world tech products with witty editorial categories; neutral, - relatable + comment: Real pop-culture items with believable editorial judgment; matches + WIRED Chartgeist aesthetic. - id: DQ-03 name: Appropriate Scale score: 4 max: 4 passed: true - comment: 20 items distributed sensibly across zones + comment: Zone assignments are plausible and witty; NFTs/Metaverse as Overhyped, + GPS/Wikipedia as Actually Useful, Sourdough in all three. code_quality: score: 10 max: 10 @@ -182,33 +191,36 @@ review: score: 3 max: 3 passed: true - comment: Flat procedural code; no functions or classes + comment: Data → SVG → circles → category labels → outside annotation → items + → title. No functions or classes. - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: All data hard-coded; fully deterministic + comment: All data hardcoded; fully deterministic. - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: No imports; d3 is the only global + comment: d3 is the single global; no unused imports. - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: Clean, idiomatic; d3.group() used appropriately; no fake UI + comment: Uses d3.group for zone stacking, data joins throughout; clean and + idiomatic. - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: Square orientation declared; harness handles output + comment: D3 interactive library; harness emits plot-{theme}.png + plot-{theme}.html + correctly. library_mastery: - score: 6 + score: 7 max: 10 items: - id: LM-01 @@ -216,17 +228,17 @@ review: score: 4 max: 5 passed: true - comment: D3 selection pattern, d3.group(), method chaining, ANYPLOT_TOKENS/SIZE - usage all idiomatic + comment: Good use of d3.group (D3 v6+ API), d3.scaleOrdinal, .data().join() + data-join, d3.min, correct ANYPLOT_TOKENS/ANYPLOT_SIZE usage. - id: LM-02 name: Distinctive Features - score: 2 + score: 3 max: 5 - passed: false - comment: d3.group() is a nice use of D3 array utilities; otherwise primarily - SVG attribute manipulation; D3-distinctive features (scales, force simulation, - data-join) unused - verdict: REJECTED + passed: true + comment: d3.group for grouping/stacking is D3-idiomatic, but Venn geometry + is entirely manually positioned rather than algorithmically derived using + D3 math utilities. + verdict: APPROVED impl_tags: dependencies: [] techniques: @@ -237,3 +249,4 @@ impl_tags: dataprep: [] styling: - alpha-blending + - minimal-chrome