Normal distribution

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:50;position:fixed;top:50;right:50;bottom:50;left:50; }
    .canvas{height:400px;background:rgb(252,252,252);}
  </style>
</head>

<body>
  <div class="container">
    <h1>Visualizing Distributions</h1>
    <section class="experiment" id="normal-dist">
        <h2>Normal distribution</h2>
        <div class="canvas"></div>
    </section>
	</div>
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var numOfTrials = 500;
    
    var plot2 = d3.select('#normal-dist').select('.canvas')
        .append('svg')
        .attr('width',960)
        .attr('height',500)
        .append('g');
    
    var j = 0;
    var normalDist = d3.randomNormal(.5,.1),
        normalDist2 = d3.randomNormal(.4,.25),
        normalDist3 = d3.randomNormal(.3,.5);
    
    setInterval(runNormalDist,5);
    
    function runNormalDist(){
      if(j > numOfTrials) {return;}
      
      plot2.append('circle')
      	.attr('cy', 500/2+(Math.random() -0.5)*50)
      	.attr('cx', normalDist()*960)
      	.attr('r', 10)
      	.style('fill', 'blue')
      	.transition()
      	.duration(300)
      	.style('fill','blue')
      	.style('fill-opacity',0.5)
      	.attr('r',3);
      
      plot2.append('circle')
      	.attr('cy', 500/2+(Math.random() -0.5)*50)
      	.attr('cx', normalDist()*960)
      	.attr('r', 10)
      	.style('fill', 'red')
      	.transition()
      	.duration(300)
      	.style('fill','red')
      	.style('fill-opacity',0.5)
      	.attr('r',3);
      	
      
      plot2.append('circle')
      	.attr('cy', 500/2+(Math.random() -0.5)*50)
      	.attr('cx', normalDist()*960)
      	.attr('r', 10)
      	.style('fill', 'green')
      	.transition()
      	.duration(300)
      	.style('fill','green')
      	.style('fill-opacity',0.5)
      	.attr('r',3);
      
      j++;
    };

</script>
</body>

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