Building a memory transit map

Brian Foo
3 min readAug 22, 2014

To take a ride down memory lane

Update #1: Based on this blog post, I built a very early prototype of a tool that allows you to build a memory subway map of your own here: http://memoryunderground.com/. You can also find the source code here.

I have always liked the aesthetic of a subway map. There’s something about the web of colorful lines connected by dots trying so desperately to bring order to chaotic systems such as the NYC Subway or the London Underground. As an experiment, I thought it would be fun to try to automatically generate a transportation map given some set of arbitrary data.

I then thought one interesting theme to try to convert into a transportation map would be memories I had with other people. In this case, each person would be treated as a specific train route, each memory with that person would be a stop on that train line, and memories with more than one person would be a transfer point from one train to another. I could also throw in a rule that distance and direction would be equivalent to time, where north is toward the past, south is toward the present, and the earliest memory (station) starts at the top of the map.

So I started by chronologically listing out memories in a very simple and structured way: (1) what the memory was, and (2) who were involved in that memory excluding myself.

Snapshot of some memories listed in JSON format

I then chose a visualization tool that would interpret that data and allow me to build the visuals of a subway map. I chose the popular D3.js Javascript library which uses the highly accessible HTML, CSS, and SVG web technologies. I then wrote some custom Javascript that took the data and converted it into a series of paths (train lines), shapes (stops), and labels that fed into the D3 library to generate an SVG (a Scalable Vector Graphic). Here’s a miniature demo using a small set of sample data to produce a small transit map below:

Sample Data that produces result below
Result from sample data above

The main challenge here is to determine where each line and stop should be placed so that it would be aesthetically pleasing and interpret and display the data correctly. I executed this process using a list of about 100 personal memories with each memory consisting of 1–10 people. The following is the result. You can also view larger, interactive version of the map here. The source code is open source.

The transit map of about 100 personal memories from the past decade. View full version here.

--

--

Brian Foo

Web developer, artist, joyologist. I write about the art-making process in the persective of a software developer. http://brianfoo.com