/* global React, Sparkline */ const { useState, useMemo, useEffect } = React; window.WealthLensFeature = function WealthLensFeature() { return (

WealthLens UK is the one I can't stop working on. An open-source platform that pulls UK wealth and inequality data from official sources — ONS, HMRC, the World Inequality Database, the Bank of England, DWP, Resolution Foundation — and turns it into cited, embeddable, mobile-responsive chart pages that anyone can share. Built because UK household wealth is roughly £17 trillion — about seven times GDP — and most people have no idea what that distribution looks like.

Ten datasets. Ten chart articles. Ten automated Python pipelines. Every number cites its source URL and access date. Every transformation is reproducible from a script you can read. Nothing is fabricated, nothing is paraphrased, nothing is paywalled. Mobile-responsive, WCAG AA, dark mode, PWA-ready, no tracking, no opinion-as-data — just the receipts.

The architecture is the boring half of civic tech, done right.{' '} FastAPI serves paginated JSON and streaming CSV with HTTP caching, freshness tracking, and eight documented endpoints under{' '} /api/data/*.{' '} Vue 3 + TypeScript with Pinia state, Tailwind, Vite, and{' '} D3.js for charts that don't feel like a vendor template. Data pipelines in Python 3.11 with Pandas, validated and run weekly by GitHub Actions. Deployed to Pages. Backstopped by{' '} 874 passing tests (156 root · 135 backend · 583 frontend) and a CI matrix of ruff, mypy, bandit, vue-tsc and vitest. The boring half of "open civic data" is exactly why most attempts at it stop after one chart.

{['Python 3.11','FastAPI','Pydantic','Pandas','Vue 3','TypeScript','Pinia','D3.js','Tailwind','Vite','GitHub Actions','SQLite → Postgres'].map(s => ( {s} ))}
▷ Live site ↗ Repo
Conversations in progress with Tax Justice UK, Equality Trust, and Patriotic Millionaires UK. Code MIT, charts CC-BY 4.0.
{/* Chart catalogue strip */}
Fig. 6 — current catalogue · 10 cited datasets
{/* Wealth percentile calculator */}
{/* Field note */}
$ tail -f architecture.notes
▸ every chart cites its source. no exceptions. if a number can't link back to ons/hmrc/wid/boe/dwp, it doesn't ship.
▸ pipelines re-fetch weekly. freshness tracked: fresh ≤7d · stale ≤30d · expired >30d
▸ the backend is an api, not a monolith. paginated JSON, streaming CSV, per-column metadata, descriptive stats, health checks.
▸ values: data first, opinion second · open source always · accessible by default · non-partisan.
▸ next: embed codes for journalists · social-share renderer · then internationalisation.
); }; /* ============ Wealth percentile calculator ============ */ function WealthCalc() { // Approximate UK net household wealth percentile lookup (ONS WAS Round 7 inspired) // £ thousands → percentile (rough piecewise — illustrative, not authoritative) const ANCHORS = [ [0, 5], [20, 15], [50, 25], [100, 35], [200, 50], [350, 60], [550, 70], [850, 80], [1300, 90], [2500, 95], [5000, 98], [10000, 99], [25000, 99.7], [100000, 99.95], ]; function pctFor(k) { if (k <= 0) return 1; for (let i = 0; i < ANCHORS.length - 1; i++) { const [k0, p0] = ANCHORS[i]; const [k1, p1] = ANCHORS[i + 1]; if (k >= k0 && k <= k1) { const t = (k - k0) / (k1 - k0 || 1); return p0 + t * (p1 - p0); } } return 99.99; } const [wealth, setWealth] = useState(150); // £k const pct = pctFor(wealth); // Generate a rough Lorenz-style curve for visual context const curve = useMemo(() => { const N = 50; return Array.from({ length: N }, (_, i) => { const p = i / (N - 1); // Skewed lognormal-ish wealth curve return Math.pow(p, 3.8) * 100; }); }, []); const yourX = pct / 100; return (
● WEALTHLENS · personal percentile · UK FIG. 7 — illustrative · ONS WAS shape
{/* Left: input + result */}
Where do you actually sit?

UK net household wealth, percentile lookup.

Your household net wealth (incl. property, pensions, savings, minus debt)
£ setWealth(Math.max(0, Math.min(1000000, +e.target.value || 0)))} style={{ width: 140, border: 'none', borderBottom: '2px solid var(--rule)', background: 'transparent', fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--rouge)', outline: 'none', padding: '2px 4px', }}/> k
setWealth(+e.target.value)}/>
£0£500k£1M£2.5M£5M+
Your percentile
{pct.toFixed(1)} th
{pct < 50 ? `You sit below the UK median household. ${(100 - pct).toFixed(0)}% of households have more.` : pct < 90 ? `You sit above the UK median. ${(100 - pct).toFixed(0)}% of households have more wealth than you.` : pct < 99 ? `Top ${(100 - pct).toFixed(1)}% of UK households. Statistically: rare.` : `Top ${Math.max(0.01, (100 - pct)).toFixed(2)}%. The chart you're sitting on, at this scale, is mostly drawing you.`}
{/* Right: lorenz-ish curve */}
UK wealth distribution · your position
x = percentile · y = relative net wealth (illustrative shape, ONS WAS form)
// not financial advice. not a tax form. just a rough mirror, the way an open civic dataset should be.
); } function PercentileChart({ curve, yourX, pct }) { const w = 420, h = 200; const max = Math.max(...curve); const path = curve.map((v, i) => { const x = (i / (curve.length - 1)) * w; const y = h - (v / max) * (h - 8) - 4; return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`; }).join(' '); const area = path + ` L${w},${h} L0,${h} Z`; const yourPx = yourX * w; // Find y at yourX by interpolating const idx = yourX * (curve.length - 1); const i0 = Math.floor(idx), i1 = Math.min(curve.length - 1, i0 + 1); const t = idx - i0; const yVal = curve[i0] * (1 - t) + curve[i1] * t; const yourYPx = h - (yVal / max) * (h - 8) - 4; return ( {/* gridlines */} {[0.25, 0.5, 0.75].map(g => ( ))} {/* Your position marker */} you · {pct.toFixed(1)}% ); } /* ============ Chart article mock — broadsheet data layout ============ */ function ChartArticleMock() { // Generate two-series area chart: bottom 50% share & top 1% share, 1820–2023 const N = 60; const top1 = Array.from({ length: N }, (_, i) => { // S-curve dip mid-20th century then rise const t = i / (N - 1); return 28 + 8 * Math.sin(t * Math.PI * 1.4 - 1.4) + (t > 0.6 ? (t - 0.6) * 20 : 0) - (t > 0.3 && t < 0.6 ? 6 : 0); }); const bot50 = Array.from({ length: N }, (_, i) => { const t = i / (N - 1); return 5 + 7 * Math.sin(t * Math.PI * 1.1) * (t < 0.6 ? 1 : 0.4) - (t > 0.6 ? (t - 0.6) * 8 : 0); }); return (
{/* Browser-ish chrome */}
● wealthlens.uk/charts/wealth-shares WCAG AA · PWA
{/* Breadcrumb */}
Home / Charts / Wealth Shares
{/* Headline */}

Who owns the wealth?

UK wealth shares by group, 1820–2023.
{/* Stat strip */}
{[ ['TOP 1%', '21%', 'of total'], ['TOP 10%', '57%', 'of total'], ['BOTTOM 50%', '5%', 'of total'], ].map(([lbl, val, sub], i) => (
{lbl}
{val}
{sub}
))}
{/* Chart */}
1820 1900 1950 2000 2023
■ Top 1% share ■ Bottom 50% share
{/* Source bar */}
SOURCE:{' '} World Inequality Database · wid.world · Accessed 2026-05-12
{/* Methodology accordion */}
▸ Methodology · how the numbers are computed collapsed
{/* Footer */}
↓ CSV · ↗ Embed · ⎘ Share ● FRESH · 2d
); } function TwoSeriesChart({ series, height = 130 }) { const w = 360, h = height; const all = series.flatMap(s => s.data); const max = Math.max(...all) * 1.1; const min = 0; const span = max - min || 1; function pathFor(data) { return data.map((p, i) => { const x = (i / (data.length - 1)) * w; const y = h - ((p - min) / span) * h; return `${i === 0 ? 'M' : 'L'}${x.toFixed(2)},${y.toFixed(2)}`; }).join(' '); } function areaFor(data) { return pathFor(data) + ` L${w},${h} L0,${h} Z`; } return ( {series.map((s, i) => ( ))} {/* horizontal gridlines */} {[0.25, 0.5, 0.75].map(t => ( ))} {series.map((s, i) => ( ))} ); } /* ============ Chart catalogue ============ */ function ChartCatalogue() { const charts = [ ['01', 'UK Wealth Shares', 'WID.world', '1820–2024'], ['02', 'Wealth by Decile', 'ONS WAS', 'ongoing'], ['03', 'Housing Affordability by Region', 'ONS', '2010–'], ['04', 'Capital Gains Concentration', 'HMRC', 'annual'], ['05', 'Productivity vs. Pay', 'ONS', '1970–'], ['06', 'Regional Income (GDHI)', 'ONS', 'annual'], ['07', 'Tax Composition', 'HMRC', 'rolling'], ['08', 'Bank Rate vs. CPI', 'Bank of England', 'monthly'], ['09', 'Child Poverty by Region', 'DWP / HMRC', 'annual'], ['10', 'Generational Wealth Gap', 'Resolution Foundation', 'cohort'], ]; return (
{charts.map((c, i) => (
№ {c[0]} {c[1]} {c[2]} {c[3]}
))}
); }