<canvas></canvas>

// https://stackoverflow.com/questions/25582882/javascript-math-random-normal-distribution-gaussian-bell-curve/49434653#49434653
function randn_bm() {
    let u = 0, v = 0;
    while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
    while(v === 0) v = Math.random();
    let num = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
    num = num / 10.0 + 0.5; // Translate to 0 -> 1
    if (num > 1 || num < 0) return randn_bm() // resample between 0 and 1
    return num
}

function randomIntegerInRange(min, max) {
    return Math.floor(randn_bm() * (max - min + 1)) + min;
}

// Visualization
const values = Array.from({ length: 10000 }, () => randomIntegerInRange(1, 6));

const counts = Object.values(
    values.reduce((acc, value) => (acc[value] = (acc[value] ?? 0) + 1, acc), {})
);

const range = (from, to) => Array.from({ length: to - from + 1 }, (_, index) => index + from);

const min = Math.min(...values);
const max = Math.max(...values);

const data = {
    labels: range(min, max),
    datasets: [
        {
            label: `Random Integer in [${min}; ${max}]`,
            data: counts,
            fill: false,
            borderColor: '#3F80BD',
            tension: 0.4
        }
    ]
}

const config = {
    type: 'line',
    data: data,
    options: {
        responsive: true,
        plugins: {
            title: {
                display: true,
                text: `Normal Distribution of Random Integer in Range; Observations: ${values.length.toLocaleString('ru-RU')}`
            },
            legend: {
                position: 'bottom',
            }
        },
        scales: {
            y: {
                display: true,
                suggestedMin: 0,
                suggestedMax: Math.max(...counts) + 100
            }
        }
    }
};

new Chart(document.querySelector('canvas'), config);