Intro to D3

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>SVG intro</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
 
  <style>
    circle {
      fill-opacity:0.5;
      stroke-opacity:0.5;
    }
   
  </style>
	
</head>

<body>
  
  
  <script>
   
    var outerWidth = 300;
    var outerHeight = 250;
    var circleRadius = 5;
    var xColumn = "sepal_length";
    var yColumn = "petal_length";
    var rColumn = "sepal_width";
    var colorColumn = "species";
    var rMin = 2;
    var rMax = 10;
    
    var svg = d3. select("body").append("svg")
    	.attr("width", outerWidth)
    	.attr("height", outerHeight);
    
    
    var xScale = d3.scale.linear().range([0,outerWidth]);
    var yScale = d3.scale.linear().range([outerHeight,0]);
    var rScale = d3.scale.linear().range([rMin,rMax]);
    var colorScale = d3.scale.category10();
    
    function render(data) {
      xScale.domain(d3.extent(data, function(d) { return d[xColumn]; }));
      yScale.domain(d3.extent(data, function(d) { return d[yColumn]; }));
      rScale.domain(d3.extent(data, function(d) { return d[rColumn]; }));
      
      var circles = svg.selectAll("circle").data(data);
      circles.enter().append("circle").attr("r", circleRadius);
      
      circles
      	.attr("cx", 		function (d) { return 	  xScale(d[xColumn]); })
      	.attr("cy", 		function (d) { return 	  yScale(d[yColumn]); })
      	.attr("r",  		function (d) { return 	  rScale(d[rColumn]); })
      	.attr("stroke", function (d) { return colorScale(d[colorColumn]); })
      	.attr("fill", function (d) { return colorScale(d[colorColumn]); })
      
      circles.exit().remove();
    }
    
  	function type(d) {
      d.sepal_length = +d.sepal_length;
      d.sepal_width = +d.sepal_width;
      d.petal_length = +d.petal_length;
      d.petal_width = +d.petal_width;
      return d;
    }
  
    d3.csv("iris.csv", type, render);
    
    
  </script>
</body>
 ,

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