{"spec_id":"venn-labeled-items","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items\n// Library: highcharts 12.6.0 | JavaScript 22.22.3\n// Quality: 91/100 | Created: 2026-06-25\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// Symmetric 3-circle Venn: equilateral triangle, side 300 px, radius 230 px\n// All coordinates in CSS px within the 1600×900 landscape mount\nconst circles = [\n  { cx: 650, cy: 340, r: 230, color: t.palette[0] }, // A: Overhyped      — brand green\n  { cx: 950, cy: 340, r: 230, color: t.palette[2] }, // B: Actually Useful — blue\n  { cx: 800, cy: 600, r: 230, color: t.palette[1] }, // C: Secretly Loved  — lavender\n];\n\n// Category labels outside each circle's outer edge\nconst catLabels = [\n  { text: 'Overhyped',       x: 395,  y: 183, align: 'center' },\n  { text: 'Actually Useful', x: 1205, y: 183, align: 'center' },\n  { text: 'Secretly Loved',  x: 800,  y: 862, align: 'center' },\n];\n\n// Items placed in zones — positions verified inside correct set regions\nconst items = [\n  // A only (Overhyped, not useful, not loved)\n  { label: 'NFTs',         x: 460,  y: 270 },\n  { label: 'Web3',         x: 460,  y: 298 },\n  { label: 'Metaverse',    x: 456,  y: 326 },\n  // B only (Useful, not hyped, not loved)\n  { label: 'Spreadsheets', x: 1140, y: 270 },\n  { label: 'Git',          x: 1140, y: 298 },\n  { label: 'Terminal',     x: 1140, y: 326 },\n  // C only (Secretly loved, neither hyped nor practical)\n  { label: 'Fax Machines', x: 800,  y: 790 },\n  { label: 'MySpace',      x: 800,  y: 817 },\n  // AB (Overhyped AND Useful)\n  { label: 'AI Chatbots',   x: 800, y: 230 },\n  { label: 'Cloud Storage', x: 800, y: 258 },\n  // AC (Overhyped AND Secretly Loved)\n  { label: 'Vinyl Records', x: 677, y: 495 },\n  { label: 'Life Hacks',    x: 676, y: 522 },\n  // BC (Useful AND Secretly Loved)\n  { label: 'Wikipedia',    x: 923, y: 495 },\n  { label: 'RSS Feeds',    x: 924, y: 522 },\n  // ABC (all three) — bold/larger to signal multi-zone status\n  { label: 'Podcasts',     x: 800, y: 435, abc: true },\n  { label: 'Sourdough',    x: 800, y: 462, abc: true },\n];\n\nHighcharts.chart('container', {\n  chart: {\n    backgroundColor: 'transparent',\n    plotBackgroundColor: 'transparent',\n    plotBorderWidth: 0,\n    plotShadow: false,\n    animation: false,\n    margin: [72, 20, 20, 20],\n    style: { fontFamily: 'inherit' },\n    events: {\n      render: function () {\n        if (this._venn) {\n          this._venn.forEach(function (el) { el.destroy(); });\n        }\n        this._venn = [];\n        var r = this.renderer;\n\n        // Semi-transparent filled circles (A then B then C — C appears topmost in overlaps)\n        circles.forEach(function (c) {\n          this._venn.push(\n            r.circle(c.cx, c.cy, c.r)\n              .attr({\n                fill: c.color,\n                'fill-opacity': 0.18,\n                stroke: c.color,\n                'stroke-width': 2.5,\n                'stroke-opacity': 0.6,\n                zIndex: 2,\n              })\n              .add()\n          );\n        }, this);\n\n        // Bold category labels outside each circle\n        catLabels.forEach(function (lb) {\n          this._venn.push(\n            r.text(lb.text, lb.x, lb.y)\n              .attr({ align: lb.align, zIndex: 6 })\n              .css({ color: t.ink, fontSize: '18px', fontWeight: '700', fontFamily: 'Georgia, serif' })\n              .add()\n          );\n        }, this);\n\n        // Item labels — text-only placement (no dot markers)\n        items.forEach(function (item) {\n          var isABC = item.abc;\n          this._venn.push(\n            r.text(item.label, item.x, item.y)\n              .attr({ align: 'center', zIndex: 5 })\n              .css({\n                color: t.ink,\n                fontSize: isABC ? '16px' : '14px',\n                fontWeight: isABC ? '700' : '400',\n              })\n              .add()\n          );\n        }, this);\n      },\n    },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: 'venn-labeled-items · javascript · highcharts · anyplot.ai',\n    style: { color: t.ink, fontSize: '22px', fontWeight: '600' },\n    margin: 8,\n  },\n  subtitle: {\n    text: 'A Cultural Taxonomy of Technology Trends',\n    style: { color: t.inkSoft, fontSize: '14px', fontStyle: 'italic' },\n  },\n  xAxis: { visible: false },\n  yAxis: { visible: false },\n  legend: { enabled: false },\n  plotOptions: { series: { animation: false } },\n  series: [],\n  tooltip: { enabled: false },\n});\n"}