Skip to content

Instantly share code, notes, and snippets.

@jlroo

jlroo/index.html

Created October 15, 2019 20:33
Show Gist options
  • Save jlroo/fd29dc685667a72b6a67229c385098cc to your computer and use it in GitHub Desktop.
Save jlroo/fd29dc685667a72b6a67229c385098cc to your computer and use it in GitHub Desktop.
Download ZIP
Pi(π) - MonteCarlo // source https://jsbin.com/tisidifobi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pi(π) - MonteCarlo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style id="jsbin-css">
body { font: 11px sans-serif; }
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot { stroke: #000; }
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
</style>
</head>
<body>
<header>
<header>
<div style="padding-left:5%;">
<h1> Computing Pi <big>π</big> - Monte Carlo Simulation</h1>
<h3><label for="nValue"> Number of simulations: <span id="nValue-value"></span></label>
<input type="number" min="0" max="10000" step="100" value="0" id="nValue"></h3>
<h3> Pi Approximation: <span id="pi"></span></h3>
</div>
</header>
<section></section>
<script id="jsbin-javascript">
function SimPi(N){
var data = {'xy':[]};
for (i = 0; i < N; i++) {
var x = Math.random();
var y = Math.random();
data['xy'].push([x,y]);
}
return data;
}
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
d3.select("#nValue").on("input", function() {
update(+this.value);
});
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 600 - margin.left - margin.right
, height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([0, 1])
.range([ height, 0 ]);
var chart = d3.select('section')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var g = main.append("svg:g");
// Update the width attributes
function update(nValue) {
var count=[];
var data = SimPi(nValue);
g.selectAll("scatter-dots")
.data(data['xy'])
.enter().append("svg:circle")
.attr("cx", function (d,i) { return x(d[0]); } )
.attr("cy", function (d) { return y(d[1]); } )
.attr("r", 2).style("fill", function(d) {
var color;
var inside = Math.pow(d[0],2)+Math.pow(d[1],2)<1;
var color = (inside ? 'blue': 'red');
count.push(inside);
return color;
});
var sum =+ count.reduce(function(a, b) { return a + b; }, 0);
var N =+ data['xy'].length;
document.getElementById("pi").innerHTML = (sum/N)*4.0;
}
</script>
<script id="jsbin-source-css" type="text/css"> body { font: 11px sans-serif; }
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot { stroke: #000; }
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
function SimPi(N){
var data = {'xy':[]};
for (i = 0; i < N; i++) {
var x = Math.random();
var y = Math.random();
data['xy'].push([x,y]);
}
return data;
}
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
d3.select("#nValue").on("input", function() {
update(+this.value);
});
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 600 - margin.left - margin.right
, height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([0, 1])
.range([ height, 0 ]);
var chart = d3.select('section')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var g = main.append("svg:g");
// Update the width attributes
function update(nValue) {
var count=[];
var data = SimPi(nValue);
g.selectAll("scatter-dots")
.data(data['xy'])
.enter().append("svg:circle")
.attr("cx", function (d,i) { return x(d[0]); } )
.attr("cy", function (d) { return y(d[1]); } )
.attr("r", 2).style("fill", function(d) {
var color;
var inside = Math.pow(d[0],2)+Math.pow(d[1],2)<1;
var color = (inside ? 'blue': 'red');
count.push(inside);
return color;
});
var sum =+ count.reduce(function(a, b) { return a + b; }, 0);
var N =+ data['xy'].length;
document.getElementById("pi").innerHTML = (sum/N)*4.0;
}</script></body>
</html>
Raw
jsbin.tisidifobi.css
body { font: 11px sans-serif; }
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot { stroke: #000; }
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
Raw
jsbin.tisidifobi.js
function SimPi(N){
var data = {'xy':[]};
for (i = 0; i < N; i++) {
var x = Math.random();
var y = Math.random();
data['xy'].push([x,y]);
}
return data;
}
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
d3.select("#nValue").on("input", function() {
update(+this.value);
});
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 600 - margin.left - margin.right
, height = 600 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([ 0, width ]);
var y = d3.scale.linear()
.domain([0, 1])
.range([ height, 0 ]);
var chart = d3.select('section')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
var g = main.append("svg:g");
// Update the width attributes
function update(nValue) {
var count=[];
var data = SimPi(nValue);
g.selectAll("scatter-dots")
.data(data['xy'])
.enter().append("svg:circle")
.attr("cx", function (d,i) { return x(d[0]); } )
.attr("cy", function (d) { return y(d[1]); } )
.attr("r", 2).style("fill", function(d) {
var color;
var inside = Math.pow(d[0],2)+Math.pow(d[1],2)<1;
var color = (inside ? 'blue': 'red');
count.push(inside);
return color;
});
var sum =+ count.reduce(function(a, b) { return a + b; }, 0);
var N =+ data['xy'].length;
document.getElementById("pi").innerHTML = (sum/N)*4.0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment