plmrry/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<script>
  var margin = { top: 50, left: 50, bottom: 50, right: 50 },
      width = 1200 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var canvas = d3.select('body').style({ width: "95vw" })
      .append('canvas')
      .attr({
        width: width,
        height: height
      })
      .style({
        display: "block", margin: "0 auto", width: "500px", "margin-top": "100px"
      })
      .node().getContext('2d');

  var n = 3e3;

  var random = d3.random.normal();

  function newData() { return { x: Math.random() - 0.5, y: random(), vel: 0 }; }

  var data = d3.range(n).map(newData);

  var x = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.x; }))
    .range([0 + 20, width - 20]);

  var y = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.y; }))
    .range([height - 50, 50]);

  var rate = 2.0, sample = n * 0.5;
  var random2 = d3.random.normal(Math.floor(sample), 10);

  d3.timer(function() {
    data.forEach(function(d) {
  //     d.vel += 0.003 * random() - 0.002 * d.vel - 0.03 * d.x; With random()
  //     d.vel += 0.003 * random() - 0.9 * d.vel - 0.003 * d.x;
      d.vel += 0.003 * random() - 1 * d.vel - 0.004 * d.x;
      d.x += d.vel;
    });
    drawWithCanvas();
  });
  canvas.globalAlpha = 0.2;
  function drawWithCanvas() {
    canvas.clearRect(0, 0, width, height);
    var outside = false;
    if (outside) canvas.beginPath();
    data.forEach(function(d) {
      var cx = x( d.x );
      var cy = y( d.y );
      if (!outside) canvas.beginPath();
      canvas.moveTo(cx, cy);
      canvas.arc(cx-10, cy, 8, 0, 2 * Math.PI);
      if (!outside) canvas.stroke();
    });
    if (outside) canvas.stroke();
  }

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<script>
	var margin = { top: 50, left: 50, bottom: 50, right: 50 },
	width = 1200 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var canvas = d3.select('body').style({ width: "95vw" })
	.append('canvas')
	.attr({
	width: width,
	height: height
	})
	.style({
	display: "block", margin: "0 auto", width: "500px", "margin-top": "100px"
	})
	.node().getContext('2d');

	var n = 3e3;

	var random = d3.random.normal();

	function newData() { return { x: Math.random() - 0.5, y: random(), vel: 0 }; }

	var data = d3.range(n).map(newData);

	var x = d3.scale.linear()
	.domain(d3.extent(data, function(d) { return d.x; }))
	.range([0 + 20, width - 20]);

	var y = d3.scale.linear()
	.domain(d3.extent(data, function(d) { return d.y; }))
	.range([height - 50, 50]);

	var rate = 2.0, sample = n * 0.5;
	var random2 = d3.random.normal(Math.floor(sample), 10);

	d3.timer(function() {
	data.forEach(function(d) {
	// d.vel += 0.003 * random() - 0.002 * d.vel - 0.03 * d.x; With random()
	// d.vel += 0.003 * random() - 0.9 * d.vel - 0.003 * d.x;
	d.vel += 0.003 * random() - 1 * d.vel - 0.004 * d.x;
	d.x += d.vel;
	});
	drawWithCanvas();
	});
	canvas.globalAlpha = 0.2;
	function drawWithCanvas() {
	canvas.clearRect(0, 0, width, height);
	var outside = false;
	if (outside) canvas.beginPath();
	data.forEach(function(d) {
	var cx = x( d.x );
	var cy = y( d.y );
	if (!outside) canvas.beginPath();
	canvas.moveTo(cx, cy);
	canvas.arc(cx-10, cy, 8, 0, 2 * Math.PI);
	if (!outside) canvas.stroke();
	});
	if (outside) canvas.stroke();
	}

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