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]
forked from Fil's block: Map Zooming d3v4 [UNLISTED]
xxxxxxxxxx
<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>
https://d3js.org/d3.v4.js
https://d3js.org/topojson.v1.min.js