Skip to content

Instantly share code, notes, and snippets.

@theredpea
Last active November 15, 2020 00:50
Show Gist options
  • Save theredpea/963d6d0323dcbd3bf62f67f738bc394e to your computer and use it in GitHub Desktop.
Save theredpea/963d6d0323dcbd3bf62f67f738bc394e to your computer and use it in GitHub Desktop.
nate central limit theorem demo
license: mit
height: 2000
scrolling: yes
<!DOCTYPE html>
<html>
<head>
<!-- trying to demo what they did here with Java: http://onlinestatbook.com/2/sampling_distributions/clt_demo.html Except without Java -->
<meta charset="utf-8"><!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.17/c3.min.css" rel="stylesheet" type="text/css">
<!-- <link href="http://c3js.org/css/c3-b03125fa.css" rel="stylesheet" type="text/css"> -->
<!-- Load d3.js and c3.js -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<!-- <script src="https://c3js.org/js/c3.min-4c5bef8f.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.17/c3.js"></script>
<script src="https://d3js.org/d3-random.v1.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<style>
label{
display:block;
}
</style>
</head>
<body>
<label for="r">Population Size</label><input type="number" id="r" name="r"/>
<label for="t">Histogram Threshold Size</label><input type="number" id="t" name="t"/>
<label for="distribution">Distribution</label><select id="distribution" name="distribution">
<option value="randomLogNormal">randomLogNormal</option>
</select>
<label for="mu">Mu (population mean)</label><input type="number" id="mu" name="mu"/>
<label for="sigma">Sigma (population sd)</label><input type="number" id="sigma" name="sigma"/>
<label for="sample_size">Sample Size</label><input type="number" id="sample_size" name="sample_size"/>
<label for="num_samples">Number of Samples</label><input type="number" id="num_samples" name="num_samples"/>
<div id="pop"></div>
<div id="sample"></div>
<script>
//histogram
var t = set_val('t',90); //number of thresholds
//population
var r = set_val('r', 1000); //population size; passed to range func
var distribution = set_val('distribution', 'randomLogNormal');
var mu = set_val('mu',0);
var sigma = set_val('sigma', 0.5);
//sampling distribution
var sample_size = set_val('sample_size', 5);
var num_samples = set_val('num_samples',10000);
function getRandomSubarray(arr, size) {
/* http://stackoverflow.com/a/11935263/1175496 */
var shuffled = arr.slice(0), i = arr.length, min = i - size, temp, index;
while (i-- > min) {
index = Math.floor((i + 1) * Math.random());
temp = shuffled[index];
shuffled[index] = shuffled[i];
shuffled[i] = temp;
}
return shuffled.slice(min);
}
function sample_dist(sample_size, num_samples, pop) {
return d3
.range(num_samples)
.map(function(){
return avg(getRandomSubarray(pop, sample_size));
})
}
function avg(nums) {
return nums
.reduce(function(a,b) {
return a+b })/nums.length
}
var pop=d3.range(r).map(d3[distribution](mu, sigma));
var pop_hist_lengths = d3.histogram().thresholds(t)(pop).map(function(d){return d.length});
var sample_distribution = sample_dist(sample_size,num_samples,pop);
var sample_hist_lengths = d3.histogram().thresholds(t)(sample_distribution).map(function(d){return d.length});
var o_bar = {
width: {
ratio: 0.6
}
};
var o_axis = {
x: {show: false},
y: { show: false }
};
var pop_chart = c3.generate({
bindto: '#pop',
data: {
columns: [
['pop'].concat(pop_hist_lengths)
],
type: 'bar'
},
bar: o_bar,
axis: o_axis
});
var sample_chart = c3.generate({
bindto: '#sample',
data: {
columns: [
['sample'].concat(sample_hist_lengths)
],
type: 'bar'
},
bar: o_bar,
axis: o_axis
});
function set_val(id, val){
var el = d3.select('#' + id)[0][0];
el.value = val;
return val;
}
function get_val(id){ //el){//id){//, type){
var el = d3.select('#' + id)[0][0]; //
var result = el.value;
var is_number=d3.select(el).attr('type')==='number';
if(is_number){
result = parseFloat(result);
}
return result;
}
d3
.selectAll('input,select')
.on('change', function(){
console.log('change');
//histogram
var is_histogram = this.id==='t';
t = get_val('t'); //90; //number of thresholds
//population
var is_pop = ['r', 'distribution','mu','sigma'].indexOf(this.id)>-1;
r = get_val('r'); //100000; //population size; passed to range func
distribution = get_val('distribution');//'randomLogNormal';
mu = get_val('mu');//0;
sigma = get_val('sigma'); //0.5;
//sampling distribution
var is_sample = ['sample_size','num_samples'].indexOf(this.id)>-1 || is_pop;
//|| is_histogram;
sample_size = get_val('sample_size');
num_samples = get_val('num_samples');
console.log(t);
if(is_pop){
pop=d3.range(r).map(d3[distribution](mu, sigma));
}
if (is_pop || is_histogram){
pop_hist_lengths = d3.histogram().thresholds(t)(pop).map(function(d){return d.length});
}
if (is_sample){
sample_distribution = sample_dist(sample_size,num_samples,pop);
}
if(is_sample || is_histogram) {
sample_hist_lengths = d3.histogram().thresholds(t)(sample_distribution).map(function(d){return d.length});
}
pop_chart.load({
columns: [['pop'].concat(pop_hist_lengths)]
});
sample_chart.load({
columns: [['sample'].concat(sample_hist_lengths)]
});
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment