| license: mit | |
| height: 2000 | |
| scrolling: yes |
Built with blockbuilder.org
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
forked from anonymous's block: nate central limit theorem demo
| <!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> |