MHCVI Live

The algorithm that shows you who it left behind

An interactive web app that turns a research framework for menstrual-health climate vulnerability into a live, clickable decision-support tool. Built for the "Tech for Humanity" hackathon.

What it does

1. Vulnerability Map — Districts are scored using 18 formulas from the MHCVI research paper (exposure × sensitivity × capacity) and colored green→red. Click any district to see its pillar breakdown.

2. Field-Note Translator — Type a plain-English observation ("the well ran dry and girls walk 3km for water") and watch the AI convert it into model inputs. The map recolors in real time.

3. Efficiency ↔ Equity Slider — Drag one slider to redistribute a fixed budget. Efficiency floods cheap urban districts; Equity redirects to remote high-vulnerability communities.

4. Price of Equity — The tool confesses exactly who a pure-efficiency algorithm would abandon, and what it costs to protect them. In dignity-days and school-years.

5. Simulate Cyclone — Click a button to spike vulnerability across the map with a shockwave animation, then watch it decay (F12 dynamic risk).

6. Model Weights — Adjust the α/β/γ pillar weights to see how vulnerability rankings change.

Architecture

src/
  main.jsx              — entry point
  App.jsx               — four-screen layout, state management
  model.js              — F1–F18 as pure functions
  data.js               — multi-region dataset (4 regions × 6 districts)
  components/
    Map.jsx             — SVG map colored by V_i
    FieldNote.jsx       — text input → calls /api/translate
    Allocation.jsx      — ε slider + funding view
    PriceOfEquity.jsx   — PoE display + abandoned-districts list
    PillarPanel.jsx     — click-to-expand breakdown (Recharts)
    WeightSliders.jsx   — α/β/γ pillar weight controls
    HonestyBadge.jsx    — corner disclaimer
    Tutorial.jsx        — onboarding walkthrough
  test-model.js         — verification script (run with node)

functions/
  api/
    translate.js        — Cloudflare Worker: proxies OpenRouter API (key stays server-side)

Tech stack

Layer	Choice
Frontend	React 19 + Vite 8
Styling	Tailwind CSS 4
Animation	Framer Motion
Charts	Recharts
Backend	Cloudflare Pages Functions (Workers)
AI	OpenRouter API (free model, proxied through Worker)
Deploy	Cloudflare Pages + Wrangler

Local development

npm install
npm run dev          # Vite dev server only (no API proxy)
npm run dev:full     # Vite + Wrangler (full stack with API)

API key setup

1. Get a free key at openrouter.ai (50 req/day free tier)
2. Create .dev.vars in the project root (gitignored):

   OPENROUTER_API_KEY=sk-or-v1-...
   

   This is only needed for npm run dev:full. In production, the key lives in Cloudflare dashboard.

Deploy to Cloudflare Pages

First time

# Login to Cloudflare (browser opens)
npx wrangler login

# Deploy — creates the project automatically
npm run deploy

Set the API key in production

1. Go to dash.cloudflare.com → Workers & Pages → mhcvi-live → Settings → Environment variables
2. Add OPENROUTER_API_KEY with your key (encrypt it)
3. Deploy again to pick it up:

   npm run deploy:prod

Commands

Command	What it does
npm run dev	Vite only (frontend, no API)
npm run dev:full	Full stack locally with Wrangler
npm run build	Build to dist/
npm run deploy	Build + deploy preview to Cloudflare Pages
npm run deploy:prod	Build + deploy to production branch

Model verification

node src/test-model.js

Prints all intermediate values for 2 hard-coded districts. Compare to spreadsheet.

Data

All data is fake-but-realistic — the model is specified, not calibrated. Each region has 6 districts with distinct hazard profiles:

• South Asian Delta — cyclones, flooding, salinity intrusion
• East African Drought Belt — water scarcity, heat, displacement
• Pacific Small Island States — sea-level rise, remoteness, freshwater loss
• Heat-Stressed Megacity — extreme heat, water insecurity, price shocks

Each region has 2–3 high-vulnerability/remote districts AND 2–3 low-vulnerability/urban districts to make the Efficiency↔Equity slider visually meaningful.

Credits

Built on: "Prioritizing Under Constraint: A Mathematical Framework for Targeting Menstrual Health Resources in Climate-Vulnerable Communities" (MHCVI & Resource Allocation Model).