Can people afford to live in North Meck?

viewof rentTown = townChips(masterTown)
{
  showTown(rentTown, "#rent-chart-host");
  const data = byTown(rentIncome, rentTown);
  return responsive(width => stdPlot({
    width, height: 360, marginLeft: 70, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Median rent ($/mo)", labelOffset: 52, grid: true, tickFormat: fmtDollar, domain: niceDomain(data.map(d => d.median_rent), 200, {zero: true, pad: 200})},
    color: townColor({legend: rentTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "median_rent", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "median_rent", fill: "town", r: 4, tip: true, title: d => `${d.town}\n${d.year}\n$${d.median_rent.toLocaleString()}/mo`}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

{
  const benchmark = housingWage.find(d => d.category === "Benchmark").hourly_wage;
  const occs = housingWage.filter(d => d.category === "Occupation").sort((a, b) => b.hourly_wage - a.hourly_wage);
  const domain = occs.map(d => d.occupation);
  return responsive(width => stdPlot({
    width, marginBottom: 30,
    x: {label: "Hourly Wage ($)", grid: true, tickFormat: d => "$" + d},
    y: {domain, label: null},
    marks: [
      Plot.barX(occs, {x: "hourly_wage", y: "occupation", fill: "#e07b39", rx: 3}),
      Plot.ruleX([benchmark], {stroke: "#1d3557", strokeWidth: 2, strokeDasharray: "5,3"}),
      Plot.text([{x: benchmark, label: `Housing wage\n$${benchmark.toFixed(2)}/hr`}], {x: "x", y: () => domain[0], text: "label", textAnchor: "start", dx: 6, dy: -18, fontSize: 11, fill: "#1d3557", fontWeight: 600}),
      Plot.text(occs, {x: "hourly_wage", y: "occupation", text: d => "$" + d.hourly_wage.toFixed(2), textAnchor: "start", dx: 5, fontSize: 11, fill: "#333"})
    ]
  }), {invalidation});
}

{
  const bedroomOrder = ["Studio", "1-Bedroom", "2-Bedroom", "3-Bedroom", "4-Bedroom"];
  const regionOrder = ["Charlotte", "Raleigh", "Atlanta"];
  return responsive(width => stdPlot({
    width, marginLeft: 50, marginBottom: 60,
    fx: {domain: bedroomOrder, label: null, tickSize: 0, padding: 0.12},
    // Regions are named in the color legend; per-bar labels collide on narrow screens.
    x: {domain: regionOrder, axis: null},
    y: {label: "Monthly Rent ($)", grid: true, tickFormat: fmtDollar, domain: [0, 3200]},
    color: {domain: regionOrder, range: ["#2a6041", "#e07b39", "#3f6ba3"], legend: true},
    marks: [
      Plot.barY(fmrBedroom, {fx: "bedrooms", x: "region", y: "fmr", fill: "region", tip: true}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

{
  const amiOrder = ["30% AMI", "50% AMI", "80% AMI", "100% AMI"];
  const bedroomOrder = ["Studio", "1-BR", "2-BR", "3-BR", "4-BR"];
  const bedroomMap = {"Studio": "Studio", "1-Bedroom": "1-BR", "2-Bedroom": "2-BR", "3-Bedroom": "3-BR", "4-Bedroom": "4-BR"};
  // Compound x key ("30% AMI|max", "30% AMI|fmr") puts the two bars side by side instead of stacking.
  const xDomain = amiOrder.flatMap(a => [a + "|max", a + "|fmr"]);
  const paired = amiGap.flatMap(d => {
    const br = bedroomMap[d.bedrooms] || d.bedrooms;
    return [
      {bedrooms: br, ami_level: d.ami_level, xk: d.ami_level + "|max", type: "Max Affordable Rent", value: d.max_affordable_rent},
      {bedrooms: br, ami_level: d.ami_level, xk: d.ami_level + "|fmr", type: "Fair Market Rent", value: d.fmr}
    ];
  });
  return responsive(width => stdPlot({
    width, height: 400, marginLeft: 60, marginBottom: 55, marginTop: 30,
    fx: {domain: bedroomOrder, label: null, tickSize: 0, padding: 0.15},
    x: {domain: xDomain, label: null, tickSize: 0, tickFormat: d => d.endsWith("|max") ? d.replace("|max", "").replace(" AMI", "") : ""},
    y: {label: "Monthly Rent ($)", grid: true, tickFormat: fmtDollar, domain: [0, 3400]},
    color: {domain: ["Max Affordable Rent", "Fair Market Rent"], range: ["#2a8c6a", "#e07b39"], legend: true},
    marks: [
      Plot.barY(paired, {x: "xk", y: "value", fx: "bedrooms", fill: "type", tip: true, title: d => `${d.bedrooms} · ${d.ami_level}\n${d.type}: $${d.value.toLocaleString()}`}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

viewof popTown = townChips(masterTown)
{
  showTown(popTown, "#population-chart-host");
  const data = byTown(population, popTown);
  return responsive(width => stdPlot({
    width, height: 340, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Total population", labelOffset: 78, grid: true, tickFormat: d => (d / 1000).toFixed(0) + "k", domain: niceDomain(data.map(d => d.population), 5000, {zero: true, pad: 5000})},
    color: townColor({legend: popTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "population", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "population", fill: "town", r: 4, tip: true, title: d => `${d.town}\n${d.year}\n${d.population.toLocaleString()} residents`}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

{
  const order = ["Single-family", "Small multifamily (2-4 units)", "Large multifamily (5+ units)", "Mobile / other"];
  const colors = ["#5a9e8f", "#f0a500", "#3f4e75", "#e8a598"];
  return responsive(width => stdPlot({
    width, height: masterTown === "All" ? 220 : 140, marginLeft: 90, marginBottom: 50,
    x: {label: "Share of units", labelOffset: 45, tickFormat: d => d + "%", domain: [0, 100]},
    y: {label: null},
    color: {legend: true, domain: order, range: colors},
    marks: [
      Plot.barX(byTown(housingTypes, masterTown), {x: "pct", y: "town", fill: "bucket", order, tip: true, title: d => `${d.town}\n${d.bucket}: ${d.pct}% (${d.count.toLocaleString()} units)`}),
      Plot.ruleX([0])
    ]
  }), {invalidation});
}

viewof sevTown = townChips(masterTown)
{
  showTown(sevTown, "#severely-burdened-host");
  const data = byTown(severeBurden, sevTown);
  return responsive(width => stdPlot({
    width, height: 320, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Severely burdened households", labelOffset: 78, grid: true, tickFormat: d => d.toLocaleString(), domain: niceDomain(data.map(d => d.severely_cost_burdened_households), 200, {zero: true, pad: 200})},
    color: townColor({legend: sevTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "severely_cost_burdened_households", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "severely_cost_burdened_households", fill: "town", r: 4, tip: true, title: d => `${d.town} · ${d.year}\n${d.severely_cost_burdened_households.toLocaleString()} severely burdened households`}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

SEGMENTS = ["Below FPL", "ALICE", "Above ALICE threshold"]
SEG_COLORS = ["#e05c4b", "#f0a500", "#3f4e75"]
segmentRows = (d, label) => [
  {label, segment: "Below FPL", pct: d.poverty_households / d.total_households * 100, n: d.poverty_households},
  {label, segment: "ALICE", pct: d.alice_households / d.total_households * 100, n: d.alice_households},
  {label, segment: "Above ALICE threshold", pct: d.above_alice_households / d.total_households * 100, n: d.above_alice_households}
]
{
  const latestYear = Math.max(...aliceCounty.map(d => d.year));
  const latest = aliceCounty.find(d => d.year === latestYear);
  const long = segmentRows(latest, latest.county);
  return responsive(width => stdPlot({
    width, height: 140, marginBottom: 40,
    x: {label: "Share of households", labelOffset: 35, tickFormat: d => d.toFixed(0) + "%", domain: [0, 100]},
    y: {label: null},
    color: {domain: SEGMENTS, range: SEG_COLORS, legend: true},
    marks: [
      Plot.barX(long, Plot.stackX({order: SEGMENTS, x: "pct", y: "label", fill: "segment", tip: true, title: d => `${d.label} · ${latestYear}\n${d.segment}: ${d.pct.toFixed(1)}% (${d.n.toLocaleString()} households)`})),
      Plot.ruleX([0])
    ]
  }), {invalidation});
}

viewof raceView = chips([{label: "Ownership rate", value: "ownership"}, {label: "Raw counts", value: "counts"}], {label: "View:", style: "margin-bottom:6px"})
viewof raceTown = townChips(masterTown)
{
  showTown(raceTown, "#race-chart-host");
  const CORE = ["White, not Hispanic", "Black or African American", "Hispanic or Latino", "Asian", "Two or more races"];
  const filtered = byTown(raceTenure.filter(d => CORE.includes(d.race)), raceTown);
  if (raceView === "ownership") {
    return responsive(width => stdPlot({
      width, height: 320, marginLeft: 200, marginBottom: 50,
      x: {label: "Ownership rate (%)", labelOffset: 45, domain: [0, 105], grid: true},
      y: {label: null, domain: [...CORE].reverse()},
      color: townColor({legend: true}),
      marks: [
        Plot.barX(filtered, Plot.groupY({x: "mean"}, {x: "ownership_rate", y: "race", fill: "town", tip: true, title: d => `${d.race}\n${d.town}\n${d.ownership_rate}% own`})),
        Plot.ruleX([0])
      ]
    }), {invalidation});
  }
  const stacked = filtered.flatMap(d => [
    {town: d.town, race: d.race, tenure: "Owner", count: d.owner},
    {town: d.town, race: d.race, tenure: "Renter", count: d.renter}
  ]);
  const isAll = raceTown === "All";
  return responsive(width => stdPlot({
    width, height: isAll ? 900 : 320, marginLeft: 180, marginRight: isAll ? 110 : 20, marginBottom: 50,
    x: {label: "Households", labelOffset: 45, grid: true},
    y: {label: null, domain: [...CORE].reverse()},
    color: {domain: ["Owner", "Renter"], range: ["#3f4e75", "#e05c4b"], legend: true},
    ...(isAll ? {facet: {data: stacked, y: "town", label: null}, fy: {axis: "right", label: null, tickSize: 0, tickPadding: 10}} : {}),
    marks: [
      Plot.barX(stacked, {x: "count", y: "race", fill: "tenure", offset: "normalize", tip: true, title: d => `${d.race} · ${d.tenure}\n${d.count.toLocaleString()} HH`}),
      Plot.ruleX([0])
    ]
  }), {invalidation});
}

viewof raceCompTown = townChips(masterTown)
{
  showTown(raceCompTown, "#race-comp-host");
  // Race groups the warehouse may provide. A group whose column is missing
  // (null in the data) isn't drawn; everyone not counted in a drawn group
  // becomes "Other or multiracial", so each bar adds up to 100%.
  const GROUPS = [
    ["White", "white", "#3f4e75"], ["Black", "black", "#e05c4b"], ["Asian", "asian", "#5a9e8f"],
    ["Two or More Races", "two_more", "#f0a500"], ["Some Other Race", "other", "#a0522d"],
    ["American Indian/Alaska Native", "native", "#7a9e4e"], ["Native Hawaiian/Pacific Islander", "nhpi", "#b07bbf"]
  ].filter(([, col]) => raceComposition.every(r => r[col] != null));
  const OTHER = ["Other or multiracial", null, "#b8b8b8"];
  const all = raceComposition.flatMap(r => {
    const total = r.total || 1;
    const rows = GROUPS.map(([race, col]) => ({town: r.town, race, count: r[col]}));
    const rest = Math.max(0, total - rows.reduce((sum, d) => sum + d.count, 0));
    if (rest / total > 0.001) rows.push({town: r.town, race: OTHER[0], count: rest});
    return rows.map(d => ({...d, pct: Math.round(d.count / total * 1000) / 10}));
  });
  const shown = [...GROUPS, OTHER].filter(([race]) => all.some(d => d.race === race));
  const RACE_ORDER = shown.map(g => g[0]);
  const RACE_COLORS = shown.map(g => g[2]);
  const data = byTown(all, raceCompTown);
  const nTowns = new Set(data.map(d => d.town)).size;
  return responsive(width => stdPlot({
    width, height: Math.max(120, nTowns * 60 + 80), marginLeft: 90, marginBottom: 50,
    x: {label: "Share of population", labelOffset: 45, tickFormat: d => d + "%", domain: [0, 100]},
    y: {label: null},
    color: {legend: true, domain: RACE_ORDER, range: RACE_COLORS},
    marks: [
      Plot.barX(data, {x: "pct", y: "town", fill: "race", order: RACE_ORDER, tip: true, title: d => `${d.town}\n${d.race}: ${d.pct}% (${d.count.toLocaleString()})`}),
      Plot.ruleX([0])
    ]
  }), {invalidation});
}

viewof raceTrendTown = townChips(masterTown, {includeAll: false})
viewof raceTrendRaces = chips(["White", "Black", "Asian", "Other or multiracial", "Hispanic or Latino"], {label: "Race:", multiple: true, style: "margin-bottom:14px"})
{
  showTown(raceTrendTown, "#race-trend-chart-host");
  const RACES = ["White", "Black", "Asian", "Other or multiracial", "Hispanic or Latino"];
  const long = raceTrend.flatMap(d => {
    const t = d.total || 1;
    // Hispanic or Latino is an ethnicity, counted within the race groups, so
    // it isn't subtracted here: "Other" is everyone not White, Black, or Asian alone.
    const other = Math.max(0, d.total - d.white - d.black - d.asian);
    return [
      {town: d.town, year: d.year, race: "White", pct: d.white / t * 100},
      {town: d.town, year: d.year, race: "Black", pct: d.black / t * 100},
      {town: d.town, year: d.year, race: "Hispanic or Latino", pct: d.hispanic / t * 100},
      {town: d.town, year: d.year, race: "Asian", pct: d.asian / t * 100},
      {town: d.town, year: d.year, race: "Other or multiracial", pct: other / t * 100}
    ];
  });
  const subset = long.filter(d => d.town === raceTrendTown && raceTrendRaces.includes(d.race));
  return responsive(width => stdPlot({
    width, height: 320, marginBottom: 50,
    x: yearAxis({labelOffset: 45}),
    y: {label: "Share of population (%)", labelOffset: 78, grid: true, tickFormat: d => d.toFixed(0) + "%"},
    color: {domain: RACES, range: ["#3f4e75", "#e05c4b", "#5a9e8f", "#aaa", "#f0a500"], legend: true},
    marks: [
      Plot.ruleY([100], {stroke: "#aaa", strokeDasharray: "4,3"}),
      Plot.line(subset, {x: "year", y: "pct", stroke: "race", strokeWidth: 2.5}),
      Plot.dot(subset, {x: "year", y: "pct", fill: "race", r: 5, tip: true, title: d => `${d.race}\n${d.year}\n${d.pct.toFixed(1)}%`})
    ]
  }), {invalidation});
}

viewof incomeTown = chips(["All", ...TOWNS], {value: masterTown, style: "margin:10px 0 4px"})
{
  showTown(incomeTown, "#median-income-chart-host");
  const data = byTown(incomeTrend, incomeTown);
  return responsive(width => stdPlot({
    width, height: 340, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Median household income", labelOffset: 78, grid: true, tickFormat: fmtK, domain: niceDomain(data.map(d => d.income), 10000, {pad: 10000})},
    color: townColor({legend: incomeTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "income", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "income", fill: "town", r: 4, tip: true, title: d => `${d.town}\n${d.year}\n$${d.income.toLocaleString()}`}),
      Plot.ruleY([0])
    ]
  }), {invalidation});
}

viewof ptrTrendTown = townChips(masterTown)
{
  showTown(ptrTrendTown, "#ptr-trend-host");
  const data = byTown(giniPtr, ptrTrendTown);
  return responsive(width => stdPlot({
    width, height: 300, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Price-to-income ratio", labelOffset: 78, grid: true, domain: niceDomain(data.map(d => d.ptr), 0.5, {pad: 0.5})},
    color: townColor({legend: ptrTrendTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "ptr", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "ptr", fill: "town", r: 4, tip: true, title: d => `${d.town}\n${d.year}\n${d.ptr}× annual income`}),
      Plot.ruleY([3], {stroke: "#aaa", strokeDasharray: "4,3"}),
      Plot.text([{x: 2024, y: 3}], {x: "x", y: "y", text: () => "3× rule of thumb", textAnchor: "start", dx: 8, fontSize: 11, fill: "#999"})
    ]
  }), {invalidation});
}

viewof giniTown = chips(["All", ...TOWNS], {value: masterTown, style: "margin:10px 0 4px"})
{
  showTown(giniTown, "#gini-chart-host");
  const data = byTown(giniPtr, giniTown);
  return responsive(width => stdPlot({
    width, height: 300, marginBottom: 55,
    x: yearAxis(),
    y: {label: "Gini coefficient", labelOffset: 78, grid: true, domain: [0.35, 0.56]},
    color: townColor({legend: giniTown === "All"}),
    marks: [
      Plot.line(data, {x: "year", y: "gini", stroke: "town", strokeWidth: 2.5}),
      Plot.dot(data, {x: "year", y: "gini", fill: "town", r: 4, tip: true, title: d => `${d.town}\n${d.year}\nGini: ${d.gini}`}),
      Plot.ruleY([US_GINI], {stroke: "#aaa", strokeDasharray: "4,3"}),
      Plot.text([{x: 2024, y: US_GINI}], {x: "x", y: "y", text: () => `U.S. ${US_GINI.toFixed(2)}`, textAnchor: "start", dx: 8, fontSize: 11, fill: "#999"})
    ]
  }), {invalidation});
}