Youtube shuffle has a lot of repeats

by John Doe

HTML

<canvas id="canvas" width="500" height="500" style="border: 1px solid black;"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    trials = 1000,
    divisions = 1000,
    margin = 50,
    radius = Math.min(canvas.width / 2, canvas.height / 2) - margin,
    coords = [];

for (let i = 0; i < divisions; i += 1) {
  let ang = 2 * Math.PI * i / divisions,
      x = radius * Math.cos(ang) + canvas.width / 2,
      y = radius * Math.sin(ang) + canvas.height / 2;
  coords.push([x, y, 0]);

  ctx.beginPath();
  ctx.arc(coords[i][0], coords[i][1], 2, 0, 2 * Math.PI);
  ctx.fill();
}

ctx.beginPath();
for (let i = 0; i < divisions; i++) {
  let rand = Math.floor(Math.random() * divisions);
  coords[rand][2] += 1;
  ctx.lineTo(coords[rand][0], coords[rand][1]);
}
ctx.stroke();

ctx.lineWidth = 3;
for (let i = 0; i < divisions; i += 1) {
  let ang = 2 * Math.PI * i / divisions,
      startX = radius * Math.cos(ang) + canvas.width / 2,
      startY = radius * Math.sin(ang) + canvas.height / 2,
      endX = (radius + 5 * coords[i][2]) * Math.cos(ang) + canvas.width / 2,
      endY = (radius + 5 * coords[i][2]) * Math.sin(ang) + canvas.height / 2;

  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
}
  // add histogram
coords.sort((a,b)=> a[2]-b[2])
let max = coords[coords.length-1][2]
let scale = (canvas.height/2 - radius)/max
let offset = 5
for(let i=0; i<divisions; i++){
  ctx.beginPath()
  let x = (i+1)*(canvas.width-offset) / (coords.length+1)
  ctx.moveTo(x, canvas.height)
  ctx.lineTo(x, canvas.height - scale*coords[i][2])
  ctx.stroke()
}
for(let i=0; i<=max; i++){
  ctx.fillText(i, canvas.width-offset, canvas.height - scale*i)
}