fork: OHIO Census Tract Map

forked from learntocode611's block: fork: OHIO Census Tract Map

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js