title: Interpolate line to make a half-circle/arc in d3
body: <p>I'm trying to create a half circle in d3. Using <a href="https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line_interpolate" rel="nofollow">cardinal interpolation</a> produces a path that is close to what I want, but isn't quite "circular" enough. How can I write my own interpolator to better round this path, or is there a better method?</p>
  
  <p>Here is what I have so far: <a href="http://jsfiddle.net/Wexcode/jEfsh/" rel="nofollow">http://jsfiddle.net/Wexcode/jEfsh/</a></p>
  
  <pre><code>&lt;svg width="300" height="500"&gt;
      &lt;g id="g-1"&gt;&lt;/g&gt;
      &lt;g id="g-2"&gt;&lt;/g&gt;
  &lt;/svg&gt;​
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var curved = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate("cardinal")
      .tension(0);
  var straight = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate("linear")
      .tension(0);
  
  var points = [{x: 70, y: 52.5}, {x: 250, y: 250}, {x: 70, y: 447.5}];
  
  d3.select("#g-1").append("path").attr("d", curved(points));
  
  d3.select("#g-2").append("path").attr("d", straight(points));
  </code></pre>