xd6

by nazarpunk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id="chart"></canvas>

JavaScript

const dice_max = 8;
const dice_sum = dice_max * 6;
const chance = [...new Array(dice_max + 1)].map((_, i) => i < 2 ? null : 1 / (6 ** i));
const array = [...new Array(dice_max + 1)].map((_, i) => i < 2 ? null : new Array(dice_sum).fill(0, 0, dice_sum));
const dataset = [];


for (let _1 = 1; _1 <= 6; _1++) {
  for (let _2 = 1; _2 <= 6; _2++) {
    array[2][_1 + _2 - 1] += chance[2];
    for (let _3 = 1; _3 <= 6; _3++) {
      array[3][_1 + _2 + _3 - 1] += chance[3];
      for (let _4 = 1; _4 <= 6; _4++) {
        array[4][_1 + _2 + _3 + _4 - 1] += chance[4];
        for (let _5 = 1; _5 <= 6; _5++) {
          array[5][_1 + _2 + _3 + _4 + _5 - 1] += chance[5];
          for (let _6 = 1; _6 <= 6; _6++) {
            array[6][_1 + _2 + _3 + _4 + _5 + _6 - 1] += chance[6];
            for (let _7 = 1; _7 <= 6; _7++) {
              array[7][_1 + _2 + _3 + _4 + _5 + _6 + _7 - 1] += chance[7];
              for (let _8 = 1; _8 <= 6; _8++) {
                array[8][_1 + _2 + _3 + _4 + _5 + _6 + _7 + _8 - 1] += chance[8];
              }
            }
          }
        }
      }
    }
  }
}



for (let i = 2; i <= dice_max; i++) {
  for (let k = 0; k <= dice_sum; k++) {
    if (array[i][k] === 0) array[i][k] = null;
  }

  dataset.push({
    label: `${i}d6`,
    data: array[i],
    borderColor: `rgb(${255 - i * 10}, ${i * 20}, ${255 - i* 30})`,
    tension: i > 2 ? .3 : 0
  })
}


new Chart(document.getElementById('chart').getContext('2d'), {
  type: 'line',
  data: {
    labels: [...new Array(dice_sum)].map((_, i) => i + 1),
    datasets: dataset
  },
  options: {
    
		elements: {
			point: {
				radius: 6
			},
		},
		datasets: {
			line: {
				borderJoinStyle: `round`,
				spanGaps       : true
			}
		},
		scales  : {
			y: {
				beginAtZero: true
			}
		}
  }
});