Mr. Chilly—an app I made with developer Alex Chia—is an animated look at the Bay Area's various microclimate temperatures. Mr. Chilly quickly exploded in popularity and has been downloaded over 100,000 times, with many loyal paid users.
I designed a bell-curved system of colors and temperatures, and divided up the city into its various neighborhoods. Foggymandering.
While the current version uses a proprietary blend of various data sources, the original app used Weather Underground's data. I associated each neighborhood label and foggymandered region with a WU weather station.
To make sure that my ideas were programmatically feasible—and to build animations that I could hand over to the developer—I built out visual components of the view in HTML and CSS.
I used SVGs with CSS blurring and masking to create the SF-shaped heat map. I animated the sun rays and ocean waves using CSS animations. The developer could then translate my CSS into iOS-friendly code.
You can get Mr. Chilly on the App Store here.