<div id="app"></div>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 1rem;
  font-size: 16px;
  line-height: 1.4;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

table {
  border: 2px solid black;
}

th, td {
  padding: .5rem;
  background: #eee;
}

th {
  background: #ccc;
}
const byRandomBad = () => Math.random() - .5;
const percentByFraction = (num, den) => `${Math.round((num / den) * 1000) / 10}%`;

const App = () => {
  const iterationCount = 500;
  const range = [0,1,2,3,4];
  
  const arrayOfShuffled = Array(iterationCount).fill('').map(() => [...range].sort(byRandomBad))
  const getPercentOfIndex = (value, index) => {
    const count = arrayOfShuffled.filter(array => array[index] === value).length;
    return percentByFraction(count, iterationCount);
  }
  
  arrayOfShuffled.filter(array => array[0] === 0).length
  
  return (
    <table>
      <tr>
        <td></td>
        <th scope='column'>0</th>
        <th scope='column'>1</th>
        <th scope='column'>2</th>
        <th scope='column'>3</th>
        <th scope='column'>4</th>
      </tr>
      <tr>
        <th scope='row'>0</th>
        <td>{getPercentOfIndex(0,0)}</td>
        <td>{getPercentOfIndex(1,0)}</td>
        <td>{getPercentOfIndex(2,0)}</td>
        <td>{getPercentOfIndex(3,0)}</td>
        <td>{getPercentOfIndex(4,0)}</td>
      </tr>
      <tr>
        <th scope='row'>1</th>
        <td>{getPercentOfIndex(0,1)}</td>
        <td>{getPercentOfIndex(1,1)}</td>
        <td>{getPercentOfIndex(2,1)}</td>
        <td>{getPercentOfIndex(3,1)}</td>
        <td>{getPercentOfIndex(4,1)}</td>
      </tr>
      <tr>
        <th scope='row'>2</th>
        <td>{getPercentOfIndex(0,2)}</td>
        <td>{getPercentOfIndex(1,2)}</td>
        <td>{getPercentOfIndex(2,2)}</td>
        <td>{getPercentOfIndex(3,2)}</td>
        <td>{getPercentOfIndex(4,2)}</td>
      </tr>
      <tr>
        <th scope='row'>3</th>
        <td>{getPercentOfIndex(0,3)}</td>
        <td>{getPercentOfIndex(1,3)}</td>
        <td>{getPercentOfIndex(2,3)}</td>
        <td>{getPercentOfIndex(3,3)}</td>
        <td>{getPercentOfIndex(4,3)}</td>
      </tr>
      <tr>
        <th scope='row'>4</th>
        <td>{getPercentOfIndex(0,4)}</td>
        <td>{getPercentOfIndex(1,4)}</td>
        <td>{getPercentOfIndex(2,4)}</td>
        <td>{getPercentOfIndex(3,4)}</td>
        <td>{getPercentOfIndex(4,4)}</td>
      </tr>
    </table>
  )
}

ReactDOM.render(<App />, document.getElementById('app'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js