mbostock · February 9, 2016 02:02 · Feb 9, 2016 · Oct 31, 2015 · Jun 11, 2015 · Aug 22, 2013
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script src="//d3js.org/topojson.v1.min.js"></script>
 <script>
 
 var width = 960,

diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
-<script src="http://d3js.org/d3.v3.min.js"></script>
-<script src="http://d3js.org/topojson.v1.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
 <script>
 
 var width = 960,
@@ -45,6 +45,8 @@
     .context(context);
 
 d3.json("us.json", function(error, json) {
+  if (error) throw error;
+
   canvas
       .datum(topojson.feature(topojson.presimplify(json), json.objects.land))
       .call(zoomTo(chesapeake, 0.05).event)

diff --git a/index.html b/index.html
@@ -23,12 +23,6 @@
   }
 });
 
-var simplifyThenClip = {
-  stream: function(stream) {
-    return simplify.stream(clip.stream(stream));
-  }
-};
-
 var zoom = d3.behavior.zoom()
     .size([width, height])
     .on("zoom", zoomed);
@@ -47,7 +41,7 @@
 var context = canvas.node().getContext("2d");
 
 var path = d3.geo.path()
-    .projection(simplifyThenClip)
+    .projection({stream: function(s) { return simplify.stream(clip.stream(s)); }})
     .context(context);
 
 d3.json("us.json", function(error, json) {

diff --git a/d3.min.js b/d3.min.js
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
-<script src="d3.min.js"></script>
+<script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v1.min.js"></script>
 <script>
 

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+A variation of the [dynamic simplification demonstration](/mbostock/6252418) 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!
diff --git a/d3.min.js b/d3.min.js
diff --git a/index.html b/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<script src="d3.min.js"></script>
+<script src="http://d3js.org/topojson.v1.min.js"></script>
+<script>
+
+var width = 960,
+    height = 500;
+
+var chesapeake = [-75.959, 38.250];
+
+var scale,
+    translate,
+    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) this.stream.point(x * scale + translate[0], y * scale + translate[1]);
+  }
+});
+
+var simplifyThenClip = {
+  stream: function(stream) {
+    return simplify.stream(clip.stream(stream));
+  }
+};
+
+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])
+    .scale(4000)
+    .precision(0);
+
+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(simplifyThenClip)
+    .context(context);
+
+d3.json("us.json", function(error, json) {
+  canvas
+      .datum(topojson.feature(topojson.presimplify(json), json.objects.land))
+      .call(zoomTo(chesapeake, 0.05).event)
+    .transition()
+      .duration(5000)
+      .each(jump);
+});
+
+function zoomTo(location, scale) {
+  var point = projection(location);
+  return zoom
+      .translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
+      .scale(scale);
+}
+
+function zoomed(d) {
+  translate = zoom.translate();
+  scale = zoom.scale();
+  area = 1 / scale / scale;
+  context.clearRect(0, 0, width, height);
+  context.beginPath();
+  path(d);
+  context.fill();
+}
+
+function jump() {
+  var t = d3.select(this);
+  (function repeat() {
+    t = t.transition()
+        .call(zoomTo(chesapeake, 1.25).event)
+      .transition()
+        .call(zoomTo(chesapeake, 0.05).event)
+        .each("end", repeat);
+  })();
+}
+
+</script>
diff --git a/us.json b/us.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		A variation of the [dynamic simplification demonstration](/mbostock/6252418) 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!