|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font-family: Helvetica, Helvetica Neue, Arial; |
|
} |
|
|
|
#title { |
|
font-size: 18px; |
|
font-weight: bold; |
|
display: inline-block; |
|
margin-right: 20px; |
|
width: 200px; |
|
} |
|
|
|
.graticule { |
|
fill: none; |
|
stroke: #777; |
|
stroke-width: .5px; |
|
stroke-opacity: .5; |
|
} |
|
|
|
.land { |
|
fill: #222; |
|
} |
|
|
|
.county-boundary { |
|
fill: none; |
|
stroke: #fff; |
|
stroke-width: .5px; |
|
stroke-opacity: .5; |
|
|
|
} |
|
|
|
.state-boundary { |
|
fill: none; |
|
stroke: #fff; |
|
} |
|
|
|
#controls { |
|
padding: 20px; |
|
} |
|
|
|
.btn { |
|
display: inline-block; |
|
text-decoration: none; |
|
padding: 10px 15px; |
|
background: #4479BA; |
|
color: #FFF; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
border-radius: 4px; |
|
border: solid 1px #20538D; |
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); |
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); |
|
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); |
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); |
|
-webkit-transition-duration: 0.2s; |
|
-moz-transition-duration: 0.2s; |
|
transition-duration: 0.2s; |
|
-webkit-user-select:none; |
|
-moz-user-select:none; |
|
-ms-user-select:none; |
|
user-select:none; |
|
} |
|
.btn:hover { |
|
background: #356094; |
|
border: solid 1px #2A4E77; |
|
text-decoration: none; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
<div id="controls"> |
|
<div id="title">Albers USA</div><a href="#" id="toggle" class="btn">Toggle Projection</a> |
|
</div> |
|
<script> |
|
|
|
var width = 960, |
|
height = 500; |
|
|
|
var projection = d3.geo.albersUsa() |
|
// .rotate([96, 0]) |
|
// .center([-.6, 38.7]) |
|
// .parallels([29.5, 45.5]) |
|
.scale(1000) |
|
.translate([width / 2, height / 2]) |
|
// .precision(.1); |
|
|
|
var projectionFct; |
|
|
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
var graticule = d3.geo.graticule() |
|
.extent([[-98 - 80, 38 - 45], [-98 + 35, 38 + 45]]) |
|
.step([5, 5]); |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
var projectionFct = d3.geo.albersUsa; |
|
|
|
svg.selectAll("path") |
|
.data(graticule.lines()) |
|
.enter().append("path") |
|
.attr("class", "graticule") |
|
.attr("d", path); |
|
|
|
d3.json("us.json", function(error, us) { |
|
svg.insert("path", ".graticule") |
|
.datum(topojson.feature(us, us.objects.land)) |
|
.attr("class", "land shape") |
|
.attr("d", path); |
|
|
|
svg.selectAll(".county-boundary") |
|
.data(topojson.feature(us, us.objects.counties, function(a, b) { return a !== b && !(a.id / 1000 ^ b.id / 1000); }).features) |
|
.enter().append("path") |
|
.attr("class", "county-boundary shape") |
|
.attr("d", path); |
|
|
|
svg.insert("path", ".graticule") |
|
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) |
|
.attr("class", "state-boundary shape") |
|
.attr("d", path); |
|
}); |
|
|
|
d3.select("#toggle") |
|
.on("click", function() { |
|
projectionFct = projectionFct == d3.geo.albersUsa ? d3.geo.mercator : d3.geo.albersUsa; |
|
|
|
projection = projectionFct == d3.geo.mercator ? |
|
d3.geo.mercator().scale(300).translate([width, height + 50]): |
|
d3.geo.albersUsa().scale(1000).translate([width / 2, height / 2]); |
|
|
|
path = d3.geo.path() |
|
.projection(projection); |
|
|
|
svg.selectAll("path") |
|
.transition() |
|
.duration(2000) |
|
.attr("d", path); |
|
|
|
d3.select("#title") |
|
.text(projectionFct == d3.geo.albersUsa ? "Albers USA" : "Mercator"); |
|
|
|
return false; |
|
}); |
|
|
|
|
|
d3.select(self.frameElement).style("height", (height+50) + "px"); |
|
|
|
</script> |
|
</body> |
|
</html> |
