Venn diagram

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="venn.min.js"></script>
  <style>
    body { margin:20px;position:fixed;top:0;right:0;bottom:0;left:0; 
      background-color: black; }

svg {
      isolation: isolate; 
    }
    
    path {
      mix-blend-mode: screen;
      fill-opacity: 0.8 !important;
    }
    
    text {
      fill: white !important;
      font-family: verdana;
    }
  </style>
</head>

<body>
  <div id="venn" />
  <script>
    var a = 'Long name is very loong is Long name is very loong';
    
    var sets = [ {sets: [a], size: 10}, 
                {sets: ['B'], size: 10},
                {sets: ['C'], size: 10},
                {sets: ['D'], size: 10},

{sets: [a,'B'], size: 2},
                {sets: ['B','C'], size: 2},
                {sets: ['D',a], size: 2},
                {sets: ['D','B'], size: 2},
                {sets: ['D','C'], size: 2},
               ];

var chart = venn.VennDiagram()
    chart
      .width(579)
      .height(500)
      .padding(0)
    	.orientation(Math.PI)

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

d3.selectAll(".venn-intersection") 
      .on('mouseover', function() {
      d3.select(this).attr('stroke', 'black')
    })
      .on('mouseout', function() {
      d3.select(this).attr('stroke', 'none')
    })

</script>
</body>

https://d3js.org/d3.v4.min.js