More skeuomorphic signs! HTML/CSS ftw, replicating their real-life counterparts.

This is probably the first time I've managed a network graph in a way I liked. I used workers to shift the simulation off the main thread so that the page doesn't lag while it sets up. More connections were on the same line, so we take a minimum number from both types of travel.

Same as above, I might know what the general map looks like but not specific "routes", so this was a custom routing system for handling interchanges, inter-line commutes. A virtualized list to show all 6k possible commutes so you can click at random ones quickly.

Not everyone's from Bangalore or might know where a specific station is (ik I don't), so instead of just name-dropping places, I reused our metro map component in a tooltip which shows the location of that station in a popover.

A thread of some design/code highlights for me from our 'How Bangalore Uses the Metro' 📊 project.

1. The header sign is fully HTML/CSS. 'Go Down Take Up For Toilet' is real signage at one of our biggest stations (pic below) :P

My favorite part is this routing system I built for visualizing pairs of commute trips. All this and more in the story!

Experiments in visualizing crowds in Bangalore's metro station. The floor plans come in SVG formats, so I solved this by managing to constrain rendering clusters within a polygon with a certain color code (platform color is always consistent) :P

One detail I'm pretty proud of is the info boxes that accompany each chart on a film's page. Some people may not know how to interpret a histogram, and that's okay! This popup walks you through the _same_ chart you're looking at with a series of steppers, no placeholder explanation. :)