var outerWidth = 700;
var outerHeight = 400;
var margin = { left: 190, top: 30, right: 10, bottom: 50 };

var yColumn = "EduLevel";
var xColumn = "Number";

var innerWidth  = outerWidth  - margin.left - margin.right;
var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("#fig1").append("svg")
  .attr("width",  outerWidth)
  .attr("height", outerHeight);
var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], 0.2);
var xScale = d3.scale.linear().range([0, innerWidth]);

var xAxisG = g.append("g")
	.attr("class", "x-axis")
  .attr("transform", "translate(0," + innerHeight + ")");

var yAxisG = g.append("g")
	.attr("class", "y-axis");

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");

function render(data){

  yScale.domain(data.map( function (d){ return d[yColumn]; }));
  xScale.domain([0, d3.max(data, function (d){ return d[xColumn]/1000; })]);
  
  xAxisG.call(xAxis);
  
  yAxisG.call(yAxis);

  var bars = g.selectAll("rect").data(data);
  bars.enter().append("rect");

  bars
    .attr("width", function (d){ return xScale(d[xColumn]/1000); })
    .attr("y", function (d){ return yScale(d[yColumn]); })
    .attr("x", 0)
  	.attr("height", yScale.rangeBand())
    .attr("fill", "steelblue");
  
  bars.exit().remove();
  
  g.append("text")
  	.attr("x", (innerWidth))
  	.attr("y", (innerHeight + margin.bottom - 10))
  	.style("text-anchor", "end")
  	.style("font-size", "12.5pt")
  	.text("Number of People (in millions)");
}

function type(d){
  d.Number = +d.Number;
  return d;
}

d3.csv("data_2A_2J.csv", type, render);