nate central limit theorem demo

forked from anonymous's block: nate central limit theorem demo

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

<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) {
    /*  https://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});

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>

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

https://c3js.org/js/c3.min-4c5bef8f.js

https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.17/c3.js

https://d3js.org/d3-random.v1.min.js

https://d3js.org/d3-array.v1.min.js