<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>
  <button id="randomize" onclick="javascript:zoom()">Zoom!</button>
</body>
#randomize {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
}
var n = 500;
var x = [], y = [];
for (var i = 0; i < n; i++) {
  x[i] = i / (n - 1);
  y[i] = x[i] + 0.2 * (Math.random() - 0.5);
}

Plotly.plot('graph', [{
  x: x,
  y: y,
  mode: 'markers'
}], {
  xaxis: {range: [0, 1]},
  yaxis: {range: [0, 1]}
}, {showSendToCloud:true});

function zoom() {
  var min = 0.45 * Math.random();
  var max = 0.55 + 0.45 * Math.random();
  Plotly.animate('graph', {
    layout: {
      xaxis: {range: [min, max]},
      yaxis: {range: [min, max]}
    }
  }, {
    transition: {
      duration: 500,
      easing: 'cubic-in-out'
    }
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.