Responsive + Centered SVG

Built with blockbuilder.org

.plot-svg {
    border-style: solid;
    border-width: 1px;
    border-color: green;
  }
</style>

</div>

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>

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