A timelapse public transit visualization app built with Pixi and Vue.
i like trains
Each city has a list of transport types defined, with an intentional order. When you open a city, the default transport type will be displayed, e.g. /budapest will become /budapest/metro.
The URL can be manipulated to include any number of transport types or lines.
For example: /berlin/U1,S1,tram
Exception: if there are at least 2 transport types available for a city, displaying all bus lines at once will be forbidden. This is because usually in cities that have extended public transit systems, there'll be a very large number of bus lines in contrast to other travel modes. For example Berlin has 200 bus lines compared with 22 tram lines coming in second.
When transit lines are displayed in the control panel under "showing", they can be hovered over or clicked to highlight the track of the line on the map.
For the movement of vehicles, PIXI.Ticker is used. Each vehicle has its own ticker, that gets deleted when the journey is over.
At every single stop, irregardless of vehicle type, a 30 second dwell time is assumed. I timed this on multiple types of Berlin transit, at different times of day and it seems a good average. This causes the flow of vehicles to not be continous, but rather realistic.
Fun fact: Datasets that include bus and tram lines that have very frequent stops tend to (understandably) make large generalizations for the travel times between stops, which can make it look like the movement of vehicles is borderline coreographed. If you go to berlin/tram and put the speed to 120x and start playing Pump Up The Jam at the right time, you can look at the trams vibing.
All names and icons of public transit lines are trademarks of the authorities highlighted in the information panel for each city.
The graphics in the speed control buttons are from google noto emoji.
Maps of cities are from OpenStreetMap.