Cohort Retention Grid
The triangle chart that shows whether anyone actually sticks around.
IntermediateWeb appData viz10–20hAI-buildable 2/5needs backend, authworth shipping
The classic cohort retention triangle: rows are signup cohorts, columns are periods since signup, cells are retention percentages. Reading it well is a skill; building it means getting the incomplete-period handling right so recent cohorts aren't misread.
UI
Logic
Useful
Hosting · Free tier, sleeps when idle
Deploys free on Vercel Hobby + Supabase free or Cloudflare Pages + Turso free.
Free database tiers pause or expire when a project sits idle, so this one needs occasional attention to stay up.
Deploy it and share a link.
Core features · 7
- Cohorts by signup period as rows, periods since signup as columns
- Cells colour by retention percentage
- Incomplete periods are visually distinguished from real zeros
- Cohort size shows alongside each row
- Switch between daily, weekly and monthly cohorts
- Hovering a cell shows the underlying counts
- An average retention curve renders below the grid
The interesting part
- Incomplete recent periods look like catastrophic churn if not handled
- Colour scales that stay readable across a wide retention range
- The triangle shape making layout and alignment awkward
Once it works
- Add segment filtering across the whole grid
- Add a revenue retention variant
- Add cohort comparison overlaying selected curves
Suggested stack
reacttypescripttailwinddate-fns