Cities population 2

forked from imperfection85's block: Cities population

<!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);

bars.exit().remove();
      }
      
      function type(d){
        d.population = +d.population;
        return d;
      }
      
      d3.csv("population2.csv", type, render);
      
    </script>
  </body>
</html>

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