mzupan · December 18, 2011 03:02
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Area Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">

 body {
  font: 10px sans-serif;
 }

 .rule line {
  stroke: #eee;
  shape-rendering: crispEdges;
 }

 .rule line.axis {
  stroke: #000;
 }

 .area {
  fill: lightsteelblue;
 }

 .line, circle.area {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
 }

 circle.area {
  fill: #fff;
 }

    </style>
  </head>
  <body>
    <script type="text/javascript">

 count = 0;
 var data = d3.range(20).map(function(i) {
  count++;
  return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
 });

 var w = 450,
    h = 275,
    p = 20,
    x = d3.scale.linear().domain([0, 1]).range([0, w]),
    y = d3.scale.linear().domain([0, 1]).range([h, 0]);

 var vis = d3.select("body")
  .append("svg")
    .data([data])
    .attr("width", w + p * 2)
    .attr("height", h + p * 2)
  .append("g")
    .attr("transform", "translate(" + p + "," + p + ")");

 var line = d3.svg.line()
      // assign the X function to plot our line as we wish
      .x(function(d) { 
        // verbose logging to show what's actually being done
        //console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
        // return the X coordinate where we want to plot this datapoint
        return x(d.x); 
      })
      .y(function(d) { 
        // verbose logging to show what's actually being done
        //console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
        // return the Y coordinate where we want to plot this datapoint
        return y(d.y); 
      })
      .interpolate("basis")

 vis.append("svg:path").attr("d", line(data)).attr("class", "line");


    function redrawWithAnimation() {
        // update with animation
        vis.selectAll("path")
          .data([data]) // set the new data
          .attr("transform", "translate(" + x(1) + ")") // set the transform to the right by x(1) pixels (6 for the scale we've set) to hide the new value
          .attr("d", line) // apply the new data values ... but the new value is hidden at this point off the right of the canvas
          .transition() // start a transition to bring the new value into view
          .ease("linear")
          .duration(1000) // for this demo we want a continual slide so set this to the same as the setInterval amount below
          .attr("transform", "translate(" + x(0) + ")"); // animate a slide to the left back to x(0) pixels to reveal the new value

          /* thanks to 'barrym' for examples of transform: https://gist.github.com/1137131 */
      }

      setInterval(function() {
         var v = data.shift(); // remove the first element of the array
         count++;
         v.x = count;
         //console.log(v);
         data.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)

          for(i=0; i<data.length; i++) {
            data[i].x = i;
          }


           redrawWithAnimation();

      }, 1000);


    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Area Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	}

	.rule line {
	stroke: #eee;
	shape-rendering: crispEdges;
	}

	.rule line.axis {
	stroke: #000;
	}

	.area {
	fill: lightsteelblue;
	}

	.line, circle.area {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	circle.area {
	fill: #fff;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	count = 0;
	var data = d3.range(20).map(function(i) {
	count++;
	return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
	});

	var w = 450,
	h = 275,
	p = 20,
	x = d3.scale.linear().domain([0, 1]).range([0, w]),
	y = d3.scale.linear().domain([0, 1]).range([h, 0]);

	var vis = d3.select("body")
	.append("svg")
	.data([data])
	.attr("width", w + p * 2)
	.attr("height", h + p * 2)
	.append("g")
	.attr("transform", "translate(" + p + "," + p + ")");

	var line = d3.svg.line()
	// assign the X function to plot our line as we wish
	.x(function(d) {
	// verbose logging to show what's actually being done
	//console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
	// return the X coordinate where we want to plot this datapoint
	return x(d.x);
	})
	.y(function(d) {
	// verbose logging to show what's actually being done
	//console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
	// return the Y coordinate where we want to plot this datapoint
	return y(d.y);
	})
	.interpolate("basis")

	vis.append("svg:path").attr("d", line(data)).attr("class", "line");


	function redrawWithAnimation() {
	// update with animation
	vis.selectAll("path")
	.data([data]) // set the new data
	.attr("transform", "translate(" + x(1) + ")") // set the transform to the right by x(1) pixels (6 for the scale we've set) to hide the new value
	.attr("d", line) // apply the new data values ... but the new value is hidden at this point off the right of the canvas
	.transition() // start a transition to bring the new value into view
	.ease("linear")
	.duration(1000) // for this demo we want a continual slide so set this to the same as the setInterval amount below
	.attr("transform", "translate(" + x(0) + ")"); // animate a slide to the left back to x(0) pixels to reveal the new value

	/* thanks to 'barrym' for examples of transform: https://gist.github.com/1137131 */
	}

	setInterval(function() {
	var v = data.shift(); // remove the first element of the array
	count++;
	v.x = count;
	//console.log(v);
	data.push(v); // add a new element to the array (we're just taking the number we just shifted off the front and appending to the end)

	for(i=0; i<data.length; i++) {
	data[i].x = i;
	}


	redrawWithAnimation();

	}, 1000);


	</script>
	</body>
	</html>