var width = 960,
    height = 500;

var color = d3.scaleQuantize()
              .range(
								[ 
									"rgb(237,248,233)",
									"rgb(186,228,179)",
								  "rgb(116,196,118)",
									"rgb(49,163,84)",
									"rgb(0,109,44)"
								]
							);

var projection = d3.geoAlbersUsa()
                   .translate([width/2, height/2])
var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.csv('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-ag-productivity-2004.csv', function(error, data) {
	if(error) throw error;
	
	color.domain([
		d3.min(data, function(d) { return d.value; }),
		d3.max(data, function(d) { return d.value; })
	]);

	d3.json("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json", function(error, json) {

		// Merge the ag. data and GeoJSON
		// Loop through once for each ag. data value
		for (var i = 0, max = data.length; i < max; i++) {
			
			// grab state name
			var dataState = data[i].state;
			
			// grab data value, and convert from string to float
			var dataValue = parseFloat(data[i].value);
			
			// Find the corresponding state inside the GeoJSON
			for( var j = 0, jmax = json.features.length; j < jmax; j++) {
				var jsonState = json.features[j].properties.name;
				
				if(dataState == jsonState) {
					
					// copy the data value into the JSON
					json.features[j].properties.value = dataValue;
					
					// stop looking through the JSON
					break;
					
				}
			}
		}
	
		svg.selectAll("path")
      .data(json.features)
	  .enter().append("path")
      .attr("d", path)
		  .style('stroke', 'white')
	    .style('fill', function(d) {
				// get data value
			  var value = d.properties.value;
			
				if(value) {
					// if value exists
					return color(value);
				} else {
					// if value is undefined...
					return "#ccc";
				}
			});
		
		d3.csv("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-cities.csv", function(data) {
			svg.selectAll('circle')
			   .data(data)
			   .enter().append('circle')
			   .attr('cx', function(d) {
				 		return projection([d.lon, d.lat])[0];
				 })
			   .attr('cy', function(d) {
				    return projection([d.lon, d.lat])[1];
			   })
			   .attr('r', function(d) {
				    return Math.sqrt(parseInt(d.population) * 0.00004);
				 })
			   .style('fill', 'yellow')
			   .style('opacity', 0.75);
		})
	});
});