wmerrow/index.html

## index.html
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
    	<title>Will's module 3 exercise</title>
         <script type="text/javascript" src="http://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>

## ne_110m_admin_1_states_provinces.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_110m_admin_1_states_provinces.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Will's module 3 exercise</title>
	<script type="text/javascript" src="http://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>