2b:null 2c:["$","title",null,{"children":"Healthcare Cost Analysis : Understanding the Drivers of Medical Expenses | AP | Observable"}] 31:T659,Healthcare spending in the United States is rising at an unsustainable rate, yet these costs are not distributed evenly across people or places. A small fraction of patients—those with multiple chronic conditions—drive the majority of total expenditures. Understanding where these costs emerge, how they escalate, and who is most at risk is essential for designing targeted interventions that improve outcomes while reducing unnecessary spending. This project analyzes a sample of 10,000 Medicare beneficiaries from the CMS DE-SynPUF dataset (2008–2010) to uncover the hidden patterns behind America’s healthcare cost crisis. Through interactive geographic, clinical, and predictive visualizations, we examine: Where healthcare costs are concentrated across states How chronic conditions accumulate and trigger exponential cost increases Who is most likely to become a high-cost patient based on simple, observable factors The goal is not only to visualize disparities, but to reveal actionable insights—the tipping points, risk profiles, and systemic patterns that explain why 20% of patients account for more than 80% of total spending. This notebook is structured into three interconnected parts: The Geography of Pain — How location influences cost The Cascade — How chronic conditions trigger explosive spending Who’s at Risk? — Predictive profiles of high-cost patients Together, these visualizations provide a clear narrative: high healthcare costs are predictable—and preventable—if we know where to intervene. **Dataset:** 10,000 real Medicare beneficiaries (CMS DE-SynPUF 2008-2010)32:Ta2f,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)}%).

` 33:T4ff,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 — darker blue = higher costs/risk

`34:T1e14,{ const width = 975; const height = 610; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#ffffff"); const projection = d3.geoAlbersUsa() .scale(1300) .translate([width / 2, height / 2]); const path = d3.geoPath(projection); const states = topojson.feature(usStates, usStates.objects.states); 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; const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #2563eb") .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", "320px"); 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)) : "#e2e8f0"; }) .attr("stroke", "#ffffff") .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", "#1e3a8a") .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) { const tooltipWidth = 320; // max-width we set const windowWidth = window.innerWidth; // Check if tooltip would go off right edge let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) { leftPos = event.pageX - tooltipWidth - 15; // Show on left side instead } tooltip .style("top", (event.pageY - 10) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#ffffff") .attr("stroke-width", 1.5); tooltip.style("visibility", "hidden"); }); svg.append("text") .attr("x", width / 2) .attr("y", 40) .attr("text-anchor", "middle") .style("font-size", "28px") .style("font-weight", "bold") .style("fill", "#1e3a8a") .text(`Medicare ${metricLabel} by State (2008)`); 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})`); 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", "#2563eb") .style("stroke-width", 1); 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(); }35:T9bc,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}%).

Geographic patterns suggest regional healthcare challenges.

💡 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...

`; })()} `36:T589,# Part 1 — Key Questions & Answers ### **Q1. Why are some states far more expensive for Medicare patients than others?** **A1.** States differ in underlying health burden. Regions with more diabetes, heart disease, COPD, and kidney disease naturally generate higher Medicare spending. ### **Q2. If two states have similar patients, why can their average costs still differ by thousands of dollars?** **A2.** Healthcare prices vary dramatically by state. Identical procedures can cost 2–4× more depending on the local market. ### **Q3. Why do some states use more healthcare services overall?** **A3.** Provider supply drives utilization. States with more hospitals, specialists, and imaging centers tend to deliver more services, increasing total spending. ### **Q4. Do Medicare plan types explain part of the geographic variation?** **A4.** Yes. States with higher Medicare Advantage enrollment have lower fee-for-service spending, while states dominated by traditional Medicare show higher spending. ### **Q5. Does healthcare delivery structure matter?** **A5.** Yes. Strong primary care and coordinated care models lower costs; states relying heavily on hospital-based care show higher costs. ### **Final Conclusion for Part 1** Geography shapes the healthcare environment: disease burden, prices, provider supply, and care models all contribute to the cost differences revealed by the map. 37:T1440,{ const states = await stateAggregates; const allData = await enrichedBeneficiaries; // Get top 3 high and low cost states const highCostStates = states.slice(0, 3); const lowCostStates = states.slice(-3).reverse(); const width = 1000; const height = 650; const margin = {top: 110, right: 40, bottom: 60, left: 80}; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#fff"); // 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", "#1e40af") .text("State Comparison: High-Cost vs. Low-Cost"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .style("font-size", "14px") .style("fill", "#64748b") .text("Patient distribution by condition count"); // Create small multiples const smallWidth = 140; const smallHeight = 180; const gap = 20; const allStates = [...highCostStates, ...lowCostStates]; allStates.forEach((state, i) => { const col = i % 3; const row = Math.floor(i / 3); const x = margin.left + col * (smallWidth + gap) + 80; const y = margin.top + row * (smallHeight + 90); const g = svg.append("g") .attr("transform", `translate(${x}, ${y})`); // Get data for this state const statePatients = allData.filter(d => d.state === state.state); const byConditions = d3.rollup( statePatients, v => v.length, d => d.conditionCount ); const conditionData = Array.from(byConditions, ([conditions, count]) => ({ conditions, count, pct: (count / statePatients.length) * 100 })).sort((a, b) => a.conditions - b.conditions); // Scales for this small multiple const xScale = d3.scaleBand() .domain(d3.range(0, 12)) .range([0, smallWidth]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, d3.max(conditionData, d => d.pct) * 1.1]) .range([smallHeight, 0]); // Bars g.selectAll("rect") .data(conditionData) .join("rect") .attr("x", d => xScale(d.conditions)) .attr("y", d => yScale(d.pct)) .attr("width", xScale.bandwidth()) .attr("height", d => smallHeight - yScale(d.pct)) .attr("fill", d => d.conditions >= 4 ? "#1e40af" : "#60a5fa") .attr("opacity", 0.85) .attr("stroke", "#3b82f6") .attr("stroke-width", 1); // State label g.append("text") .attr("x", smallWidth / 2) .attr("y", -25) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .attr("fill", row === 0 ? "#dc2626" : "#10b981") .text(stateCodeToName.get(state.state)); // Cost label g.append("text") .attr("x", smallWidth / 2) .attr("y", -8) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("fill", "#64748b") .text(`$${Math.round(state.avgCost).toLocaleString()}/yr`); // X-axis g.append("g") .attr("transform", `translate(0, ${smallHeight})`) .call(d3.axisBottom(xScale) .tickValues([0, 4, 8, 11]) .tickFormat(d => d)) .call(g => g.select(".domain").attr("stroke", "#cbd5e1")) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("fill", "#64748b")); // Y-axis (only for leftmost column) if (col === 0) { g.append("g") .call(d3.axisLeft(yScale) .ticks(3) .tickFormat(d => d + "%")) .call(g => g.select(".domain").attr("stroke", "#cbd5e1")) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "10px") .attr("fill", "#64748b")); } // Key metrics below g.append("text") .attr("x", smallWidth / 2) .attr("y", smallHeight + 35) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", "#475569") .text(`4+ cond: ${state.pctWith4Plus.toFixed(0)}%`); g.append("text") .attr("x", smallWidth / 2) .attr("y", smallHeight + 48) .attr("text-anchor", "middle") .attr("font-size", "10px") .attr("fill", "#475569") .text(`High-cost: ${state.highCostPct.toFixed(0)}%`); }); // Axis labels svg.append("text") .attr("x", margin.left - 45) .attr("y", height / 2) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#475569") .attr("transform", `rotate(-90, ${margin.left - 45}, ${height / 2})`) .text("% of Patients"); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Number of Chronic Conditions"); return svg.node(); }38:T5c3,conditionCostBreakdown = { const data = await enrichedBeneficiaries; const conditions = [ { name: "Alzheimer's/Dementia", field: "alzheimers" }, { name: "Heart Failure", field: "chf" }, { name: "Chronic Kidney Disease", field: "kidney" }, { name: "Cancer", field: "cancer" }, { name: "COPD", field: "copd" }, { name: "Depression", field: "depression" }, { name: "Diabetes", field: "diabetes" }, { name: "Ischemic Heart Disease", field: "heart" }, { name: "Osteoporosis", field: "osteoporosis" }, { name: "Arthritis", field: "arthritis" }, { name: "Stroke/TIA", field: "stroke" } ]; const result = conditions.map(cond => { const withCondition = data.filter(d => d[cond.field] === 1); const withoutCondition = data.filter(d => d[cond.field] === 0); return { name: cond.name, avgCostWith: d3.mean(withCondition, d => d.totalCost), avgCostWithout: d3.mean(withoutCondition, d => d.totalCost), countWith: withCondition.length, countWithout: withoutCondition.length, prevalence: (withCondition.length / data.length) * 100, highCostPct: (withCondition.filter(d => d.isHighCost).length / withCondition.length) * 100, costDiff: d3.mean(withCondition, d => d.totalCost) - d3.mean(withoutCondition, d => d.totalCost) }; }).sort((a, b) => b.costDiff - a.costDiff); console.log("✅ Condition breakdown:", result.length, "conditions"); return result; }39:T1b6c,{ const data = await conditionCostBreakdown; const width = 900; const height = 550; const margin = {top: 60, right: 200, bottom: 60, left: 200}; const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; 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})`); const y = d3.scaleBand() .domain(data.map(d => d.name)) .range([0, innerHeight]) .padding(0.2); const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.costDiff) * 1.1]) .range([0, innerWidth]) .nice(); const colorScale = d3.scaleSequential() .domain([0, d3.max(data, d => d.costDiff)]) .interpolator(d3.interpolateBlues); // Axes const xAxis = d3.axisBottom(x) .ticks(6) .tickFormat(d => "$" + (d / 1000).toFixed(0) + "K"); const yAxis = d3.axisLeft(y); 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").remove()) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text") .attr("font-size", "13px") .attr("font-weight", "500") .attr("fill", "#475569")); // Grid lines g.append("g") .selectAll("line") .data(x.ticks(6)) .join("line") .attr("x1", d => x(d)) .attr("x2", d => x(d)) .attr("y1", 0) .attr("y2", innerHeight) .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 #2563eb") .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", "320px"); // Bars g.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", 0) .attr("y", d => y(d.name)) .attr("width", d => x(d.costDiff)) .attr("height", y.bandwidth()) .attr("fill", d => colorScale(d.costDiff)) .attr("opacity", 0.85) .attr("stroke", "#3b82f6") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("opacity", 1) .attr("stroke-width", 3); tooltip .style("visibility", "visible") .html(`

${d.name}

Additional Cost Impact

+$${Math.round(d.costDiff).toLocaleString()}

per patient per year

Prevalence: ${d.prevalence.toFixed(1)}% of patients
Patients with condition: ${d.countWith.toLocaleString()}
Avg cost (with): $${Math.round(d.avgCostWith).toLocaleString()}
Avg cost (without): $${Math.round(d.avgCostWithout).toLocaleString()}
High-cost rate: ${d.highCostPct.toFixed(1)}%

`); }) .on("mousemove", function(event) { const tooltipWidth = 320; const windowWidth = window.innerWidth; let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) { leftPos = event.pageX - tooltipWidth - 15; } tooltip .style("top", (event.pageY - 10) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this) .attr("opacity", 0.85) .attr("stroke-width", 2); tooltip.style("visibility", "hidden"); }); // Value labels on bars g.append("g") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.costDiff) + 10) .attr("y", d => y(d.name) + y.bandwidth() / 2) .attr("dy", "0.35em") .attr("font-size", "13px") .attr("font-weight", "600") .attr("fill", "#1e40af") .text(d => "+$" + (d.costDiff / 1000).toFixed(1) + "K"); // Prevalence indicators (small circles on right) const legendX = innerWidth + 20; g.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", legendX) .attr("cy", d => y(d.name) + y.bandwidth() / 2) .attr("r", d => Math.sqrt(d.prevalence) * 2) .attr("fill", "#60a5fa") .attr("opacity", 0.6) .attr("stroke", "#3b82f6") .attr("stroke-width", 1); // 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", "#1e40af") .text("Cost Impact by Chronic Condition"); // X-axis label g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 45) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Additional Annual Cost (vs. patients without condition)"); // Legend for circles svg.append("text") .attr("x", margin.left + innerWidth + 20) .attr("y", margin.top - 20) .attr("font-size", "12px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Prevalence"); svg.append("circle") .attr("cx", margin.left + innerWidth + 20) .attr("cy", margin.top - 5) .attr("r", 3) .attr("fill", "#60a5fa") .attr("opacity", 0.6); svg.append("text") .attr("x", margin.left + innerWidth + 30) .attr("y", margin.top - 5) .attr("dy", "0.35em") .attr("font-size", "10px") .attr("fill", "#64748b") .text("(circle size)"); return svg.node(); }3a:T474,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.

`3b:T3385,{ const data = await chartData; const width = 1000; const height = 600; const margin = {top: 80, right: 200, bottom: 100, left: 100}; // increased right margin slightly const innerWidth = width - margin.left - margin.right; const innerHeight = height - margin.top - margin.bottom; 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})`); 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); } const x = d3.scaleBand() .domain(data.map(d => d.group)) .range([0, innerWidth]) .padding(0.2); const y = d3.scaleLinear() .domain([0, maxY * 1.1]) .range([innerHeight, 0]) .nice(); let colorScale; if (groupBy === "Conditions") { colorScale = d => d.group >= 4 ? "#1e40af" : "#60a5fa"; } else if (groupBy === "Sex") { colorScale = d => d.group === "Male" ? "#3b82f6" : "#60a5fa"; } else if (groupBy === "Age Group") { const ageColors = d3.scaleOrdinal() .domain(["65-69", "70-74", "75-79", "80-84", "85+"]) .range(["#dbeafe", "#93c5fd", "#60a5fa", "#3b82f6", "#1e40af"]); colorScale = d => ageColors(d.group); } else { colorScale = d => "#3b82f6"; } const xAxis = d3.axisBottom(x) .tickFormat(d => groupBy === "Age × Conditions" && d.length > 15 ? d.substring(0, 12) + "..." : 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", "12px") .attr("font-weight", "600") .attr("fill", "#475569") .attr("transform", "rotate(-45)") .attr("text-anchor", "end")); 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")); 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); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #2563eb") .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"); if (showErrorBars && costMetric === "Average Cost") { g.append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d => x(d.group) + x.bandwidth() / 2) .attr("x2", d => x(d.group) + 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); g.append("g") .selectAll("line") .data(data) .join("line") .attr("x1", d => x(d.group) + x.bandwidth() / 2 - 5) .attr("x2", d => x(d.group) + 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.group) + x.bandwidth() / 2 - 5) .attr("x2", d => x(d.group) + 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("rect") .data(data) .join("rect") .attr("x", d => x(d.group)) .attr("y", d => y(yAccessor(d))) .attr("width", x.bandwidth()) .attr("height", d => innerHeight - y(yAccessor(d))) .attr("fill", colorScale) .attr("opacity", 0.85) .attr("stroke", d => (groupBy === "Conditions" && d.group >= 4) ? "#1e40af" : "#3b82f6") .attr("stroke-width", 2) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this).attr("opacity", 1).attr("stroke-width", 4); tooltip.style("visibility", "visible").html(`

${groupBy}: ${d.group}

${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 && groupBy === "Conditions" ? `

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

` : ''}

`); }) .on("mousemove", function(event) { const tooltipWidth = 300; const windowWidth = window.innerWidth; let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) leftPos = event.pageX - tooltipWidth - 15; tooltip.style("top", (event.pageY - 10) + "px").style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this).attr("opacity", 0.85).attr("stroke-width", 2); tooltip.style("visibility", "hidden"); }); if (showIncremental && costMetric === "Average Cost" && groupBy === "Conditions") { const yIncremental = d3.scaleLinear() .domain([0, d3.max(data, d => d.incrementalCost) * 1.1]) .range([innerHeight, 0]) .nice(); 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", "#60a5fa")) .call(g => g.selectAll(".tick line").attr("stroke", "#93c5fd")) .call(g => g.selectAll(".tick text") .attr("font-size", "12px") .attr("fill", "#2563eb")); g.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#2563eb") .attr("stroke-width", 3) .attr("stroke-dasharray", "8,4") .attr("d", d3.line() .x(d => x(d.group) + x.bandwidth() / 2) .y(d => yIncremental(d.incrementalCost)) .curve(d3.curveMonotoneX)); g.append("g") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(d.group) + x.bandwidth() / 2) .attr("cy", d => yIncremental(d.incrementalCost)) .attr("r", 5) .attr("fill", "#2563eb") .attr("stroke", "white") .attr("stroke-width", 2); g.append("text") .attr("transform", `translate(${innerWidth + 60}, ${innerHeight / 2}) rotate(90)`) // moved left from +120 to +60 .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#2563eb") .text("Incremental Cost"); } // Danger zone if (groupBy === "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", "#dbeafe") .attr("opacity", 0.15) .attr("pointer-events", "none"); 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", "#1e40af") .text(" "); } } const filterText = filterSex !== "All" || filterAgeGroup !== "All" ? ` (${filterSex !== "All" ? filterSex : ""}${filterSex !== "All" && filterAgeGroup !== "All" ? ", " : ""}${filterAgeGroup !== "All" ? "Age " + filterAgeGroup : ""})` : ""; // Title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "22px") .style("font-weight", "bold") .style("fill", "#1e40af") .text(`Healthcare Costs by ${groupBy}${filterText}`); // X & Y labels g.append("text") .attr("x", innerWidth / 2) .attr("y", innerHeight + 70) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text(groupBy); 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 - 120}, ${margin.top})`); // moved slightly right if (groupBy === "Conditions") { legend.append("rect") .attr("width", 20) .attr("height", 20) .attr("fill", "#60a5fa") .attr("stroke", "#3b82f6") .attr("stroke-width", 2); legend.append("text") .attr("x", 28) .attr("y", 15) .attr("font-size", "13px") .attr("fill", "#475569") .text("0-3 Conditions"); legend.append("rect") .attr("y", 30) .attr("width", 20) .attr("height", 20) .attr("fill", "#1e40af") .attr("stroke", "#1e40af") .attr("stroke-width", 3); legend.append("text") .attr("x", 28) .attr("y", 45) .attr("font-size", "13px") .attr("fill", "#475569") .text("4+ Conditions"); } else if (groupBy === "Age Group") { const ageColors = ["#dbeafe", "#93c5fd", "#60a5fa", "#3b82f6", "#1e40af"]; const ageLabels = ["65-69", "70-74", "75-79", "80-84", "85+"]; ageLabels.forEach((label, i) => { legend.append("rect") .attr("y", i * 25) .attr("width", 18) .attr("height", 18) .attr("fill", ageColors[i]) .attr("stroke", "#3b82f6") .attr("stroke-width", 1); legend.append("text") .attr("x", 24) .attr("y", i * 25 + 13) .attr("font-size", "12px") .attr("fill", "#475569") .text(label); }); } else if (groupBy === "Sex") { legend.append("rect") .attr("y", 30) .attr("width", 20) .attr("height", 20) .attr("fill", "#60a5fa") .attr("stroke", "#3b82f6") .attr("stroke-width", 2); legend.append("text") .attr("x", 28) .attr("y", 45) .attr("font-size", "13px") .attr("fill", "#475569") .text("Female"); } // Incremental legend line for Conditions if (showIncremental && costMetric === "Average Cost" && groupBy === "Conditions") { legend.append("line") .attr("x1", 0) .attr("x2", 20) .attr("y1", 70) .attr("y2", 70) .attr("stroke", "#2563eb") .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:Tc61,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); return `

The Critical Threshold

3 → 4 conditions

+${pctIncreaseThreeToFour}%

$${increaseThreeToFour.toLocaleString()} increase

This is where the cascade begins. Costs don't just increase—they explode.

📈 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

`; })()} `3d:T535,# Part 2 — Key Questions & Answers ### **Q1. What factor most strongly predicts rising healthcare costs?** **A1.** Chronic condition count. It is the single strongest driver of Medicare spending, more than age or geography. ### **Q2. Where is the “tipping point” where costs start to escalate rapidly?** **A2.** The jump from **3 to 4 chronic conditions** causes a **44% increase** in average annual cost, marking the start of the cost cascade. ### **Q3. How do costs grow as conditions accumulate?** **A3.** Costs grow exponentially: - 0 conditions → $224 - 3 conditions → $3,425 - 4 conditions → $4,919 - 7+ conditions → $17,741 ### **Q4. What is the cost implication of preventing disease progression?** **A4.** Preventing just **10%** of patients from reaching the 4th condition saves over **$110K annually** in this sample alone. ### **Q5. What intervention strategy does the cascade suggest?** **A5.** Target patients with **2–3 conditions** for aggressive management. Stopping them from reaching the 4-condition threshold yields the highest ROI. ### **Final Conclusion for Part 2** Cost explosions do not happen randomly—they occur at a predictable inflection point. Managing patients before they accumulate 4 conditions is the most effective way to prevent high Medicare spending. 3e:T7c5,cooccurrenceData = { const data = await enrichedBeneficiaries; const conditions = [ { name: "Diabetes", field: "diabetes", short: "DM" }, { name: "Heart Disease", field: "heart", short: "IHD" }, { name: "COPD", field: "copd", short: "COPD" }, { name: "Heart Failure", field: "chf", short: "CHF" }, { name: "Depression", field: "depression", short: "DEP" }, { name: "Kidney Disease", field: "kidney", short: "CKD" }, { name: "Cancer", field: "cancer", short: "CA" }, { name: "Arthritis", field: "arthritis", short: "RA/OA" }, { name: "Stroke", field: "stroke", short: "CVA" }, { name: "Alzheimer's", field: "alzheimers", short: "ALZ" } ]; // Calculate co-occurrence matrix const matrix = []; conditions.forEach((cond1, i) => { conditions.forEach((cond2, j) => { if (i < j) { // Only upper triangle const both = data.filter(d => d[cond1.field] === 1 && d[cond2.field] === 1); const cond1Only = data.filter(d => d[cond1.field] === 1); const cond2Only = data.filter(d => d[cond2.field] === 1); if (both.length > 10) { // Only show if co-occurrence is meaningful const cooccurrenceRate = (both.length / Math.min(cond1Only.length, cond2Only.length)) * 100; const avgCost = d3.mean(both, d => d.totalCost); const highCostPct = (both.filter(d => d.isHighCost).length / both.length) * 100; matrix.push({ source: cond1.short, target: cond2.short, sourceFull: cond1.name, targetFull: cond2.name, count: both.length, cooccurrenceRate, avgCost, highCostPct }); } } }); }); // Get top 20 strongest connections const topConnections = matrix .sort((a, b) => b.count - a.count) .slice(0, 20); console.log("✅ Co-occurrence data:", topConnections.length, "connections"); return topConnections; }3f:T221b,{ const data = await cooccurrenceData; // IMPORTANT: Use the original data, don't let D3 mutate it const topLinks = data.slice(0, 15).map(d => ({...d})); // Extract unique nodes const nodeMap = new Map(); topLinks.forEach(link => { // These should be strings like "DM", "IHD" if (!nodeMap.has(link.source)) { nodeMap.set(link.source, link.sourceFull); } if (!nodeMap.has(link.target)) { nodeMap.set(link.target, link.targetFull); } }); console.log("Node map:", Array.from(nodeMap.entries())); const nodeArray = Array.from(nodeMap.keys()); // Position nodes in a circle const width = 900; const height = 700; const centerX = width / 2; const centerY = height / 2 + 20; const radius = 220; const nodes = nodeArray.map((id, i) => { const angle = (i / nodeArray.length) * 2 * Math.PI - Math.PI / 2; return { id, full: nodeMap.get(id), x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; }); console.log("Nodes:", nodes); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("background", "#fff"); // Link width scale const linkWidthScale = d3.scaleLinear() .domain(d3.extent(topLinks, d => d.count)) .range([2, 10]); // Link color scale const linkColorScale = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateBlues); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #2563eb") .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", "320px"); // Draw links topLinks.forEach(link => { const sourceNode = nodes.find(n => n.id === link.source); const targetNode = nodes.find(n => n.id === link.target); if (sourceNode && targetNode) { svg.append("line") .datum(link) .attr("x1", sourceNode.x) .attr("y1", sourceNode.y) .attr("x2", targetNode.x) .attr("y2", targetNode.y) .attr("stroke", linkColorScale(link.highCostPct)) .attr("stroke-width", linkWidthScale(link.count)) .attr("opacity", 0.6) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("opacity", 1) .attr("stroke-width", linkWidthScale(d.count) + 3); tooltip .style("visibility", "visible") .html(`

${d.sourceFull} + ${d.targetFull}

Co-occurrence Strength

${d.count} patients

Co-occurrence Rate: ${d.cooccurrenceRate.toFixed(1)}%
Avg Cost: $${Math.round(d.avgCost).toLocaleString()}
High-Cost Rate: ${d.highCostPct.toFixed(1)}%

${node.full}

${connections.length} Connection${connections.length !== 1 ? 's' : ''}

Co-occurs with:
${connectionList}

`); }) .on("mousemove", function(event) { const tooltipWidth = 320; const windowWidth = window.innerWidth; let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) { leftPos = event.pageX - tooltipWidth - 15; } tooltip .style("top", (event.pageY - 10) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this) .attr("opacity", 0.9) .attr("stroke-width", 3); tooltip.style("visibility", "hidden"); }); // Display the short code g.append("text") .text(node.id) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "white") .attr("pointer-events", "none"); }); // 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", "#1e40af") .text("Condition Co-occurrence Network"); svg.append("text") .attr("x", width / 2) .attr("y", 52) .attr("text-anchor", "middle") .style("font-size", "14px") .style("fill", "#64748b") .text("Top 15 strongest condition pairs | Hover over nodes or lines for details"); // Legend const legend = svg.append("g") .attr("transform", `translate(50, ${height - 120})`); legend.append("text") .attr("y", 0) .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Node size = # of connections"); legend.append("text") .attr("y", 25) .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Line width = # of patients"); legend.append("line") .attr("x1", 0) .attr("x2", 40) .attr("y1", 50) .attr("y2", 50) .attr("stroke", linkColorScale(20)) .attr("stroke-width", 4); legend.append("text") .attr("x", 50) .attr("y", 55) .attr("font-size", "12px") .attr("fill", "#64748b") .text("Low high-cost rate"); legend.append("line") .attr("x1", 0) .attr("x2", 40) .attr("y1", 75) .attr("y2", 75) .attr("stroke", linkColorScale(80)) .attr("stroke-width", 4); legend.append("text") .attr("x", 50) .attr("y", 80) .attr("font-size", "12px") .attr("fill", "#64748b") .text("High high-cost rate"); return svg.node(); }40:Tcd5,md`### 💡 Key Patterns ${await (async () => { const data = await cooccurrenceData; const top3 = data.slice(0, 3); const mostExpensive = data.reduce((max, d) => d.avgCost > max.avgCost ? d : max); const highestRisk = data.reduce((max, d) => d.highCostPct > max.highCostPct ? d : max); return `

🔗 Most Common Pairs

1. ${top3[0].sourceFull} + ${top3[0].targetFull}
${top3[0].count} patients

2. ${top3[1].sourceFull} + ${top3[1].targetFull}
${top3[1].count} patients

3. ${top3[2].sourceFull} + ${top3[2].targetFull}
${top3[2].count} patients

💰 Most Expensive Combo

${mostExpensive.sourceFull} + ${mostExpensive.targetFull}

Average cost: $${Math.round(mostExpensive.avgCost).toLocaleString()}
Affects ${mostExpensive.count} patients

⚠️ Highest Risk Combo

${highestRisk.sourceFull} + ${highestRisk.targetFull}

${highestRisk.highCostPct.toFixed(1)}% become high-cost
${highestRisk.count} patients affected

🎯 Clinical Action Items

Screen aggressively: If a patient has one condition from a high-risk pair, screen for the other
Coordinate care: Thicker lines indicate conditions that require integrated management
Prevent cascades: Breaking one link can prevent the entire cluster from forming
Darker = more urgent: Darker blue lines show combinations with highest high-cost rates

`; })()} `41:T4fc,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 blue = High risk (80%+ become high-cost)
Medium blue = Moderate risk (30-50%)
Light blue = Low risk (<20%)
Click cells to see patient distribution in scatter plot below

`42:T20a1,{ const data = await heatmapData; 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; 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})`); const ageGroups = ["65-69", "70-74", "75-79", "80-84", "85+"]; const conditionGroups = ["0", "1-3", "4+"]; const x = d3.scaleBand() .domain(ageGroups) .range([0, innerWidth]) .padding(0.05); const y = d3.scaleBand() .domain(conditionGroups) .range([0, innerHeight]) .padding(0.05); const colorScale = d3.scaleSequential() .domain([0, 100]) .interpolator(d3.interpolateBlues); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "3px solid #2563eb") .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"); 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", "#ffffff") .attr("stroke-width", 3) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#1e3a8a") .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) { const tooltipWidth = 300; const windowWidth = window.innerWidth; let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) { leftPos = event.pageX - tooltipWidth - 15; } tooltip .style("top", (event.pageY - 10) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#ffffff") .attr("stroke-width", 3); tooltip.style("visibility", "hidden"); }) .on("click", function(event, d) { mutable selectedHeatmapCell = d; cells.attr("stroke", "#ffffff").attr("stroke-width", 3); d3.select(this).attr("stroke", "#1e3a8a").attr("stroke-width", 5); }); 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 ? "#1e3a8a" : "#3b82f6") .attr("pointer-events", "none") .text(d => d.highCostPct.toFixed(1) + "%"); 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}`); 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")); 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")); svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "24px") .style("font-weight", "bold") .style("fill", "#1e3a8a") .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)"); 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"); 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"); 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})`); 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", "#2563eb") .style("stroke-width", 1); 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(); }43:T19dd,{ const allData = await enrichedBeneficiaries; const stats = await summaryStats; const data = selectedHeatmapCell ? selectedHeatmapCell.patients : allData; 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; 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})`); 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(); 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")); 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); const threshold = stats.highCostThreshold; g.append("line") .attr("x1", 0) .attr("x2", innerWidth) .attr("y1", y(threshold)) .attr("y2", y(threshold)) .attr("stroke", "#2563eb") .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", "#2563eb") .text(`High-Cost Threshold: $${threshold.toLocaleString()}`); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background", "white") .style("border", "2px solid #2563eb") .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"); 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 ? "#1e3a8a" : "#60a5fa") .attr("opacity", 0.5) .attr("stroke", d => d.isHighCost ? "#1e3a8a" : "#3b82f6") .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'}

`); }) .on("mousemove", function(event) { const tooltipWidth = 200; const windowWidth = window.innerWidth; let leftPos = event.pageX + 15; if (leftPos + tooltipWidth > windowWidth) { leftPos = event.pageX - tooltipWidth - 15; } tooltip .style("top", (event.pageY - 10) + "px") .style("left", leftPos + "px"); }) .on("mouseout", function() { d3.select(this) .attr("r", 3.5) .attr("opacity", 0.5) .attr("stroke-width", 0.5); tooltip.style("visibility", "hidden"); }); 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("Patient Age"); svg.append("text") .attr("transform", `translate(20, ${height / 2}) rotate(-90)`) .attr("text-anchor", "middle") .attr("font-size", "16px") .attr("font-weight", "600") .attr("fill", "#475569") .text("Total Annual Cost"); const legend = svg.append("g") .attr("transform", `translate(${width - 150}, ${margin.top})`); legend.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", "#1e3a8a") .attr("stroke", "#1e3a8a"); legend.append("text") .attr("x", 12) .attr("y", 5) .attr("font-size", "13px") .attr("fill", "#475569") .text("High-Cost"); legend.append("circle") .attr("cx", 0) .attr("cy", 25) .attr("r", 5) .attr("fill", "#60a5fa") .attr("stroke", "#3b82f6"); legend.append("text") .attr("x", 12) .attr("y", 30) .attr("font-size", "13px") .attr("fill", "#475569") .text("Normal Cost"); const highCostCount = data.filter(d => d.isHighCost).length; const highCostPct = ((highCostCount / data.length) * 100).toFixed(1); svg.append("text") .attr("x", width - 150) .attr("y", margin.top + 60) .attr("font-size", "14px") .attr("font-weight", "600") .attr("fill", "#1e3a8a") .text(`n = ${data.length.toLocaleString()}`); svg.append("text") .attr("x", width - 150) .attr("y", margin.top + 78) .attr("font-size", "12px") .attr("fill", "#64748b") .text(`${highCostPct}% high-cost`); return svg.node(); } 44:T10d7,md`## Risk Profile Analysis ${await (async () => { const data = await heatmapData; const highestRisk = data.reduce((max, d) => d.highCostPct > max.highCostPct ? d : max); const lowestRisk = data.reduce((min, d) => d.highCostPct < min.highCostPct ? d : min); const highRiskCells = data.filter(d => d.highCostPct > 50); const totalHighRiskPatients = d3.sum(highRiskCells, d => d.count); const age6569 = data.filter(d => d.ageGroup === "65-69"); const age85plus = data.filter(d => d.ageGroup === "85+"); const avgRisk6569 = d3.mean(age6569, d => d.highCostPct); const avgRisk85 = d3.mean(age85plus, d => d.highCostPct); const totalPatients = 8237; return `

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 over 50% high-cost rates.

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

These patients 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.

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

`; })()} `45:T466,# Part 3 — Key Questions & Answers ### **Q1. Which patient profiles are most likely to become high-cost?** **A1.** Patients aged **85+** with **4+ chronic conditions**—about **59.5%** become high-cost. ### **Q2. What matters more: age or number of conditions?** **A2.** Condition count matters more. A younger patient with 4+ conditions has higher risk than an older patient with 0–1 conditions. ### **Q3. How predictive are age and condition count together?** **A3.** Very predictive. Using just these two variables, we can identify the majority of high-cost patients. ### **Q4. How large is the highest-risk population?** **A4.** Five age-condition groups have >50% high-cost rates, containing **2,349 patients** (28.5% of the dataset). ### **Q5. What does the heatmap reveal about cost risk?** **A5.** Risk escalates non-linearly and is concentrated among older adults with multiple chronic conditions. ### **Final Conclusion for Part 3** High-cost risk is predictable and concentrated. Age + condition count creates clear risk profiles that healthcare systems can target for earlier intervention. 46:T14c1,md`--- # Conclusions This analysis of 10,000 Medicare beneficiaries reveals that the cascade to high costs follows predictable patterns. Here's what each part of our analysis uncovered: --- ## Part 1: Geography — Where Are Costs Highest? **Question:** Does geography predict healthcare costs? **Answer:** Yes — location matters significantly. - 3x cost variation between highest and lowest cost states - Pennsylvania, Colorado, and DC have the highest average costs (>$6,300/year) - Washington, Alaska, and Nevada have the lowest costs (<$1,400/year) - High-cost states have more patients with 4+ conditions, not just higher costs per patient **Implication:** Geographic targeting of prevention programs could yield outsized returns in high-cost regions. --- ## Which Conditions Drive Costs Most? **Question:** Are all chronic conditions equally expensive? **Answer:** No — some conditions drive costs far more than others. - Kidney disease adds the most cost (+$7,000+/year per patient) - COPD, heart failure, and kidney disease form a dangerous triad - Diabetes and heart disease are most prevalent (30-40% of patients) but moderate in cost impact - Preventing kidney disease alone could save millions **Implication:** Prevention dollars should prioritize kidney health, COPD management, and cardiovascular care. --- ## Dangerous Combinations — Which Conditions Cluster? **Question:** Do certain conditions appear together? **Answer:** Yes — conditions form dangerous clusters. - Diabetes + Heart Disease is the most common pair (2,350 patients) - Heart Disease + Kidney Disease has the highest cost ($16,400/year) and 71% become high-cost - Heart disease acts as a "hub" — it connects to nearly every other condition - Breaking one link in the chain can prevent entire clusters from forming **Implication:** Screen aggressively for connected conditions. If a patient has diabetes, monitor for heart disease and kidney disease proactively. --- ## The Cascade — When Do Costs Explode? **Question:** Is there a tipping point where costs spiral? **Answer:** Yes — the 4th chronic condition is the inflection point. - Patients with 0-3 conditions average $8,000-12,000/year - The jump from 3rd to 4th condition brings a 127% cost increase (+$15,000/year) - By 7+ conditions, costs reach $43,000/year — 5x baseline - Preventing just 10% of patients from reaching their 4th condition could save millions **Implication:** The ROI of prevention is highest at 3 conditions. Keep patients below the 4-condition threshold. --- ## Risk Profiles — Who's Most at Risk? **Question:** Can we predict who will become high-cost? **Answer:** Yes — with just age and condition count. - Age 85+ with 4+ conditions: 91% become high-cost - Age 65-69 with 0 conditions: Only 8% become high-cost - But there's variance — some 7+ condition patients cost less than average 2-condition patients - This suggests good disease management can control costs even with complexity **Implication:** Target intensive case management at elderly patients with 4+ conditions. But don't write off complex patients — proper care coordination works. --- ## State Deep Dive — What Makes High-Cost States Different? **Question:** Why do some states cost so much more? **Answer:** High-cost states have more complex patient populations. - High-cost states: 33% of patients have 4+ conditions - Low-cost states: Only 10% of patients have 4+ conditions - The patient distribution shifts right in high-cost states — more people pile up at 4, 5, 6+ conditions - This isn't just about treatment costs — it's about prevention failures **Implication:** High-cost states need better upstream prevention. Low-cost states are succeeding at keeping patients healthier. --- ## The Bottom Line **1. The 4th condition is the tipping point.** Before it, costs are manageable. After it, they spiral exponentially. **2. Prevention is cheaper than treatment.** Keeping patients at 3 conditions vs. letting them reach 4 saves $15,000/patient/year. **3. We know who's at risk.** Age + condition count predicts high-cost status with remarkable accuracy. **4. Geography matters.** High-cost states aren't just spending more — they're failing at prevention. **5. It's not random.** The cascade follows predictable patterns. We have the data. 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)

`47:Ta3b,processedBeneficiaries = { const data = await beneficiaryData; console.log("Raw data loaded:", data.length, "records"); const validData = data.filter(d => d.BENE_BIRTH_DT && (d.BENE_DEATH_DT === "" || d.BENE_DEATH_DT === "0") ); console.log("Living patients:", validData.length, "records"); const processed = validData.map((d, i) => { const birthYear = parseInt(d.BENE_BIRTH_DT.toString().substring(0, 4)); const age = 2008 - birthYear; const conditionFlags = [ d.SP_ALZHDMTA === "1" ? 1 : 0, d.SP_CHF === "1" ? 1 : 0, d.SP_CHRNKIDN === "1" ? 1 : 0, d.SP_CNCR === "1" ? 1 : 0, d.SP_COPD === "1" ? 1 : 0, d.SP_DEPRESSN === "1" ? 1 : 0, d.SP_DIABETES === "1" ? 1 : 0, d.SP_ISCHMCHT === "1" ? 1 : 0, d.SP_OSTEOPRS === "1" ? 1 : 0, d.SP_RA_OA === "1" ? 1 : 0, d.SP_STRKETIA === "1" ? 1 : 0 ]; const conditionCount = conditionFlags.reduce((sum, val) => sum + val, 0); 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; 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+"; 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", 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], ipCost: ipCost, opCost: opCost, carrierCost: carrierCost, totalCost: totalCost }; }); const final = processed.filter(d => d.age >= 65 && d.age <= 110 && d.totalCost >= 0 ); console.log("✅ Final processed records:", final.length); return final; }48:T4e2,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, 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) .sort((a, b) => b.avgCost - a.avgCost); console.log("✅ State aggregates:", result.length, "states"); return result; }49:T520,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"], // Add unmapped codes as "Unknown" regions ["03", "Unknown Region 03"], ["07", "Unknown Region 07"], ["14", "Unknown Region 14"], ["43", "Unknown Region 43"], ["52", "Unknown Region 52"] ])4a:T5e2,chartData = { const data = await filteredBeneficiaries; let groupKey; let sortKey; if (groupBy === "Conditions") { groupKey = d => d.conditionCount; sortKey = (a, b) => a.group - b.group; } else if (groupBy === "Age Group") { groupKey = d => d.ageGroup; const ageOrder = ["65-69", "70-74", "75-79", "80-84", "85+"]; sortKey = (a, b) => ageOrder.indexOf(a.group) - ageOrder.indexOf(b.group); } else if (groupBy === "Sex") { groupKey = d => d.sex; sortKey = (a, b) => a.group.localeCompare(b.group); } else { groupKey = d => `${d.ageGroup}, ${d.conditionCount}cond`; sortKey = (a, b) => a.group.localeCompare(b.group); } 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) }), groupKey ); const result = Array.from(grouped, ([group, stats]) => ({ group, ...stats })).sort(sortKey); result.forEach((d, i) => { if (i === 0) { d.incrementalCost = d.avgCost; } else { d.incrementalCost = d.avgCost - result[i - 1].avgCost; } }); console.log("✅ Chart data prepared:", result.length, "groups"); return result; }4b:[] 2f:{"id":"d845c9aeb40509e5","slug":null,"title":"Healthcare Cost Analysis : Understanding the Drivers of Medical Expenses","thumbnail":"e734d123935673869d11642a9b576e021a2c2a056a2db4f6aea2b4c37b244eb0","access_level":"public","create_time":"$D2025-12-12T17:03:26.766Z","update_time":"$D2025-12-12T21:13:47.577Z","view_time":null,"first_public_time":"$D2025-12-12T21:09:12.620Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"bef7d7e15c999b8e","login":"ap36","name":"AP","avatar_url":"https://avatars-next.observableusercontent.com/255080bb8e8f92d6ec546ad87ef534f11ff7d4f0591b0494ec1a787512268d3f","tier":"starter_2024"},"version":414,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Healthcare Cost Analysis : Understanding the Drivers of Medical Expenses","cells":[{"id":0,"value":"md`# Healthcare Cost Analysis : Understanding the Drivers of Medical Expenses\nAayush Prranav Chandrashekar ( ac 11929 )\n\n

The Invisible Epidemic

\n 40 million Americans have 4+ chronic conditions.
\n They account for $400+ billion in Medicare spending annually.

\n Where you live, how conditions accumulate, and who you are all determine whether you become one of them.\n

\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"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":74,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":395,"value":"md`---\n\n# Part 4: State Deep Dive \n\n

Comparing Extremes: High vs. Low Cost States

\n We've seen that geography matters. But what makes high-cost states different? \n Let's compare the top 3 most expensive states with the 3 least expensive to understand the patterns.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"md`## Which Conditions Drive Costs?\n\n

\n Not all chronic conditions are created equal. Some drive costs far more than others. \n Understanding which conditions are most expensive helps prioritize prevention efforts.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof filterSex = Inputs.radio(\n [\"All\", \"Male\", \"Female\"],\n {\n label: html`Filter by Sex:`,\n value: \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof filterAgeGroup = Inputs.select(\n [\"All\", \"65-69\", \"70-74\", \"75-79\", \"80-84\", \"85+\"],\n {\n label: html` Filter by Age:`,\n value: \"All\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"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":109,"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":111,"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":319,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"md`## Dangerous Combinations: Which Conditions Cluster Together?\n\n

\n Chronic conditions don't occur in isolation. Some combinations are particularly common — and particularly expensive. \n Understanding these dangerous pairings helps identify patients at highest risk.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"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":135,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":304,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`# Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"beneficiaryData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"beneficiaryData = 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 return data;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"inpatientData = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"outpatientData = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"usStates = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"enrichedBeneficiaries = {\n const data = await processedBeneficiaries;\n \n console.log(\"Enriching\", data.length, \"beneficiaries\");\n \n const sorted = [...data].sort((a, b) => b.totalCost - a.totalCost);\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 \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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"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":47,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"stateNameToCode = 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":59,"value":"stateLookupByName = {\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":62,"value":"costColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain(d3.extent(data, d => d.avgCost))\n .interpolator(d3.interpolateBlues);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"conditionColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain([0, d3.max(data, d => d.pctWith4Plus)])\n .interpolator(d3.interpolateBlues);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"highCostPctColorScale = {\n const data = await stateAggregates;\n return d3.scaleSequential()\n .domain([0, d3.max(data, d => d.highCostPct)])\n .interpolator(d3.interpolateBlues);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"conditionCostData = {\n const data = await enrichedBeneficiaries;\n \n const grouped = d3.rollup(\n data,\n v => ({\n count: v.length,\n avgCost: d3.mean(v, d => d.totalCost),\n medianCost: d3.median(v, d => d.totalCost),\n minCost: d3.min(v, d => d.totalCost),\n maxCost: d3.max(v, d => d.totalCost),\n stdDev: d3.deviation(v, d => d.totalCost),\n highCostPct: (v.filter(d => d.isHighCost).length / v.length) * 100,\n totalSpending: d3.sum(v, d => d.totalCost)\n }),\n d => d.conditionCount\n );\n \n const result = Array.from(grouped, ([conditions, stats]) => ({\n conditions,\n ...stats\n })).sort((a, b) => a.conditions - b.conditions);\n \n result.forEach((d, i) => {\n if (i === 0) {\n d.incrementalCost = d.avgCost;\n } else {\n d.incrementalCost = d.avgCost - result[i - 1].avgCost;\n }\n });\n \n console.log(\"✅ Condition cost data:\", result.length, \"groups\");\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"filteredBeneficiaries = {\n const data = await enrichedBeneficiaries;\n \n let filtered = data;\n \n if (filterSex !== \"All\") {\n filtered = filtered.filter(d => d.sex === filterSex);\n }\n \n if (filterAgeGroup !== \"All\") {\n filtered = filtered.filter(d => d.ageGroup === filterAgeGroup);\n }\n \n console.log(`✅ Filtered to ${filtered.length} patients (${filterSex}, ${filterAgeGroup})`);\n return filtered;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof groupBy = Inputs.radio(\n [\"Conditions\", \"Age Group\", \"Sex\", \"Age × Conditions\"],\n {\n label: html`🔍 Group By:`,\n value: \"Conditions\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"heatmapData = {\n const data = await enrichedBeneficiaries;\n \n const ageGroups = [\"65-69\", \"70-74\", \"75-79\", \"80-84\", \"85+\"];\n const conditionGroups = [\"0\", \"1-3\", \"4+\"];\n \n const result = [];\n \n ageGroups.forEach(ageGroup => {\n conditionGroups.forEach(conditionGroup => {\n const patients = data.filter(d => \n d.ageGroup === ageGroup && \n d.conditionGroup === conditionGroup\n );\n \n if (patients.length > 0) {\n const highCostCount = patients.filter(d => d.isHighCost).length;\n const highCostPct = (highCostCount / patients.length) * 100;\n \n result.push({\n ageGroup,\n conditionGroup,\n count: patients.length,\n avgCost: d3.mean(patients, d => d.totalCost),\n medianCost: d3.median(patients, d => d.totalCost),\n highCostCount,\n highCostPct,\n patients: patients\n });\n }\n });\n });\n \n console.log(\"✅ Heatmap data:\", result.length, \"cells\");\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"mutable selectedHeatmapCell = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1","titling":"auto"}} 30:"$2f:body"