31_map_base.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>D3: Mercator projection</title>
	<script type="text/javascript" src="d3.js"></script>
	<style type="text/css">


		body {
			background-color: gray;
		}

		svg {
			background-color: white;
		}


	</style>
</head>
<body>
	<script type="text/javascript">


		//Width and height
		var w = 500;
		var h = 300;

		//Define map projection
		var projection = d3.geo.mercator()
							   .center([ 0, 40 ])
							   .translate([ w/2, h/2 ])
							   .scale([ w/7 ]);

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

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

		//Load in GeoJSON data
		d3.json("data/geo/mapshaper_output.json", function(json) {
			
			//Bind data and create one path per GeoJSON feature
			svg.selectAll("path")
			   .data(json.features)
			   .enter()
			   .append("path")
			   .attr("d", path);
	
		});


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