2b:null 2c:["$","title",null,{"children":"The Cascade: How Healthcare Costs Spiral Out of Control 💧➡️🌊 | AP | Observable"}] 31:T535,md`# The Cascade: How Healthcare Costs Spiral Out of Control 💧➡️🌊

The Geography of the Healthcare Crisis

Where one diagnosis becomes a $50,000 catastrophe

⚠️ The Invisible Epidemic

47 million Americans have 4+ chronic conditions.

They account for $400+ billion in Medicare spending annually.

But here's what no one talks about: where you live determines whether you become one of them.

--- ## What This Visualization Reveals: 📍 **WHERE** the epidemic is concentrated *(geography of pain)* 📈 **HOW** patients cascade into high costs *(the 4-condition tipping point)* 👥 **WHO** is most at risk *(age + condition profiles)* **Dataset:** 10,000 real Medicare beneficiaries (CMS DE-SynPUF 2008-2010) `32:Td3a,processedBeneficiaries = { const data = await beneficiaryData; console.log("Raw data loaded:", data.length, "records"); // Filter for living patients (empty death date OR future death date) const validData = data.filter(d => d.BENE_BIRTH_DT && (d.BENE_DEATH_DT === "" || d.BENE_DEATH_DT === "0") // Empty string = alive ); console.log("Living patients:", validData.length, "records"); const processed = validData.map((d, i) => { // Calculate age const birthYear = parseInt(d.BENE_BIRTH_DT.toString().substring(0, 4)); const age = 2008 - birthYear; // Count chronic conditions (11 total) // NOTE: 1 = YES, 2 = NO in the CMS data const conditionFlags = [ d.SP_ALZHDMTA === "1" ? 1 : 0, // Alzheimer's d.SP_CHF === "1" ? 1 : 0, // Heart Failure d.SP_CHRNKIDN === "1" ? 1 : 0, // Chronic Kidney Disease d.SP_CNCR === "1" ? 1 : 0, // Cancer d.SP_COPD === "1" ? 1 : 0, // COPD d.SP_DEPRESSN === "1" ? 1 : 0, // Depression d.SP_DIABETES === "1" ? 1 : 0, // Diabetes d.SP_ISCHMCHT === "1" ? 1 : 0, // Ischemic Heart Disease (note spelling!) d.SP_OSTEOPRS === "1" ? 1 : 0, // Osteoporosis d.SP_RA_OA === "1" ? 1 : 0, // Arthritis d.SP_STRKETIA === "1" ? 1 : 0 // Stroke ]; const conditionCount = conditionFlags.reduce((sum, val) => sum + val, 0); // Calculate total costs const ipCost = parseFloat(d.MEDREIMB_IP) || 0; const opCost = parseFloat(d.MEDREIMB_OP) || 0; const carrierCost = parseFloat(d.MEDREIMB_CAR) || 0; const totalCost = ipCost + opCost + carrierCost; // Age group let ageGroup; if (age < 70) ageGroup = "65-69"; else if (age < 75) ageGroup = "70-74"; else if (age < 80) ageGroup = "75-79"; else if (age < 85) ageGroup = "80-84"; else ageGroup = "85+"; // Condition group let conditionGroup; if (conditionCount === 0) conditionGroup = "0"; else if (conditionCount <= 3) conditionGroup = "1-3"; else conditionGroup = "4+"; return { id: d.DESYNPUF_ID, age: age, ageGroup: ageGroup, sex: d.BENE_SEX_IDENT_CD === "1" ? "Male" : "Female", race: +d.BENE_RACE_CD, state: d.SP_STATE_CODE || "Unknown", county: d.BENE_COUNTY_CD || "Unknown", // Conditions conditionCount: conditionCount, conditionGroup: conditionGroup, alzheimers: conditionFlags[0], chf: conditionFlags[1], kidney: conditionFlags[2], cancer: conditionFlags[3], copd: conditionFlags[4], depression: conditionFlags[5], diabetes: conditionFlags[6], heart: conditionFlags[7], osteoporosis: conditionFlags[8], arthritis: conditionFlags[9], stroke: conditionFlags[10], // Costs ipCost: ipCost, opCost: opCost, carrierCost: carrierCost, totalCost: totalCost }; }); // Filter valid age range and non-negative costs const final = processed.filter(d => d.age >= 65 && d.age <= 110 && d.totalCost >= 0 ); console.log("✅ Final processed records:", final.length); console.log("Sample record:", final[0]); console.log("Condition count distribution:", d3.rollup(final, v => v.length, d => d.conditionCount) ); return final; }33:Ta38,md`## 📊 Dataset Overview

Total Beneficiaries

${summaryStats.total.toLocaleString()}

Medicare patients analyzed

Average Annual Cost

$${summaryStats.avgCost.toLocaleString()}

Median: $${summaryStats.medianCost.toLocaleString()}

Avg Conditions

${summaryStats.avgConditions}

chronic conditions per patient

High-Cost Patients

${summaryStats.highCostCount.toLocaleString()}

${summaryStats.highCostPercent}% (≥$${summaryStats.highCostThreshold.toLocaleString()})

💡 Key Finding: The top 20% of patients account for $${(d3.sum(enrichedBeneficiaries.filter(d => d.isHighCost), d => d.totalCost) / 1000000).toFixed(1)}M of the total $${(summaryStats.totalSpending / 1000000).toFixed(1)}M in spending (${((d3.sum(enrichedBeneficiaries.filter(d => d.isHighCost), d => d.totalCost) / summaryStats.totalSpending) * 100).toFixed(1)}%).

`34:T56f,stateAggregates = { const data = await enrichedBeneficiaries; const byState = d3.rollup( data, v => ({ count: v.length, avgCost: d3.mean(v, d => d.totalCost), medianCost: d3.median(v, d => d.totalCost), totalCost: d3.sum(v, d => d.totalCost), avgConditions: d3.mean(v, d => d.conditionCount), avgAge: d3.mean(v, d => d.age), highCostPct: (v.filter(d => d.isHighCost).length / v.length) * 100, pctWith4Plus: (v.filter(d => d.conditionCount >= 4).length / v.length) * 100, // Dominant conditions diabetesPct: (v.filter(d => d.diabetes).length / v.length) * 100, heartPct: (v.filter(d => d.heart).length / v.length) * 100, copdPct: (v.filter(d => d.copd).length / v.length) * 100, chfPct: (v.filter(d => d.chf).length / v.length) * 100, cancerPct: (v.filter(d => d.cancer).length / v.length) * 100, kidneyPct: (v.filter(d => d.kidney).length / v.length) * 100 }), d => d.state ); const result = Array.from(byState, ([state, stats]) => ({ state, ...stats })) .filter(d => d.state && d.state !== "Unknown" && d.count >= 20) // At least 20 patients .sort((a, b) => b.avgCost - a.avgCost); console.log("✅ State aggregates:", result.length, "states"); console.log("Top 3 states by cost:", result.slice(0, 3).map(d => d.state)); return result; }35:T51e,md`--- # Part 1: The Geography of Pain 🗺️

Where You Live Determines How Much You Pay

Two patients with identical conditions can have annual costs that differ by thousands of dollars depending solely on their state.

The map below reveals which states are winning — and losing — the battle against rising healthcare costs.

💡 Interaction Guide:

🖱️ Hover over states to see detailed breakdowns
🎚️ Switch metrics using the radio buttons above the map
🔍 Look for patterns — do high-cost states also have more chronic conditions?

`36:T4af,// US states TopoJSON uses full names, our data uses codes // We need to create a mapping stateCodeToName = new Map([ ["01", "Alabama"], ["02", "Alaska"], ["04", "Arizona"], ["05", "Arkansas"], ["06", "California"], ["08", "Colorado"], ["09", "Connecticut"], ["10", "Delaware"], ["11", "District of Columbia"], ["12", "Florida"], ["13", "Georgia"], ["15", "Hawaii"], ["16", "Idaho"], ["17", "Illinois"], ["18", "Indiana"], ["19", "Iowa"], ["20", "Kansas"], ["21", "Kentucky"], ["22", "Louisiana"], ["23", "Maine"], ["24", "Maryland"], ["25", "Massachusetts"], ["26", "Michigan"], ["27", "Minnesota"], ["28", "Mississippi"], ["29", "Missouri"], ["30", "Montana"], ["31", "Nebraska"], ["32", "Nevada"], ["33", "New Hampshire"], ["34", "New Jersey"], ["35", "New Mexico"], ["36", "New York"], ["37", "North Carolina"], ["38", "North Dakota"], ["39", "Ohio"], ["40", "Oklahoma"], ["41", "Oregon"], ["42", "Pennsylvania"], ["44", "Rhode Island"], ["45", "South Carolina"], ["46", "South Dakota"], ["47", "Tennessee"], ["48", "Texas"], ["49", "Utah"], ["50", "Vermont"], ["51", "Virginia"], ["53", "Washington"], ["54", "West Virginia"], ["55", "Wisconsin"], ["56", "Wyoming"] ])37:T1de4,{ const width = 975; const height = 610; // Create SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#f8fafc"); // Projection const projection = d3.geoAlbersUsa() .scale(1300) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); // Get state features const states = topojson.feature(usStates, usStates.objects.states); // Determine metric let colorScale, metricAccessor, metricFormat, metricLabel; if (selectedMetric === "Average Cost") { colorScale = await costColorScale; metricAccessor = d => d.avgCost; metricFormat = d => "$" + Math.round(d).toLocaleString(); metricLabel = "Average Cost"; } else if (selectedMetric === "4+ Conditions %") { colorScale = await conditionColorScale; metricAccessor = d => d.pctWith4Plus; metricFormat = d => d.toFixed(1) + "%"; metricLabel = "% with 4+ Conditions"; } else { colorScale = await highCostPctColorScale; metricAccessor = d => d.highCostPct; metricFormat = d => d.toFixed(1) + "%"; metricLabel = "% High-Cost Patients"; } const stateLookup = await stateLookupByName; // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "map-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #1e293b") .style("border-radius", "10px") .style("padding", "16px") .style("font-family", "system-ui, -apple-system, sans-serif") .style("font-size", "14px") .style("box-shadow", "0 10px 40px rgba(0,0,0,0.3)") .style("pointer-events", "none") .style("z-index", "10000") .style("max-width", "320px"); // Draw states svg.append("g") .selectAll("path") .data(states.features) .join("path") .attr("d", path) .attr("fill", d => { const stateData = stateLookup.get(d.properties.name); return stateData ? colorScale(metricAccessor(stateData)) : "#e5e7eb"; }) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { const stateData = stateLookup.get(d.properties.name); if (stateData) { d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 3) .raise(); tooltip .style("visibility", "visible") .html(`

${d.properties.name}

${metricLabel}

${metricFormat(metricAccessor(stateData))}

Patients:
${stateData.count.toLocaleString()}

Avg Age:
${stateData.avgAge.toFixed(1)} yrs

Avg Cost:
$${Math.round(stateData.avgCost).toLocaleString()}

Median Cost:
$${Math.round(stateData.medianCost).toLocaleString()}

Avg Conditions: ${stateData.avgConditions.toFixed(1)}
4+ Conditions: ${stateData.pctWith4Plus.toFixed(1)}%

Most Common Conditions:

• Diabetes: ${stateData.diabetesPct.toFixed(0)}%
• Heart Disease: ${stateData.heartPct.toFixed(0)}%
• COPD: ${stateData.copdPct.toFixed(0)}%
• Heart Failure: ${stateData.chfPct.toFixed(0)}%

`); } }) .on("mousemove", function(event) { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 1.5); tooltip.style("visibility", "hidden"); }); // Title svg.append("text") .attr("x", width / 2) .attr("y", 40) .attr("text-anchor", "middle") .style("font-size", "28px") .style("font-weight", "bold") .style("fill", "#1e293b") .text(`Medicare ${metricLabel} by State (2008)`); // Legend const legendWidth = 320; const legendHeight = 14; const legendX = width - legendWidth - 50; const legendY = height - 80; const legend = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`); // Legend gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "legend-gradient-" + Math.random()); const numStops = 30; d3.range(numStops).forEach(i => { const t = i / (numStops - 1); const domain = colorScale.domain(); const value = domain[0] + t * (domain[1] - domain[0]); gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(value)); }); legend.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", `url(#${gradient.attr("id")})`) .style("stroke", "#334155") .style("stroke-width", 1); // Legend axis const legendScale = d3.scaleLinear() .domain(colorScale.domain()) .range([0, legendWidth]); const legendAxis = d3.axisBottom(legendScale) .ticks(5) .tickFormat(d => { if (selectedMetric === "Average Cost") { return "$" + (d / 1000).toFixed(0) + "K"; } else { return d.toFixed(0) + "%"; } }); legend.append("g") .attr("transform", `translate(0, ${legendHeight})`) .call(legendAxis) .call(g => g.select(".domain").attr("stroke", "#64748b")) .call(g => g.selectAll(".tick line").attr("stroke", "#64748b")) .call(g => g.selectAll(".tick text") .attr("fill", "#475569") .attr("font-size", "13px") .attr("font-weight", "500")); return svg.node(); }38:T9b2,md`## 🔍 What the Map Reveals ${await (async () => { const states = await stateAggregates; const topCost = states[0]; const lowCost = states[states.length - 1]; const costDiff = topCost.avgCost - lowCost.avgCost; const costDiffPct = ((costDiff / lowCost.avgCost) * 100).toFixed(0); const highConditionStates = states.filter(d => d.pctWith4Plus > 30); const avgHighCondition = d3.mean(highConditionStates, d => d.pctWith4Plus).toFixed(1); return `

📍 Geographic Disparity

The highest-cost state (${stateCodeToName.get(topCost.state)}, $${topCost.avgCost.toLocaleString()}) spends ${costDiffPct}% more per patient than the lowest (${stateCodeToName.get(lowCost.state)}, $${lowCost.avgCost.toLocaleString()}).

That's a $${costDiff.toLocaleString()} difference for identical patients.

🏥 The Chronic Condition Belt

${highConditionStates.length} states have over 30% of patients with 4+ chronic conditions (average: ${avgHighCondition}%).

These states form a "chronic disease belt" with significantly higher costs.

💡 The Key Question

Geography matters, but it's not destiny. What if we could identify which patients will cascade into high costs before it happens?

Let's find the tipping point...

`; })()} `39:T489,md`--- # Part 2: The Cascade 💧➡️🌊

The $50,000 Question

At what point does a patient's healthcare costs spiral out of control?

The answer isn't age. It isn't geography. It's something far more specific — and far more preventable.

⚠️ The Hidden Pattern

Watch what happens when we plot the number of chronic conditions against annual healthcare costs. There's a sharp inflection point — a moment where costs don't just increase, they explode.

`3a:T443,conditionCostData = { const data = await enrichedBeneficiaries; // Group by condition count const grouped = d3.rollup( data, v => ({ count: v.length, avgCost: d3.mean(v, d => d.totalCost), medianCost: d3.median(v, d => d.totalCost), minCost: d3.min(v, d => d.totalCost), maxCost: d3.max(v, d => d.totalCost), stdDev: d3.deviation(v, d => d.totalCost), highCostPct: (v.filter(d => d.isHighCost).length / v.length) * 100, totalSpending: d3.sum(v, d => d.totalCost) }), d => d.conditionCount ); // Convert to array and sort const result = Array.from(grouped, ([conditions, stats]) => ({ conditions, ...stats })).sort((a, b) => a.conditions - b.conditions); // Calculate incremental costs result.forEach((d, i) => { if (i === 0) { d.incrementalCost = d.avgCost; } else { d.incrementalCost = d.avgCost - result[i - 1].avgCost; } }); console.log("✅ Condition cost data:", result.length, "groups"); console.log("Sample:", result.slice(0, 3)); return result; }3b:T2ed3,{ const data = await conditionCostData; // Dimensions const width = 1000; const height = 600; const margin = {top: 60, right: 180, bottom: 80, left: 100}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#fff"); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Determine which metric to show let yAccessor, yFormat, yLabel, maxY; if (costMetric === "Average Cost") { yAccessor = d => d.avgCost; yFormat = d => "$" + (d / 1000).toFixed(0) + "K"; yLabel = "Average Annual Cost"; maxY = d3.max(data, d => d.avgCost + (showErrorBars ? d.stdDev : 0)); } else if (costMetric === "Median Cost") { yAccessor = d => d.medianCost; yFormat = d => "$" + (d / 1000).toFixed(0) + "K"; yLabel = "Median Annual Cost"; maxY = d3.max(data, d => d.medianCost); } else { yAccessor = d => d.totalSpending; yFormat = d => "$" + (d / 1000000).toFixed(1) + "M"; yLabel = "Total Spending (All Patients)"; maxY = d3.max(data, d => d.totalSpending); } // Scales const x = d3.scaleBand() .domain(data.map(d => d.conditions)) .range([0, innerWidth]) .padding(0.2); const y = d3.scaleLinear() .domain([0, maxY * 1.1]) .range([innerHeight, 0]) .nice(); // Color scale - highlight the danger zone (4+) const colorScale = d3.scaleThreshold() .domain([4]) .range(["#3b82f6", "#ef4444"]); // Axes const xAxis = d3.axisBottom(x) .tickFormat(d => d); const yAxis = d3.axisLeft(y) .ticks(8) .tickFormat(yFormat); g.append("g") .attr("transform", `translate(0, ${innerHeight})`) .call(xAxis) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").attr("stroke", "#cbd5e1")) .call(g => g.selectAll(".tick text") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569")); g.append("g") .call(yAxis) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").attr("stroke", "#e2e8f0")) .call(g => g.selectAll(".tick text") .attr("font-size", "13px") .attr("fill", "#475569")); // Grid lines g.append("g") .attr("class", "grid") .selectAll("line") .data(y.ticks(8)) .join("line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", d => y(d)) .attr("y2", d => y(d)) .attr("stroke", "#f1f5f9") .attr("stroke-width", 1); // Tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #1e293b") .style("border-radius", "10px") .style("padding", "16px") .style("font-family", "system-ui, sans-serif") .style("font-size", "14px") .style("box-shadow", "0 10px 40px rgba(0,0,0,0.3)") .style("pointer-events", "none") .style("z-index", "10000") .style("max-width", "300px"); // Error bars (if enabled) if (showErrorBars && costMetric === "Average Cost") { g.append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d => x(d.conditions) + x.bandwidth() / 2) .attr("x2", d => x(d.conditions) + x.bandwidth() / 2) .attr("y1", d => y(d.avgCost - d.stdDev)) .attr("y2", d => y(d.avgCost + d.stdDev)) .attr("stroke", "#64748b") .attr("stroke-width", 2); // Error bar caps g.append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d => x(d.conditions) + x.bandwidth() / 2 - 5) .attr("x2", d => x(d.conditions) + x.bandwidth() / 2 + 5) .attr("y1", d => y(d.avgCost - d.stdDev)) .attr("y2", d => y(d.avgCost - d.stdDev)) .attr("stroke", "#64748b") .attr("stroke-width", 2); g.append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d => x(d.conditions) + x.bandwidth() / 2 - 5) .attr("x2", d => x(d.conditions) + x.bandwidth() / 2 + 5) .attr("y1", d => y(d.avgCost + d.stdDev)) .attr("y2", d => y(d.avgCost + d.stdDev)) .attr("stroke", "#64748b") .attr("stroke-width", 2); } // Bars g.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.conditions)) .attr("y", d => y(yAccessor(d))) .attr("width", x.bandwidth()) .attr("height", d => innerHeight - y(yAccessor(d))) .attr("fill", d => colorScale(d.conditions)) .attr("opacity", 0.85) .attr("stroke", d => d.conditions >= 4 ? "#991b1b" : "#1e40af") .attr("stroke-width", d => d.conditions >= 4 ? 3 : 1.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("opacity", 1) .attr("stroke-width", 4); tooltip .style("visibility", "visible") .html(`

${d.conditions} Chronic Condition${d.conditions !== 1 ? 's' : ''}

${yLabel}

${yFormat(yAccessor(d))}

Patients: ${d.count.toLocaleString()}
Avg Cost: $${Math.round(d.avgCost).toLocaleString()}
Median Cost: $${Math.round(d.medianCost).toLocaleString()}
Range: $${Math.round(d.minCost).toLocaleString()} - $${Math.round(d.maxCost).toLocaleString()}
High-Cost %: ${d.highCostPct.toFixed(1)}% ${d.incrementalCost ? `

+$${Math.round(d.incrementalCost).toLocaleString()} from previous

` : ''}

`); }) .on("mousemove", function(event) { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", function(event, d) { d3.select(this) .attr("opacity", 0.85) .attr("stroke-width", d => d.conditions >= 4 ? 3 : 1.5); tooltip.style("visibility", "hidden"); }); // Incremental cost line (on right axis) if (showIncremental && costMetric === "Average Cost") { // Create scale for incremental on right axis const yIncremental = d3.scaleLinear() .domain([0, d3.max(data, d => d.incrementalCost) * 1.1]) .range([innerHeight, 0]) .nice(); // Right axis const yAxisRight = d3.axisRight(yIncremental) .ticks(8) .tickFormat(d => "$" + (d / 1000).toFixed(0) + "K"); g.append("g") .attr("transform", `translate(${innerWidth}, 0)`) .call(yAxisRight) .call(g => g.select(".domain").attr("stroke", "#f87171")) .call(g => g.selectAll(".tick line").attr("stroke", "#fecaca")) .call(g => g.selectAll(".tick text") .attr("font-size", "12px") .attr("fill", "#dc2626")); // Line g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#dc2626") .attr("stroke-width", 3) .attr("stroke-dasharray", "8,4") .attr("d", d3.line() .x(d => x(d.conditions) + x.bandwidth() / 2) .y(d => yIncremental(d.incrementalCost)) .curve(d3.curveMonotoneX)); // Points on line g.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.conditions) + x.bandwidth() / 2) .attr("cy", d => yIncremental(d.incrementalCost)) .attr("r", 5) .attr("fill", "#dc2626") .attr("stroke", "white") .attr("stroke-width", 2); // Right axis label g.append("text") .attr("transform", `translate(${innerWidth + 120}, ${innerHeight / 2}) rotate(90)`) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#dc2626") .text("Incremental Cost (change from previous)"); } // Highlight the danger zone (4+ conditions) const dangerZoneStart = x(4); if (dangerZoneStart) { g.append("rect") .attr("x", dangerZoneStart - 10) .attr("y", 0) .attr("width", innerWidth - dangerZoneStart + 10) .attr("height", innerHeight) .attr("fill", "#fee") .attr("opacity", 0.15) .attr("pointer-events", "none"); // Danger zone label g.append("text") .attr("x", dangerZoneStart + (innerWidth - dangerZoneStart) / 2) .attr("y", -15) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#dc2626") .text("⚠️ DANGER ZONE"); } // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .style("fill", "#1e293b") .text("The Tipping Point: Healthcare Costs by Chronic Conditions"); // X-axis label g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 50) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Number of Chronic Conditions"); // Y-axis label g.append("text") .attr("transform", `translate(-60, ${innerHeight / 2}) rotate(-90)`) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text(yLabel); // Legend const legend = svg.append("g") .attr("transform", `translate(${width - 150}, ${margin.top + 20})`); // Blue bar (0-3 conditions) legend.append("rect") .attr("x", 0) .attr("y", 0) .attr("width", 20) .attr("height", 20) .attr("fill", "#3b82f6") .attr("stroke", "#1e40af") .attr("stroke-width", 1.5); legend.append("text") .attr("x", 28) .attr("y", 15) .attr("font-size", "13px") .attr("fill", "#475569") .text("0-3 Conditions"); // Red bar (4+ conditions) legend.append("rect") .attr("x", 0) .attr("y", 30) .attr("width", 20) .attr("height", 20) .attr("fill", "#ef4444") .attr("stroke", "#991b1b") .attr("stroke-width", 3); legend.append("text") .attr("x", 28) .attr("y", 45) .attr("font-size", "13px") .attr("fill", "#475569") .text("4+ Conditions"); // Incremental line in legend if (showIncremental && costMetric === "Average Cost") { legend.append("line") .attr("x1", 0) .attr("x2", 20) .attr("y1", 70) .attr("y2", 70) .attr("stroke", "#dc2626") .attr("stroke-width", 3) .attr("stroke-dasharray", "8,4"); legend.append("text") .attr("x", 28) .attr("y", 75) .attr("font-size", "13px") .attr("fill", "#475569") .text("Incremental"); } return svg.node(); }3c:Te34,md`## 💡 The Tipping Point Revealed ${await (async () => { const data = await conditionCostData; const zeroConditions = data.find(d => d.conditions === 0); const threeConditions = data.find(d => d.conditions === 3); const fourConditions = data.find(d => d.conditions === 4); const sevenConditions = data.find(d => d.conditions === 7); const increaseThreeToFour = fourConditions.avgCost - threeConditions.avgCost; const pctIncreaseThreeToFour = ((increaseThreeToFour / threeConditions.avgCost) * 100).toFixed(0); const maxIncremental = d3.maxIndex(data, d => d.incrementalCost); const tippingPoint = data[maxIncremental]; return `

🚨 The Critical Threshold

Moving from 3 to 4 conditions increases costs by $${increaseThreeToFour.toLocaleString()} (${pctIncreaseThreeToFour}%).

This is where the cascade begins.

📈 The Exponential Curve

0 conditions: $${zeroConditions.avgCost.toLocaleString()}/year
3 conditions: $${threeConditions.avgCost.toLocaleString()}/year
4 conditions: $${fourConditions.avgCost.toLocaleString()}/year
7+ conditions: $${sevenConditions.avgCost.toLocaleString()}/year

That's a ${((sevenConditions.avgCost / zeroConditions.avgCost)).toFixed(1)}x increase from healthy to highly complex patients.

💰 The Cost of Inaction

${fourConditions.count.toLocaleString()} patients have 4+ conditions in our sample.

If we could prevent just 10% from reaching that 4th condition:

$${(fourConditions.count * 0.1 * increaseThreeToFour).toLocaleString()} saved annually

🎯 Clinical Implication

The data suggests a clear intervention strategy: aggressive management of patients with 2-3 conditions to prevent progression to 4+. This is the highest-ROI target for healthcare systems.

`; })()} `3d:T50c,md`--- # Part 3: Who's at Risk? 🎯

Predicting the High-Cost Patient

We know the what (4+ conditions) and the where (geographic patterns).

Now let's identify the who: Which patient profiles have the highest risk of becoming high-cost?

💡 Understanding the Heatmap:

🟥 Dark red = High risk (80%+ become high-cost)
🟨 Yellow = Moderate risk (30-50%)
🟩 Green = Low risk (<20%)
🖱️ Click cells to see patient distribution in scatter plot below

`3e:T40d,heatmapData = { const data = await enrichedBeneficiaries; const ageGroups = ["65-69", "70-74", "75-79", "80-84", "85+"]; const conditionGroups = ["0", "1-3", "4+"]; const result = []; ageGroups.forEach(ageGroup => { conditionGroups.forEach(conditionGroup => { const patients = data.filter(d => d.ageGroup === ageGroup && d.conditionGroup === conditionGroup ); if (patients.length > 0) { const highCostCount = patients.filter(d => d.isHighCost).length; const highCostPct = (highCostCount / patients.length) * 100; result.push({ ageGroup, conditionGroup, count: patients.length, avgCost: d3.mean(patients, d => d.totalCost), medianCost: d3.median(patients, d => d.totalCost), highCostCount, highCostPct, patients: patients // Store for clicking }); } }); }); console.log("✅ Heatmap data:", result.length, "cells"); return result; }3f:T2158,{ const data = await heatmapData; // Dimensions const width = 900; const height = 500; const margin = {top: 80, right: 200, bottom: 60, left: 120}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#fff"); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Get unique groups const ageGroups = ["65-69", "70-74", "75-79", "80-84", "85+"]; const conditionGroups = ["0", "1-3", "4+"]; // Scales const x = d3.scaleBand() .domain(ageGroups) .range([0, innerWidth]) .padding(0.05); const y = d3.scaleBand() .domain(conditionGroups) .range([0, innerHeight]) .padding(0.05); // Color scale const colorScale = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateRdYlGn) .range([1, 0]); // Reverse so red = high risk // Tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #1e293b") .style("border-radius", "10px") .style("padding", "16px") .style("font-family", "system-ui, sans-serif") .style("font-size", "14px") .style("box-shadow", "0 10px 40px rgba(0,0,0,0.3)") .style("pointer-events", "none") .style("z-index", "10000") .style("max-width", "300px"); // Create cells const cells = g.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.ageGroup)) .attr("y", d => y(d.conditionGroup)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => colorScale(d.highCostPct)) .attr("stroke", "#fff") .attr("stroke-width", 3) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 4); tooltip .style("visibility", "visible") .html(`

Age ${d.ageGroup}, ${d.conditionGroup} Conditions

High-Cost Risk

${d.highCostPct.toFixed(1)}%

Total Patients: ${d.count.toLocaleString()}
High-Cost Patients: ${d.highCostCount.toLocaleString()}
Avg Cost: $${Math.round(d.avgCost).toLocaleString()}
Median Cost: $${Math.round(d.medianCost).toLocaleString()}

Click to filter scatter plot below ↓

`); }) .on("mousemove", function(event) { tooltip .style("top", (event.pageY - 10) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 3); tooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { mutable selectedHeatmapCell = d; // Visual feedback cells.attr("stroke", "#fff").attr("stroke-width", 3); d3.select(this).attr("stroke", "#000").attr("stroke-width", 5); }); // Add percentage labels in cells g.append("g") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.ageGroup) + x.bandwidth() / 2) .attr("y", d => y(d.conditionGroup) + y.bandwidth() / 2 - 8) .attr("text-anchor", "middle") .attr("font-size", "20px") .attr("font-weight", "bold") .attr("fill", d => d.highCostPct > 50 ? "#7f1d1d" : "#1e3a8a") .attr("pointer-events", "none") .text(d => d.highCostPct.toFixed(1) + "%"); // Add patient count labels g.append("g") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.ageGroup) + x.bandwidth() / 2) .attr("y", d => y(d.conditionGroup) + y.bandwidth() / 2 + 12) .attr("text-anchor", "middle") .attr("font-size", "11px") .attr("fill", "#64748b") .attr("pointer-events", "none") .text(d => `n=${d.count}`); // X-axis g.append("g") .attr("transform", `translate(0, ${innerHeight})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569")); // Y-axis g.append("g") .call(d3.axisLeft(y)) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569")); // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .style("fill", "#1e293b") .text("Risk of Becoming High-Cost Patient"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .style("font-size", "14px") .style("fill", "#64748b") .text("(% of patients in each group who are high-cost)"); // X-axis label svg.append("text") .attr("x", width / 2) .attr("y", height - 15) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Age Group"); // Y-axis label svg.append("text") .attr("transform", `translate(25, ${height / 2}) rotate(-90)`) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Chronic Conditions"); // Legend const legendWidth = 30; const legendHeight = 200; const legendX = width - 150; const legendY = margin.top + 50; const legend = svg.append("g") .attr("transform", `translate(${legendX}, ${legendY})`); // Legend gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "heatmap-gradient") .attr("x1", "0%") .attr("y1", "100%") .attr("x2", "0%") .attr("y2", "0%"); const numStops = 20; d3.range(numStops).forEach(i => { const t = i / (numStops - 1); const value = t * 100; gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(value)); }); legend.append("rect") .attr("width", legendWidth) .attr("height", legendHeight) .style("fill", "url(#heatmap-gradient)") .style("stroke", "#334155") .style("stroke-width", 1); // Legend axis const legendScale = d3.scaleLinear() .domain([0, 100]) .range([legendHeight, 0]); const legendAxis = d3.axisRight(legendScale) .ticks(5) .tickFormat(d => d + "%"); legend.append("g") .attr("transform", `translate(${legendWidth}, 0)`) .call(legendAxis) .call(g => g.select(".domain").attr("stroke", "#64748b")) .call(g => g.selectAll(".tick line").attr("stroke", "#64748b")) .call(g => g.selectAll(".tick text") .attr("fill", "#475569") .attr("font-size", "12px")); legend.append("text") .attr("x", legendWidth / 2) .attr("y", -10) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Risk %"); return svg.node(); }40:T19d5,{ const allData = await enrichedBeneficiaries; const stats = await summaryStats; // Filter based on selected cell const data = selectedHeatmapCell ? selectedHeatmapCell.patients : allData; // Dimensions const width = 1000; const height = 500; const margin = {top: 40, right: 40, bottom: 60, left: 80}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; // SVG const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#f8fafc"); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // Scales const x = d3.scaleLinear() .domain([d3.min(data, d => d.age) - 1, d3.max(data, d => d.age) + 1]) .range([0, innerWidth]) .nice(); const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.totalCost) * 1.05]) .range([innerHeight, 0]) .nice(); // Axes const xAxis = d3.axisBottom(x).ticks(10); const yAxis = d3.axisLeft(y).ticks(8).tickFormat(d => "$" + (d / 1000).toFixed(0) + "K"); g.append("g") .attr("transform", `translate(0, ${innerHeight})`) .call(xAxis) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").attr("stroke", "#cbd5e1")) .call(g => g.selectAll(".tick text") .attr("font-size", "13px") .attr("fill", "#475569")); g.append("g") .call(yAxis) .call(g => g.select(".domain").attr("stroke", "#94a3b8")) .call(g => g.selectAll(".tick line").attr("stroke", "#e2e8f0")) .call(g => g.selectAll(".tick text") .attr("font-size", "13px") .attr("fill", "#475569")); // Grid g.append("g") .selectAll("line") .data(y.ticks(8)) .join("line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", d => y(d)) .attr("y2", d => y(d)) .attr("stroke", "#f1f5f9") .attr("stroke-width", 1); // Threshold line const threshold = stats.highCostThreshold; g.append("line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", y(threshold)) .attr("y2", y(threshold)) .attr("stroke", "#dc2626") .attr("stroke-width", 2) .attr("stroke-dasharray", "6,3"); g.append("text") .attr("x", innerWidth - 10) .attr("y", y(threshold) - 8) .attr("text-anchor", "end") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#dc2626") .text(`High-Cost Threshold: $${threshold.toLocaleString()}`); // Tooltip const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "2px solid #1e293b") .style("border-radius", "8px") .style("padding", "12px") .style("font-family", "system-ui, sans-serif") .style("font-size", "12px") .style("box-shadow", "0 4px 12px rgba(0,0,0,0.2)") .style("pointer-events", "none") .style("z-index", "10000"); // Points g.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.age)) .attr("cy", d => y(d.totalCost)) .attr("r", 3.5) .attr("fill", d => d.isHighCost ? "#ef4444" : "#3b82f6") .attr("opacity", 0.5) .attr("stroke", d => d.isHighCost ? "#991b1b" : "#1e40af") .attr("stroke-width", 0.5) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("r", 6) .attr("opacity", 1) .attr("stroke-width", 2); tooltip .style("visibility", "visible") .html(`

Patient ${d.id.substring(0, 8)}...

Age: ${d.age}
Sex: ${d.sex}
Conditions: ${d.conditionCount}
Cost: $${d.totalCost.toLocaleString()}
Status: ${d.isHighCost ? 'High-Cost' : 'Normal'}

🚨 Highest Risk Profile

Age ${highestRisk.ageGroup} + ${highestRisk.conditionGroup} conditions

${highestRisk.highCostPct.toFixed(1)}%

${highestRisk.count.toLocaleString()} patients in this group

Nearly all patients in this profile become high-cost. These patients need comprehensive care coordination immediately.

📊 The Risk Ladder

Age matters:
• Ages 65-69: ${avgRisk6569.toFixed(1)}% high-cost
• Ages 85+: ${avgRisk85.toFixed(1)}% high-cost
${((avgRisk85 / avgRisk6569)).toFixed(1)}x higher risk

But conditions matter MORE. An 85-year-old with 0-1 conditions has lower risk than a 70-year-old with 4+ conditions.

🎯 Target Population

${highRiskCells.length} risk profiles have >50% high-cost rates.

They contain ${totalHighRiskPatients.toLocaleString()} patients (${((totalHighRiskPatients / 8237) * 100).toFixed(1)}% of total).

These are the patients who should receive intensive case management, medication reconciliation, and proactive care coordination.

💡 The Predictive Power

Using just two simple variables — age group and chronic condition count — we can predict high-cost status with remarkable accuracy. A patient's zip code, income, or insurance type? Not needed.

The model is simple: Older + Sicker = Higher Cost.
But the intervention is equally simple: Prevent condition accumulation early.

`; })()} `42:Tce8,md`## 📋 Key Findings ${await (async () => { const states = await stateAggregates; const condData = await conditionCostData; const stats = await summaryStats; const topState = states[0]; const lowState = states[states.length - 1]; const stateDiff = topState.avgCost - lowState.avgCost; const threeConditions = condData.find(d => d.conditions === 3); const fourConditions = condData.find(d => d.conditions === 4); const costJump = fourConditions.avgCost - threeConditions.avgCost; return `

### 🗺️ Part 1: Geographic Patterns

Finding:

State-level costs vary by $${stateDiff.toLocaleString()}/patient/year (${stateCodeToName.get(topState.state)} vs ${stateCodeToName.get(lowState.state)}). High-cost states correlate with higher chronic disease prevalence, but variance within states exceeds variance between states.

Implication:

While regional healthcare policy matters, patient-level interventions offer greater cost-reduction potential than state-level initiatives alone.

--- ### 💧 Part 2: The Cascade Effect

Finding:

Moving from 3 to 4 chronic conditions increases annual costs by $${costJump.toLocaleString()} (${((costJump / threeConditions.avgCost) * 100).toFixed(0)}% increase). This is the single largest cost jump in the condition progression curve.

Implication:

Healthcare systems should target patients with 2-3 conditions for intensive disease management before they reach the 4-condition threshold. This is the highest-ROI intervention point.

--- ### 🎯 Part 3: Predictable Risk Profiles

Finding:

Age group × condition count creates highly predictive risk profiles. Patients aged 85+ with 4+ conditions have >80% probability of high-cost status, while patients aged 65-69 with 0-1 conditions have <5% probability.

Implication:

Simple risk stratification models using readily available data can identify high-risk patients for proactive care management before costs escalate.

`; })()} `43:Tdbc,md`## 🏛️ Policy Recommendations

1️⃣ Early Intervention Programs

Target: Patients with 2-3 conditions
Action: Aggressive disease management, medication adherence programs, lifestyle interventions
Goal: Prevent progression to 4+ conditions

Expected ROI:

Prevent 10% from reaching 4th condition = $${(conditionCostData.find(d => d.conditions === 4).count * 0.1 * 10000).toLocaleString()} saved

2️⃣ Risk-Stratified Care Models

Target: All Medicare beneficiaries
Action: Implement automated risk scoring using age + condition count
Goal: Allocate resources proportional to risk

• Low risk (0-3 conditions): Annual wellness visits
• Moderate risk (3-4): Quarterly care coordination
• High risk (4+): Monthly case management

3️⃣ Value-Based Payment Reform

Target: Healthcare providers/systems
Action: Incentivize preventing condition accumulation
Goal: Align financial incentives with health outcomes

Bonus payments for keeping patients below 4 conditions. Measure: % of 2-3 condition patients who don't progress annually.

✅ Immediate Action Items

Deploy risk stratification model in existing EHR systems (requires only age + diagnosis codes)
Pilot intensive management for 2-3 condition patients in one region
Measure outcomes at 6 months: condition progression rate, hospitalization rate, total costs
Scale successful interventions based on pilot results

`44:T937,md`--- # Final Thoughts 💭

Healthcare Costs Are Predictable.
Let's Start Preventing Them.

This analysis of 10,000 Medicare beneficiaries reveals a simple truth: the cascade to high costs isn't random. It follows predictable patterns based on chronic disease accumulation.

The 4th chronic condition is the inflection point. Before it, costs are manageable. After it, they spiral exponentially. The difference between a $10,000 patient and a $40,000 patient often comes down to preventing that one additional diagnosis.

We have the data. We have the models. We know who's at risk.
Now we need the will to act.

The question isn't whether we can predict high-cost patients.
The question is: What will we do with that knowledge?

---

Project: Healthcare Cost Analysis & Prediction

Author: Aayush Prranav Chandrashekar (ac11929)

Institution: NYU Tandon School of Engineering, MS Computer Science

Course: Information Visualization, Fall 2025

Data: CMS Medicare DE-SynPUF (~10,000 beneficiaries, 2008)

Built with D3.js v7 • Observable • Visualizing the invisible epidemic

`45:[] 2f:{"id":"9e90544aa5a018fa","slug":null,"title":"The Cascade: How Healthcare Costs Spiral Out of Control 💧➡️🌊","thumbnail":"75b227e1d0da6fca27e37e8f5310fed62171bc2fa754763c30e8be7af81d5876","access_level":"public","create_time":"$D2025-12-12T16:03:40.375Z","update_time":"$D2025-12-12T17:02:04.436Z","view_time":null,"first_public_time":"$D2025-12-12T16:03:40.375Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bef7d7e15c999b8e","login":"ap36","name":"AP","avatar_url":"https://avatars-next.observableusercontent.com/255080bb8e8f92d6ec546ad87ef534f11ff7d4f0591b0494ec1a787512268d3f","tier":"starter_2024"},"version":207,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"605ec69fdc077b52","login":"aayush-prranav-chandrashekar","name":"Aayush Prranav Chandrashekar","avatar_url":"https://avatars-next.observableusercontent.com/f9719f61334b009f1f71bc9d5a9862576816a3657ea8b063c657bc4077a5dadd","tier":null}],"members":[{"type":"individual","id":"605ec69fdc077b52","login":"aayush-prranav-chandrashekar","name":"Aayush Prranav Chandrashekar","avatar_url":"https://avatars-next.observableusercontent.com/f9719f61334b009f1f71bc9d5a9862576816a3657ea8b063c657bc4077a5dadd","tier":null,"role":"editor"},{"type":"team","id":"bef7d7e15c999b8e","login":"ap36","name":"AP","avatar_url":"https://avatars-next.observableusercontent.com/255080bb8e8f92d6ec546ad87ef534f11ff7d4f0591b0494ec1a787512268d3f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"The Cascade: How Healthcare Costs Spiral Out of Control 💧➡️🌊","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"// Beneficiary Summary Data\nbeneficiaryData = d3.csv(\n \"https://raw.githubusercontent.com/milwaukeedata/desynpuf/master/1-sample-10000/DE1_0_2008_Beneficiary_Summary_File_Sample_1.csv\"\n).then(data => {\n console.log(\"✅ Loaded beneficiaries:\", data.length);\n console.log(\"Sample columns:\", Object.keys(data[0]));\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"// Load Inpatient Claims Data\ninpatientData = d3.csv(\n \"https://raw.githubusercontent.com/milwaukeedata/desynpuf/master/1-sample-10000/DE1_0_2008_to_2010_Inpatient_Claims_Sample_1.csv\"\n).then(data => {\n console.log(\"✅ Loaded inpatient claims:\", data.length);\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Load Outpatient Claims Data\noutpatientData = d3.csv(\n \"https://raw.githubusercontent.com/milwaukeedata/desynpuf/master/1-sample-10000/DE1_0_2008_to_2010_Outpatient_Claims_Sample_1.csv\"\n).then(data => {\n console.log(\"✅ Loaded outpatient claims:\", data.length);\n return data;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"// Load US States TopoJSON\nusStates = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"enrichedBeneficiaries = {\n const data = await processedBeneficiaries;\n \n console.log(\"Enriching\", data.length, \"beneficiaries\");\n \n // Sort by cost\n const sorted = [...data].sort((a, b) => b.totalCost - a.totalCost);\n \n // Calculate top 20% threshold\n const top20Index = Math.floor(sorted.length * 0.2);\n const highCostThreshold = sorted[top20Index].totalCost;\n \n console.log(\"✅ High-cost threshold (top 20%):\", highCostThreshold);\n console.log(\"Top 5 costs:\", sorted.slice(0, 5).map(d => d.totalCost));\n console.log(\"Bottom 5 costs:\", sorted.slice(-5).map(d => d.totalCost));\n \n // Flag high-cost patients and calculate percentiles\n return data.map(d => ({\n ...d,\n isHighCost: d.totalCost >= highCostThreshold,\n costPercentile: (sorted.findIndex(s => s.id === d.id) / sorted.length) * 100\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"summaryStats = {\n const data = await enrichedBeneficiaries;\n \n const total = data.length;\n const avgCost = d3.mean(data, d => d.totalCost);\n const medianCost = d3.median(data, d => d.totalCost);\n const avgConditions = d3.mean(data, d => d.conditionCount);\n const highCostCount = data.filter(d => d.isHighCost).length;\n const highCostThreshold = d3.min(data.filter(d => d.isHighCost), d => d.totalCost);\n const totalSpending = d3.sum(data, d => d.totalCost);\n \n console.log(\"✅ Summary stats calculated for\", total, \"patients\");\n \n return {\n total,\n avgCost: Math.round(avgCost),\n medianCost: Math.round(medianCost),\n avgConditions: avgConditions.toFixed(2),\n highCostCount,\n highCostPercent: (highCostCount / total * 100).toFixed(1),\n highCostThreshold: Math.round(highCostThreshold),\n totalSpending: totalSpending\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"// Reverse mapping\nstateNameToCode = new Map(\n Array.from(stateCodeToName, ([code, name]) => [name, code])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"// Create lookup for map\nstateLookupByName = {\n const data = await stateAggregates;\n const lookup = new Map();\n \n data.forEach(d => {\n const stateName = stateCodeToName.get(d.state);\n if (stateName) {\n lookup.set(stateName, d);\n }\n });\n \n console.log(\"✅ State lookup created:\", lookup.size, \"states mapped\");\n return lookup;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"costColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain(d3.extent(data, d => d.avgCost))\n .interpolator(t => d3.interpolateRgb(\"#10b981\", \"#ef4444\")(t));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"conditionColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain([0, d3.max(data, d => d.pctWith4Plus)])\n .interpolator(d3.interpolateReds);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"highCostPctColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain([0, d3.max(data, d => d.highCostPct)])\n .interpolator(d3.interpolateYlOrRd);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"viewof selectedMetric = Inputs.radio(\n [\"Average Cost\", \"4+ Conditions %\", \"High-Cost Patient %\"],\n {\n label: html`📊 Map Metric:`,\n value: \"Average Cost\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"viewof costMetric = Inputs.radio(\n [\"Average Cost\", \"Median Cost\", \"Total Spending\"],\n {\n label: html`📊 Cost Metric:`,\n value: \"Average Cost\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"viewof showIncremental = Inputs.toggle({\n label: \"Show incremental cost line\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"viewof showErrorBars = Inputs.toggle({\n label: \"Show confidence intervals (±1 SD)\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"mutable selectedHeatmapCell = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`### Patient Distribution\n\n${mutable selectedHeatmapCell \n ? `Showing patients: **Age ${mutable selectedHeatmapCell.ageGroup}**, **${mutable selectedHeatmapCell.conditionGroup} conditions** (n=${mutable selectedHeatmapCell.count.toLocaleString()})`\n : 'Click a cell in the heatmap above to filter'\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`---\n\n# Conclusions & Recommendations 🎓\n\n

The Three Truths About Healthcare Costs

\n 1. Geography creates disparities — but it's not destiny
\n 2. The 4th condition is the tipping point — costs spiral exponentially
\n 3. Risk is predictable — age + conditions tell the story\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"{\n primary: \"#2563eb\",\n primaryLight: \"#60a5fa\",\n primaryDark: \"#1e40af\",\n danger: \"#dc2626\",\n dangerLight: \"#fca5a5\",\n warning: \"#f59e0b\",\n warningLight: \"#fcd34d\",\n success: \"#10b981\",\n successLight: \"#6ee7b7\",\n gray50: \"#f8fafc\",\n gray100: \"#f1f5f9\",\n gray200: \"#e2e8f0\",\n gray300: \"#cbd5e1\",\n gray400: \"#94a3b8\",\n gray500: \"#64748b\",\n gray600: \"#475569\",\n gray700: \"#334155\",\n gray800: \"#1e293b\",\n gray900: \"#0f172a\",\n headerGradient: \"linear-gradient(135deg, #1e40af 0%, #1e293b 100%)\",\n accentGradient: \"linear-gradient(135deg, #2563eb 0%, #1e40af 100%)\",\n warningGradient: \"linear-gradient(135deg, #f59e0b 0%, #dc2626 100%)\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1","titling":"auto"}} 30:"$2f:body"

The Geography of the Healthcare Crisis

⚠️ The Invisible Epidemic

Where You Live Determines How Much You Pay

📍 Geographic Disparity

🏥 The Chronic Condition Belt

💡 The Key Question

The $50,000 Question

⚠️ The Hidden Pattern

🚨 The Critical Threshold

📈 The Exponential Curve

💰 The Cost of Inaction

🎯 Clinical Implication

Predicting the High-Cost Patient

🚨 Highest Risk Profile

📊 The Risk Ladder

🎯 Target Population

💡 The Predictive Power

1️⃣ Early Intervention Programs

2️⃣ Risk-Stratified Care Models

3️⃣ Value-Based Payment Reform

✅ Immediate Action Items

Healthcare Costs Are Predictable. Let's Start Preventing Them.

The Three Truths About Healthcare Costs

Healthcare Costs Are Predictable.
Let's Start Preventing Them.