JSFiddle - React, Tailwind, and code Playground

by 18_102_elias

HTML

<canvas id='canvas_histo' width='250' height='200'></canvas>

CSS

#canvas_histo { background:yellow; }

JavaScript

// Si des résultats pour la simulation de la planche de Galton ont été poussés dans une liste
// pour obtenir quelque chose qui ressemble à cela :
var resultats = [15,14,14,13,13,13,12,12,12,12,11,11,11,11,11,10,10,10,10,10,10,9,9,9,9,9,9,9,9,8,8,8,8,8,8,8,8,8,7,7,7,7,7,7,7,7,7,7,6,6,6,6,6,6,6,6,6];

// alors on trie la liste :
var resultats = resultats.sort(function(a, b) { return a - b;});
console.log("resultats triés = ",resultats);

// Puis on la convertit en liste pondérée :
var xi = [];
var ni= [];
resultats.forEach(function(item){
    idx = xi.length-1;
    if(idx>-1 && xi[idx]=== item){
        ++ni[idx];
    }else{
        xi.push(item);
        ni.push(1);
    }
});
console.log("liste des xi = ",xi);
console.log("liste des ni = ",ni);

// Et maintenant on va faire le diagramme en bâtons :
var $moncanvas = $("#canvas_histo");
var ctx = $moncanvas[0].getContext('2d');
var unitx = 20;
var unity = 20;
var larg = 10;
ctx.fillStyle = '#0AA';
xi.forEach(function(item,k){
    var x = (-xi[0]+item)*unitx;
    var haut = ni[k]*unity;
    ctx.fillRect(x,200-haut,larg,haut);
});