Highlightable Venn Diagram

Built with blockbuilder.org

<style>

.plot-div{
    width: 50%;
    display: block;
    margin: auto;
  }

.plot-svg {
    border-style: solid;
    border-width: 1px;
    border-color: green;
  }

.exlPath:hover {
    opacity: 0.7;
  }

</style>

</div>

var height = 900;
      width  = 1600;

d3.select(".plot-div").append("svg")
      .attr("class", "plot-svg")
      .attr("width", "100%")
      .attr("viewBox", "0 0 1600 900")

var addCirc = function(circ, color){
    d3.select(".plot-svg").append("circle")
    .attr("cx", circ.cx)
    .attr("cy", circ.cy)
    .attr("r", circ.r)
    .attr("fill", color)
    .attr("opacity", "0.5")
  }

var getIntersectionPoints = function(circleA, circleB){

var x1 = circleA.cx,
      y1 = circleA.cy,
      r1 = circleA.r,
      x2 = circleB.cx,
      y2 = circleB.cy,
      r2 = circleB.r;

var d = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
      a = (Math.pow(r1,2)-Math.pow(r2,2)+Math.pow(d,2))/(2*d),
      h = Math.sqrt(Math.pow(r1,2)-Math.pow(a,2));

var MPx = x1 + a*(x2-x1)/d,
      MPy = y1 + a*(y2-y1)/d,
      IP1x = MPx + h*(y2-y1)/d,
      IP1y = MPy - h*(x2-x1)/d,
      IP2x = MPx - h*(y2-y1)/d,
      IP2y = MPy + h*(x2-x1)/d;

return [{x:IP1x,y:IP1y},{x:IP2x,y:IP2y}]

}

var getExclusionPath = function(keepCircle, excludeCircle){

IPs = getIntersectionPoints(keepCircle, excludeCircle);

var start = `M ${IPs[0].x},${IPs[0].y}`,
        arc1 = `A ${keepCircle.r},${keepCircle.r},0,1,0,${IPs[1].x},${IPs[1].y}`,
        arc2 = `A ${excludeCircle.r},${excludeCircle.r},0,0,1,${IPs[0].x},${IPs[0].y}`,
        pathStr = start+' '+arc1+' '+arc2;

return pathStr;

}

var circleA = {cx: 600, cy: 500, r: 400};
  var circleB = {cx: 900, cy: 400, r: 300};

var pathStr = getExclusionPath(circleA, circleB)

addCirc(circleA, "steelblue");
  addCirc(circleB, "darkseagreen");

d3.select(".plot-svg").append("text")
    .text("Hover over blue circle")
    .attr("font-size", 70)
    .attr("x", 30)
    .attr("y", 70)

d3.select(".plot-svg").append("path")
    .attr("class","exlPath")
    .attr("d", pathStr)
    .attr("stroke","steelblue")
    .attr("stroke-width","10")
    .attr("fill","white")
    .attr("opacity",0)

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js