block by wmerrow dd4658afd970732615bf

Intermediate D3 - Module 3 - United States shape file

Full Screen

index.html

<!DOCTYPE html>

<html lang="en">		
    <head>
        <meta charset="utf-8">
    	<title>Will's module 3 exercise</title>
         <script type="text/javascript" src="//d3js.org/d3.v3.js"></script>

        <style type="text/css">
                
       
        body {
            background-color: whitesmoke; font-family: sans-serif;
        }

        #container{
            width: 800px;
            height: 500px;
            margin-left:auto;
            margin-right:auto;
            margin-top: 100px;
            padding: 20px;
            background-color:white;
            box-shadow: 3px 3px 4px 4px gray;
        }

        svg {
            background-color: white;
        }
            
        
        </style>
    </head>

<body>

<div id = "container">
   

</div>
    
<script type="text/javascript">

            
            var w = 800;
            var h = 500;

            var projection = d3.geo.mercator()
                                    .center([ 0, 55 ])
                                   .translate([ w*1.1, h/2 ])
                                   .scale([ w/3 ]);

            var path = d3.geo.path().projection(projection);

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

        d3.json("ne_110m_admin_1_states_provinces.json", function(json) { svg.selectAll("path")
                            .data(json.geometries)
                            .enter()
                            .append("path")
                            .attr("d", path);
                    });

            svg.append("text")
                .attr("x",w-250)
                .attr("y",52)
                .attr("font-size",12)
                .text("United States");





</script>

</body>
</html>