Demo illustrating how to generate two "synchonized" maps using d3.js

This demo app makes use of the following external resources loaded from a CDN:

• jQuery version 1.12.4
• D3 vesrion 3.5.17

First, see d3-map-pan-zoom for background on how panning and zooming of a map are implemented using the d3.js library.

Synchronized panning and zooming of the two maps is implemented simply by assigning the same zoom behavior to the SVG object for each of the two maps, svgContainer1 and svgContainer2.

	function zoomFunction() {
	  d3.selectAll("path")
		.attr("transform",
			"translate(" + d3.event.translate
			+ ") scale (" + d3.event.scale + ")");
	}
	
	// Define Zoom Behavior
	var zoom = d3.behavior.zoom()
		.scaleExtent([0.2, 10]) 
		.on("zoom", zoomFunction);
		
	var svgContainer1 = d3.select("#map1").append("svg")
		.attr("width", width)
		.attr("height", height)
		.style("border", "2px solid steelblue")
		.call(zoom);

	var svgContainer2 = d3.select("#map2").append("svg")
		.attr("width", width)
		.attr("height", height)
		.style("border", "2px solid red")
		.call(zoom);

• Clone the repository into a directory, call it 'x'
• 'cd x'
• python -m http.server 8888 --bind localhost
• In a web browser:
  • http:https://localhost:8888

Author: Ben Krepp
Address: Central Transportation Planning Staff, Boston Region Metropolitan Planning Agency
10 Park Plaza
Suite 2150
Boston, MA 02116
United States