JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/venn.js" defer></script>
<style>
  svg text {
    fill: #000099;
    font-family: "Work Sans", sans-serif;
  }

  [data-venn-sets="A"] {
    fill: #FF4D16;
  }

  [data-venn-sets="C"] {
    fill: #48B9E5;
  }

  [data-venn-sets="B"] {
    fill: #8EE5BB;
  }

  [data-venn-sets="D"] {
    fill: #FFA000;
  }

  [data-venn-sets="A_B"] {
    fill: #FFC4A7;
  }

  [data-venn-sets="A_C"] {
    fill: #D7D5A1;
  }

  [data-venn-sets="A_D"] {
    fill: #FDF6B2;
  }

</style>

<div id="venn"></div>

<script>
  document.addEventListener("DOMContentLoaded", function() {

    var elwidth = document.getElementById("venn").offsetWidth;
    var fontWidth = 11;
    if (elwidth >= 400 && elwidth < 600) {
      fontWidth = 14;
    } else if (elwidth >= 600) {
      fontWidth = 16;
    }

    var sets = [{
        sets: ['A'],
        size: 12,
        label: 'Alpha'
      },
      {
        sets: ['B'],
        size: 12,
        label: 'Beta'
      },
      {
        sets: ['C'],
        size: 8,
        label: 'Sigma'
      },
      {
        sets: ['D'],
        size: 6,
        label: 'Delta'
      },
      {
        sets: ['A', 'B'],
        size: 4,
        label: "Alpha+Beta"
      },
      {
        sets: ['A', 'C'],
        size: 4,
        label: 'Alpha+Sigma'
      },
      {
        sets: ['A', 'D'],
        size: 1.5,
        label: 'Alpha+Delta'
      }
    ];

    var chart = venn.VennDiagram()
      .styled(false)
      .wrap(false)
      .fontSize(fontWidth + "px")
      .width(elwidth)
      .height(elwidth / 1.5);

    d3.select("#venn").datum(sets).call(chart);

  });

</script>