D3 Examples - Internet Users (d3 in motion)

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
  <title>Internet Users (d3 in motion)</title>
</head>
​
<body>
  <script>
    var height =500;
    var width = 900;
    var margin = {top: 20, bottom: 20, left: 20, right: 20};
    var innerHeight = height - margin['top'];
    var innerWidth = width - margin['left'];
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr('height', height - margin['top'] - margin['bottom'])
      .attr("width", width - margin['left'] - margin['right']);
    
    var xValue = "Country";
    var yValue = "Internet Users";
    
    var g = svg.append('g')
                        .attr("height", 400)
                        .attr('width', 960);
    
    g.attr('transform',`translate(${margin['right']},${margin['top']})`);
    
    var row = d =>  {
                                var netUsersWithCommas = d["Internet Users"];
      
                                d.Ranking = +d.Ranking;
                     d.Country = d.Country;
                     d.Population = +d.Population;
                     d["Internet Users"] = +netUsersWithCommas.replace(/,/g,"");
                     d["Internet Penetration"] = +d["Internet Penetration"];
                     d["Growth %"] = +d["Growth %"];
                     d["Facebook"] = +d["Facebook"]
                     return(d);
                     
                     
                    };
    
    
    
    top5 = data => data.slice(0,5);
    
    
        var render = function(data)
    {
      data = top5(data);
      var xScale = d3.scalePoint()
      .domain(data.map(function(d){return(d[xValue]);}))
      .range([0,300]);
      
      
      var yScale = d3.scaleLinear()
      .domain(d3.extent(data, function(d){return(d[yValue]);}))
      .range([100,0]);
      
      var enter = g.selectAll('circle').data(data).enter();
      circles = enter.append('circle')
        .attr('r',20)
        .attr('cx', function(d){return(xScale(d[xValue]));})
        .attr('cy', function(d){return(yScale(d[yValue]));});
      
      /*var lines = g.selectAll('line').data(data).enter()
      .append('line')
        .attr('stroke-width',2)
        .attr('stroke', 'black')
        .attr('x1', function(d){return(xScale(d[xValue]));})
        .attr('x2', function(d){return(xScale(d[xValue]));})
        .attr('y1',yScale.range[0])
        .attr('y2', function(d){return(yScale(d[yValue]));});*/
      
      circles.exit().remove();
      //lines.exit().remove();
    }
        
    d3.csv('InternetUsers.csv', row,render)
​
​
  </script>
</body>
​
    