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>