var svg1 = d3.select("#svg_axis");
var svg2= d3.select("#svg_chart");
var width = 900;
var height;
var bar_height = 20;
var margin = {
	top:0,
	left:200,
	bottom:0,
	right:0
}

svg1
	.attr("width",900)
	.attr("height",40);

svg2
	.attr("width",900);

d3.csv('Employment Projections cleaned.csv',function(data) {
	
	var measure = "Employment 2012 (k)";

	data.sort(function(a,b) {
		return b[measure] - a[measure];
	});


	height = bar_height * data.length + margin.top + margin.bottom;

	svg2
		.attr("height",height);

	var plot = svg2.append("g")
		.attr("transform","translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scale.linear()
		.domain(d3.extent(data,function(d) {return parseInt(d[measure]);}))
		.range([0,width-margin.left - margin.right]);

	var xAxis = d3.svg.axis()
		.scale(x)
		.orient("top");

	var bars = plot.selectAll("rect")
		.data(data)
		.enter()
		.append("rect")
		.attr("y",function(d,i) {return i*bar_height})
		.attr("height",bar_height)
		.attr("width",function(d) {return x(d[measure])});

	var labels = svg2.selectAll(".label")
		.data(data)
		.enter()
		.append("text")
		.attr("class","label")
		.attr("y",function(d,i) {return margin.top + (i+.5)*bar_height})
		.attr("x",margin.left-10)
		.attr("text-anchor","end")
		.attr("dy",".3em")
		.text(function(d) {return d.Occupation.substring(0,30);})
		.attr("title",function(d) {return d.Occupation});

	var axis_g = svg1.append("g")
		.attr("class","x axis")
		.attr("transform","translate(" + margin.left + ",20)")
		.call(xAxis);

});