Skip to content

Instantly share code, notes, and snippets.

Last active February 9, 2016 02:02
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Dynamic Simplification III
license: gpl-3.0

A variation of the dynamic simplification demonstration using a filled polygon rather than a stroked mesh. As a result, the effect of simplification is almost imperceptible during zooming. Aside from the fluid framerate achieved by faster rendering, of course!

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//"></script>
<script src="//"></script>
var width = 960,
height = 500;
var chesapeake = [-75.959, 38.250];
var scale,
area; // minimum area threshold for simplification
var clip = d3.geo.clipExtent()
.extent([[0, 0], [width, height]]);
var simplify = d3.geo.transform({
point: function(x, y, z) {
if (z >= area) * scale + translate[0], y * scale + translate[1]);
var zoom = d3.behavior.zoom()
.size([width, height])
.on("zoom", zoomed);
// This projection is baked into the TopoJSON file,
// but is used here to compute the desired zoom translate.
var projection = d3.geo.mercator()
.translate([0, 0])
var canvas ="body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geo.path()
.projection({stream: function(s) { return; }})
d3.json("us.json", function(error, json) {
if (error) throw error;
.call(zoomTo(chesapeake, 0.05).event)
function zoomTo(location, scale) {
var point = projection(location);
return zoom
.translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
function zoomed(d) {
translate = zoom.translate();
scale = zoom.scale();
area = 1 / scale / scale;
context.clearRect(0, 0, width, height);
function jump() {
var t =;
(function repeat() {
t = t.transition()
.call(zoomTo(chesapeake, 1.25).event)
.call(zoomTo(chesapeake, 0.05).event)
.each("end", repeat);
Display the source blob
Display the rendered blob
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