D3 Examples - module 3 assignement: simple map of NZ

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