enjalot/README.md Secret

## README.md

      
    Raw
  

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

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

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>