Centering D3 chart + adding responsiveness

by sladav

HTML

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

</div>

CSS

.plot-div{
  width: 50%;
  display: block;
  margin: auto;
}

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

JavaScript

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

var outerWidth  = 1600,
		outerHeight = 900;

var width  = outerWidth - margin.right - margin.left,
		height = outerHeight - margin.top - margin.bottom;
		
			
d3.select(".plot-div").append("svg")
		.attr("class", "plot-svg")
		.attr("width", "100%")
    .attr("viewBox", "0 0 " + outerWidth + " " + outerHeight)
    .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")
    
d3.select(".plot-svg").append("rect")
		.attr("x", 0)
    .attr("y", 3*outerHeight/4)
		.attr("width", 800)
    .attr("height", outerHeight/4)
    .attr("fill", "grey")