var outerWidth = 600;
var outerHeight = 400;
var margin = { left: 80, top: 30, right: 30, bottom: 90 };

var xColumn = "EduLevel";
var yColumns = [">=18", "18-24", "25-29","30-34", "35-39","40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", ">=75"];

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

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

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

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, i){

  xScale.domain(       data.map( function (d){ return d[xColumn]; }));
  yScale.domain([0, d3.max(data, function (d){ return d[yColumns[i]]; })]);

  xAxisG.call(xAxis);
  xAxisG
  	.selectAll("text")
  	.attr("dx", "-.8em")
  	.attr("dy", ".25em")
   	.attr("transform", "rotate(-30)")
  	.style("text-anchor", "end");

  yAxisG.call(yAxis);

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

  bars
    .attr("x", function (d){ return xScale(d[xColumn]); })
    .attr("y", function (d){ return yScale(d[yColumn]); })
    .attr("width", xScale.rangeBand())
    .attr("height", function (d){ return innerHeight - yScale(d[yColumn]); })
    .attr("fill", "steelblue");

  bars.exit().remove();

  g.append("text")
  	.attr("x", -innerHeight/2)
  	.attr("y", -margin.left/2)
  	.attr("transform", "rotate(-90)")
  	.style("text-anchor", "middle")
  	.style("font-size", "12.5pt")
  	.text("Number of People (in thousands)");
}

function type(d){
  var keys = d[0].keys();
  for(var i = 1, n = keys.length; i<n; i++)
    d[keys[i]] = +d[keys[i]];
  return d;
}
function plot(data){
  render(data, 0);
}

d3.csv("data_01_edu_age_1.csv", type, plot);