{"spec_id":"venn-labeled-items","library":"echarts","language":"javascript","code":"// anyplot.ai\n// venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items\n// Library: echarts 5.5.1 | JavaScript 22.23.0\n// Quality: 86/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Geometry (CSS px in 1200×1200 mount → 2400×2400 PNG at dpr=2) ---------\n// Three-circle Venn: equilateral triangle arrangement, R=225, D=145 from centroid\n// Diagram shifted down ~90px vs initial to vertically center on the canvas\nconst R   = 225;\nconst cAx = 600, cAy = 515;   // Overhyped      (top)\nconst cBx = 474, cBy = 733;   // Actually Useful (bottom-left)\nconst cCx = 726, cCy = 733;   // Secretly Loved  (bottom-right)\n\n// --- Data -------------------------------------------------------------------\n// Zone item placement centers — each verified to sit inside the correct region(s)\n//   A-only : dist<R from A, dist>R from B and C\n//   AB-only : dist<R from A and B, dist>R from C\n//   ABC    : dist<R from all three\nconst ITEM_FS = 14;   // item font size (CSS px)\nconst ITEM_LS = 24;   // vertical line spacing\n\nconst zoneData = [\n  { x: 600, y: 398, items: ['NFTs', 'Metaverse', 'Web3'] },           // A only\n  { x: 370, y: 818, items: ['Google Maps', 'Spreadsheets', 'Git'] },  // B only\n  { x: 830, y: 818, items: ['Wikipedia', 'RSS Feeds', 'Notepad'] },   // C only\n  { x: 500, y: 565, items: ['AI Assistants', 'Cloud Storage'] },      // AB only\n  { x: 700, y: 565, items: ['Twitter / X', 'Crypto Wallets'] },       // AC only\n  { x: 600, y: 816, items: ['Linux Terminal', 'Plain Text'] },        // BC only\n  { x: 600, y: 658, items: ['Markdown'] },                            // ABC\n];\n\n// --- Init -------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById('container'));\n\n// --- Graphic elements -------------------------------------------------------\n\n// Semi-transparent overlapping circles (Imprint palette, positions 1-3)\nconst circleGraphics = [\n  { cx: cAx, cy: cAy, stroke: '#009E73', fill: 'rgba(0,158,115,0.18)' },\n  { cx: cBx, cy: cBy, stroke: '#C475FD', fill: 'rgba(196,117,253,0.18)' },\n  { cx: cCx, cy: cCy, stroke: '#4467A3', fill: 'rgba(68,103,163,0.18)' },\n].map(c => ({\n  type: 'circle',\n  shape: { cx: c.cx, cy: c.cy, r: R },\n  style: { fill: c.fill, stroke: c.stroke, lineWidth: 2.5 },\n  z: 5,\n}));\n\n// Category labels outside each circle — serif for editorial feel\nconst catLabelGraphics = [\n  { text: 'Overhyped',       x: 600, y: 256, color: '#009E73' },\n  { text: 'Actually Useful', x: 330, y: 985, color: '#C475FD' },\n  { text: 'Secretly Loved',  x: 870, y: 985, color: '#4467A3' },\n].map(l => ({\n  type: 'text',\n  z: 20,\n  style: {\n    text: l.text,\n    x: l.x,\n    y: l.y,\n    textAlign: 'center',\n    textVerticalAlign: 'middle',\n    fill: l.color,\n    fontSize: 17,\n    fontWeight: 'bold',\n    fontFamily: 'Georgia, \"Times New Roman\", serif',\n  },\n}));\n\n// Item labels — stacked vertically within each zone center\nconst itemGraphics = [];\nzoneData.forEach(zone => {\n  const n = zone.items.length;\n  zone.items.forEach((item, i) => {\n    itemGraphics.push({\n      type: 'text',\n      z: 20,\n      style: {\n        text: '· ' + item,\n        x: zone.x,\n        y: zone.y + (i - (n - 1) / 2) * ITEM_LS,\n        textAlign: 'center',\n        textVerticalAlign: 'middle',\n        fill: t.inkSoft,\n        fontSize: ITEM_FS,\n        fontFamily: '\"Helvetica Neue\", Arial, sans-serif',\n        fontWeight: 'normal',\n      },\n    });\n  });\n});\n\n// --- Option -----------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: t.pageBg,\n  title: {\n    text: 'venn-labeled-items · javascript · echarts · anyplot.ai',\n    subtext: 'Where hype, utility, and cult status overlap',\n    left: 'center',\n    top: 22,\n    textStyle: {\n      color: t.ink,\n      fontSize: 22,\n      fontWeight: 'normal',\n    },\n    subtextStyle: {\n      color: t.inkSoft,\n      fontSize: 14,\n      fontFamily: 'Georgia, \"Times New Roman\", serif',\n      fontStyle: 'italic',\n    },\n  },\n  graphic: [\n    ...circleGraphics,\n    ...catLabelGraphics,\n    ...itemGraphics,\n  ],\n});\n"}