Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Feb 9, 2016
Embed
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">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var area = 1, simplify = d3.geo.transform({
point: function(x, y, z) {
if (z >= area) this.stream.point(x, y);
}
});
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geo.path()
.projection(simplify)
.context(context);
d3.json("us.json", function(error, topo) {
if (error) throw error;
canvas
.datum(topojson.mesh(topojson.presimplify(topo)))
.transition()
.duration(2500)
.each(resimplify);
});
function render() {
context.clearRect(0, 0, width, height);
context.beginPath();
canvas.each(path);
context.stroke();
}
function resimplify() {
var t = d3.select(this);
(function repeat() {
t = t.transition()
.tween("area", areaTween(20))
.transition()
.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);
render();
};
};
}
</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