D3 Examples - population v GDP

xxxxxxxxxx
 
<!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 margin = { left: 30, right:30, top:30, bottom:30};
    
    var innerWidth = outerWidth - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;
    var circleRadius = 5;
    var xColumn = "population";
    var yColumn = "gdp";
    var rColumn = "population";
    var rMin = 0; rMax = 20;
    var r = 2;
    
    var svg = d3. select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
    
    var g = svg.append('g')
        .attr('transform',"translate(" + margin.left + ", " + margin.top + ")");
    
    var xScale = d3.scale.log().range([0,innerWidth]);
    var yScale = d3.scale.log().range([innerHeight,0]);
    var rScale = d3.scale.sqrt().range([rMin,rMax]);  // make the area of the circle proportional to the size of the circle.
​
    
    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([0, d3.max(data, function(d) { return d[rColumn]; })]);  // go from 0 to the max value
      
      var circles = g.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]); })
      
      circles.exit().remove();
    }
    
    
    function type(d) {
            // country_code,population,gdp
      d.population = +d.population;
      d.gdp = +d.gdp;
      return d;
    }
  
    d3.csv("countries_population_GDP.csv", type, function (data) {
     
       render(data)
       
      // the population of the biggest circle
      var people = rScale.domain()[1]
      console.log(people)
      // the number of pixels in the biggest circle
      var pixels = Math.PI * rMax * rMax;
      
      console.log((people/pixels) + " people per pixel")
      
     
    });
    
    
  </script>
</body>
 , 
    