Interactive Updating

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <svg></svg>
    <script>
      var dataList = [4,5,4];
      var svg = d3.select("svg");

      svg.on("click",update);
      
      svg.attr("width" ,"500px")
         .attr("height","200px")
         .style("background-color","lightgrey");
      update();
      
      function update(){
        dataList[0] = Math.random()*10;
        dataList[1] = Math.random()*10;
        dataList[2] = Math.random()*10;
        
        var circles = svg.selectAll("circle").data(dataList);
        
        circles.enter()
             .append("circle")
             .attr("cy","100")
             .attr("cx",function(d,i){return (i+1)*120;})
             .style("fill","blue")
             .merge(circles)   
                 .transition()
                 .attr("r",function(d){return d*10;});
      }
    </script>
  </body>
</html>