{"spec_id":"venn-labeled-items","library":"muix","language":"javascript","code":"// anyplot.ai\n// venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items\n// Library: muix 7.29.1 | JavaScript 22.22.3\n// Quality: 84/100 | Created: 2026-06-25\n//# anyplot-orientation: landscape\n// anyplot.ai\n// venn-labeled-items: Chartgeist-Style Venn Diagram with Labeled Items\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-06-25\n\nimport { ChartContainer } from \"@mui/x-charts/ChartContainer\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Venn circle radius and centres — equilateral triangle, d=320, r=230\n// gives clear pairwise and triple overlaps with generous whitespace\nconst R = 230;\n\nconst CIRCLES = [\n  { key: \"A\", name: \"Pretentious\", cx: 800, cy: 325, color: t.palette[0], lx: 800,  ly: 74  },\n  { key: \"B\", name: \"Delicious\",   cx: 640, cy: 602, color: t.palette[1], lx: 475,  ly: 856 },\n  { key: \"C\", name: \"Affordable\",  cx: 960, cy: 602, color: t.palette[2], lx: 1125, ly: 856 },\n];\n\n// Items — each placed at a coordinate that lies within its assigned zone only.\n// Coordinates verified analytically against all three circle boundaries.\nconst ITEMS = [\n  // A only\n  { label: \"Kombucha\",        x: 762,  y: 230 },\n  { label: \"Matcha Latte\",    x: 844,  y: 207 },\n  // AB\n  { label: \"Oat Milk Latte\",  x: 676,  y: 413 },\n  { label: \"Cold Brew\",       x: 716,  y: 456 },\n  { label: \"Flat White\",      x: 700,  y: 499 },\n  // AC\n  { label: \"Sparkling Water\", x: 885,  y: 417 },\n  { label: \"Energy Drink\",    x: 921,  y: 469 },\n  // B only\n  { label: \"Espresso\",        x: 490,  y: 732 },\n  { label: \"Cappuccino\",      x: 528,  y: 764 },\n  // BC — spread x-coords to reduce crowding\n  { label: \"Diner Coffee\",    x: 720,  y: 625 },\n  { label: \"Green Tea\",       x: 800,  y: 665 },\n  { label: \"Orange Juice\",    x: 880,  y: 645 },\n  // C only\n  { label: \"Tap Water\",       x: 1074, y: 732 },\n  { label: \"Herbal Tea\",      x: 1112, y: 764 },\n  // ABC\n  { label: \"Chai\",            x: 800,  y: 510 },\n];\n\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n\n  return (\n    <ChartContainer\n      width={W}\n      height={H}\n      series={[]}\n      margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n      sx={{ background: t.pageBg, display: \"block\" }}\n    >\n      {/* Two-line editorial title */}\n      <text\n        x={W / 2}\n        y={26}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={26}\n        fontWeight=\"700\"\n        fill={t.ink}\n        fontFamily=\"Georgia, 'Times New Roman', serif\"\n      >\n        A Taxonomy of Beverages\n      </text>\n      <text\n        x={W / 2}\n        y={52}\n        textAnchor=\"middle\"\n        dominantBaseline=\"middle\"\n        fontSize={13}\n        fill={t.inkSoft}\n        fontFamily=\"Arial, Helvetica, sans-serif\"\n        style={{ letterSpacing: \"0.4px\" }}\n      >\n        venn-labeled-items · javascript · muix · anyplot.ai\n      </text>\n\n      {/* Venn circles — semi-transparent fills let overlap regions show through */}\n      {CIRCLES.map(c => (\n        <circle\n          key={c.key}\n          cx={c.cx}\n          cy={c.cy}\n          r={R}\n          fill={c.color}\n          fillOpacity={0.15}\n          stroke={c.color}\n          strokeOpacity={0.55}\n          strokeWidth={2}\n        />\n      ))}\n\n      {/* Category labels outside each circle, uppercase serif in circle colour */}\n      {CIRCLES.map(c => (\n        <text\n          key={c.key + \"-lbl\"}\n          x={c.lx}\n          y={c.ly}\n          textAnchor=\"middle\"\n          dominantBaseline=\"middle\"\n          fontSize={18}\n          fontWeight=\"700\"\n          fill={c.color}\n          fontFamily=\"Georgia, 'Times New Roman', serif\"\n          style={{ letterSpacing: \"1px\" }}\n        >\n          {c.name.toUpperCase()}\n        </text>\n      ))}\n\n      {/* Item labels — bullet dot + text above it */}\n      {ITEMS.map((item, i) => (\n        <g key={i}>\n          <circle\n            cx={item.x}\n            cy={item.y}\n            r={3.5}\n            fill={t.inkSoft}\n            fillOpacity={0.65}\n          />\n          <text\n            x={item.x}\n            y={item.y - 10}\n            textAnchor=\"middle\"\n            dominantBaseline=\"auto\"\n            fontSize={15}\n            fill={t.ink}\n            fontFamily=\"Arial, Helvetica, sans-serif\"\n          >\n            {item.label}\n          </text>\n        </g>\n      ))}\n    </ChartContainer>\n  );\n}\n"}