D3 Examples - Cities population 2

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cities Population</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <style>
      .axis text {
        font: 11pt sans-serif;
        font-family: 'Raleway', cursive;
        font-weight: "bold";
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }
      .toolTip {
        font: 15pt sans-serif;
        font-family: 'Raleway', cursive;
        position: absolute;
        display: none;
        width: auto;
        height: auto;
        background: none repeat scroll 0 0 white;
        border: 0 none;
        border-radius: 8px 8px 8px 8px;
        box-shadow: -3px 3px 15px #888888;
        color: black;
        padding: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <script>
​
      var outerWidth = 1300;
      var outerHeight = 700;
      var margin = { left: 170, top: 0, right: 0, bottom: 30 };
      var barPadding = 0.2;
            
      var colorAsia = "MediumSlateBlue";
      var colorEurope = "SkyBlue";
      var colorAfrica = "Plum";
      var colorSouthAmerica = "DarkSeaGreen";
      var colorNorthAmerica = "Coral";
      
      var xColumn = "population";
      var yColumn = "name";
​
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      
      var title = svg.append("text")
        .attr("x", 950)
            .attr("y", 350)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "40px") 
        .text("Biggest Cities Population");
      
      svg.append("text")
        .attr("x", 950)
            .attr("y", 400)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "35px")
        .style("font-weight", "bold")
        .style("fill", colorAsia)
        .text("Asia");
      
      svg.append("text")
        .attr("x", 950)
            .attr("y", 450)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "35px") 
        .style("font-weight", "bold")
        .style("fill", colorEurope)
        .text("Europe");
      
       svg.append("text")
        .attr("x", 950)
            .attr("y", 500)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "35px") 
        .style("font-weight", "bold")
        .style("fill", colorAfrica)
        .text("Africa");
      
      svg.append("text")
        .attr("x", 950)
            .attr("y", 550)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "35px") 
        .style("font-weight", "bold")       
        .style("fill", colorSouthAmerica)
        .text("South America");
      
       svg.append("text")
        .attr("x", 950)
            .attr("y", 600)
        .attr("font-family", "Raleway")
        .attr("text-anchor", "middle")  
        .style("font-size", "35px")
        .style("font-weight", "bold")
        .style("fill", colorNorthAmerica)
        .text("North America");
      
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis")
        .attr("fill", "black");
​
      var xScale = d3.scale.linear().range(      [0, innerWidth]);      
      var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(5)              
        .tickFormat(d3.format("s")) 
        .outerTickSize(0);       
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);   
      
      var div = d3.select("body").append("div").attr("class", "toolTip");
      
      function render(data){
​
        xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
        yScale.domain(       data.map( function (d){ return d[yColumn]; }));
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
​
        var bars = g.selectAll("rect").data(data);
        
        bars.enter().append("rect")
          .attr("height", yScale.rangeBand())
        
        //bars
          .attr("x", 0)
          .attr("y",     function (d){ return yScale(d[yColumn]); })
          .attr("width", 0)
            .transition()
                    .duration(6000)
          .delay(function(d,i){ return i*100})
            .attr("fill", function(d){ 
                return d.continent == "Asia" ? colorAsia : 
                         d.continent == "Europe" ? colorEurope : 
                         d.continent == "Africa" ? colorAfrica : 
                         d.continent == "South America" ? colorSouthAmerica :
                     d.continent == "North America" ? colorNorthAmerica :
                     "black"})
          .attr("width", function (d){ return xScale(d[xColumn]); });
        
        bars
            .on("mousemove", function(d){
                div.style("left", d3.event.pageX+10+"px");
                div.style("top", d3.event.pageY-25+"px");
                div.style("display", "inline-block");
                div.html((d.name)+"<br>"+"Country: "+(d.country)+"<br>"+"Continent: "+(d.continent)+"<br>"+"Population: "+(d.population).toLocaleString());
            });
       
            bars
            .on("mouseout", function(d){
                div.style("display", "none");
            });
​
        bars.exit().remove();
      }
      
      function type(d){
        d.population = +d.population;
        return d;
      }
      
      d3.csv("population2.csv", type, render);
      
    </script>
  </body>
</html>
    