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=Poiret+One' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font: 10pt sans-serif;
        font-family: 'Poiret One', cursive;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }
    </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 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", 900)
    		.attr("y", 450)
      	.attr("font-family", "Poiret One")
        .attr("text-anchor", "middle")  
        .style("font-size", "40px") 
        .text("Biggest Cities Population");
      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)                   // Use approximately 5 ticks marks.
        .tickFormat(d3.format("s")) // Use intelligent abbreviations, e.g. 5M for 5 Million
        .outerTickSize(0);          // Turn off the marks at the end of the axis.
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .outerTickSize(0);          // Turn off the marks at the end of the axis.

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

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