Context
Clinical teams at UCSF needed a way to see the whole patient — not just the latest visit, but a year of data spanning clinical events, wearable sensor readings and social determinants of health. Existing EHR interfaces surfaced data one record at a time. Heatlh Gorilla needed to surface patterns across time.
What I built
I built out the full-interface including routing, views, theming, data management, and interactive charts.
HumanGraph — the longitudinal multi-stream chart — The centrepiece of the dashboard. A custom D3.js chart showing a full year of patient data across four overlaid streams: clinical events, social determinants and wearable data. Features include smooth curve interpolation, animated year/week zoom transitions, custom bar midpoint markers, diamond tick indicators, hoverable concern indicators, and a full mouseOver/mouseOut tooltip system.
Florence Nightingale polar rose chart — Built with D3, load animations, hover tooltip.
Diagnosis Visualizer — cross-filtering timeline — A 12-month diagnosis code timeline with bidirectional cross-filtering between the timeline and a histogram on hover.
Patient Info sidebar — Key EHR sections showing medical history and computed patient analytics.
Provider and patient views — A provider view with a patient list table and summary cards with sparklines, and a patient view with a multiple tabs.
Accessibility — Replaced table-based layouts with CSS Grid to avoid ARIA conflicts. React Transition Group list animations and D3 transition animations throughout.
Outcome
A UCSF-connected healthcare dashboard with bespoke charts and a fluid, accessible interface deployed on Heroku.