28:null 29:["$","title",null,{"children":"Student loan UK | Lea | Observable"}] 2e:Td94,chart = { style_main; const chartWidth = Math.min(1050, width); const height = 520; const container = html`

`; const caption = html`

Each of the 100 dots represents a university graduate.
Their first-job income level is colour-coded as: ≤ £50k, £50k–£100k, > £100k.
The axis shows the final amount repaid on a default £50k student loan.
Hover over a dot and adjust the controls to see more info and scenario.

`; const plot = Plot.plot({ width: chartWidth, height, marginTop: 50, marginBottom: 50, style: { fontSize: "12px", fontFamily: "system-ui, sans-serif", background: "#ecebdf" }, x: { label: "Final repaid amount (£)", tickFormat: d => `£${Math.round(d / 1000)}k`, grid: true }, y: { axis: null, label: null }, marks: [ Plot.ruleX([50000], { stroke: "#111", strokeDasharray: "5,4" }), Plot.text(["Principal £50k"], { x: 50000, y: 0.48, dy: -20, textAnchor: "start", fill: "#222", fontSize: 16 }), Plot.dot(data, { className: "loan-dot", x: "finalRepaid", y: "jitter", fill: "color", r: 9, fillOpacity: 0.5, stroke: "#1b2a41", strokeOpacity: 1 }) ] }); function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : c === '"' ? """ : "'" ); } function highlightNums(text) { const safe = escapeHtml(text).replace(/\n/g, "
"); return safe.replace( /(£[\d,]+(?:\.\d+)?|zero pound|\b\d+(?:\.\d+)?%|\b\d+\s*years?\b)/g, `$1` ); } function placePopup(e) { const rect = container.getBoundingClientRect(); const gap = 14; const popupW = popup.offsetWidth || 360; const popupH = popup.offsetHeight || 160; let left = e.clientX - rect.left + gap; // default: right side let top = e.clientY - rect.top - 12; // flip to left if right side would overflow if (left + popupW > rect.width - 8) { left = e.clientX - rect.left - popupW - gap; } // clamp horizontal left = Math.max(8, Math.min(left, rect.width - popupW - 8)); // clamp vertical (keep within container) if (top + popupH > rect.height - 8) top = rect.height - popupH - 8; if (top < 8) top = 8; popup.style.left = `${left}px`; popup.style.top = `${top}px`; } const popup = html``; popup.style.display = "none"; container.append(plot, popup); container.append(caption, plot, popup); const dots = plot.querySelectorAll(".loan-dot circle, .loan-dot path"); dots.forEach((dot, i) => { dot.addEventListener("mouseenter", (e) => { const d = data[i]; if (!d) return; popup.style.display = "block"; popup.innerHTML = highlightNums(d.tooltip); placePopup(e); // place immediately using real popup size }); dot.addEventListener("mousemove", (e) => { placePopup(e); }); dot.addEventListener("mouseleave", () => { popup.style.display = "none"; }); }); return container; } 2f:Ta6f,viewof controls = { styles; const panel = html`

`; const state = {}; const fields = [ { key: "interestMode", label: "Interest mode", input: Inputs.radio(["varying", "fixed"], {value: "varying"}), help: "Choose fixed or income-varying interest." }, { key: "fixedRatePct", label: "Fixed rate (%)", input: Inputs.range([0, 10], {step: 0.1, value: 3.2}), help: "Used only when interest mode is fixed." }, { key: "baseRatePct", label: "Base rate (%)", input: Inputs.range([0, 5], {step: 0.1, value: 3.2}), help: "Base part of varying interest. The current Plan 2 student loans are linked to the RPI rate of inflation (3.2% until August 2026)." }, { key: "addOnRatePct", label: "Add-on max (%)", input: Inputs.range([0, 5], {step: 0.1, value: 3}), help: "Max income add-on in varying mode. The current full extra rate for people earning >=£51,245 is 3.2%." }, { key: "threshold", label: "Salary threshold (£)", input: Inputs.range([20000, 50000], {step: 500, value: 28470}), help: "Repay only on income above this level. The current threshold is £28,470, and will be freezed at £29,385 from April 2026 to 2030." }, { key: "yearsToForgive", label: "Years before forgiven", input: Inputs.range([10, 50], {step: 1, value: 30}), help: "Remaining balance is written off after this many years. Currently, any remaining student debt is wiped after 30 years" }, { key: "lowWageRisePct", label: "Low-earner wage rise (%)", input: Inputs.range([0, 10], {step: 0.1, value: 4.7}), help: "Annual wage growth for lower earners. As of January 2026, annual growth in average earnings was 4.7% for total earnings (including bonuses) (Source: ONS)." }, { key: "highWageRisePct", label: "High-earner wage rise (%)", input: Inputs.range([0, 20], {step: 0.1, value: 10}), help: "Annual wage growth for higher earners. Certain industries could have average wage growth of 10-20% a year." }, { key: "repayPct", label: "Repayment percentage (%)", input: Inputs.range([1, 15], {step: 0.5, value: 9}), help: "Share of income above threshold used to repay. The current ratio is 9%." } ]; for (const f of fields) { const card = html`

${f.label}

${f.help}

`; card.children[1].append(f.input); state[f.key] = f.input.value; f.input.addEventListener("input", () => { state[f.key] = f.input.value; panel.value = {...state}; panel.dispatchEvent(new CustomEvent("input")); }); panel.append(card); } panel.value = {...state}; return panel; } 30:T40d,styles = { const el = html``; document.head.appendChild(el); invalidation.then(() => el.remove()); return null; } 31:Tb5e,chart2 = { const width = 1050; const height = 520; const container = html`

`; const yMin = d3.min(data, d => d.startingSalary) ?? 0; const yMax = d3.max(data, d => d.startingSalary) ?? 120000; const plot = Plot.plot({ width, height, marginTop: 50, marginBottom: 50, marginLeft: 70, style: { fontSize: "12px", fontFamily: "system-ui, sans-serif", background: "#ecebdf" }, x: { label: "Final repaid amount (£)", tickFormat: d => `£${Math.round(d / 1000)}k`, grid: true }, y: { label: "Starting salary (£)", domain: [yMin, yMax], tickFormat: d => `£${Math.round(d / 1000)}k`, grid: true }, marks: [ Plot.ruleX([50000], { stroke: "#111", strokeDasharray: "5,4" }), Plot.text(["Principal £50k"], { x: 50000, y: yMax, dy: -25, textAnchor: "start", fill: "#222", fontSize: 16 }), Plot.dot(data, { className: "loan-dot", x: "finalRepaid", y: "startingSalary", fill: "color", r: 7, fillOpacity: 0.5, stroke: "#1b2a41", strokeOpacity: 1 }) ] }); function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : c === '"' ? """ : "'" ); } function highlightNums(text) { const safe = escapeHtml(text).replace(/\n/g, "
"); return safe.replace( /(£[\d,]+(?:\.\d+)?|zero pound|\b\d+(?:\.\d+)?%|\b\d+\s*years?\b)/g, `$1` ); } const popup = html``; popup.style.display = "none"; function placePopup(e) { const rect = container.getBoundingClientRect(); const gap = 14; const popupW = popup.offsetWidth || 360; const popupH = popup.offsetHeight || 160; let left = e.clientX - rect.left + gap; let top = e.clientY - rect.top - 12; if (left + popupW > rect.width - 8) { left = e.clientX - rect.left - popupW - gap; } left = Math.max(8, Math.min(left, rect.width - popupW - 8)); if (top + popupH > rect.height - 8) top = rect.height - popupH - 8; if (top < 8) top = 8; popup.style.left = `${left}px`; popup.style.top = `${top}px`; } container.append(plot, popup); const dots = plot.querySelectorAll(".loan-dot circle, .loan-dot path"); dots.forEach((dot, i) => { dot.addEventListener("mouseenter", (e) => { const d = data[i]; if (!d) return; popup.style.display = "block"; popup.innerHTML = highlightNums(d.tooltip); placePopup(e); }); dot.addEventListener("mousemove", placePopup); dot.addEventListener("mouseleave", () => { popup.style.display = "none"; }); }); return container; } 32:Tf2f,style_main = { const el = html``; document.head.appendChild(el); invalidation.then(() => el.remove()); return null; } 33:T403,title1 = { style_main1; const wrap = html`

`; const flow = html`

`; const pounds = html`

`; const titleLayer = html`

`; const titleLines = [ { text: "Who Pays Too Much", x: 525, y: 120 }, { text: "For Their Fancy Degree?", x: 525, y: 210 } ]; for (const [i, t] of titleLines.entries()) { const line = html`

${t.text}

`; line.style.left = `${t.x}px`; line.style.top = `${t.y}px`; line.style.setProperty("--delay", `${i * 180}ms`); titleLayer.append(line); } for (let i = 0; i < 18; i++) { const p = html`£`; p.style.left = `${6 + (i * 5.2) % 92}%`; p.style.animationDelay = `${(i * 0.35) % 5}s`; p.style.animationDuration = `${4.8 + (i % 4) * 0.8}s`; pounds.append(p); } wrap.append(flow, pounds, titleLayer); return wrap; } 34:Tc76,style_main1 = { const el = html``; document.head.appendChild(el); invalidation.then(() => el.remove()); return null; } 35:T485,simulatePerson = (startingSalary, p) => { let salary = startingSalary; let balance = p.principal; const wageGrowth = startingSalary < p.lowHighCutoff ? p.lowWageRise : p.highWageRise; let totalRepaid = 0; let totalInterest = 0; let clearedYear = null; for (let year = 1; year <= p.yearsToForgive; year++) { const interestRate = p.interestMode === "fixed" ? p.fixedRate : p.baseRate + helpers.incomeAddOnRate(salary, p.threshold, p.addOnRateMax); const repayRaw = Math.max(0, (salary - p.threshold) * p.repayPct); const interest = balance * interestRate; const repay = Math.min(repayRaw, balance + interest); balance = Math.max(0, balance + interest - repay); totalRepaid += repay; totalInterest += interest; if (balance === 0) { clearedYear = year; break; } salary = salary * (1 + wageGrowth); } const forgiven = balance; const band = helpers.incomeBand(startingSalary); return { startingSalary, salary, band, color: helpers.bandColor(band), finalRepaid: totalRepaid, forgiven, totalInterest, yearsUntilCleared: clearedYear }; } 36:T930,data = Array.from({ length: 106 }, (_, i) => 15000 + i * 1000).map((salary, i) => { const d = simulatePerson(salary, params); const seed = Math.sin((i + 1) * 12.9898) * 43758.5453; const jitter = ((seed - Math.floor(seed)) - 0.5) * 0.9; const forgivenPrincipal = Math.max(0, 50000 - d.finalRepaid); const interestPaid = Math.max(0, d.finalRepaid - 50000); const cleared = d.yearsUntilCleared != null; const yearsText = cleared ? `${Math.round(d.yearsUntilCleared)} years` : `${params.yearsToForgive} years (until forgiveness)`; let tooltip; if (d.band === "lt50k") { tooltip = `Pocket-check time. Earning ${helpers.gbp(d.startingSalary)} in their first job, this grad is playing loan mode on hard.\n\n` + `They repay ${helpers.gbp(d.finalRepaid)} in ${yearsText}, as their salary climbs to ${helpers.gbp(d.salary)} at the end of the period.\n\n` + `From the £50,000 principal they initially borrowed, ${ forgivenPrincipal === 0 ? "zero pound" : helpers.gbp(forgivenPrincipal) } gets forgiven, and interest paid is ${ interestPaid === 0 ? "zero pound" : helpers.gbp(interestPaid) }.`; } else if (d.band === "50to100k") { tooltip = `Welcome to the middle lane.\n\n` + `Earning ${helpers.gbp(d.startingSalary)} in their first job, this grad repays ${helpers.gbp(d.finalRepaid)} over ${yearsText}, with salary rising to ${helpers.gbp(d.salary)} at the end of the period.\n\n` + `From the £50,000 principal they initiall borrowed, ${ forgivenPrincipal === 0 ? "zero pound" : helpers.gbp(forgivenPrincipal) } gets forgiven, and interest paid is ${ interestPaid === 0 ? "zero pound" : helpers.gbp(interestPaid) }.`; } else { tooltip = `Big-paycheck energy. Earning ${helpers.gbp(d.startingSalary)} in their first job, this grad levels up to a salary of ${helpers.gbp(d.salary)} at the end of the repayment period.\n\n` + `Total repaid: ${helpers.gbp(d.finalRepaid)} over ${yearsText}.\n\n` + `From the £50,000 principal they initially borrowed, ${ forgivenPrincipal === 0 ? "zero pound" : helpers.gbp(forgivenPrincipal) } gets forgiven, and interest paid is ${ interestPaid === 0 ? "zero pound" : helpers.gbp(interestPaid) }.`; } return { ...d, jitter, tooltip }; }); 37:[] 2c:{"id":"5b39e4ebc5e2c1ee","slug":"student-loan-uk","title":"Student loan UK","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-03-06T19:09:50.278Z","update_time":"$D2026-09-24T09:00:56.100Z","view_time":null,"first_public_time":"$D2026-03-07T11:37:17.949Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024"},"version":409,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null}],"members":[{"type":"team","id":"f51b659e41e58e78","login":"lea4","name":"Lea","avatar_url":"https://avatars-next.observableusercontent.com/5a5fcd12957bebfd1423444e135596b5cc79b895d56d32d8e8f4a7328eb60da6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"3ac3d13d3cbd84f5","login":"mok-lea","name":"Mok Lea","avatar_url":"https://avatars-next.observableusercontent.com/b4e150beaab57b1b27b105db6afd76433e7eb542b8f56adfa8501a183c46ac3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Student loan UK","cells":[{"id":0,"value":"# Student loan UK","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"title = {\n style_main;\n const titleLayer = html`

`;\n const titleLines = [\n { text: \"Who Pays Too Much\", x: 525, y: 38 },\n { text: \"For Their Fancy Degree?\", x: 525, y: 82 }\n ];\n\n for (const [i, t] of titleLines.entries()) {\n const line = html`

${t.text}

`;\n line.style.left = `${t.x}px`;\n line.style.top = `${t.y}px`;\n line.style.setProperty(\"--delay\", `${i * 180}ms`);\n titleLayer.append(line);\n }\n\n const wrap = html`

`;\n wrap.append(titleLayer);\n return wrap;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"params = ({\n principal: 50000,\n lowHighCutoff: 50270, \n interestMode: controls.interestMode,\n fixedRate: Number(controls.fixedRatePct) / 100,\n baseRate: Number(controls.baseRatePct) / 100,\n addOnRateMax: Number(controls.addOnRatePct) / 100,\n threshold: Number(controls.threshold),\n yearsToForgive: Number(controls.yearsToForgive),\n lowWageRise: Number(controls.lowWageRisePct) / 100,\n highWageRise: Number(controls.highWageRisePct) / 100,\n repayPct: Number(controls.repayPct) / 100\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"helpers = ({\n incomeAddOnRate(salary, threshold, maxRate) {\n const top = 51245;\n if (salary <= threshold) return 0;\n if (salary >= top) return maxRate;\n return ((salary - threshold) / (top - threshold)) * maxRate;\n },\n incomeBand(salary) {\n if (salary <= 50270) return \"lt50k\";\n if (salary <= 100000) return \"50to100k\";\n return \"gt100k\";\n },\n bandColor(band) {\n if (band === \"lt50k\") return \"#d63a3a\";\n if (band === \"50to100k\") return \"#2e9f68\";\n return \"#2f6ed6\";\n },\n gbp(v) {\n return `£${Math.round(v).toLocaleString(\"en-GB\")}`;\n },\n pct(v) {\n return `${(v * 100).toFixed(1)}%`;\n }\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"d3.rollup(data, v => v.length, d => d.band)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"data.slice(0, 10).map(d => d.yearsUntilCleared)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"width = Math.min(1050, window.innerWidth - 40)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2d:"$2c:body"