D3 Scaling Container Level

###D3 Scaling on the container level I use this method of defining the chart’s dimensions on the container level so that there is one central place (CSS styling) where all the dimensions are stored. From there I normally scale the chart’s interior to make the contents semi responsive.

In the chart’s styling define height and width:

#chartArea{
    height: 400px;
    width: 400px;
}

Grab the chart’s CSS styling height and width in javascript portion of code:

var divH = parseInt( d3.select("#chartArea").style("height") );
var divW = parseInt( d3.select("#chartArea").style("width") );

From there I recommend using Mike Bostock’s “Margin Convention”. Instead of subtracting some arbitrary value for the height and width, use divH and divW which are defined at the container level.

var margin = {top: 20, right: 10, bottom: 20, left: 10};
var w = divW - margin.left - margin.right;
    h = divH - margin.top - margin.bottom;

Note: Follow margin convention link for full details on implimentation of margin convention.

After posting this I looked around and saw other people had something similar to this. Though implimentation is slightly different.