The Washington region’s iconic Metorail map is a topological map that plays with scale in order to efficiently display the lines and the stations. I created my own map which allows you to play with other distortion schemes.

Primarily, the map will adjust to reflect travel times between stations (sometimes called an isochrone map). When you select a station, the others are re-arranged so that their distances (as the crow flies) are proportional to the travel time, while preserving the direction, based on their true geographic coordinates.

For the sake of simplicity, I am making up travel time based on the number of stations and the number of transfers. All neighboring stations are considered to have the same travel times. Initially, the “psychic” cost of a transfer is free, but a control below the station list lets you assign a cost to transfering, in terms of the cost of station travel. (A future update will let you use actual travel times.)

The map was inspired by Tom Carden’s Travel Time Tube Map for London’s subway, which I saw demoed at a transit hack day at Arlington’s Mobility Lab. My own version was programmed with JavaScript (and lots of it), using the new HTML5 canvas element. Behind the scenes I have a PHP program which generates the HTML based on files for all the data needed.

The latitude and longitude coordinates for each station are available from WMATA’s Developer Resources. Their GTFS data includes a stop.txt file, but you have to filter out the thousands of bus stops that are mixed in. The Metro Transparent Data Sets API also makes this data available (though I did not use it).

Keyboard buttons let you do more than just change the map to show time-as-distance for a selected station. Press 9 to display the standard map-style spacing, or press 0 to return to the actual geographic coordinates for the display.

Press \ to toggle between the official station names and shorter ones (chosen by me). Press F to remove the list of stations, letting the map use the full screen. (The map will be redrawn as you re-size the browser.)

The X button will select a random station; the . button will unselect the station. Use the R O Y G B buttons (red, orange, yellow, green, blue) to move up (and down, with the shift key) a line, if the currently selected station is on an eligible line.

There are also more whimsical options. F4 will switch the five lines to random colors (to reset you must refresh the page). Press F2 to draw the line using the text of the station names. Press F3 to replace the lines with animated dots. F7 will change the dots to characters.

F6 will switch you between day and night modes.

And there are keys to trigger stranger contortions:

1 Reverse Orange line
2 Overlap end stations
3 Rotate end stations
4 Switch Red & Blue lines
5 Form diagonal lines
6 Form a single ring
7 Form concentric circles
8 Straighten the Blue Line
F8 Push stations away from selected station

The Metro Distortion Map is at; the accompanying About page summarizes the controls.

Oh, one more feature: I grew up playing Pac-man, so those station dots reminded me of his little dot-filled maze. Press P to play a mash-up of the Pac-man video game with the Metro map. I recommend hitting F6 (night) and F (full screen) for a better look; you can experiment with any combination of the other settings. (You can use map.html?full&night&play as a shortcut to start immediately in play mode.)

P acts as a toggle; whenever you re-enter play mode you’re advanced to the next level. Progressive levels are harder (up to level 9), as the monsters gain speed, but the rewards are higher too, with high-value fruit, and at level 5, the appearance of the “warp tunnel” connecting the ends of the Orange Line.

Navigation can be a bit challenging. The arrow keys move you around until you hit a station, at which point you ride along the track. When you land on a station that serves more than one line, your direction will be the one closest to where you were heading when you arrived (this may be on a line that is drawn under another color). Use the space bar to reverse direction. You will be reversed automatically when you hit the end of a line. Hitting an arrow while riding the track will immediately dislodge you. To transfer lines, it’s more accurate to use R O Y G B.

Metro Distortion Map

2 Responses to “Metro Distortion Map”