title: What's the best way to make a d3.js visualisation layout responsive?
body: <p>Assume I have a histogram script that builds a 960 500 svg graphic. How do I make this responsive so on resize the graphic widths and heights are dynamic?</p>
  
  <pre><code>&lt;script&gt; 
  
  var n = 10000, // number of trials
      m = 10,    // number of random variables
      data = [];
  
  // Generate an Irwin-Hall distribution.
  for (var i = 0; i &lt; n; i++) {
    for (var s = 0, j = 0; j &lt; m; j++) {
      s += Math.random();
    }
    data.push(s);
  }
  
  var histogram = d3.layout.histogram()
      (data);
  
  var width = 960,
      height = 500;
  
  var x = d3.scale.ordinal()
      .domain(histogram.map(function(d) { return d.x; }))
      .rangeRoundBands([0, width]);
  
  var y = d3.scale.linear()
      .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
      .range([0, height]);
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  svg.selectAll("rect")
      .data(histogram)
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { return height - y(d.y); })
      .attr("height", function(d) { return y(d.y); });
  
  svg.append("line")
      .attr("x1", 0)
      .attr("x2", width)
      .attr("y1", height)
      .attr("y2", height);
  
  &lt;/script&gt; 
  </code></pre>
  
  <p>Full example histogram gist is:
  <a href="https://gist.github.com/993912" rel="noreferrer">https://gist.github.com/993912</a></p>