Till Nagel

Shanghai Metro Flow

by Till Nagel.

Till Nagel
Benedikt Groß

Design Shanghai – Aesthethics City
Power Station of Art, Shanghai
12/2013 – 03/2014

VISAP’14 Art + Interpretation
IEEE VIS 2014, Paris

An animated visualization of Shanghai’s subway network.

Watch in HD on Vimeo.


Shanghai Metro Flow consists of an animation with three network visualizations, and an accompanying infographic poster showing subway line details. The project was part of the Design Shanghai 2013 – Aesthetics City, and exhibited at the Shanghai Power Station of Art from 3rd December 2013 to 30th March 2014. It was also on display at the VISAP’14, the Art Program of IEEE VIS, the largest academic visualization conference.

Shanghai Metro Flow at the exhibition. (Click to show next image.)


With our visualization we wanted to give an impression of the pulse of the city. One of the main characteristics of cities is the large amount of people moving around. These flows are reflected in all the cars, buses, bicycles and subways dashing through the city. We chose the metro network as an exciting use case: Shanghai Metro is one of the fastest-growing, and with over 8 millions rides a day one of the busiest rapid transit systems in the world.

In the design we followed a theme of contrasting juxtaposition, inspired by the ever changing surroundings we are exposed to in an urban environment:

  • The contrast between visual and animation style. The animation shows the stations with a steady beat. The trains and thus the pulsing stops are based on the time plan. That’s how the metro would look like in the perfect world of a transit planner. The visual style however is friendly, colorful, and vibrant.
  • The transition between geographical and schematic maps. Shows how different representations of the city have very distinct characteristics. Visualizing the distortion of inner and outer urban areas illustrates how maps not only transform the image of the city, but influence our perception of space.
  • The side-by-side comparison of the network over time. This reveals temporal patterns such as morning and evening rush hour.

See also the discussion on distortion and space over at The Atlantic Cities where Shanghai Metro Flow was featured.


Shanghai Metro Flow was influenced by three prior projects of ours.

  • Touching Transport. A multitouch tabletop with three visualizations of Singapore’s public transit network. Till Nagel et al, MIT Senseable City Labs, 2012
  • A day in Berlin. An interactive visualization of Berlin’s public transit network for the release event of Berlin’s open data. Till Nagel, FH Potsdam, 2012
  • Metrography. London Tube Map to large scale collective mental map. Benedikt Groß & Bertrand Clerc, Royal College of Arts, 2012


Shanghai has not published its transport network as open data, yet, and thus we had to gather it from two sources. We scraped the timetable data from the official website of the transport company Shanghai Metro, and got the geographic data from OpenStreetMap.

Yummy. Scraping schedule data from HTML tables is ... ever so interesting.

Scraping data is always a bit of a hassle, but trying to put the schedule data into some meaningful format was slightly more challenging. In the end, we harvested service times, frequencies, and durations between stops, and other data such as metro line colors from shmetro.com. Luckily, OpenStreetMap’s data is easier to access, and mostly has quite good documentation. And when we faced little issues we simply fixed the data and updated OpenStreetMap ourselves. (Yay openness!)

For transitioning between geographic and topological maps we needed the positions of subway stops in a schematic layout. We used stop names and IDs from OpenStreetMap, loaded them via CSV into Illustrator, went back and forth adjusting the map layout, and exported the final positions with Benedikt et al’s basil.js into a nice JSON file to be used in our visualization.

Infographic poster

The poster was designed to work as a complement to the main projection. Here, visitors can delve into line details, and compare characteristics of different subway lines.

Poster showing infographics and routes for all lines (Click to enlarge)

The glyphs on the left side show the proportional line length , the interchange stations , the geographic track , and the connections to other lines . On the right, the lines are shown scaled to their track length with the actual distance between stations becoming visible. Station markers with an inner dot indicate interchange stations.

An important characteristic of a network structure is its connectivity. In metro networks typically each station is connected to every other, thus a passenger can reach any place within the network. What varies is the degree of connectivity, i.e. whether a passenger can travel to another place directly, or has to change lines to get there. In our poster, we visualize different properties of connectivity. Compare for instance yellow line M3  having a high degree with pink line M13  having a low degree of connectedness.

Small multiple glyphs showing connections to other lines.

This graph shows to which other lines a metro line is connected. A 12h clock face is used so each line is always displayed at the same angle. (This metaphor of course only works as long as Shanghai Metro has twelve lines. And actually, there is no M12 at the moment, so we put M13 at the 12 o’clock position).

Experiments and design process

Various screenshots from our design process. (Click to show next image.)


Please cite this work as:

Nagel, T., Groß, B. Shanghai Metro Flow – Multiple Perspectives into a Subway System. Proceedings of the IEEE VIS 2014 Arts Program, VISAP’14: Art+Interpretation, 9-14 November 2014, Paris, France. pages 137-138 (paper)


We would like to thank Ruan Hao from LYCS Architecture for the invitation to their sub-exhibition “Tracing the City“, Lai Zhenyu for all the organizational support, and both for being such greats hosts. It was an honor to be in the fine company of MIT Senseable City Labs, Stamen Design, Mahir M. Yavuz and many more.

And as usual, this project was developed in Processing, and with the help of our Unfolding map and Ani libraries.

5 comments on ‘Shanghai Metro Flow’

  1. [...] via 図解でよくわかる 地下鉄のすべて (JTBの交通ムック) (adsbygoogle = window.adsbygoogle || []).push({}); [...]

  2. [...] Till Nagel adds some additional layers of information to Shanghai’s metro system which perfectly illustrates the organic nature of the city. [...]

  3. [...] To play with this question, Nagel and Benedikt Groß created a clever animation of the Shanghai metro system [...]

  4. [...] Till Nagel, a maker of visualizations who’s also done a year of biking and trains on the sprawling Shanghai Metro. Regarding this project, they write: We drive to the closest supermarket, take the bike to the gym [...]

  5. [...] Shanghai Metro Flow is a project by Till Nagel and Benedikt Groß that visualizes the pulse of Shanghai’s subway network – one of the busiest and fastest growing rapid transit systems in the world. The project consists of an animation with three network visualizations, and an accompanying infographic poster showing subway line details. Connections between different lines are visualized via small multiple glyphs that take the shape of a 12h clock so that each line is always displayed at the same angle. You can read the accompanying paper “Shanghai Metro Flow – Multiple perspectives into a subway system“. [...]

Leave a Reply