└── script.js


/script.js:
--------------------------------------------------------------------------------
 1 | var dist_digits = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
 2 | var colors_digits = ["#59abe3", "#ff9966", "#dd3044", "#8fc742", "#ff6f61", "#00bab5", "#ee82ee", "#ff8a65", "#a569bd", "#00ABE3"];
 3 | 
 4 | var total_digits = 0;
 5 | 
 6 | let rect_height = 30;
 7 | let gutter = 10;
 8 | 
 9 | function setup() {
10 |   createCanvas(500, 420);
11 | }
12 | 
13 | function getNextDigit() {
14 |   return int(random(0, 10))
15 | }
16 | 
17 | function draw() {
18 |   textSize(rect_height*0.75);
19 |   background("#ffffaa");
20 | 
21 |   digit = getNextDigit();
22 |   
23 |   total_digits += 1;
24 |   dist_digits[digit] += 1;
25 |   
26 |   max_freq = Math.max.apply(null, dist_digits);
27 |   
28 |   for (let i = 0; i < dist_digits.length; i++) {
29 |     const band_x = gutter;
30 |     const band_y = (i+1)*gutter + (i * rect_height);
31 |     const band_ratio = dist_digits[i]/max_freq;
32 |     const band_freq = dist_digits[i]/total_digits;
33 | 
34 |     fill("#000000");
35 |     text(i, band_x, band_y + rect_height - gutter/2);
36 |     fill(colors_digits[i]);
37 |     text(int(band_freq*100) + "%", band_x + 3*gutter, band_y + rect_height - gutter/2);
38 |     rect(
39 |       band_x + 8*gutter,
40 |       band_y,
41 |       band_ratio * (width * 0.6),
42 |       rect_height
43 |     );
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------