Figure out responsive scaling for the graphs.

[mroberge]

Method 1: onresize use the window.onresize event to trigger your chart element to call the width function and set the width to the size of the window. Like this:

window.onresize = d3.select("#mychart_div")
  .call(myChart.width(window.innerWidth));

This will cause your entire chart to run through all of its operations, like sorting data or whatever.

Method 2: viewbox: with this method, you allow the svg element and everything in it to be scaled to fit a space. To make it work, you first need to set the width and height of the svg to 100% in the css. This forces the svg element to change in size as the window size changes: http://jsfiddle.net/Thyti/8KVtU/452/

svg { width: 100%; height: 100% }

Then, you add the viewbox attribute programatically to create a new coordinate system that has the same number of width and height units as the svg. You need to do it this way because D3 scales everything to the size of the svg, so you want the sizes to be 1:1. Finally, you set a preserveAspectRatio attribute to none, but this may be the default. See:

var svg = d3.select(this);
svg.attr("viewBox", "0 0 " + width + " " + height)
   .attr("preserveAspectRatio", "none");

This last method works great, but as the svg gets stretched, it makes the text look funny.