JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div class="mask"></div>

  <div class="image-back"><img src="http://i.huffpost.com/gen/1979637/images/o-MOVING-HOUSE-facebook.jpg"></div>
</div>

CSS

body {
  background: #eeeeee;
}

#holder {
  position: relative;
  width: 800px;
  height: 500px;
  overflow: hidden;
}

.image-back {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.mask {
  position: relative;
  z-index: 1;
}

.image-back img {
  height: 100%;
  width: auto;
}

JavaScript

$(document).ready(function() {

  var el = $(".mask"); //selector

  // Set the main elements for the series chart
  var svgroot = d3.select(el[0]).append("svg");
  var mask = svgroot
     .append("defs")
     .append("mask")
     .attr("id", "myMask");
  
  mask.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 800)
    .attr("height", 500)
    .style("fill", "white")
    .style("opacity", 0.7);
    
  mask.append("circle")
    .attr("cx", 400)
    .attr("cy", 400)
    .attr("r", 250);
  
  var svg = svgroot
    .attr("class", "series")
    .attr("width", "800px")
    .attr("height", "500px")
    .append("g")
    .attr("transform", "translate(0,0)")

  var rect = svg
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 800)
    .attr("height", 500)
    .attr("mask", "url(#myMask)")
    .style("fill", "red");
    
  console.log("svg", svg)


});