prettytransit is a timelapse-style visualization of the public transit systems of multiple cities. It displays subways, trams, buses and more as tiny dots that move around the map as they should according to their official schedule.
Initially I wanted to only create this for Berlin because the public transit system here is so extensive and, in my experience functional, that I wanted to see what it would look like from a time-traveler-bird's-eye view. Trying to find the schedule data needed to make this happen was what led me down the rabbit hole of generalized transit schedule feeds. It turns out that as long as cities publish their scheduling data in this internationally agreed-upon format (and don't make any technical mistakes in doing so), I'm able to include them in this project.
I had a fair bit of knowledge animating SVGs prior to starting work on prettytransit, but the hope that this visualization could be achieved using SVG was crushed faster than I could say “performance limitations”. Instead, I went with Pixi.js, a library that uses WebGL to render 2D canvases. WebGL uses GPU, which made things faster. But even with using tools specifically meant for building a graphics-heavy app, this time I had to pay more attention than usual to writing code that's as performant as can be. It's refreshing, but mentally exhausting too when it comes to the chasing milliseconds part. In the end I've arrived at a pretty good place performance-wise, but there's still room for improvement.
On the UI, you can adjust the speed with stepper buttons, have an overview of the transit lines that are being displayed, or change them in a modal. You can also highlight a given line on the map by clicking on it. There's a lot more that the UI of prettytransit could allow users to do (and that I would like for it to), but adding anything new always makes it harder to maintain the simplicity of the interface. I want to keep the user controls from looking like the control panel of a commercial airliner, so I will only add more features when I feel like they don't make the whole thing too cluttered.
While working on prettytransit, I've learned about things like OpenStreetMap, working with maps, and paths along a map, and the dynamic manipulation of all of these things, and niche problems like finding the closest point to a bus stop along a street.