D3 Examples - Simple Dots Example

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
​
<body>
​
  <script>
    var width = 960,
        height = 500;
​
    var svg = d3.select('body').append('svg')
        .attr('width', width)
        .attr('height', height);
      
        var circle = svg.selectAll("circle")
        .data(new Array(45));
​
    circle.enter().append("circle")
        .attr("cy", function(){ return Math.random()*height; })
      .attr("cx", function(){ return Math.random()*width; })
        .attr("r", function(){ return Math.random()*35;})
            .attr("fill", function(){ 
        return '#' + Math.floor(Math.random()*16777215).toString(16);
      });    
    
    setInterval(function(){
            var randomNumber = Math.round(Math.random()*45);
      existingCircles = svg.selectAll("circle")
            .data(new Array(randomNumber));
      
      existingCircles.transition().duration(1000)
            .attr("cy", function(){ return Math.random()*height; })
          .attr("cx", function(){ return Math.random()*width; })
        .attr('r', function(){ return Math.random()*35;})
​
            existingCircles.enter().append("circle")
        .attr("cy", function(){ return Math.random()*height; })
      .attr("cx", function(){ return Math.random()*width; })
      .attr('r', 0)
            .attr("fill", function(){ 
        return '#' + Math.floor(Math.random()*16777215).toString(16);
      })
      .transition().duration(1000)
            .attr('r', function(){ return Math.random()*30;})
      
            existingCircles.exit().remove();      
    }, 1200);
  </script>
</body>
​
​
​
    