D3 Examples - Math.random()

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    
    .canvas{
    height:400px;
    background:rgb(252,252,252);}
    
  </style>
</head>
​
<body>
    <div class="container">
      <h1>Visualizing Distributions</h1>
      <section class="experiment" id="random">
      <h2>Math.random()</h2>
      <div class="canvas"></div>
      </section>
    </div>
  <script>
    var numOfTrials = 500;
  var margin = {t:50,r:50,b:50,l:50};
​
  var plot1 = d3.select('#random').select('.canvas')
      .append('svg')
      .attr('width',960)
      .attr('height',500)
      .append('g')
      .attr('transform','translate('+ margin.l+','+margin.t+')');
​
  var i = 0;
​
    setInterval(runTrial,5);
​
  function runTrial(){
      if(i >= numOfTrials){ return; }
      var result = Math.random();
      plot1.append('circle')
          .attr('cy',300/3+(Math.random())*600)
          .attr('cx',result/1 *600)
          .attr('r',10)
          .style('fill','red')
          .transition()
          .duration(300)
          .style('fill','black')
          .style('fill-opacity',.5)
          .attr('r',3);
      i++;
  }     
  </script>
</body>
​
    