JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
</body>
</html>
CSS
p
{
width: 2px;
background-color:grey;
float:left;
}
JavaScript
//This is what I use for a Normal-ish distribution random function.
// http://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve
function normal_random(){
var pos = [ Math.random(), Math.random() ];
while ( Math.sin( pos[0] * Math.PI ) > pos[1] ){
pos = [ Math.random(), Math.random() ];
}
return pos[0];
}
var normalDistribution = new Array();
var iterations = 20000;
var range= 100;
for (var counter = 0; counter < iterations; ++counter)
{
var number = Math.floor( range * normal_random() );
if ( typeof normalDistribution[ 'number ' + number ] !== 'undefined' )
{
++normalDistribution[ 'number ' + number ];
}
else
{
normalDistribution[ 'number ' + number ] = 1;
}
}
for( var number = 0; number < range; ++number )
{
document.body.innerHTML += '<p style="height:' + normalDistribution[ 'number ' + number ] + 'px" title="' + number + ' occurs ' + normalDistribution[ 'number ' + number ] + ' times"></p>'
}