D3 Intro

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <svg>
  </svg>
  <script>
    var width = 1000;
    var height = 1000;
    var i = 4;
    
    var svg = d3.select('svg');
    
    for(var i = 0; i < 1200; i++) {
      var colors = ["#FF0000", "#00FF00","#0000FF"]  
      
      var d = {
        x: Math.random() * 700,
        y: Math.random() * 1000,
        r: Math.random() * 10 + 5,
        fill: colors[Math.floor(Math.random() * 						colors.length)]
      };
   
    	svg.append("circle")
      	.datum(d)
    }
    
    svg.selectAll("circle")
    	.attr("cx", function(d) { return d.x; })
    	.attr("cy", function(d) { return d.y; })
    	.attr("r", function(d) { return d.r; })
	    .attr("fill", function(d) { return d.fill; })
    
//     var body = d3.select('body');
//     var header = body.append('h1').text('Hi Mom')
//                     .attr('id', 'main')
//     								.attr('class', 'header')
    
//     body.append("h1").text("1 2 3")
//       							.attr('class', 'header')
    
//     d3.selectAll(".header").style("color", "blue")
//     d3.select("#main").style("color", "red")
//     d3.selectAll(".header")
//       .style('font-family', 'helvetica')

//     document.querySelector('body').append('h1')
//     .text('Hi Mom').attr('id', 'main')
    
//     d3.selectAll('body')
    
//     var svg = d3.select("body").append("svg")
//       .attr("width", width + margin.left + margin.right)
//       .attr("height", height + margin.top + margin.bottom)
//     .append("g")
//       .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//     // Feel free to change or delete any of the code you see!
//     svg.append("rect")
//       .attr({x: 100, y: 10, width: width - 200, height: height - 20})
//       .style({ fill: "#a72d1a"})
//       .transition().duration(3000).ease("bounce")
//       .style({ fill: "#5db9e3"})
    
//     console.log("you are now rocking with d3", d3);
  </script>
</body>

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