Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 02:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/6245977 to your computer and use it in GitHub Desktop.
Save mbostock/6245977 to your computer and use it in GitHub Desktop.
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>
Display the source blob
Display the rendered blob
Raw
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