javierarce · August 28, 2012 09:13
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
     <style>
      .curve, .line {
        fill: none;
        stroke-width: 1px;
      }
      .curve {
        stroke: red;
        stroke-width: 3px;
      }
      .control {
        fill: #ccc;
        stroke: #000;
        stroke-width: .5px;
      }
      .t, .controltext {
        font-size: .6em;
      }
    </style>

  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">
  var
  w       = 350,
  h       = 200,
  delta   = .003,
  points  = [{x:0, y:0}, {x:100, y: 200 }, { x: 200, y: 0}],
  line    = d3.svg.line().x(function(d) { return d.x; } ).y(function(d) { return d.y; } ),
  orders  = d3.range(3, 4);

  var
  vis = d3.select("#chart")
  .selectAll("svg")
  .data(orders)
  .enter()
  .append("svg")
  .attr("width",  w)
  .attr("height", h)
  .append("g")

  vis.selectAll("path.curve")
  .data(getCurve)
  .enter()
  .append("path")
  .attr("class", "curve")
  .attr("d", line);

  function interpolate(d, p) {
    if (arguments.length < 2) p = t;
    var r = [];

    for (var i = 1; i < d.length; i++) {
      var d0 = d[i - 1],

      d1 = d[i];
      r.push({
        x: d0.x + (d1.x - d0.x) * p,
        y: d0.y + (d1.y - d0.y) * p
      });
    }
    return r;
  }

  function getLevels(d, t_) {
    if (arguments.length < 2) t_ = t;
    var x = [points.slice(0, d)];
    for (var i = 1; i < d; i++) {
      x.push(interpolate(x[x.length - 1], t_));
    }
    return x;
  }

  function getCurve(d) {
    curve = [];

    for (var t_ = 0; t_ <= 1; t_ += delta) {
      var x = getLevels(d, t_);
      curve.push(x[x.length - 1][0]);
    }

    return [curve];
  }
 </script>



  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<style>
	.curve, .line {
	fill: none;
	stroke-width: 1px;
	}
	.curve {
	stroke: red;
	stroke-width: 3px;
	}
	.control {
	fill: #ccc;
	stroke: #000;
	stroke-width: .5px;
	}
	.t, .controltext {
	font-size: .6em;
	}
	</style>

	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript">
	var
	w = 350,
	h = 200,
	delta = .003,
	points = [{x:0, y:0}, {x:100, y: 200 }, { x: 200, y: 0}],
	line = d3.svg.line().x(function(d) { return d.x; } ).y(function(d) { return d.y; } ),
	orders = d3.range(3, 4);

	var
	vis = d3.select("#chart")
	.selectAll("svg")
	.data(orders)
	.enter()
	.append("svg")
	.attr("width", w)
	.attr("height", h)
	.append("g")

	vis.selectAll("path.curve")
	.data(getCurve)
	.enter()
	.append("path")
	.attr("class", "curve")
	.attr("d", line);

	function interpolate(d, p) {
	if (arguments.length < 2) p = t;
	var r = [];

	for (var i = 1; i < d.length; i++) {
	var d0 = d[i - 1],

	d1 = d[i];
	r.push({
	x: d0.x + (d1.x - d0.x) * p,
	y: d0.y + (d1.y - d0.y) * p
	});
	}
	return r;
	}

	function getLevels(d, t_) {
	if (arguments.length < 2) t_ = t;
	var x = [points.slice(0, d)];
	for (var i = 1; i < d; i++) {
	x.push(interpolate(x[x.length - 1], t_));
	}
	return x;
	}

	function getCurve(d) {
	curve = [];

	for (var t_ = 0; t_ <= 1; t_ += delta) {
	var x = getLevels(d, t_);
	curve.push(x[x.length - 1][0]);
	}

	return [curve];
	}
	</script>



	</body>
	</html>