Skip to content

Instantly share code, notes, and snippets.

Created Dec 6, 2012
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>
<meta charset="utf-8">
<script src=""></script>
path {
fill: #aaa;
stroke: #fff;
stroke-width: 1.5px;
-webkit-transition: fill .15s ease-in-out;
path:hover {
fill: #888;
var width = 960
var height = 500
// create chart containers
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
// projection
// see
var projection = d3.geo.albers()
.origin([-115, 54.5])
.translate([width/2, height/2])
var path = d3.geo.path()
// see
var zoom = d3.behavior.zoom()
// .scaleExtent([width, 8 * width])
.on("zoom", zoommove);
var states = svg.append("g")
.attr("id", "states")
// treaty polygons
d3.json("ab-treaties.json", function(json) {
.attr("d", path)
function zoommove() {
console.log('zoommove called')
states.selectAll("path").attr("d", path);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment