d3-side-by-side-maps

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

Internals

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);

Running the app

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

Colophon

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