Skip to content

Instantly share code, notes, and snippets.

@elidupuis
Created Dec 6, 2012
Embed
What would you like to do?
D3 + Albers + zoom behavior

Alberta Aboriginal Treaty Lands.

Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.js?2.10.3"></script>
<style>
path {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
-webkit-transition: fill .15s ease-in-out;
}
path:hover {
fill: #888;
}
</style>
</head>
<body>
<script>
var width = 960
var height = 500
// create chart containers
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
// projection
// see https://github.com/mbostock/d3/wiki/Geo-Projections
var projection = d3.geo.albers()
.origin([-115, 54.5])
.parallels([48,61])
.scale(2500)
.translate([width/2, height/2])
var path = d3.geo.path()
.projection(projection);
// https://github.com/mbostock/d3/wiki/Zoom-Behavior
// see http://bl.ocks.org/2374239
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
// .scaleExtent([width, 8 * width])
.on("zoom", zoommove);
var states = svg.append("g")
.attr("id", "states")
.call(zoom)
// treaty polygons
d3.json("ab-treaties.json", function(json) {
states.selectAll("path")
.data(json.features)
.enter().append("path")
.attr("d", path)
})
function zoommove() {
console.log('zoommove called')
projection.translate(d3.event.translate).scale(d3.event.scale);
states.selectAll("path").attr("d", path);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment