Particle Experiments II

<!DOCTYPE html>
<html>
<head>
<script src="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js