<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <button onclick="javascript:animateShuffle();">Shuffle</button>
</body>
button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
function shuffleInPlace(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

var ids = ['1', '2', '3', '4', '5', '6'];

Plotly.plot('graph', [{
  x: [1, 0.5, -0.5, -1, -0.5, 0.5],
  y: [0, 0.866, 0.866, 0, -0.866, -0.866],
  marker:{size:14,
       color:['#631357', '#880E4F', '#AD1457',
            '#F06292', '#F48FB1']},
  ids: ids,
  mode: 'markers'
}], {
  xaxis: {range: [-3, 3]},
  yaxis: {range: [-2, 2]}
}, {showSendToCloud:true});

function animateShuffle() {
  shuffleInPlace(ids);
  Plotly.animate('graph', [{
    data: [{ids: ids}]
  }]);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.