Responsive + Centered SVG

<style> 

  .plot-div{

    width: 50%;

    display: block;

    margin: auto;

  }

​

  .plot-svg {

    border-style: solid;

    border-width: 1px;

    border-color: green;

  }

</style>

​

<script src="https://d3js.org/d3.v3.min.js"></script>

<div class="plot-div">

​

</div>

​

<script>

  var margin = {top: 100, right: 150, bottom: 100, left: 150}

  var height = 900 - margin.top - margin.bottom,

      width  = 1600 - margin.right - margin.left;

​

  d3.select(".plot-div").append("svg")

      .attr("class", "plot-svg")

      .attr("width", "100%")

      .attr("viewBox", "0 0 1600 900")

      .append("g")

        .attr("class", "plot-space")

        .attr("transform", 

          "translate(" + margin.left + "," + margin.top + ")"

          );

  d3.select(".plot-svg").append("circle")

      .attr("cx", width/3)

      .attr("cy", height/2)

      .attr("r", 50)

      .attr("fill", "red")

​

  d3.select(".plot-svg").append("circle")

      .attr("cx", 3*width/4)

      .attr("cy", height/3)

      .attr("r", 150)

      .attr("fill", "blue")

​

  d3.select(".plot-svg").append("circle")

      .attr("cx", width/2)

      .attr("cy", 2*height/3)

      .attr("r", 100)

      .attr("fill", "green")

</script>