Estimating Pi with Monte Carlo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
		body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    p {
    	font: 14px sans-serif;
    }

#left {
      float: left;
      width: 50%;
      text-align: right;
    }

#right {
      float: right;
      width: 50%;
      text-align: left;
    }

#info {
      margin-left: 50px;
    }

#canvas-element {
      border: solid 1px black;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="left">
        <canvas id="canvas-element" class="plot"></canvas>
    </div>
    <div id="right">
      <div id="info">
            <p>Number of points in square: <span id="in-square"></span></p>
            <p>Number of points in circle: <span id="in-circle"></span></p>
            <p>Current estimate value of Pi: <span id="pi-estimate"></span></p>
          	<p>Current error: <span id="pi-error"></span></p>
            <p>
              <button id="start-button">Start</button>
              <button id="stop-button">Stop</button>
              <button id="reset-button">Reset</button>
          	</p>
        </div>
    </div>
	</div>
  <script>
    
	var circleDiameter = 400;
  var circleRadius = circleDiameter / 2;
  var canvasArea = circleDiameter*circleDiameter;

var margin = {top: 10, right: 20, bottom: 40, left: 60};
  var lineWidth = 400 - margin.left - margin.right;
  var lineHeight = 250 - margin.top - margin.bottom;

var maxPoints = 2500;
  var pointRadius = 4;
  var drawIntervalTime = 1;

var pointsInSquare = 0;
  var pointsInCircle = 0;
  var estimatedPi = 0;
  var currentError = 0;
  var running = false;

// create the canvas for drawing the circle
  var canvas = d3.select("#canvas-element")
  .attr("width", circleDiameter)
  .attr("height", circleDiameter);

// draw the point
    drawPoint(x, y, pointRadius, pointColor);

pointsInSquare++;
    estimatedPi = (pointsInCircle / pointsInSquare) * 4;
    currentError = Math.PI - estimatedPi;
    
    updateText();
  }    
    
	function drawPoint(x, y, r, color) {
    context.fillStyle = color;
    context.beginPath();
    context.arc(x, y, r, 0, 2 * Math.PI);
    context.closePath();
    context.fill();
  }
  
  function l2Norm(x, y) {
    return Math.sqrt(x*x + y*y);
  }

function randomFloat(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  
  function updateText() {
  	document.getElementById('in-square').innerHTML = pointsInSquare.toString();
    document.getElementById('in-circle').innerHTML = pointsInCircle.toString();
    document.getElementById('pi-estimate').innerHTML = estimatedPi.toString();
    document.getElementById('pi-error').innerHTML = currentError.toString();
  }

</script>
</body>

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