← Back to Projects
Roofline
LiveWhat the weather could do to the houses here, and what the houses are. Roofline sets FEMA's hazard scores and expected losses beside housing age, construction and heating fuel for six states, county to tract, in the calm of a forecast office at night. Every county gets a hazard profile you can read spoke by spoke and lay over another county.
Screenshots
What It Does
- →Shades FEMA hazard scores and expected annual loss by county, then drops to census tracts as you zoom in
- →Puts housing age, single-family share, heating fuel and homeowners beside the hazards, with a topic filter across all 30
- →Draws a hazard profile for any county against the state median, readable spoke by spoke, with a second county overlaid to compare
- →Shows a hazard that cannot happen somewhere as a hatched Not applicable, never as zero
- →Works from the keyboard and with a screen reader: arrow through counties, open the card, hear the selection announced
- →Installs as an app and keeps working offline for the states you have opened
What I Built
- →Vite, React, TypeScript, Tailwind and zustand, the same stack as the other Labs, with MapLibre GL on the owner’s own county and tract polygons over a dark base
- →A Node bake script turns the Explorer data into small per-state and per-county JSON with quantile breaks computed at bake, and refuses a changed source or a truncated file
- →Placement rules, snap physics, keyboard order and label collision handling are pure, unit-tested TypeScript
- →A colour-blind-checked ramp pair, snapping bottom sheets that make the page behind them inert, and an axe-core run over every screen
- →A strict content security policy, validated URL and storage reads, shape-checked data files and a bounded service-worker cache
- →A headless-Chrome end-to-end script with real mouse and keyboard events, a privacy walk that records every request, and 166 tests