module 3 assignement: simple map of NZ

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Orthographic projection</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

body {
			  background: #fcfcfa;
			}

svg {
				background-color: AliceBlue;
			}
			
			#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccc;
			}
						
			.stroke {
			  fill: none;
			  stroke: #000;
			  stroke-width: 3px;
			}

.fill {
			  fill: #111111;
			}

.graticule {
			  fill: none;
			  stroke: #777;
			  stroke-width: .5px;
			  stroke-opacity: .5;
			}

.land {
			  fill: #111111;
			}

.boundary {
			  fill: none;
			  stroke: #fff;
			  stroke-width: .5px;
			}

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

//Width and height
			var w = 700;
			var h = 700;

//Define map projection
				
			var projection = d3.geo.orthographic()
				.scale(3*w)
				.translate([w / 2, h / 2])
				.clipAngle(90)
				.rotate([-173,42,0])
				.precision(.1);						
						
			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

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

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

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js