D3 Examples - USA, in moody blue

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>USA - AlbersUSA projection</title>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <link href='https://fonts.googleapis.com/css?family=Amaranth:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
        <style type="text/css">
​
​
​
            body {
                margin: 0;
                background-color: mediumblue;
                background: -webkit-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Chrome 10+, Saf5.1+ */
                background: -moz-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* FF3.6+ */
                background: -ms-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* IE10 */
                background: -o-linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* Opera 11.10+ */
                background: linear-gradient(180deg, #1A2980 10%, #26D0CE 100%); /* W3C */
        
            }
​
            
            #container {
                width: 900px;
                margin-left: auto;
                margin-right: auto;
                }
            
        
            
            h1 {
                font-size: 2.5em;
                color: khaki;
                text-align: center;
                font-family: 'Amaranth', sans-serif;
                font-weight: normal;
            }
            
            p   {
                font-size: 1em;
                color: khaki;
                text-align: center;
                font-family: 'Open Sans', sans-serif;
                font-weight: normal;
            }
​
​
​
        </style>
    </head>
    <body>
    
        <div id="container">
            <h1>The United States of America</h1>
            <p>Albers USA projection<p>
        </div>
        
        <script type="text/javascript">
​
​
​
            //Width and height
            var w = 900;
            var h = 500;
​
            //Define map projection
            var projection = d3.geo.albersUsa()
                                   .translate([ w/2, h/2 ])
                                   .scale([ 900 ]);
​
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
​
            //Create SVG
            var svg = d3.select("#container")
                        .insert("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            //Load in GeoJSON data
            d3.json("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", "midnightblue")
                   .attr("stroke", "lightseagreen");
        
            });
​
​
        
        </script>
    </body>
</html>
    