//based primarily on http://alignedleft.com/tutorials/d3/making-a-scatterplot

//Width and height
		var w = 800;
		var h = 500;
		var padding = 60;
		

		
  $.get("chart2.csv", function(respons) {
		 var csv = respons;
		 var obj = $.csv.toObjects(csv);
		 a = 1;
		 
		 
		 var xScale = d3.scale.linear()
							 .domain([0.2, 1])
							 .range([padding, w - padding * 2]);

		var yScale = d3.scale.linear()
							 .domain([0, d3.max(obj, function(d) { return d.elec_prim; })])
							 .range([h - padding, padding]);

		var rScale = d3.scale.linear()
							 .domain([0, d3.max(obj, function(d) { return d.porciento_elecciones; })])
							 .range([2, 20]);
							 
		var formatAsPercentage = d3.format("%");
							 
		//Define X axis
		var xAxis = d3.svg.axis()
						  .scale(xScale)
						  .orient("bottom")
						  .ticks(5)
						  .tickFormat(formatAsPercentage);

		//Define Y axis
		var yAxis = d3.svg.axis()
						  .scale(yScale)
						  .orient("left")
						  .ticks(5)
						  .tickFormat(formatAsPercentage);

		//Create SVG element
		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);
					
		//Create X axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (h - padding) + ")")
			.call(xAxis);
		
		//Create Y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.call(yAxis);
		 
		 svg.selectAll("circle")
		   .data(obj)
		   .enter()
		   .append("circle")
		   .attr("cx", function(d) {
		   		return xScale(d.max_lema_prim);
		   })
		   .attr("cy", function(d) {
		   		return yScale(d.elec_prim);
		   })
		   .attr("r", function(d) {
		   		return rScale(d.porciento_elecciones);
		   })
		   .attr("class", function(d) {
		   		return "year-" + d.year + " gov-" + d.gobernador;
		   });
		   
		 //axis labels
		 svg.append("text")
			.attr("class", "x label")
			.attr("text-anchor", "end")
			.attr("x", w*0.85)
			.attr("y", h-25)
			.text("Gain in primaries by the most successful lema");
			
		svg.append("text")
			.attr("class", "y label")
			.attr("text-anchor", "end")
			.attr("y", 2)
			.attr("x", -0.15*h)
			.attr("dy", ".75em")
			.attr("transform", "rotate(-90)")
			.text("Election gain / primary gain");
		 
		 
		 //regression line
		 var myLine = svg.append("line")
			.attr("x1", xScale(0.25))
			.attr("y1", yScale(0.766))
			.attr("x2", xScale(0.99))
			.attr("y2", yScale(1.114)) 
			.attr("class", "regression-line")
		 
		 
	});