31:T604,legend_forecast_metro = { const last_column_name = forecast_map_metro; // uses the selected forecast column const totalWidth = 280, height = 60; const margin = { left: 12, right: 12 }; const width = totalWidth - margin.left - margin.right; const min = -6, max = 6; const numStops = 10; const svg = d3.create("svg") .attr("width", totalWidth) .attr("height", height); svg.append("text") .attr("x", totalWidth / 2) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(`Zillow Home Price Change (${last_column_name})`); const gradient = svg.append("defs") .append("linearGradient") .attr("id", "gradientId") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "100%").attr("y2", "0%"); for (let i = 0; i <= numStops; i++) { const t = i / numStops; gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", d3.interpolateRdBu(t)); } const rectHeight = 15; const axisY = 40; svg.append("rect") .attr("x", margin.left) .attr("y", axisY - rectHeight) .attr("width", width) .attr("height", rectHeight) .style("fill", "url(#gradientId)"); const xScale = d3.scaleLinear() .domain([min, max]) .range([margin.left, margin.left + width]); const xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat(d => `${d.toFixed(1)}%`); svg.append("g") .attr("transform", `translate(0, ${axisY})`) .call(xAxis); return svg.node(); } 32:T1dcf,usMetros = { // Current forecast variable selected by the user const currentForecastDate = forecast_map_metro; // Determine if it's the YoY option (last column in filteredMetroData) const lastFilteredCol = (filteredMetroData.columns || Object.keys(filteredMetroData[0])).slice(-1)[0]; const isYoY = currentForecastDate === lastFilteredCol; // Pick the right dataset const sourceData = isYoY ? filteredMetroData : forecast_metro; // Create forecast lookup table const forecastLookup = new Map( sourceData.map(d => [d.RegionName, +d[currentForecastDate]]) ); // Color scale const colorScale = d3.scaleDiverging() .domain([-6, 0, 6]) .interpolator(d3.interpolateRdBu); const viewbox = { minX: 0, minY: 0, width: 955, height: 610 }; const svg = d3.create("svg") .attr("viewBox", [viewbox.minX, viewbox.minY, viewbox.width, viewbox.height]); const sharedBorderFilter = (a, b) => a !== b; svg.append("g") .selectAll("path") .data(topojson.feature(usTopoJsonWithMetros, usTopoJsonWithMetros.objects.states).features) .join("path") .attr("d", d3.geoPath()) .attr("fill", "#e5e5e5"); svg.append("path") .datum(topojson.mesh(usTopoJsonWithMetros, usTopoJsonWithMetros.objects.states, sharedBorderFilter)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", d3.geoPath()); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("background", "white") .style("padding", "6px") .style("border", "1px solid #aaa") .style("border-radius", "4px") .style("pointer-events", "none") .style("visibility", "hidden"); function simplifyMetroName(fullId) { const manualOverrides = { "Chicago-Naperville-Elgin, IL-IN-WI": "Chicago, IL", "New York-Newark-Jersey City, NY-NJ-PA": "New York, NY", "St. Louis, MO-IL": "St. Louis, MO", "Philadelphia-Camden-Wilmington, PA-NJ-DE-MD": "Philadelphia, PA", "Portland-Vancouver-Hillsboro, OR-WA": "Portland, OR", "Duluth, MN-WI": "Duluth, MN", "Evansville, IN-KY": "Evansville, IN", "Fargo, ND-MN": "Fargo, ND", "Cape Girardeau, MO-IL": "Cape Girardeau, MO", "Worcester, MA-CT": "Worcester, MA", "Chattanooga, TN-GA": "Chattanooga, TN", "Logan, UT-ID": "Logan, UT", "South Bend-Mishawaka, IN-MI": "South Bend, IN", "Lewiston, ID-WA": "Lewiston, ID", "St. Joseph, MO-KS": "St. Joseph, MO", "Columbus, GA-AL": "Columbus, GA", "Dayton-Kettering, OH": "Dayton-Kettering, OH", "Kingsport-Bristol, TN-VA": "Kingsport, TN", "Winchester, VA-WV": "Winchester, VA", "Cumberland, MD-WV": "Cumberland, MD", "Hagerstown-Martinsburg, MD-WV": "Hagerstown, MD", "Davenport-Moline-Rock Island, IA-IL": "Davenport, IA", "Minneapolis-St. Paul-Bloomington, MN-WI": "Minneapolis, MN", "Charlotte-Concord-Gastonia, NC-SC": "Charlotte, NC", "Memphis, TN-MS-AR": "Memphis, TN", "Kansas City, MO-KS": "Kansas City, MO", "Weirton-Steubenville, WV-OH": "Weirton, WV", "La Crosse-Onalaska, WI-MN": "La Crosse, WI", "Virginia Beach-Norfolk-Newport News, VA-NC": "Virginia Beach, VA", "Sioux City, IA-NE-SD": "Sioux City, IA", "Cincinnati, OH-KY-IN": "Cincinnati, OH", "Wheeling, WV-OH": "Wheeling, WV", "Allentown-Bethlehem-Easton, PA-NJ": "Allentown, PA", "Myrtle Beach-Conway-North Myrtle Beach, SC-NC": "Myrtle Beach, SC", "Fort Smith, AR-OK": "Fort Smith, AR", "Texarkana, TX-AR": "Texarkana, TX", "Salisbury, MD-DE": "Salisbury, MD", "Clarksville, TN-KY": "Clarksville, TN", "Poughkeepsie-Newburgh-Middletown, NY": "Hudson, NY", "Omaha-Council Bluffs, NE-IA": "Omaha, NE", "Washington-Arlington-Alexandria, DC-VA-MD-WV": "Washington, DC", "Grand Forks, ND-MN": "Grand Forks, ND", "Prescott Valley-Prescott, AZ": "Show Low, AZ", "Louisville/Jefferson County, KY-IN": "Louisville, KY", "Augusta-Richmond County, GA-SC": "Augusta, GA", "Providence-Warwick, RI-MA": "Providence, RI", "Huntington-Ashland, WV-KY-OH": "Huntington, WV", "Youngstown-Warren-Boardman, OH-PA": "Youngstown, OH", "Boston-Cambridge-Newton, MA-NH": "Boston, MA" }; if (manualOverrides[fullId]) return manualOverrides[fullId]; if (fullId.includes("-")) { const firstCity = fullId.split("-")[0]; const statePart = fullId.substring(fullId.indexOf(",")); return firstCity + statePart; } return fullId; } svg.append("g") .selectAll("path") .data(topojson.feature(usTopoJsonWithMetros, usTopoJsonWithMetros.objects.metros).features) .join("path") .attr("d", d3.geoPath()) .attr("fill", d => { const simpleName = simplifyMetroName(d.id); const val = forecastLookup.get(simpleName); return val != null ? colorScale(val) : "#ccc"; }) .attr("stroke", "#333") .attr("stroke-width", 0.4) .on("mouseover", (event, d) => { const simpleName = simplifyMetroName(d.id); const val = forecastLookup.get(simpleName); tooltip.html(` Metro: ${simpleName}
(${currentForecastDate}): ${val != null ? val.toFixed(2) + "%" : "N/A"} `) .style("visibility", "visible") .style("top", (event.pageY + 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mousemove", (event) => { tooltip.style("top", (event.pageY + 10) + "px") .style("left", (event.pageX + 10) + "px"); }) .on("mouseout", () => { tooltip.style("visibility", "hidden"); }); // Add labels as before const labelGroup = svg.append("g"); const largeMetros = new Set([ "New York, NY", "Los Angeles, CA", "Chicago, IL", "Houston, TX", "Phoenix, AZ", "Philadelphia, PA", "Dallas, TX", "Austin, TX", "San Francisco, CA", "Seattle, WA", "Denver, CO", "Washington, DC", "Boston, MA", "Nashville, TN", "Las Vegas, NV", "Miami, FL", "Atlanta, GA" ]); const metroFeatures = topojson.feature(usTopoJsonWithMetros, usTopoJsonWithMetros.objects.metros).features; const path = d3.geoPath(); const filteredMetros = metroFeatures.filter(d => largeMetros.has(simplifyMetroName(d.id))); labelGroup.selectAll("text.metro-label") .data(filteredMetros) .join("text") .attr("class", "metro-label") .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1] - 10) .attr("text-anchor", "middle") .text(d => simplifyMetroName(d.id)) .style("font-size", "9px") .style("font-family", "helvetica") .style("font-weight", "600") .style("fill", "black") .style("stroke", "white") .style("stroke-width", 2) .style("paint-order", "stroke") .style("pointer-events", "none"); labelGroup.selectAll("text.metro-forecast") .data(filteredMetros) .join("text") .attr("class", "metro-forecast") .attr("x", d => path.centroid(d)[0]) .attr("y", d => path.centroid(d)[1]) .attr("text-anchor", "middle") .text(d => { const simpleName = simplifyMetroName(d.id); const val = forecastLookup.get(simpleName); return val != null ? `${val.toFixed(1)}%` : ""; }) .style("font-size", "11px") .style("font-family", "helvetica") .style("font-weight", "bold") .style("fill", "#333") .style("stroke", "white") .style("stroke-width", 2) .style("paint-order", "stroke") .style("pointer-events", "none"); return svg.node(); } 33:Tb0a,viewof forecast_histogram = { const forecastDate = forecast_map_metro; // Determine if it's the YoY option (last column in filteredMetroData) const lastFilteredCol = (filteredMetroData.columns || Object.keys(filteredMetroData[0])).slice(-1)[0]; const isYoY = forecastDate === lastFilteredCol; // Pick the right dataset const sourceData = isYoY ? filteredMetroData : forecast_metro; // Filter MSAs and convert values to 0–1 for percentage display const filtered = sourceData .filter(d => d.RegionType === "msa" && d[forecastDate] != null) .map(d => ({ ...d, [forecastDate]: +d[forecastDate] / 100 })); // Get country-level average (also divide by 100) const countryRow = sourceData.find(d => d.RegionType === "country" && d[forecastDate] != null); const countryValue = countryRow ? +countryRow[forecastDate] / 100 : null; const values = filtered.map(d => d[forecastDate]).sort((a, b) => a - b); const min = values[0]; const max = values[Math.floor(values.length * 0.95)]; const colorDomain = [-0.06, 0, 0.06]; // now in 0–1 scale for % const colorRange = [ "#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac", "#053061" ]; // Build chart const chart = vl .layer( // Histogram vl.markBar() .data(filtered) .encode( vl.x().fieldQ(forecastDate).bin({ maxbins: 30 }) .axis({ format: ".1%", title: `Home Price Change Forecast (${forecastDate})` }), vl.y().count().axis({ title: "Number of MSAs" }), vl.color().fieldQ(forecastDate) .scale({ domain: colorDomain, range: colorRange }) .legend({ title: `Forecast Change`, format: ".0%" }), vl.tooltip([ { field: forecastDate, type: "quantitative", title: "Forecast Change", format: ".1%" }, { aggregate: "count", type: "quantitative", title: "MSA Count" } ]) ), // Vertical Rule countryValue != null ? vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .data([{ [forecastDate]: countryValue }]) .encode(vl.x().fieldQ(forecastDate)) : null, // Text Label countryValue != null ? vl.markText({ color: 'black', align: 'left', dx: 5, dy: -5 }) .data([{ [forecastDate]: countryValue }]) .encode( vl.x().fieldQ(forecastDate), vl.y().value(0), vl.text().value(`US Avg: ${(countryValue * 100).toFixed(1)}%`) ) : null ) .width(window.innerWidth < 800 ? 240 : width / 1.2) .height(220) .config({ view: { stroke: null } }); return chart.title(`MSA Forecast Distribution (${forecastDate})`).render(); } 34:T9e7,{ // Last column in forecast_metro const forecastColumns = Object.keys(forecast_metro[0]); const lastForecastCol = forecastColumns[forecastColumns.length - 1]; // Last two columns in filteredMetroData const columns = Object.keys(filteredMetroData[0]); const yoyCol = columns[columns.length - 1]; // most recent YoY % change // Merge datasets by RegionID const forecastMap = new Map(forecast_metro.map(d => [d.RegionID, +d[lastForecastCol]])); let mergedData = filteredMetroData.map(d => ({ ...d, forecastValue: forecastMap.get(d.RegionID) ?? null })); // Filter by state selection if (state !== "") { mergedData = mergedData.filter(d => d.StateName === state); } // Zoom/pan only const panzoom = vl.selectInterval().bind('scales'); // Create scatter + trend + zero lines const chart = vl.layer( // Points vl.markPoint({ color: 'black', filled: true, size: 50, opacity: 0.7 }) .params(panzoom) .encode( vl.x().fieldQ(yoyCol).title('YoY % Change').scale({ domain: [-0.14, 0.1] }).axis({ format: '.1%' }), vl.y().fieldQ('forecastValue').title('1-Year Forecast').scale({ domain: [-0.14, 0.1] }).axis({ format: '.1%' }), vl.tooltip([ { field: 'RegionName', type: 'nominal', title: 'Metro' }, { field: 'StateName', type: 'nominal', title: 'State' }, { field: yoyCol, type: 'quantitative', title: 'YoY % Change', format: '.1%' }, { field: 'forecastValue', type: 'quantitative', title: '1-Year Forecast', format: '.1%' } ]) ), // Loess / trend line vl.markLine({ color: 'firebrick', size: 3 }) .transform(vl.loess('forecastValue').on(yoyCol).as('x', 'y').bandwidth(0.8)) .encode(vl.x().fieldQ('x'), vl.y().fieldQ('y')), // Horizontal dashed line (y = 0) vl.markRule({ strokeDash: [4, 4], color: '#333' }) .data([{ forecastValue: 0 }]) .encode(vl.y().fieldQ('forecastValue')), // Vertical dashed line (x = 0) vl.markRule({ strokeDash: [4, 4], color: '#333' }) .data([{ [yoyCol]: 0 }]) .encode(vl.x().fieldQ(yoyCol)), // Diagonal y = x line (1:1 slope) vl.markLine({ strokeDash: [4, 4], color: '#666', size: 1 }) .data([{ x: -0.12, y: -0.12 }, { x: 0.08, y: 0.08 }]) .encode(vl.x().fieldQ('x'), vl.y().fieldQ('y')) ).data( mergedData.map(d => ({ ...d, [yoyCol]: d[yoyCol] / 100, forecastValue: d.forecastValue / 100 })) ); return chart.width(width / 1.5).height(450).render(); } 35:T509,viewof mom_declines_top50_msas = { // Filter to top-50 MSAs const metros = filteredMetroData .filter(d => d.RegionType === "msa" && +d.SizeRank <= 30); // Collect and sort the date columns const dateCols = Object.keys(metros[0]) .filter(k => /^\d{4}-\d{2}-\d{2}$/.test(k)) .sort(); // Count, for each month, how many MSAs had a MoM decline const counts = new Map(dateCols.slice(1).map(d => [d, 0])); for (const r of metros) { for (let i = 1; i < dateCols.length; i++) { const prev = +r[dateCols[i - 1]]; const curr = +r[dateCols[i]]; if (!Number.isNaN(prev) && !Number.isNaN(curr) && curr < prev) { counts.set(dateCols[i], (counts.get(dateCols[i]) || 0) + 1); } } } // Tidy data for Vega-Lite const data = Array.from(counts, ([date, count]) => ({ date: new Date(date), count })); const chart = vl .markBar({ size: 3 }) .data(data) .encode( vl.x().fieldT("date") .title("Month") .axis({ format: "%Y" }), vl.y().fieldQ("count").title("Metros with MoM Decline"), vl.tooltip([ vl.fieldT("date"), vl.fieldQ("count"), ]) ) .width(window.innerWidth < 600 ? 300 : width / 1.2) .height(240); return chart.render(); } 36:T7c4,viewof mom_declines_top50_msas2 = { const metros = filteredMetroData .filter(d => d.RegionType === "msa" && +d.SizeRank <= 30); if (!metros.length) return html`

No top-25 MSA rows in filteredMetroData.

`; const dateCols = Object.keys(metros[0]) .filter(k => /^\d{4}-\d{2}-\d{2}$/.test(k)) .sort(); if (dateCols.length < 2) return html`

Not enough monthly columns to compute MoM changes.

`; const thresholds = [0, -0.0025, -0.005, -0.01, -0.02]; const thresholdLabels = ["0 to -0.25%", ">-0.25% to -0.5%", ">-0.5% to -1%", ">-1% to -2%", ">-2%"]; const counts = dateCols.slice(1).map(date => { const obj = { date: new Date(date) }; thresholdLabels.forEach(label => obj[label] = 0); for (const r of metros) { const prev = +r[dateCols[dateCols.indexOf(date) - 1]]; const curr = +r[date]; if (!Number.isNaN(prev) && !Number.isNaN(curr) && prev !== 0) { const mom = (curr - prev) / prev; if (mom <= thresholds[4]) obj[">-2%"] += 1; else if (mom <= thresholds[3]) obj[">-1% to -2%"] += 1; else if (mom <= thresholds[2]) obj[">-0.5% to -1%"] += 1; else if (mom <= thresholds[1]) obj[">-0.25% to -0.5%"] += 1; else if (mom < 0) obj["0 to -0.25%"] += 1; } } return obj; }); const data = []; counts.forEach(d => { thresholdLabels.forEach(label => { data.push({ date: d.date, threshold: label, count: d[label] }); }); }); const chart = vl .markBar({ size: 3 }) .data(data) .encode( vl.x().fieldT("date").axis({ title: "Year" }), vl.y().fieldQ("count").axis({ title: "Metros with MoM Decline" }), vl.color().fieldO("threshold") .scale({ range: ["#ffcccc", "#ff9999", "#ff6666", "#ff3333", "#990000"] }), vl.tooltip([vl.fieldT("date"), vl.fieldQ("count"), vl.fieldO("threshold")]) ) .width(window.innerWidth < 600 ? 300 : width / 1.2) .height(240); return chart.render(); } 37:T80b,viewof mom_increases_top50_msas = { const metros = filteredMetroData .filter(d => d.RegionType === "msa" && +d.SizeRank <= 30); if (!metros.length) return html`

No top-30 MSA rows in filteredMetroData.

`; const dateCols = Object.keys(metros[0]) .filter(k => /^\d{4}-\d{2}-\d{2}$/.test(k)) .sort(); if (dateCols.length < 2) return html`

Not enough monthly columns to compute MoM changes.

`; // Thresholds (smallest increase to largest) const thresholds = [0.0025, 0.005, 0.01, 0.02]; // 0.25%, 0.5%, 1%, 2%+ const thresholdLabels = ["0 to 0.25%", "0.25% to 0.5%", "0.5% to 1%", "1% to 2%", ">2%"]; const counts = dateCols.slice(1).map(date => { const obj = { date: new Date(date) }; thresholdLabels.forEach(label => obj[label] = 0); for (const r of metros) { const prev = +r[dateCols[dateCols.indexOf(date) - 1]]; const curr = +r[date]; if (!Number.isNaN(prev) && !Number.isNaN(curr) && prev !== 0) { const mom = (curr - prev) / prev; if (mom >= thresholds[3]) obj[">2%"] += 1; else if (mom >= thresholds[2]) obj["1% to 2%"] += 1; else if (mom >= thresholds[1]) obj["0.5% to 1%"] += 1; else if (mom >= thresholds[0]) obj["0.25% to 0.5%"] += 1; else if (mom > 0) obj["0 to 0.25%"] += 1; } } return obj; }); const data = []; counts.forEach(d => { thresholdLabels.forEach(label => { data.push({ date: d.date, threshold: label, count: d[label] }); }); }); const chart = vl .markBar({ size: 3 }) .data(data) .encode( vl.x().fieldT("date").axis({ title: "Year" }), vl.y().fieldQ("count").axis({ title: "Metros with MoM Increase" }), vl.color().fieldO("threshold") .scale({ range: ["#cce5ff", "#99ccff", "#66b3ff", "#3385ff", "#003d99"] }), // darker = bigger increase vl.tooltip([vl.fieldT("date"), vl.fieldQ("count"), vl.fieldO("threshold")]) ) .width(window.innerWidth < 600 ? 300 : width / 1.2) .height(240); return chart.render(); } 38:Ta5e,{ // Build valuemap for yoyPctChange const valuemap = new Map(filteredData.map(d => [d.RegionName, d.yoyPctChange])); return Plot.plot({ projection: "identity", width: 975, height: 610, color: { scheme: "RdBu", type: "quantize", n: 9, domain: [-6, 6], tickFormat: d => `${d}%`, label: "Percent Change since Last Year", legend: true }, marks: [ // Fill states with color based on yoyPctChange Plot.geo( topojson.feature(us, us.objects.states), Plot.centroid({ fill: d => { const val = valuemap.get(d.properties.name); return val != null ? val * 100 : undefined; }, title: d => { const val = valuemap.get(d.properties.name); return val != null ? `${d.properties.name}\n${(val * 100).toFixed(1)}%` : d.properties.name; }, tip: true }) ), // State borders Plot.geo( topojson.mesh(us, us.objects.states, (a, b) => a !== b), { stroke: "white" } ), // State abbreviations Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => stateAbbrevMap[d.properties.name] || d.properties.name, fill: d => { const val = valuemap.get(d.properties.name); if (val == null) return "black"; const change = val * 100; return Math.abs(change) > 5 ? "white" : "black"; }, fontSize: 12, textAnchor: "center", dy: -5, dx: 0, paintOrder: "stroke" }) ), // Percent change labels Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => { const val = valuemap.get(d.properties.name); if (val == null) return ""; const pctChange = (val * 100).toFixed(1); return (pctChange > 0 ? "+" : "") + pctChange + "%"; }, fill: d => { const val = valuemap.get(d.properties.name); if (val == null) return "black"; const change = val * 100; return Math.abs(change) > 5 ? "white" : "black"; }, fontWeight: "bold", fontSize: 12, textAnchor: "center", dy: 10, dx: 0, paintOrder: "stroke" }) ) ] }); } 39:T868,viewof forecast_histogram_state = { const columns = Object.keys(filteredData[0]); const lastColumn = columns[columns.length - 1]; const prior_year = columns[columns.length - 13]; const filtered2 = filteredData.filter(d => d[lastColumn] != null); const filtered = filtered2.map(d => ({ ...d, [lastColumn]: +d[lastColumn] })); const values = filtered.map(d => d[lastColumn]).sort((a, b) => a - b); const min = values[0]; const max = values[Math.floor(values.length * 0.95)]; const colorDomain = [-0.06, 0, 0.06]; const colorRange = [ "#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac", "#053061" ]; const avgValue = filtered.reduce((sum, d) => sum + d[lastColumn], 0) / filtered.length; const chart = vl .layer( // Histogram bars vl.markBar() .data(filtered) .encode( vl.x().fieldQ(lastColumn).bin({ maxbins: 30 }).axis({ format: ".1%", title: "Home Price Change Forecast" }), vl.y().count().axis({ title: "Number of State" }), vl.color().fieldQ(lastColumn).scale({ domain: colorDomain, range: colorRange }).legend({ title: `Forecast Change`, format: ".0%" }), vl.tooltip([ { field: lastColumn, type: "quantitative", title: "Price Change", format: ".1%" }, { aggregate: "count", type: "quantitative", title: "State Count" } ]) ), // Vertical average line vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .data([{ [lastColumn]: avgValue }]) .encode(vl.x().fieldQ(lastColumn)), // Label for average line vl.markText({ color: 'black', align: 'left', dx: 5, dy: -5 }) .data([{ [lastColumn]: avgValue }]) .encode( vl.x().fieldQ(lastColumn), vl.y().value(0), vl.text().value(`Avg: ${(avgValue * 100).toFixed(1)}%`) ) ) .width(window.innerWidth < 800 ? 240 : width / 1.2) .height(220) .config({ view: { stroke: null } }); return chart.title(`State Home Price Change Distribution (Since Last Year)`).render(); } 3a:T673,viewof chart6 = { const columns = Object.keys(filteredData[0]); const current_month = columns[columns.length - 1]; const filtered = filteredData.filter(d => d[current_month] != null); const prices = filtered.map(d => +d[current_month]).sort((a, b) => a - b); const minPrice = prices[0]; const maxPrice = prices[Math.floor(prices.length * 0.95)]; const colorDomain = [-0.06, 0, 0.06]; const colorRange = [ "#67001f", "#b2182b", "#d6604d", "#f4a582", "#fddbc7", "#f7f7f7", "#d1e5f0", "#92c5de", "#4393c3", "#2166ac", "#053061" ]; const chartWidth = window.innerWidth < 600 ? 220 : 450; const barchart = vl .data(filtered) .title(`% Change in Avg. Home Price by State`) .layer( vl.markBar().encode( vl.x().fieldQ(current_month).axis({ format: ".1%", title: `YoY Home Price Change` }), vl.y().fieldN('RegionName').title(null), vl.color().fieldQ(current_month).scale({ domain: colorDomain, range: colorRange }).legend({ title: `Forecast Change`, format: ".0%" }), vl.tooltip([ { field: 'RegionName', type: 'nominal', title: 'State' }, { field: current_month, type: 'quantitative', title: 'Price', format: ".1%" } ]) ), vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }).encode( vl.x().fieldQ(current_month).aggregate('median') ), vl.markText({ align: "left", dx: 5, dy: 1 }).encode( vl.x().fieldQ(current_month), vl.y().fieldN('RegionName'), vl.text().fieldQ(current_month).format(".1%") ) ) .width(chartWidth); return vl.vconcat(barchart).render(); } 3b:Tae1,{ // Build valuemap where value is lastVal const valuemap = new Map( filteredData.map(d => { const keys = Object.keys(d); const lastKey = keys[keys.length - 2]; // second-to-last column return [d.RegionName, { yoyPctChange: d.yoyPctChange, lastVal: d[lastKey] }]; }) ); // Extract lastVal for domain const values = Array.from(valuemap.values()) .map(v => v.lastVal) .filter(v => v != null); const minVal = d3.min(values); const maxVal = d3.max(values); const formatDollars = d3.format(",.0f"); // forces integer, no decimals return Plot.plot({ projection: "identity", width: 975, height: 610, color: { scheme: "Greens", type: "quantize", n: 9, domain: [minVal, maxVal], label: "Current Home Price", tickFormat: d => `$${d.toLocaleString(undefined, { maximumFractionDigits: 0 })}`, legend: true }, marks: [ // Fill states based on lastVal Plot.geo( topojson.feature(us, us.objects.states), Plot.centroid({ fill: d => { const obj = valuemap.get(d.properties.name); return obj ? obj.lastVal : undefined; }, title: d => { const obj = valuemap.get(d.properties.name); return obj ? `${d.properties.name}\n$${formatDollars(obj.lastVal)}` : d.properties.name; }, tip: true }) ), // State borders Plot.geo( topojson.mesh(us, us.objects.states, (a, b) => a !== b), { stroke: "white" } ), // State abbreviations Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => stateAbbrevMap[d.properties.name] || d.properties.name, fontSize: 12, textAnchor: "center", dy: -5 }) ), // Dollar value labels Plot.text( topojson.feature(us, us.objects.states).features.filter( d => !northeastStates.has(d.properties.name) ), Plot.centroid({ text: d => { const obj = valuemap.get(d.properties.name); return obj ? `$${(obj.lastVal / 1000).toFixed(0)}k` : ""; }, fill: d => { const obj = valuemap.get(d.properties.name); if (!obj) return "black"; // Contrast based on domain midpoint return obj.lastVal < (minVal + maxVal) / 2 ? "white" : "black"; }, fontWeight: "bold", fontSize: 12, textAnchor: "center", dy: 10 }) ) ] }); } 3c:Tb28,viewof chart = { // Get the columns in order const columns = Object.keys(filteredData[0]); // Use the second last column as current_month const current_month = columns[columns.length - 2]; const prices = filteredData.map(d => +d[current_month]).sort((a, b) => a - b); const minPrice = prices[0]; const maxPrice = prices[Math.floor(prices.length * 0.95)]; const colorDomain = [minPrice, (minPrice + maxPrice) / 2, maxPrice]; const colorRange = ['#d0f0c0', '#004d00']; // light green - medium green const chartWidth = window.innerWidth < 600 ? 220 : 450; const histogram = vl.data(filteredData) .title("State Home Price Distribution") .layer( vl.markBar() .encode( vl.x().fieldQ(current_month).bin({ maxbins: 20 }).axis({ format: "$.3s", title: "Price" }), vl.y().count().axis({ orient: 'left' }).title("State Count"), vl.color().fieldQ(current_month).scale({ domain: colorDomain, range: colorRange }).legend({ title: `Price (${current_month})`, format: "$.3s" }), vl.tooltip([ { field: current_month, type: "quantitative", title: "Price", format: "$.3s" }, { aggregate: "count", type: "quantitative", title: "State Count" } ]) ), vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .encode( vl.x().fieldQ(current_month).aggregate('median') ), vl.markText({ color: 'black', align: 'left', dx: 5, dy: -5 }) .encode( vl.x().fieldQ(current_month).aggregate('median'), vl.y().value(0), vl.text().fieldQ(current_month).aggregate('median').format("$.3s") ) ) .width(chartWidth) .height(200) .config({ view: { stroke: null } }); const barchart = vl.data(filteredData) .title(`Average Home Price by State (${current_month})`) .layer( vl.markBar() .encode( vl.x().fieldQ(current_month).axis({ format: "$.3s", title: `Average Home Price (${current_month})` }), vl.y().fieldN('RegionName').title(null), vl.color().fieldQ(current_month).scale({ domain: colorDomain, range: colorRange }), vl.tooltip([ { field: 'RegionName', type: 'nominal', title: 'State' }, { field: current_month, type: 'quantitative', title: 'Price', format: "$.3s" } ]) ), vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .encode( vl.x().fieldQ(current_month).aggregate('median') ), vl.markText({ align: "left", dx: 5, dy: 1 }) .encode( vl.x().fieldQ(current_month), vl.y().fieldN('RegionName'), vl.text().fieldQ(current_month).format("$.3s") ) ) .width(chartWidth); return vl.vconcat(histogram, barchart).render(); } 3d:T82a,function generateForecastTable(forecast_metro, filteredMetroData, forecast_map_metro) { // Determine if the selected column is the YoY column const lastFilteredCol = (filteredMetroData.columns || Object.keys(filteredMetroData[0])).slice(-1)[0]; const isYoY = forecast_map_metro === lastFilteredCol; // Pick the correct dataset const sourceData = isYoY ? filteredMetroData : forecast_metro; // Filter for top 30 MSAs const msaData = sourceData.filter( d => d.RegionType === "msa" && +d.SizeRank <= 30 ); if (!msaData.length) { return html`

No MSA data available

`; } const forecastDate = forecast_map_metro; // Collect data const tableData = msaData.map(d => ({ Metro: d.RegionName, Rank: +d.SizeRank, Forecast: +d[forecastDate] })); // Sort by forecast value ascending tableData.sort((a, b) => d3.ascending(a.Forecast, b.Forecast)); // Find max absolute forecast for scaling bar width const maxAbsForecast = d3.max(tableData, d => Math.abs(d.Forecast)); return html` ${tableData.map(row => { const barWidth = `${(Math.abs(row.Forecast) / maxAbsForecast) * 100}%`; const color = row.Forecast >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; return html``; })}

Metro	Rank	${forecastDate}
${row.Metro}	${row.Rank}	${row.Forecast.toFixed(1)}%

`; } 3e:[{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m (1).json","type":"application/json","lastModified":1754186747236.529,"size":795407}] 2f:{"title":"Zillow Home Price Forecast Dashboard","cells":[{"id":0,"value":"# Zillow Home Price Forecast Dashboard\n\n**Zillow Home Value Index:** All Homes, Smoothed, Seasonally Adjusted\n\n*Source: [Zillow](https://www.zillow.com/research/data/)*","pinned":false,"hidden":false,"mode":"md"},{"id":1262,"value":"viewof forecast_map_metro = {\n // Handle both cases: array of objects or table with .columns\n const forecastCols = (forecast_metro.columns || Object.keys(forecast_metro[0])).slice(-3);\n const filteredCols = (filteredMetroData.columns || Object.keys(filteredMetroData[0]));\n const yoyCol = filteredCols[filteredCols.length - 1]; // last column\n\n const labelMap = {\n 0: \"1 Month\",\n 1: \"3 Month\",\n 2: \"1 Year\",\n 3: \"YoY % Change\"\n };\n\n const options = [\n ...forecastCols.map((col, i) => ({\n label: labelMap[i],\n value: col\n })),\n { label: labelMap[3], value: yoyCol }\n ];\n\n return radio({\n title: \"Forecast\",\n options,\n value: forecastCols[2] // default to \"1 Year\"\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1918,"value":"### Home Price ${forecast_map_metro} (Top-30 MSAs)","pinned":false,"hidden":false,"mode":"md"},{"id":1859,"value":"generateForecastTable(forecast_metro, filteredMetroData, forecast_map_metro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2224,"value":"### 1-Year Forecast and YoY Price Change by MSA","pinned":false,"hidden":false,"mode":"md"},{"id":2270,"value":"viewof state = {\n const type = select({\n title: \"State\",\n options: Array.from(\n new Set(filteredMetroData.map(d => d.StateName))\n )\n .sort()\n .map(d => ({ label: d, value: d })),\n value: \"\"\n });\n type.input.style.fontSize = \"0.8em\";\n return type;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2200,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"

\n## Metros with Price Declines\n*Number of Top-30 MSAs with MoM Price Declines (All Homes, Seasonally Adjusted)*","pinned":false,"hidden":false,"mode":"md"},{"id":1989,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2113,"value":"## Metros with Price Declines by Threshold\n*Number of Top-30 MSAs with MoM Price Declines (All Homes, Seasonally Adjusted)*","pinned":false,"hidden":false,"mode":"md"},{"id":2043,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"## Metros with Price Increases by Threshold\n*Number of Top-30 MSAs with MoM Price Increases (All Homes, Seasonally Adjusted)*","pinned":false,"hidden":false,"mode":"md"},{"id":2137,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"

\n## Change in Avg. Home Price by State\n\n*YoY Percent Change in Home Prices (All Homes, Seasonally Adjusted)*","pinned":false,"hidden":false,"mode":"md"},{"id":1646,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"\n Source: Zillow. Percent change in ZHVI home prices since last year.
\n Map created by Bobby Reedy.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1817,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1525,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1552,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"

\n## Average Home Prices by State\n\n**Zillow Home Value Index:** All Homes, Smoothed, Seasonally Adjusted","pinned":false,"hidden":false,"mode":"md"},{"id":1927,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"

\n## Code and Data","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"data = d3.csv(\"https://files.zillowstatic.com/research/public_csvs/zhvi/State_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"forecast_metro = d3.csv(\"https://files.zillowstatic.com/research/public_csvs/zhvf_growth/Metro_zhvf_growth_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1894,"value":"metro_data = d3.csv(\"https://files.zillowstatic.com/research/public_csvs/zhvi/Metro_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"filteredMetroData = metro_data\n\n/*.filter(d => \n d.State === state &&\n (metro === \"Select All\" || d.Metro === metro)\n)*/\n .map(d => {\n // Get all keys (columns) sorted or in original order\n const columns = Object.keys(d);\n\n // Find the index of the last column\n const lastIndex = columns.length - 1;\n\n // Find the index 11 columns before last (12 months before)\n const prevIndex = lastIndex - 12;\n\n // Get values as numbers (make sure to handle missing/invalid data)\n const lastVal = +d[columns[lastIndex]];\n const prevVal = +d[columns[prevIndex]];\n\n // Calculate percent change = (lastVal - prevVal) / prevVal\n const pctChange = prevVal !== 0 ? (lastVal - prevVal) / prevVal : null;\n\n // Return a new object with an added property for percent change\n return {\n ...d,\n yoyPctChange: pctChange * 100\n };\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"filteredData = data\n //.filter(d => d.State === state && (metro === \"Select All\" || d.Metro === metro)) // optional\n .map(d => {\n // Grab only date columns from Jan 2020 onward\n const dateColumns = Object.keys(d)\n .filter(k => /^\\d{4}-\\d{2}-\\d{2}$/.test(k) && k >= \"2020-01-01\")\n .sort();\n\n if (dateColumns.length < 13) {\n // Not enough data to calculate YoY\n return { ...d, yoyPctChange: null };\n }\n\n const lastIndex = dateColumns.length - 1;\n const prevIndex = lastIndex - 12;\n\n const lastVal = +d[dateColumns[lastIndex]];\n const prevVal = +d[dateColumns[prevIndex]];\n\n const pctChange = prevVal !== 0 ? (lastVal - prevVal) / prevVal : null;\n\n return {\n ...d,\n yoyPctChange: pctChange\n };\n });\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"northeastStates = new Set([\n \"Connecticut\",\n \"Rhode Island\",\n \"Delaware\",\n \"District of Columbia\"\n]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"stateAbbrevMap = ({\n \"Alabama\": \"AL\", \"Alaska\": \"AK\", \"Arizona\": \"AZ\", \"Arkansas\": \"AR\",\n \"California\": \"CA\", \"Colorado\": \"CO\", \"Connecticut\": \"CT\", \"Delaware\": \"DE\",\n \"Florida\": \"FL\", \"Georgia\": \"GA\", \"Hawaii\": \"HI\", \"Idaho\": \"ID\",\n \"Illinois\": \"IL\", \"Indiana\": \"IN\", \"Iowa\": \"IA\", \"Kansas\": \"KS\",\n \"Kentucky\": \"KY\", \"Louisiana\": \"LA\", \"Maine\": \"ME\", \"Maryland\": \"MD\",\n \"Massachusetts\": \"MA\", \"Michigan\": \"MI\", \"Minnesota\": \"MN\", \"Mississippi\": \"MS\",\n \"Missouri\": \"MO\", \"Montana\": \"MT\", \"Nebraska\": \"NE\", \"Nevada\": \"NV\",\n \"New Hampshire\": \"NH\", \"New Jersey\": \"NJ\", \"New Mexico\": \"NM\", \"New York\": \"NY\",\n \"North Carolina\": \"NC\", \"North Dakota\": \"ND\", \"Ohio\": \"OH\", \"Oklahoma\": \"OK\",\n \"Oregon\": \"OR\", \"Pennsylvania\": \"PA\", \"Rhode Island\": \"RI\", \"South Carolina\": \"SC\",\n \"South Dakota\": \"SD\", \"Tennessee\": \"TN\", \"Texas\": \"TX\", \"Utah\": \"UT\",\n \"Vermont\": \"VT\", \"Virginia\": \"VA\", \"Washington\": \"WA\", \"West Virginia\": \"WV\",\n \"Wisconsin\": \"WI\", \"Wyoming\": \"WY\", \"District of Columbia\": \"DC\"\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1649,"value":"valuemap = new Map(\n filteredData.map(d => {\n const keys = Object.keys(d);\n const lastKey = keys[keys.length - 2];\n return [d.RegionName, { yoyPctChange: d.yoyPctChange, lastVal: d[lastKey] }];\n })\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"us = FileAttachment(\"counties-albers-10m (1).json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1888,"value":"import {usTopoJsonWithMetros} from \"@swoloszynski/us-metro-areas-topology\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3e","stdlib":"1","titling":"auto"}