iblind · September 3, 2015 20:55
diff --git a/city_pop.csv b/city_pop.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Geo</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<style type ="text/css">
    	</style>
    </head>
 	
 	
 	
 	
 	<body>

 		
 		<!-- JS BEGINS -->
 		<script type="text/javascript">
 	
 	
 		// Global D3 variables:
 		
 		var dataset;
 		
 		var padding = 45;
 		var h = 400;
 		var w = 600;
 		
 		var projection =  d3.geo.albersUsa()
 							.translate([w/2,h/2])
 							.scale([800]);
 		
 		

 		
 		var path = d3.geo.path()
 							.projection(projection);
 		
 		var svg = d3.select("body")
 			.append("svg")
 			.attr("width", w)
 			.attr("height", h);


 		

 			
 			d3.json("us-states.json", function(json){
 			

 			

 			
 				svg.selectAll("path")
 					.data(json.features)
 					.enter()
 					.append("path")
 					.attr("d", path)
 					.attr({
 						"fill": "RoyalBlue",
 						"stroke": "Navy",
 						"stroke-width": 0.2,
 						"opacity": 0.5
 					});
 					
 					

 			
 			});

 		
 		
 			d3.csv("city_pop.csv", function(data){
 					console.log(data);
 				var rScale = d3.scale.linear()
 								.domain([0, d3.max(data, function(d){
 									return parseFloat(d.estimate_2014);
 								})])
 								.range([1,15]);
 								
 				dataset = data;
 	
 				svg.selectAll("circle")
 				.data(dataset)
 				.enter()
 				.append("circle")
 				.attr({
 					"cx": function(d) { return projection([d.lon, d.lat])[0];},
 					"cy": function(d) { return projection([d.lon, d.lat])[1];},
 					"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
 				})
 				.style({
 					"fill": "red",
 					"opacity": 0.8
 				});
 	
 			}); 
 		
 		

 		

 		</script>


 	</body>
 	
 </html>


diff --git a/us-states.json b/us-states.json
city	state	estimate_2014	lat	lon
Chicago	Illinois	2,722,389	45.37399	-92.888759
Dallas	Texas	1,281,047	40.636	-91.168309
Houston	Texas	2,239,558	41.337462	-75.733627
Los Angeles	California	3,928,864	34.05349	-118.245323
New York	New York	8,491,079	40.71455	-74.007124
Philadelphia	Pennsylvania	1,560,297	37.15477	-94.486114
Phoenix	Arizona	1,537,058	32.46764	-85.000823
San Antonio	Texas	1,436,697	37.706576	-122.440612
San Diego	California	1,381,069	37.707815	-122.466624
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Geo</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type ="text/css">
	</style>
	</head>




	<body>


	<!-- JS BEGINS -->
	<script type="text/javascript">


	// Global D3 variables:

	var dataset;

	var padding = 45;
	var h = 400;
	var w = 600;

	var projection = d3.geo.albersUsa()
	.translate([w/2,h/2])
	.scale([800]);




	var path = d3.geo.path()
	.projection(projection);

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





	d3.json("us-states.json", function(json){





	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr({
	"fill": "RoyalBlue",
	"stroke": "Navy",
	"stroke-width": 0.2,
	"opacity": 0.5
	});




	});



	d3.csv("city_pop.csv", function(data){
	console.log(data);
	var rScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d){
	return parseFloat(d.estimate_2014);
	})])
	.range([1,15]);

	dataset = data;

	svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle")
	.attr({
	"cx": function(d) { return projection([d.lon, d.lat])[0];},
	"cy": function(d) { return projection([d.lon, d.lat])[1];},
	"r": function (d) { return rScale(parseFloat(d.estimate_2014));}
	})
	.style({
	"fill": "red",
	"opacity": 0.8
	});

	});





	</script>


	</body>

	</html>