TTC Delay Visualisation

The visualisation I created displays the number of delays at different stations throughout the 24-hour day. I chose to explore this pattern because it’s interesting to see how “rush hours” affect TTC delays and to find out the particularly “popular” stations/areas during those hours.

Each station is represented by a circle, whose colour changes depending on the line it represents (Line 1 is yellow and Line 2 is green). The arrangement of the circles replicates the subway maps for easy identification. The size/diameter of each circle is determined by the number of delays at that particular station at the chosen time of day.

Viewers can interact with the visualisation in two ways; the slider object changes the hour of the day, changing the data being displayed. I decided to use a slider instead of automatic animations because it lets the viewer gain a deeper understanding of the number of delays at different stations at their own pace. Secondly, I included a button that allows viewers to toggle between the visualisation for Line 1 and Line 2 since these are the most used lines.

For aesthetic purposes, I decided to use the p5.scribble library and some added CSS to mimic a hand-drawn look, inspired by “Dear Data” by Giorgia Lupi and Stefanie Posavec. I thought this would make the piece feel more inviting. Lastly, I included a looping audio of the sounds that the subway doors make when they close because I wanted to include something more than just visuals that would instantly tell the viewer what the data is about.

• fullscreen demo
• code
• data source