Monte-Carlo II by bricedev

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line, .square {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: #2166ac;
  stroke-width: 1.5px;
}

.constant {
  stroke: #238b45;
  stroke-width: 1px;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.js"></script>
<script>

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

var numSamples = 0,
    iterationNumber = 5000;

var rayon = width + margin.left + margin.right;

var data = [];

var circleScale = d3.scale.linear()
  .domain([0,1])
  .range([0, rayon]);

var x = d3.scale.pow().exponent(1/4)
  .domain([1,iterationNumber])
  .range([0, width]);

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

var xAxis = d3.svg.axis()
  .scale(x)
  .tickFormat(d3.format(".2s"))
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);
  
var gcirlces = svg.append("g")
  .style("opacity",.2)
  .attr("transform", "translate(0," + (height + margin.top + margin.bottom) + ")");

gcirlces.append("circle")
  .attr("r",rayon)
  .style("fill","none")
  .style("stroke","black")
  .style("stroke-width",1);

var graph = svg.append("g")
  .attr("width", width)
  .attr("height", height)
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var line = d3.svg.line()
  .x(function(d) { return x(d.x); })
  .y(function(d) { return y(d.pi); });

var path = graph.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

graph.append("line")
  .attr("class", "constant")
  .attr("x1",0)
  .attr("y1",y(Math.PI))
  .attr("x2",x(iterationNumber))
  .attr("y2",y(Math.PI));

graph.append("text")
  .attr("x",width + 5)
  .attr("y",y(Math.PI))
  .attr("dy",".31em")
  .style("font-size","15px")
  .style("fill","#238b45")
  .text("π");

graph.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .attr("x", width - 45)
  .attr("dy", "-.35em")
  .style("font-weight", "bold")
  .style("text-anchor", "middle")
  .text("Number of iterations");

graph.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .style("font-weight", "bold")
  .text("Value");

var blues = 0,
    reds = 0,
    pi = 0;

d3.timer(function(d,i) {

  var cx = Math.random(),
      cy = Math.random();

  if ((Math.pow(cx,2) + Math.pow(cy,2))< 1) {
    blues +=1;
    var color = "#66bd63"
  }else {
    reds +=1
    var color = "#f46d43"
  };
  
  pi = (blues / (blues + reds)) * 4; 
  
  data.push({
    x: blues + reds,
    pi: pi
  });

  path.datum(data).attr("d", line);

  gcirlces.append("circle")
    .attr("cx",circleScale(cx))
    .attr("cy",-circleScale(cy))
    .attr("r",3)
    .style("fill",color);
  
  return ++numSamples > iterationNumber;
});

d3.select(self.frameElement).style("height", (height + margin.top + margin.bottom) + "px");

</script>