enjalot · August 27, 2015 00:28
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>D3: Setting path fills</title>
 		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 		<style type="text/css">
 			/* No style rules here yet */		
 		</style>
 	</head>
 	<body>
 		<script type="text/javascript">

 			// Declare Width and height of SVG element
 			var w = 800;
 			var h = 900;
 			

 			//declare bounding box - outer limits of shape
 			var latTop = 41.96920686;
 			var longLeft = -84.81945098;
 			var longRight = -80.518693;


 			//set scale so difference of longitude and latitude is exactly the width of the image
 			// anything greater than 1000 will expand image; less than 1000 will shrink it
 			//scale here thus is equal to 66953; we need to zoom the map in significantly to get it to show
 			var scale = 360*w/(longRight - longLeft);
 			

 			//Define map projection
 			var projection = d3.geo.mercator()
 									.scale(scale)  //references the correct zoom of the image
 									.translate([0,0]); //translate the origin of map to 0, 0 to start - this is where lat/lon 0, 0 will show up
 								   
 			//update 'translate' to fit svg
 			var trans = projection([longLeft, latTop]); //check where the top left part of the map projects to; lon lat inputs and returns their pixel locations
 				console.log(trans); //to check the values of the variable (-15775, -8616)

 				//repositions map to fit the image
 				projection.translate([-1*trans[0], -1*trans[1]]); 

 			//Define path generator using the 'projection' we've built with the proper 'scale' and 'translate'
 			var path = d3.geo.path()
 							 .projection(projection);

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

 			//Load in GeoJSON data
 			d3.json("us-states.json", function(err, json) {
        console.log(err, json);
 				
 				//Bind data and create one path element per GeoJSON feature
 				svg.selectAll("path")
 				   .data(json.features)
 				   .enter()
 				   .append("path") //one path element per feature
 				   .attr("d", path) //passes the data to our 'path' function
 				   .style("fill", "steelblue");
 		
 			});
 			
 		</script>
 	</body>
 </html>
diff --git a/us-states.json b/us-states.json
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3: Setting path fills</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	</style>
	</head>
	<body>
	<script type="text/javascript">

	// Declare Width and height of SVG element
	var w = 800;
	var h = 900;


	//declare bounding box - outer limits of shape
	var latTop = 41.96920686;
	var longLeft = -84.81945098;
	var longRight = -80.518693;


	//set scale so difference of longitude and latitude is exactly the width of the image
	// anything greater than 1000 will expand image; less than 1000 will shrink it
	//scale here thus is equal to 66953; we need to zoom the map in significantly to get it to show
	var scale = 360*w/(longRight - longLeft);


	//Define map projection
	var projection = d3.geo.mercator()
	.scale(scale) //references the correct zoom of the image
	.translate([0,0]); //translate the origin of map to 0, 0 to start - this is where lat/lon 0, 0 will show up

	//update 'translate' to fit svg
	var trans = projection([longLeft, latTop]); //check where the top left part of the map projects to; lon lat inputs and returns their pixel locations
	console.log(trans); //to check the values of the variable (-15775, -8616)

	//repositions map to fit the image
	projection.translate([-1trans[0], -1trans[1]]);

	//Define path generator using the 'projection' we've built with the proper 'scale' and 'translate'
	var path = d3.geo.path()
	.projection(projection);

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

	//Load in GeoJSON data
	d3.json("us-states.json", function(err, json) {
	console.log(err, json);

	//Bind data and create one path element per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path") //one path element per feature
	.attr("d", path) //passes the data to our 'path' function
	.style("fill", "steelblue");

	});

	</script>
	</body>
	</html>