Simple Dots Example

by Jon Sadka

This example was created using building blocks and was used to show 100 dots of varying sizes and colors using d3.

<!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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js