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 svg = d3.select(el[0]).append("svg")
    .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", 500)
    .attr("height", 500)
    .style("fill", "red")
    .style('opacity', 0.75)

  var rect = svg
    .append("circle").attr("cx", 250).attr("cy", 250).attr("r", 125).style("fill", "white");

  console.log("svg", svg)


});