mzupan · December 29, 2011 02:16
diff --git a/gistfile1.txt b/gistfile1.txt

 <!DOCTYPE html>
 <html>
  <head>
   <script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
    <script src="https://raw.github.com/mbostock/d3/master/d3.time.js"></script>
    <style type="text/css">

 body {
  font: 10px sans-serif;
  margin: 0;
 }

 path.line {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
 }

 path.area {
  fill: #e7e7e7;
 }

 .axis {
  shape-rendering: crispEdges;
 }

 .x.axis line {
  stroke: #fff;
 }

 .x.axis .minor {
  stroke-opacity: .5;
 }

 .x.axis path {
  display: none;
 }

 .y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
 }

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

 var m = [20, 40, 20, 20],
    w = 960 - m[1] - m[3],
    h = 140 - m[0] - m[2],
    parse = d3.time.format("%b %Y").parse;

 // An area generator, for the light fill.
 // var area = d3.svg.area()
 //     .interpolate("monotone")
 //     .x(function(d) { return x(d.date); })
 //     .y0(h)
 //     .y1(function(d) { return y(d.price); });

 // A line generator, for the dark stroke.
 var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });



  var values = []
  var ts = 1322729460000;
  count = 0;
  for (i=0; i<=50; i++) {
    values.push({
      date: ts + (i*60000),
      price: Math.random() * 10
    });
    
    count++;
  }


  // Scales. Note the inverted domain for the y-scale: bigger is up!
  var x = d3.time.scale().domain([values[0].date, values[values.length - 1].date]).range([0, w]),
      y = d3.scale.linear().domain([0, d3.max(values, function(d) { return d.price; })]).range([h, 0]);

  // Axes.
  var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
      yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");


  // Add an SVG element with the desired dimensions and margin.
  var svg = d3.select("body").append("svg:svg")
      .attr("width", w + m[1] + m[3])
      .attr("height", h + m[0] + m[2]);

  // Add the clip path.
  // svg.append("clipPath")
  //     .attr("id", "clip")
  //   .append("rect")
  //     .attr("width", w)
  //     .attr("height", h);

  // Add the x-axis.
  // svg.append("g")
  //     .attr("class", "x axis")
  //     .attr("transform", "translate(0," + h + ")")
  //     .call(xAxis);

  // // Add the y-axis.
  // svg.append("g")
  //     .attr("class", "y axis")
  //     .attr("transform", "translate(" + w + ",0)")
  //     .call(yAxis);

  // Add the line path.
  svg.append("svg:path")
      .attr("class", "line")
      .attr("d", line(values));


  // On click, update the x-axis.
  // svg.on("click", function() {
    

  //   /*    
  //   var n = values.length - 1,
  //       i = Math.floor(Math.random() * n / 2),
  //       j = i + Math.floor(Math.random() * n / 2) + 1;

  //   x.domain([values[i].date, values[j].date]);
  //   var t = svg.transition().duration(750);
  //   t.select(".x.axis").call(xAxis);
  //   t.select(".area").attr("d", area(values));
  //   t.select(".line").attr("d", line(values));
  //   */
  // });

  setInterval(function() {
    values.shift(); 

    new_ts = ts + (count*60000),
    values.push({
      date: new_ts,
      price: Math.random() * 10
    });
    count++;

    svg.selectAll("path")
          .data([values]) // 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(750) // for this demo we want a continual slide so set this to the same as the setInterval amount below
          .attr("transform", "translate(" + x(0) + ")");

    //x.domain([values[0].date, values[values.length-1].date])

    // var t = svg
    //   .transition()
    //   .duration(750);
    // t.select(".x.axis").call(xAxis);
    // t.select(".line")
    //   .attr("d", line(values))
    //   .ease("linear");
  }, 1000);

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

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
	<script src="https://raw.github.com/mbostock/d3/master/d3.time.js"></script>
	<style type="text/css">

	body {
	font: 10px sans-serif;
	margin: 0;
	}

	path.line {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	path.area {
	fill: #e7e7e7;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: #fff;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.x.axis path {
	display: none;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #000;
	}

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

	var m = [20, 40, 20, 20],
	w = 960 - m[1] - m[3],
	h = 140 - m[0] - m[2],
	parse = d3.time.format("%b %Y").parse;

	// An area generator, for the light fill.
	// var area = d3.svg.area()
	// .interpolate("monotone")
	// .x(function(d) { return x(d.date); })
	// .y0(h)
	// .y1(function(d) { return y(d.price); });

	// A line generator, for the dark stroke.
	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.price); });



	var values = []
	var ts = 1322729460000;
	count = 0;
	for (i=0; i<=50; i++) {
	values.push({
	date: ts + (i*60000),
	price: Math.random() * 10
	});

	count++;
	}


	// Scales. Note the inverted domain for the y-scale: bigger is up!
	var x = d3.time.scale().domain([values[0].date, values[values.length - 1].date]).range([0, w]),
	y = d3.scale.linear().domain([0, d3.max(values, function(d) { return d.price; })]).range([h, 0]);

	// Axes.
	var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
	yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");


	// Add an SVG element with the desired dimensions and margin.
	var svg = d3.select("body").append("svg:svg")
	.attr("width", w + m[1] + m[3])
	.attr("height", h + m[0] + m[2]);

	// Add the clip path.
	// svg.append("clipPath")
	// .attr("id", "clip")
	// .append("rect")
	// .attr("width", w)
	// .attr("height", h);

	// Add the x-axis.
	// svg.append("g")
	// .attr("class", "x axis")
	// .attr("transform", "translate(0," + h + ")")
	// .call(xAxis);

	// // Add the y-axis.
	// svg.append("g")
	// .attr("class", "y axis")
	// .attr("transform", "translate(" + w + ",0)")
	// .call(yAxis);

	// Add the line path.
	svg.append("svg:path")
	.attr("class", "line")
	.attr("d", line(values));


	// On click, update the x-axis.
	// svg.on("click", function() {


	// /*
	// var n = values.length - 1,
	// i = Math.floor(Math.random() * n / 2),
	// j = i + Math.floor(Math.random() * n / 2) + 1;

	// x.domain([values[i].date, values[j].date]);
	// var t = svg.transition().duration(750);
	// t.select(".x.axis").call(xAxis);
	// t.select(".area").attr("d", area(values));
	// t.select(".line").attr("d", line(values));
	// */
	// });

	setInterval(function() {
	values.shift();

	new_ts = ts + (count*60000),
	values.push({
	date: new_ts,
	price: Math.random() * 10
	});
	count++;

	svg.selectAll("path")
	.data([values]) // 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(750) // for this demo we want a continual slide so set this to the same as the setInterval amount below
	.attr("transform", "translate(" + x(0) + ")");

	//x.domain([values[0].date, values[values.length-1].date])

	// var t = svg
	// .transition()
	// .duration(750);
	// t.select(".x.axis").call(xAxis);
	// t.select(".line")
	// .attr("d", line(values))
	// .ease("linear");
	}, 1000);

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