doc22940 · May 10, 2020 22:22 · Sep 28, 2017
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+Click-to-zoom using `projection.fitSize()` to interpolate a projection's scale and translate instead of modifying the SVG transform. Has the advantage of leaving stroke-widths alone and the disadvantage of probably being a lot slower.
+
+See also: [click-to-zoom via transform](https://bl.ocks.org/mbostock/2206590)
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+path {
+  fill: #444;
+}
+
+.active {
+  fill: #f0f;
+}
+
+.mesh {
+  stroke: #fff;
+  stroke-width: 1.5px;
+  pointer-events: none;
+  fill: none;
+}
+
+</style>
+<body>
+<script src="//d3js.org/d3.v4.min.js"></script>
+<script src="//d3js.org/topojson.v1.min.js"></script>
+<script>
+var width = 960,
+    height = 500,
+    centered;
+
+var projection = d3.geoAlbersUsa();
+
+var path = d3.geoPath().projection(projection);
+
+var svg = d3.select("body").append("svg")
+  .attr("width", width)
+  .attr("height", height);
+
+d3.json("/mbostock/raw/4090846/us.json", function(err, us) {
+
+  var states = topojson.feature(us, us.objects.states);
+
+  projection.fitSize([960, 500], states);
+
+  svg.selectAll("path")
+    .data(states.features)
+    .enter()
+    .append("path")
+    .attr("d", path)
+    .on("click", clicked);
+
+  svg.append("path")
+    .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
+    .attr("class", "mesh")
+    .attr("d", path);
+
+  function clicked(d) {
+    centered = centered !== d && d;
+
+    var paths = svg.selectAll("path")
+      .classed("active", d => d === centered);
+
+    // Starting translate/scale
+    var t0 = projection.translate(),
+      s0 = projection.scale();
+
+    // Re-fit to destination
+    projection.fitSize([960, 500], centered || states);
+
+    // Create interpolators
+    var interpolateTranslate = d3.interpolate(t0, projection.translate()),
+        interpolateScale = d3.interpolate(s0, projection.scale());
+
+    var interpolator = function(t) {
+      projection.scale(interpolateScale(t))
+        .translate(interpolateTranslate(t));
+      paths.attr("d", path);
+    };
+
+    d3.transition()
+      .duration(750)
+      .tween("projection", function() {
+        return interpolator;
+      });
+  }
+});
+</script>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Click-to-zoom using `projection.fitSize()` to interpolate a projection's scale and translate instead of modifying the SVG transform. Has the advantage of leaving stroke-widths alone and the disadvantage of probably being a lot slower.

		See also: [click-to-zoom via transform](https://bl.ocks.org/mbostock/2206590)