ctpsstaff / d3-map-symbology-transition

Demo illustrating how to transition symbology in a d3.js map

d3-map-symbology-transition

Demo illustrating how to transition symbology in a d3.js map

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

• jQuery version 1.12.4
• D3 version 6.3.1

Internals

Execution is 'kicked-off' by this piece of code in the index.html file:

	$(document).ready(function() {
		initialize();	
	});	

Here, we use the jQuery library to notify us when the document's ready event has fired. This event is fired by the browser when the HTML document has been completely parsed; it doesn't wait for other things like images, subframes, and async scripts to finish loading. See this MDN page for full details. When this event fires, the code snippet listed above calls our initialize function.

The initialize function first has some code that exposes or hides the #blurb <div> (which contains some documentaiton the app and the data sources it uses) based on a click to the #showhide button.

Next, the initialize function loads the GeoJSON file containing the geographic data for the Boston Reion MPO towns, and a CSV file contaiing informaiton on which utilities serve each town:

	d3.json("../DATA/ctps_brmpo_towns.geo.json")
		.then(function(mpoFeatureCollection) {
			d3.csv("../DATA/towns_poly_utilities.csv")
				.then(function(maTownsUtils) {
					generateViz(mpoFeatureCollection, maTownsUtils);
			});
		});

It uses d3's d3.json and d3.csv to load these two data sources, respectively. When both data sources have been loaded successfully, it calls the generateViz function.

The generateViz function is organized as follows:

1. An event handler is defined to respond to change events on the set of radio buttons with the name util_choice. When a given radio button is clicked, the function to render the correspoinding data (electric utility provider, gas utility provider, and cable TV provider) is called.
2. The array ('table') into which the CSV file containing information on utility providers by town is sorted on the TOWN_ID field, so it can later be joined with the geographic data.
3. Code to define the SVG container for the entire visuzliation.
4. Code to define a geographic projection for our spatial data, and create a geoPath generator function for it.
5. Code to handle panning and zooming; this include code that creates an invisible SVG <rect> which will be used to catch pan/zoom events.
6. Code to create the SVG <path>s for the visualization, and to intially symbolize it on elecric utility provider.
7. Functions to symbolize the map on electric utility provider, gas utility provider, and cable TV provider, called from the event handler, (1).

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