Skip to content

Instantly share code, notes, and snippets.

Last active February 9, 2016 02:02
  • Star 0 You must be signed in to star a gist
  • Fork 0 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
license: gpl-3.0

This example demonstrates dynamic topology-preserving shape simplification using topojson.presimplify, a new feature in TopoJSON 1.3. The presimplify method computes the importance of each point using a configurable importance function; the default implementation uses Cartesian triangular area for Visvalingam simplification. Then, a custom geometry stream (d3.geo.transform) uses the previously-computed point importance to filter the geometry during rendering.

<!DOCTYPE html>
<meta charset="utf-8">
<script src="//"></script>
<script src="//"></script>
var width = 960,
height = 500;
var area = 1, simplify = d3.geo.transform({
point: function(x, y, z) {
if (z >= area), y);
var canvas ="body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geo.path()
d3.json("us.json", function(error, topo) {
if (error) throw error;
function render() {
context.clearRect(0, 0, width, height);
function resimplify() {
var t =;
(function repeat() {
t = t.transition()
.tween("area", areaTween(20))
.tween("area", areaTween(.5))
.each("end", repeat);
function areaTween(area1) {
return function(d) {
var i = d3.interpolate(area, area1);
return function(t) {
area = i(t);
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