Highlightable Venn Diagram

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

​

<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 class="plot-div">

​

</div>

​

<script>

​

  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>