Using Jupyter Notebook for DataVis Experimentation

Link to notebook and files.

Using Jupyter Notebook, I re-designed the London Tube Map. The new map is interactive and provides information about passenger numbers at a particular station at a particular time.

History of Tube Map, Before Beck

London Underground map has evolved significantly over time. The first map from 1908 looked like this:

The way that the railway lines are geographically laid out, superimposed over the city map demonstrates a high level of accuracy. However, station names are written in small text in various angles appearing crammed to fit in the space. Between the twisted lines, it makes it difficult to read and navigate around using this map. Furthermore, this version omits stations outside of the centre. Another version that gives a fuller picture of the network is presented with more waste spaces and incomprehensible complexity in the centre.

A major design makeover took place by a map-maker named Fred Stingemore in 1926. He introduced a regular spacing between the stations to design a neater map. This allowed the map to present more stations with larger text. This map is no longer superimposed on a map as it is no longer geographically accurate. While this map promoted a sense of community between inner London and the suburbs, it continues to omit stations that are far from the centre.

Beck's Design

Henry Charles Beck (1902-1974) was an English engineering draftsman at the Underground Electric Railways Company of London (UERL). In 1931, he presented his design of the London Underground Tube map that he worked on as his spare-time project. When it was initially shared with UERL, it was rejected for being too revolutionary.

Rather than focusing on the geographical accuracy, Beck's Tube Map is clear and comprehensible with lines that run horizontally, vertically, and at 45 degree angle with even spacing between stations. In the following year, he shared his map again with UERL. The company bought his design and few adjustments were made in preparation for the publication. Some changes include using ticks for stations without interchanges instead of blobs, font, and diamond-shaped interchanges. Published in 1933, the result looks like this:

Since its initial release to the public, Beck’s Underground Map has inspired its successors and has been widely adopted in the design of underground map to this date for its user-friendly, search-ability, and clear navigation capabilities.

Adding the Passenger Data in the Re-Design

Inspired by Janet Vertesi (2008) who suggest a different role for the familiar image of Tube Map by “presenting and structuring the points of access and possibilities for interaction within the urban space.” (p. 7), I aimed to create an opportunity for new knowledge-making using interactive data visualization method in my re-design. I aspired the new data visualization to inform decision making by demonstrating the larger picture of the railway system in relationship to its people and the geography. The new visualization is designed for UERL, city officials, and urban geographers to investigate the passenger traffic at each station, Underground ridership and the rider flow at a given time in a day. The new map does not intend to serve as underground journey planning for the riders. However, riders’ may obtain new information that is not currently presented in the Tube Map such as the busy times to infer crowdedness. This may assist with the decision making for some riders who are accompanying pets, children, or using the wheelchair by helping them determine the appropriate time for their travel.

The London Tube Map omits geographical accuracy for orderly design aesthetics. My new map retrieves the lost geographical accuracy that Beck has omitted in his versions to demonstrate geographically accurate point of interactions for riders, presenting opportunities for engagement, and making sense of the city in relationship to its Underground Railway.

Iterative Design

Using iterative design practice, following changes were made:

• Adjusted the scale of x- and y-axis to maximize the use of space without eliminating any data points.

• Omitted time period from 2 A.M. to 4 A.M. when the railway is closed.

• Sorted the list of lines to match the order of the legend in the current map. Changed the colour to match the current map.

• Added slider to allow navigation between times in non-sequential order.

• Added pause button to stop the dynamic animation to allow viewers the time to investigate the visualization.

Latest Design Using Passenger Data to Draw the Tube Map

Reflection

The re-design practice process revealed some critical insights.

1. Incorporating Animation in the Design

The new design is interactive and dynamic. Using frames for different time intervals, it presents the data neatly in a manner that is easy to compare changes over different times intervals. Using hover to present information further contributes to minimizing information overload. The slider bar automatically plays from the beginning to the end allowing viewers to dynamically see the changes over time while presenting the option to pause or navigate between different times.

2. Data Cramming Issue Continues

Due to the geo-based data representation, the visualization in the central area of London appears very crowded as it did in the earlier design. During the peak busy hours, targeting a specific data point to hovering the mouse over becomes difficult. Furthermore, as the size of the plots begins to significantly overlap with each other, the visual accuracy is lost. Using the legend to filter for a specific line at a given time can resolve the issue.

Limitations

Current Limitations

The redesign has some limitations.

• The open source data only included a single day’s data. It is unknown how representative this day’s passenger count compared to other dates.

• The passenger data was not available for all stations. Therefore, there are gaps in the new visualization with some stations not appearing at all.

• For interchangeable stations where two or more lines intersect, only one line was considered and used at random in the representation.
  

Technical Limitations

Furthermore, with no prior knowledge in Python and Plotly, the redesign has some technical limitations. Currently, when hovering over the data plot, it can display either the passenger count or the station name, but not both.

Next Steps

On that note, some next steps follow:

• Superimpose the plots (longitude and latitude) on a map with the option to view and hide to visually demonstrate geographical accuracy of the plotted points.

• When hovering over a data point, present both the station name and the count for the passenger to effectively communicate this information.

• Create another version where the data are plotted in accordance with Beck’s map in more linear formation, rather than geographic formation and compare the two.

---

References

History

https://londonist.com/2016/05/the-history-of-the-tube-map

https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00005W

http://www.bbc.com/culture/story/20150720-the-london-underground-map-the-design-that-shaped-a-city

Inspiration

J. Vertesi, “Mind the gap the london underground map and users’ representations of urban space,” Social Studies of Science , vol. 38, no. 1, pp. 7–33, 2008

Data

Open Data from Transport for London: <a>https://tfl.gov.uk/info-for/open-data-users/our-open-data#on-this-page-8

Tube Map Data: https://github.com/nicola/tubemaps/tree/master/datasets