vasturiano · March 29, 2023 09:52 · Jun 4, 2018 · Jun 4, 2018 · Apr 24, 2018 · Apr 24, 2018
diff --git a/.block b/.block
@@ -1 +0,0 @@
-license: gpl-3.0

diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-This example uses d3.behavior.zoom with a dynamic projection for map panning and zooming. This approach is slower than using a [transform](/mbostock/8fadc5ac9c2a9e7c5ba2) or transforming [pre-projected geometry](/mbostock/09dd5ad7d6bfd40187e0) because it requires reprojecting whenever the zoom changes.
+D3 v4/5 version of [mbostock](https://bl.ocks.org/mbostock)'s [Map Pan & Zoom](https://bl.ocks.org/mbostock/8fadc5ac9c2a9e7c5ba2).
 
-
-forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/eec4a6cda2f573574a11'>Map Pan & Zoom II</a>
+Demonstrates map panning and zooming using SVG transforms to avoid the overhead of reprojecting at every zoom iteration.
diff --git a/index.html b/index.html
@@ -1,97 +1,78 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<style>
-
-svg {
-  background: #eee;
-}
-
-.sphere {
-  fill: #fff;
-}
-
-.land {
-  fill: #000;
-}
-
-.boundary {
-  fill: none;
-  stroke: #fff;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-  vector-effect: non-scaling-stroke;
-}
-
-.overlay {
-  fill: none;
-  pointer-events: all;
-}
-
-</style>
-<script src="//d3js.org/d3.v3.min.js"></script>
-<script src="//d3js.org/topojson.v1.min.js"></script>
+<head>
+  <style>
+    body {
+      margin: 0
+    }
+
+    svg {
+      background: #eee;
+    }
+
+    .sphere {
+      fill: #fff;
+    }
+
+    .land {
+      fill: #000;
+    }
+
+    .boundary {
+      fill: none;
+      stroke: #fff;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+  </style>
+
+  <script src="//d3js.org/d3.v5.min.js"></script>
+  <script src="//unpkg.com/topojson@3"></script>
+</head>
 <body>
-<script>
-
-var width = 960,
-    height = 960,
-    scale0 = (width - 1) / 2 / Math.PI;
-
-var projection = d3.geo.mercator();
-
-var zoom = d3.behavior.zoom()
-    .translate([width / 2, height / 2])
-    .scale(scale0)
-    .scaleExtent([scale0, 8 * scale0])
-    .on("zoom", zoomed);
-
-var path = d3.geo.path()
-    .projection(projection);
-
-var svg = d3.select("body").append("svg")
-    .attr("width", width)
-    .attr("height", height)
-  .append("g");
-
-var g = svg.append("g");
-
-svg.append("rect")
-    .attr("class", "overlay")
-    .attr("width", width)
-    .attr("height", height);
-
-svg
-    .call(zoom)
-    .call(zoom.event);
-
-d3.json("https://gist.github.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) {
-  if (error) throw error;
-
-  g.append("path")
-      .datum({type: "Sphere"})
-      .attr("class", "sphere")
-      .attr("d", path);
-
-  g.append("path")
-      .datum(topojson.merge(world, world.objects.countries.geometries))
-      .attr("class", "land")
-      .attr("d", path);
-
-  g.append("path")
-      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
-      .attr("class", "boundary")
-      .attr("d", path);
-});
-
-function zoomed() {
-  projection
-      .translate(zoom.translate())
-      .scale(zoom.scale());
-
-  g.selectAll("path")
-      .attr("d", path);
-}
-
-d3.select(self.frameElement).style("height", height + "px");
-
+  <script>
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+
+    const projection = d3.geoMercator()
+      .translate([width / 2, height / 2])
+      .scale((width - 1) / 2 / Math.PI);
+
+    const path = d3.geoPath()
+      .projection(projection);
+
+    const zoom = d3.zoom()
+      .scaleExtent([1, 8])
+      .on('zoom', zoomed);
+
+    const svg = d3.select('body').append('svg')
+      .attr('width', width)
+      .attr('height', height);
+
+    const g = svg.append('g');
+
+    svg.call(zoom);
+
+    d3.json('//unpkg.com/world-atlas@1/world/110m.json')
+      .then(world => {
+        g.append('path')
+          .datum({ type: 'Sphere' })
+          .attr('class', 'sphere')
+          .attr('d', path);
+
+        g.append('path')
+          .datum(topojson.merge(world, world.objects.countries.geometries))
+          .attr('class', 'land')
+          .attr('d', path);
+
+        g.append('path')
+          .datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
+          .attr('class', 'boundary')
+          .attr('d', path);
+      });
+
+    function zoomed() {
+      g
+        .selectAll('path') // To prevent stroke width from scaling
+        .attr('transform', d3.event.transform);
+    }
 </script>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+This example uses d3.behavior.zoom with a dynamic projection for map panning and zooming. This approach is slower than using a [transform](/mbostock/8fadc5ac9c2a9e7c5ba2) or transforming [pre-projected geometry](/mbostock/09dd5ad7d6bfd40187e0) because it requires reprojecting whenever the zoom changes.
+
+
+forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/eec4a6cda2f573574a11'>Map Pan & Zoom II</a>
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+svg {
+  background: #eee;
+}
+
+.sphere {
+  fill: #fff;
+}
+
+.land {
+  fill: #000;
+}
+
+.boundary {
+  fill: none;
+  stroke: #fff;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.overlay {
+  fill: none;
+  pointer-events: all;
+}
+
+</style>
+<script src="//d3js.org/d3.v3.min.js"></script>
+<script src="//d3js.org/topojson.v1.min.js"></script>
+<body>
+<script>
+
+var width = 960,
+    height = 960,
+    scale0 = (width - 1) / 2 / Math.PI;
+
+var projection = d3.geo.mercator();
+
+var zoom = d3.behavior.zoom()
+    .translate([width / 2, height / 2])
+    .scale(scale0)
+    .scaleExtent([scale0, 8 * scale0])
+    .on("zoom", zoomed);
+
+var path = d3.geo.path()
+    .projection(projection);
+
+var svg = d3.select("body").append("svg")
+    .attr("width", width)
+    .attr("height", height)
+  .append("g");
+
+var g = svg.append("g");
+
+svg.append("rect")
+    .attr("class", "overlay")
+    .attr("width", width)
+    .attr("height", height);
+
+svg
+    .call(zoom)
+    .call(zoom.event);
+
+d3.json("https://gist.github.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/world-110m.json", function(error, world) {
+  if (error) throw error;
+
+  g.append("path")
+      .datum({type: "Sphere"})
+      .attr("class", "sphere")
+      .attr("d", path);
+
+  g.append("path")
+      .datum(topojson.merge(world, world.objects.countries.geometries))
+      .attr("class", "land")
+      .attr("d", path);
+
+  g.append("path")
+      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
+      .attr("class", "boundary")
+      .attr("d", path);
+});
+
+function zoomed() {
+  projection
+      .translate(zoom.translate())
+      .scale(zoom.scale());
+
+  g.selectAll("path")
+      .attr("d", path);
+}
+
+d3.select(self.frameElement).style("height", height + "px");
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		This example uses d3.behavior.zoom with a dynamic projection for map panning and zooming. This approach is slower than using a [transform](/mbostock/8fadc5ac9c2a9e7c5ba2) or transforming [pre-projected geometry](/mbostock/09dd5ad7d6bfd40187e0) because it requires reprojecting whenever the zoom changes.


		forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/eec4a6cda2f573574a11'>Map Pan & Zoom II</a>