thole/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <style>

      text {
        font-family:sans-serif;
        fill:#636363;
        font-size: 8pt;
      }

      .x.axis line {
        shape-rendering: auto;
      }
      .line {
        fill: none;
        stroke: #000;
        stroke-width: 2.0px;
      }
      path.line {
        stroke-width:px;
        fill: none;
      }

      path.domain {
        stroke-width:2px;
        stroke: #000;
        fill: none;
      }
    </style>
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <div id="container">

    <script type="text/javascript">

(function() {
var elements = 4;
var n = 60*2,
    duration = 1000,
    now = new Date(Date.now() - duration),
    data = d3.range(elements).map(function(){return d3.range(n).map(function() { return 0;})});

var colorscale = d3.scale.ordinal()
    .domain(d3.range(elements).map(function() { return 0;}))
    .range(["#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"]);

var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.right,
    height = 250 - margin.top - margin.bottom;

var x = d3.time.scale()
    .domain([now - (n - 2) * duration, now - duration])
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var line = d3.svg.line()
    .interpolate("basis-open")
    .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
    .y(function(d, i) { return y(d); });

var svg = d3.select("#container").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .style("margin-left", -margin.left + "px")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var axis = svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

var pathcontainer = svg.append("g")
    .attr("clip-path", "url(#clip)")
  .append("g")
    .attr("class","pathcontainer")

  var i = 0;
  data.forEach(function(d){
    pathcontainer.append("path")
    .data([d])
    .attr("class", "line")
    .style("stroke",function(){return colorscale(i++)});
  })

tick();

function getRandom(lastvalue){
  if(lastvalue == null || lastvalue == undefined){
    return Math.floor((Math.random()*10)+1);
  }
  else{
    var random = Math.random();
    var distance = Math.random() * 0.00100 ;
    if(random < 0.075 && lastvalue - distance > 0){
      return lastvalue - distance;
    }
    else if(random < 0.150){
      return lastvalue + distance;
    }
    else{
      return lastvalue;
    }
  }
}

function tick() {

  now = new Date();
  x.domain([now - (n - 2) * duration, now - duration]);
  y.domain([0, d3.max(data,function(d){return d3.max(d)})]);

  data.forEach(function(d){
    d.push(getRandom(d[d.length-1]));
  });

  var pathcontainer = svg.select(".pathcontainer")
    .attr("transform", null);

  svg.selectAll(".line")
      .attr("d", line)
      .attr("transform", null);

  axis.transition()
      .duration(duration)
      .ease("linear")
      .call(x.axis);

  pathcontainer
      .transition()
      .duration(duration)
      .ease("linear")
      .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
      .each("end", tick);

  data.forEach(
    function(d){d.shift()}
  );
}

})()</script>


  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<style>

	text {
	font-family:sans-serif;
	fill:#636363;
	font-size: 8pt;
	}

	.x.axis line {
	shape-rendering: auto;
	}
	.line {
	fill: none;
	stroke: #000;
	stroke-width: 2.0px;
	}
	path.line {
	stroke-width:px;
	fill: none;
	}

	path.domain {
	stroke-width:2px;
	stroke: #000;
	fill: none;
	}
	</style>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="container">

	<script type="text/javascript">

	(function() {
	var elements = 4;
	var n = 60*2,
	duration = 1000,
	now = new Date(Date.now() - duration),
	data = d3.range(elements).map(function(){return d3.range(n).map(function() { return 0;})});

	var colorscale = d3.scale.ordinal()
	.domain(d3.range(elements).map(function() { return 0;}))
	.range(["#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"]);

	var margin = {top: 40, right: 40, bottom: 40, left: 40},
	width = 960 - margin.right,
	height = 250 - margin.top - margin.bottom;

	var x = d3.time.scale()
	.domain([now - (n - 2) * duration, now - duration])
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var line = d3.svg.line()
	.interpolate("basis-open")
	.x(function(d, i) { return x(now - (n - 1 - i) * duration); })
	.y(function(d, i) { return y(d); });

	var svg = d3.select("#container").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("margin-left", -margin.left + "px")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("defs").append("clipPath")
	.attr("id", "clip")
	.append("rect")
	.attr("width", width)
	.attr("height", height);

	var axis = svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(x.axis = d3.svg.axis().scale(x).orient("bottom"));

	var pathcontainer = svg.append("g")
	.attr("clip-path", "url(#clip)")
	.append("g")
	.attr("class","pathcontainer")

	var i = 0;
	data.forEach(function(d){
	pathcontainer.append("path")
	.data([d])
	.attr("class", "line")
	.style("stroke",function(){return colorscale(i++)});
	})

	tick();

	function getRandom(lastvalue){
	if(lastvalue == null \|\| lastvalue == undefined){
	return Math.floor((Math.random()*10)+1);
	}
	else{
	var random = Math.random();
	var distance = Math.random() * 0.00100 ;
	if(random < 0.075 && lastvalue - distance > 0){
	return lastvalue - distance;
	}
	else if(random < 0.150){
	return lastvalue + distance;
	}
	else{
	return lastvalue;
	}
	}
	}

	function tick() {

	now = new Date();
	x.domain([now - (n - 2) * duration, now - duration]);
	y.domain([0, d3.max(data,function(d){return d3.max(d)})]);

	data.forEach(function(d){
	d.push(getRandom(d[d.length-1]));
	});

	var pathcontainer = svg.select(".pathcontainer")
	.attr("transform", null);

	svg.selectAll(".line")
	.attr("d", line)
	.attr("transform", null);

	axis.transition()
	.duration(duration)
	.ease("linear")
	.call(x.axis);

	pathcontainer
	.transition()
	.duration(duration)
	.ease("linear")
	.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
	.each("end", tick);

	data.forEach(
	function(d){d.shift()}
	);
	}

	})()</script>


	</body>
	</html>