Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active Mar 2, 2017
Embed
What would you like to do?
Map Zooming d3v4 [UNLISTED]
license: gpl-3.0

A demonstration of D3 3.3’s new zoom transitions. For best viewing experience, please play “Doin’ It Right (feat. Panda Bear)” off the latest Daft Punk album while watching this animation.

forked from mbostock's block: Map Zooming d3v4 [UNLISTED]

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var sf = [-122.417, 37.775],
ny = [-74.0064, 40.7142];
var scale,
translate,
visibleArea, // minimum area threshold for points inside viewport
invisibleArea; // minimum area threshold for points outside viewport
var simplify = d3.geoTransform({
point: function(x, y, z) {
if (z < visibleArea) return;
x = x * scale + translate[0];
y = y * scale + translate[1];
if (x >= -10 && x <= width + 10 && y >= -10 && y <= height + 10 || z >= invisibleArea) this.stream.point(x, y);
}
});
var zoom = d3.zoom()
.on("zoom", zoomed);
// This projection is baked into the TopoJSON file,
// but is used here to compute the desired zoom translate.
var projection = d3.geoMercator()
.translate([0, 0])
.scale(4000);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geoPath()
.projection(simplify)
.context(context);
d3.json("us-states.json", function(error, json) {
if (error) throw error;
canvas
.datum(topojson.mesh(topojson.presimplify(json)))
.call(zoom.transform, zoomTo(sf, 4));
loop();
d3.interval(loop, 1820);
});
function loop() {
canvas.transition()
.duration(900)
.call(zoom.transform, zoomTo(ny, 6))
.transition()
.duration(900)
.call(zoom.transform, zoomTo(sf, 4))
}
function zoomTo(location, scale) {
var point = projection(location);
return d3.zoomIdentity
.translate(width / 2 - point[0] * scale, height / 2 - point[1] * scale)
.scale(scale);
}
function zoomed(d) {
var z = d3.event.transform;
translate = [z.x, z.y];
scale = z.k;
visibleArea = 1 / scale / scale;
invisibleArea = 200 * visibleArea;
context.clearRect(0, 0, width, height);
context.beginPath();
path(d);
context.stroke();
}
</script>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment