unamandita · November 18, 2015 15:57
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>New York State</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 		<style type="text/css">



 			body {
 				background-color: white;
 			}
 			#container {
 				width: 550px;
 				margin-left: auto;
 				margin-right: auto;
 				margin-top: 20px;
 				padding: 30px;
 				background-color: white;
 				box-shadow: 2px 2px 4px 4px #ccc;
 			}

 			svg {
 				background-color: white;
 			}

 			

 			h1 {
 				font-family: Helvetica, Arial, sans-serif;
 				font-size: 24px;
 				font-weight: lighter;
 				/*padding-left: 20px;*/
 				text-align: center;
 			}

 			.path:hover{
 				opacity: 0.6;
 			}


 		</style>
 	</head>
 	<body>

 		<div id="container">

 			<h1>New York Counties: Population</h1>

 		</div>
 		<script type="text/javascript">



 			//Width and height
 			var w = 550;
 			var h = 450;

 			//Define map projection
 			var projection = d3.geo.mercator()
 								   .center([ -76, 42.8 ])
 								   .translate([ w/2, h/2 ])
 								   .scale([ w*6 ]);

 			//Define path generator
 			var path = d3.geo.path()
 							 .projection(projection);
 			 

 			//Define quantize scale to sort data values into buckets of color
 			//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
 			var color = d3.scale.quantize()
 								.range([ "#bfd3e6", "#9ebcda", "#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b" ]);				 

 			
 			//Create SVG
 			var svg = d3.select("#container")
 						.append("svg")
 						.attr("width", w)
 						.attr("height", h);

 			//Load in CO2 data
 			d3.csv("NYcounties_population_2013.csv", function(data) {

 				//Set input domain for color scale
 				color.domain([
 					d3.min(data, function(d) { return d.population; }), 
 					d3.max(data, function(d) { return d.population; })
 				]);
 				//Load in GeoJSON data
 				d3.json("ny_counties.json", function(json) {
 					
 					//Merge the CO2 data and GeoJSON into a single array
 					//
 					//Loop through once for each CO2 data value
 					for (var i = 0; i < data.length; i++) {
 				
 						//Grab country name
 						var dataCounty = data[i].countyName;
 						
 						//Grab data value, and convert from string to float
 						var dataValue = (data[i].population);
 				
 						//Find the corresponding country inside the GeoJSON
 						for (var j = 0; j < json.features.length; j++) {
 						
 							//We'll check the official ISO country code
 							var jsonCounty = json.features[j].properties.NAME;
 				
 							if (dataCounty == jsonCounty) {
 						
 								//Copy the data value into the GeoJSON
 								json.features[j].properties.population = dataValue;
 								
 								//Stop looking through the JSON
 								break;
 								
 							}
 						}		
 					}

 					//Bind data and create one path per GeoJSON feature
 					var paths = svg.selectAll("path")
 					   .data(json.features)
 					   .enter()
 					   .append("path")
 					   .attr("d", path)
 					   .attr("class", "path")
 					   .style("fill", function(d) {

 							//Get data value
 							var value = d.properties.population;

 							if (value) {
 								//If value exists…
 								return color(value);
 							} else {
 								//If value is undefined…
 								return "#ccc";
 							}

 						});

 					paths.append("title")
 					.text(function(d) {
 						return d.properties.NAME + " County, Population: " + d.properties.population;
 					});

 				});  //End d3.json()

 			});  //End d3.csv()


 		
 		</script>
 	</body>
 </html>
diff --git a/ny_counties.json b/ny_counties.json
diff --git a/NYcounties_population_2013.csv b/NYcounties_population_2013.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>New York State</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">



	body {
	background-color: white;
	}
	#container {
	width: 550px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	padding: 30px;
	background-color: white;
	box-shadow: 2px 2px 4px 4px #ccc;
	}

	svg {
	background-color: white;
	}



	h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: lighter;
	/padding-left: 20px;/
	text-align: center;
	}

	.path:hover{
	opacity: 0.6;
	}


	</style>
	</head>
	<body>

	<div id="container">

	<h1>New York Counties: Population</h1>

	</div>
	<script type="text/javascript">



	//Width and height
	var w = 550;
	var h = 450;

	//Define map projection
	var projection = d3.geo.mercator()
	.center([ -76, 42.8 ])
	.translate([ w/2, h/2 ])
	.scale([ w*6 ]);

	//Define path generator
	var path = d3.geo.path()
	.projection(projection);


	//Define quantize scale to sort data values into buckets of color
	//Colors by Cynthia Brewer (colorbrewer2.org), YlOrRd
	var color = d3.scale.quantize()
	.range([ "#bfd3e6", "#9ebcda", "#8c96c6", "#8c6bb1", "#88419d", "#810f7c", "#4d004b" ]);


	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in CO2 data
	d3.csv("NYcounties_population_2013.csv", function(data) {

	//Set input domain for color scale
	color.domain([
	d3.min(data, function(d) { return d.population; }),
	d3.max(data, function(d) { return d.population; })
	]);
	//Load in GeoJSON data
	d3.json("ny_counties.json", function(json) {

	//Merge the CO2 data and GeoJSON into a single array
	//
	//Loop through once for each CO2 data value
	for (var i = 0; i < data.length; i++) {

	//Grab country name
	var dataCounty = data[i].countyName;

	//Grab data value, and convert from string to float
	var dataValue = (data[i].population);

	//Find the corresponding country inside the GeoJSON
	for (var j = 0; j < json.features.length; j++) {

	//We'll check the official ISO country code
	var jsonCounty = json.features[j].properties.NAME;

	if (dataCounty == jsonCounty) {

	//Copy the data value into the GeoJSON
	json.features[j].properties.population = dataValue;

	//Stop looking through the JSON
	break;

	}
	}
	}

	//Bind data and create one path per GeoJSON feature
	var paths = svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("class", "path")
	.style("fill", function(d) {

	//Get data value
	var value = d.properties.population;

	if (value) {
	//If value exists…
	return color(value);
	} else {
	//If value is undefined…
	return "#ccc";
	}

	});

	paths.append("title")
	.text(function(d) {
	return d.properties.NAME + " County, Population: " + d.properties.population;
	});

	}); //End d3.json()

	}); //End d3.csv()



	</script>
	</body>
	</html>
year	countyCode	countyName	population
2013	28	Hamilton	4773
2013	52	Schuyler	18460
2013	65	Yates	25156
2013	31	Lewis	27149
2013	51	Schoharie	31844
2013	53	Seneca	35409
2013	23	Essex	38762
2013	64	Wyoming	41531
2013	42	Orleans	42235
2013	20	Delaware	46722
2013	10	Allegany	48109
2013	27	Greene	48455
2013	19	Cortland	48976
2013	16	Chenango	49503
2013	35	Montgomery	49897
2013	57	Tioga	50243
2013	24	Franklin	51688
2013	25	Fulton	54586
2013	26	Genesee	59454
2013	44	Otsego	61683
2013	18	Columbia	62243
2013	61	Washington	63093
2013	29	Herkimer	64181
2013	32	Livingston	64705
2013	60	Warren	65337
2013	33	Madison	72382
2013	56	Sullivan	76665
2013	12	Cattaraugus	78892
2013	13	Cayuga	79477
2013	17	Clinton	81591
2013	15	Chemung	88506
2013	62	Wayne	92473
2013	54	Steuben	98650
2013	45	Putnam	99645
2013	58	Tompkins	103617
2013	40	Ontario	109103
2013	48	St. Lawrence	111963
2013	30	Jefferson	119504
2013	43	Oswego	121165
2013	14	Chautauqua	133080
2013	50	Schenectady	155333
2013	46	Rensselaer	159918
2013	59	Ulster	180998
2013	11	Broome	197534
2013	37	Niagara	214249
2013	49	Saratoga	223865
2013	38	Oneida	233585
2013	21	Dutchess	296916
2013	9	Albany	306945
2013	47	Rockland	320903
2013	41	Orange	375592
2013	39	Onondaga	468387
2013	7	Richmond	472621
2013	34	Monroe	749606
2013	22	Erie	919866
2013	63	Westchester	968802
2013	36	Nassau	1352146
2013	3	Bronx	1418733
2013	55	Suffolk	1499738
2013	5	New York	1626159
2013	6	Queens	2296175
2013	4	Kings	2592149
2013	2	New York City	8405837