overlay experiment

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

<body>
  <script>
    var w = 960, h = 1600;

var container = d3.select("body")
    	.append("div")
    	.attr("id", "container");

var svg = container.append("svg")
      .attr("width", w)
      .attr("height", h);
    
    svg.append("rect")
    	.attr("y", 0)
    	.attr("x", 0)
    	.attr("width", w)
    	.attr("height", h)
    	.attr("fill", "#ECECEC");

// teh bar we're interested in
    var bar = svg.append("rect")
      .attr("y", 200)
      .attr("x", 300)
    	.attr("height", 10)
    	.attr("width", 100)
    	.attr("fill", "#0098ff")
    	.on("mouseover", function() {
        var pos = this.getBoundingClientRect();
        container.style(
          "-webkit-mask-image",
          "radial-gradient(ellipse at " + (pos.left + pos.width - (pos.width / 2)) + "px " + (pos.top + pos.height - (pos.height / 2)) + "px, rgba(0,0,0,1) 10%, rgba(0,0,0,0.25) 0)"
        )
      })
    	.on("mouseout", function() {
        container.style("-webkit-mask-image", "none");
      });
    
    // moar bars just becuz
    svg.append("rect")
      .attr("y", 220)
      .attr("x", 300)
    	.attr("height", 10)
    	.attr("width", 250)
    	.attr("fill", "#0098ff");
    
    svg.append("rect")
      .attr("y", 240)
      .attr("x", 300)
    	.attr("height", 10)
    	.attr("width", 180)
    	.attr("fill", "#0098ff");
  </script>
</body>

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