title: responsive D3 chart
body: <p>I have this D3 chart - pretty much out of the box. Is there a way to make it responsive and use percentages for the width and height variables, innerRadius, and outerRadius? I'm workign on a responsive site and need this to change based on screen size/browser size.</p>
  
  <p>jsfiddle here: <a href="http://jsfiddle.net/BTfmH/1/" rel="noreferrer">http://jsfiddle.net/BTfmH/1/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style type="text/css"&gt;
  html,
  body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
  }
  
  .chart-container {
  /*  width:50%;
    height:50%;*/
  }
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    var width = 350,
        height = 350,
        τ = 2 * Math.PI;
  
    var arc = d3.svg.arc()
        .innerRadius(100)
        .outerRadius(135)
        .startAngle(0);
  
  var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  
    var background = svg.append("path")
        .datum({endAngle: τ})
        .style("fill", "green")
        .attr("d", arc);
  
    var foreground = svg.append("path")
      .datum({endAngle: .127 * τ})
        .style("fill", "grey")
        .attr("d", arc);
  
  setInterval(function() {
    foreground.transition()
        .duration(750)
        .call(arcTween, Math.random() * τ);
  }, 1500);
  
    function arcTween(transition, newAngle) {
  
      transition.attrTween("d", function(d) {
  
        var interpolate = d3.interpolate(d.endAngle, newAngle);
  
        return function(t) {
  
          d.endAngle = interpolate(t);
  
          return arc(d);
        };
      });
  }
  &lt;/script&gt;
  </code></pre>