Mr. Chilly is an animated look at the Bay Area's various microclimate temperatures. The app has been downloaded over 100,000 times, with many loyal paid users. I created the app with developer Alex Chia.
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.
NOE VALLEY - KCASANFR93 ("Noe Valley")
MISSION - KCASANFR142 ("Mission (at Bar and Burrito))"
HUNTER'S POINT - KCASANFR283 ("Precita Park")
SOMA - KCASANFR231 ("SOMA")
FIDI - KCASANFR102 ("Financial District")
NORTH BEACH - KCASANFR137 ("North Beach")
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 and CSS to create the SF-shaped heat map and animated elements. The developer could then translate my code into iOS-friendly code.
<svg class="weatherStations" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 854 1039" enable-background="new 0 0 854 1039" xml:space="preserve">
<path fill="#000000" class="KCASANFR161westwoodPark" d="M385,582 384.2,581.3 381.9,579.2 349.5,549.8 348.7,550.2 329,560 288.5,587.9 285,590.3 282,604
282,628.3 282,628.7 282,648 298,678 338,682 340.7,680.8 347,678 378,646 382.7,645.1 387.6,644.2 394,602zz"/>
<path fill="#000000" class="KCASANFR70sunnyside" d="M474.5,570.9 449,566 427,566 398,566 381.9,579.2 381.9,579.2 384.2,581.3 385,582 394,602
387.6,644.2 405,641 411.5,646.1 415.4,649.1 440.7,633 464.2,617 467.1,614 475,606 475,573 475,571z"/>
...
You can get Mr. Chilly on the App Store here.