Randomly add circles to fill in a stack

Randomly add 100 circles to fill in a stack using d3-timer (d3.interval)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #4d4d4d;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
  function getRandomX() {
    // Return a random index of the array coordsX
    var index = Math.floor((Math.random() * coordsX.length));
    return index
  }
  var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190]
  var levelY = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10]

var interpolate = d3.interpolateRgb("steelblue", "brown");

var svg = d3.select("svg")

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-timer.v1.min.js