31:T2990,{ const isMobile = width < 600; const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); let baseDate; if (date_button === 'covid') { baseDate = '2020-01-31'; } else { // For 'yoy', pick 12 months ago based on dateColumns const lastIndex = dateColumns.length - 1; const prevIndex = lastIndex - 12; baseDate = dateColumns[prevIndex] || dateColumns[0]; } const filteredDates = dateColumns.filter(d => d >= baseDate); const basePrices = filteredData .map(row => +row[baseDate]) .filter(p => !isNaN(p)); const sortedPrices = [...basePrices].sort((a, b) => a - b); const p90 = sortedPrices[Math.floor(sortedPrices.length * 0.9)]; // ─── Transform Long Data ────────────────────── const longData = []; filteredData.forEach(row => { const basePrice = +row[baseDate]; if (!basePrice) return; const isTop10 = basePrice >= p90; filteredDates.forEach(date => { const price = +row[date]; if (!price) return; longData.push({ RegionName: row.RegionName, date, pctChange: (price - basePrice) / basePrice, price, basePrice, Top10: isTop10 ? 'Top 10%' : 'Bottom 90%' }); }); }); // ─── City Data ───────────────────────── const cityRow = (city === "Select All") ? filteredData[0] : filteredData.find(d => d.RegionName === city); const longCityData = []; if (cityRow) { const cityBase = +cityRow[baseDate]; if (cityBase) { filteredDates.forEach(date => { const price = +cityRow[date]; if (!price) return; longCityData.push({ RegionName: cityRow.RegionName, date, pctChange: (price - cityBase) / cityBase, price, basePrice: cityBase }); }); } } // ─── Averages by Top10 Tiers ───────────────────────────────── const avgDataMap = {}; filteredDates.forEach(date => { avgDataMap[date] = { 'Top 10%': [], 'Bottom 90%': [] }; }); longData.forEach(d => { avgDataMap[d.date][d.Top10].push(d.pctChange); }); const avgLines = []; for (const date of filteredDates) { ['Top 10%', 'Bottom 90%'].forEach(tier => { const arr = avgDataMap[date][tier]; if (arr.length) { const avg = arr.reduce((a, b) => a + b, 0) / arr.length; avgLines.push({ date, Top10: tier, pctChange: avg }); } }); } const lastDate = filteredDates[filteredDates.length - 1]; const labelData = avgLines.filter(d => d.date === lastDate); const labelDataFormatted = labelData.map(d => ({ ...d, pctChangeFormatted: (d.pctChange * 100).toFixed(1) + '%' })); const cityLabelData = longCityData.filter(d => d.date === lastDate); const cityLabelDataFormatted = cityLabelData.map(d => ({ ...d, pctChangeFormatted: (d.pctChange * 100).toFixed(1) + '%', priceFormatted: `$${d.price.toLocaleString('en', { notation: 'compact', maximumFractionDigits: 2 })}` })); // ─── Highlight Selection ──────────────────────────────── const highlight = vl.selectSingle('highlight') .fields(['RegionName']) .on('click') .clear('dblclick'); let layers = []; // % Change View if (trends_button === 'percent_change') { const lines = vl.markLine() .data(longData) .encode( vl.x().fieldT('date').axis({title: 'Date', format: date_button === 'yoy' ? '%b %Y' : '%Y', tickCount: date_button === 'yoy' ? 'month' : 'year'}), vl.y().fieldQ('pctChange').axis({ title: 'Percent Change Since Jan 2020', format: '.0%' }), vl.detail().fieldN('RegionName'), vl.color().value('#000000'), vl.strokeWidth().if(vl.param('highlight'), vl.value(2)).value(1), vl.opacity().if(vl.param('highlight'), vl.value(0.3)).value(0.05), vl.tooltip([ { field: 'RegionName', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' }, { field: 'basePrice', type: 'quantitative', format: '$.2s' } ]) ) .params(highlight); // City line const cityLine = vl.markLine({ strokeWidth: 3 }) .data(longCityData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.color().value('#1f77b4') ); const cityNameLabel = vl.markText({ align: 'left', dx: 5, dy: -6, fontSize: 13, fontWeight: 'bold', fill: '#1f77b4' }) .data(cityLabelData) .encode(vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('RegionName')); const cityValueLabel = vl.markText({ align: 'left', dx: 5, dy: 12, fontSize: 12, fontWeight: 'normal', fill: '#1f77b4' }) .data(cityLabelDataFormatted) .encode(vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('pctChangeFormatted')); layers.push(lines, cityLine, cityNameLabel, cityValueLabel); } // Percentile View if (trends_button === 'percentile') { const avgLinesMark = vl.markLine({ strokeWidth: 3, strokeDash: [6, 4] }) .data(avgLines) .encode( vl.x().fieldT('date').axis({title: 'Date', format: date_button === 'yoy' ? '%b %Y' : '%Y', tickCount: date_button === 'yoy' ? 'month' : 'year'}), vl.y().fieldQ('pctChange').axis({ title: 'Percent Change Since Jan 2020', format: '.0%' }), vl.color().fieldN('Top10').scale({ domain: ['Top 10%', 'Bottom 90%'], range: ['#1f77b4', '#000000'] }) ); const avgLabels = vl.markText({ align: 'left', dx: 5, dy: -6, fontSize: 13, fontWeight: 'bold' }) .data(labelData) .encode(vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('Top10'), vl.color().fieldN('Top10').scale({ domain: ['Top 10%', 'Bottom 90%'], range: ['#1f77b4', '#000000'] })); const avgValueLabels = vl.markText({ align: 'left', dx: 5, dy: 12, fontSize: 12 }) .data(labelDataFormatted) .encode(vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('pctChangeFormatted'), vl.color().fieldN('Top10').scale({ domain: ['Top 10%', 'Bottom 90%'], range: ['#1f77b4', '#000000'] })); layers.push(avgLinesMark, avgLabels, avgValueLabels); } // Price View if (trends_button === 'price') { // All city lines (faded) const allPriceLines = vl.markLine() .data(longData) .encode( vl.x().fieldT('date').axis({title: 'Date', format: date_button === 'yoy' ? '%b %Y' : '%Y', tickCount: date_button === 'yoy' ? 'month' : 'year'}), vl.y().fieldQ('price').axis({ title: 'Price', format: '$.2s' }), vl.detail().fieldN('RegionName'), vl.color().value('#000000'), vl.opacity().value(0.1) ); // Highlighted city line (green) const cityPriceLine = vl.markLine({ strokeWidth: 3 }) .data(longCityData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('price'), vl.color().value('#2ca02c'), // green vl.tooltip([ { field: 'RegionName', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'price', type: 'quantitative', format: '$.2s' } ]) ); // City name label const cityNameLabel = vl.markText({ align: 'left', dx: 5, dy: -6, fontSize: 13, fontWeight: 'bold', fill: '#2ca02c' }) .data(cityLabelData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('price'), vl.text().fieldN('RegionName') ); // City price label const cityValueLabel = vl.markText({ align: 'left', dx: 5, dy: 12, fontSize: 12, fontWeight: 'normal', fill: '#2ca02c' }) .data(cityLabelDataFormatted) .encode( vl.x().fieldT('date'), vl.y().fieldQ('price'), vl.text().fieldN('priceFormatted') ); layers.push(allPriceLines, cityPriceLine, cityNameLabel, cityValueLabel); } // Bedrooms View if (trends_button === 'bedroom_count') { // Transform bedroom data to long format const longBedroomData = []; bedroomDataFiltered.forEach(row => { const basePrice = +row[baseDate]; if (!basePrice) return; filteredDates.forEach(date => { const price = +row[date]; if (!price) return; longBedroomData.push({ bdrm_label: row.bdrm_label, date, pctChange: (price - basePrice) / basePrice, price, basePrice }); }); }); // Compute last date labels const lastDate = filteredDates[filteredDates.length - 1]; const bedroomLabelData = longBedroomData.filter(d => d.date === lastDate) .map(d => ({ ...d, pctChangeFormatted: (d.pctChange * 100).toFixed(1) + '%', priceFormatted: `$${d.price.toLocaleString('en', { notation: 'compact', maximumFractionDigits: 2 })}` })); // Line chart by bedroom const bedroomLines = vl.markLine({ strokeWidth: 3 }) .data(longBedroomData) .encode( vl.x().fieldT('date').axis({ title: 'Date', format: date_button === 'yoy' ? '%b %Y' : '%Y', tickCount: date_button === 'yoy' ? 'month' : 'year' }), vl.y().fieldQ('pctChange').axis({ title: 'Percent Change', format: '.0%', tickMinStep: 0.01 }), vl.color().fieldN('bdrm_label'), vl.tooltip([ { field: 'bdrm_label', type: 'nominal', title: 'Bedrooms' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' }, { field: 'price', type: 'quantitative', format: '$.2s' } ]) ); // Labels for last date const bedroomCountLabels = vl.markText({ align: 'left', dx: 5, dy: -4, fontSize: 12, fontWeight: 'bold' }) .data(bedroomLabelData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('bdrm_label'), vl.color().fieldN('bdrm_label') ); const bedroomValueLabels = vl.markText({ align: 'left', dx: 5, dy: 8, fontSize: 12 }) .data(bedroomLabelData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('pctChangeFormatted'), vl.color().fieldN('bdrm_label') ); layers.push(bedroomLines, bedroomCountLabels, bedroomValueLabels); } return vl.layer(...layers) .width(isMobile ? (width / 1.45) : (width / 1.25)) .height(isMobile ? 260 : 350) .config({ legend: { disable: true } }) .render(); }32:Td34,{ const neighborhoodData = bedroomDataFiltered.filter( d => d.RegionName === city ); if (!neighborhoodData.length) { return html`

No data for city: ${city}

`; } // Grab all date columns const dateKeys = Object.keys(neighborhoodData[0]).filter(k => /^\d{4}-\d{2}-\d{2}$/.test(k) ).sort(); const finalDate = dateKeys[dateKeys.length - 1]; // most recent const oneYearAgo = dateKeys[dateKeys.length - 13]; // ~12 months earlier const chartData = []; for (const d of neighborhoodData) { const values = dateKeys.map(k => +d[k]); const current = +d[finalDate]; const lastYear = +d[oneYearAgo]; const peak = d3.max(values); chartData.push( { bdrm_label: d.bdrm_label, metric: "Current", value: current }, { bdrm_label: d.bdrm_label, metric: "Last Year", value: lastYear }, { bdrm_label: d.bdrm_label, metric: "Peak", value: peak } ); } return vl .layer( // Current as small light green bar (from 0 → current) vl.markBar({ color: "lightgreen", opacity: 0.4, size: 9 }) .data(chartData.filter(d => d.metric === "Current")) .encode( vl.y().fieldN("bdrm_label").title("Bedrooms"), vl.x().fieldQ("value").title("Price").axis({ format: "$.2s" }) ), // Current as green dot vl.markPoint({ filled: true, size: 120, color: "green" }) .data(chartData.filter(d => d.metric === "Current")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value") ), // Label above Current dot vl.markText({ align: "center", dy: -12, dx: -14, color: "green" }) .data(chartData.filter(d => d.metric === "Current")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value"), vl.text().fieldQ("value").format("$.3s") ), // Last Year as black dot vl.markPoint({ filled: true, size: 80 }) .data(chartData.filter(d => d.metric === "Last Year")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value"), vl.color().value("black") ), // Label above Last Year dot vl.markText({ align: "center", dy: 14, color: "black" }) .data(chartData.filter(d => d.metric === "Last Year")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value"), vl.text().fieldQ("value").format("$.3s") ), // Peak as gray dot vl.markPoint({ filled: true, size: 80 }) .data(chartData.filter(d => d.metric === "Peak")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value"), vl.color().value("gray") ), // Label below Peak dot vl.markText({ align: "center", dy: -12, color: "gray" }) .data(chartData.filter(d => d.metric === "Peak")) .encode( vl.y().fieldN("bdrm_label"), vl.x().fieldQ("value"), vl.text().fieldQ("value").format("$.3s") ) ) // Legend .encode( vl.color().fieldN("metric").scale({ domain: ["Current", "Last Year", "Peak"], range: ["green", "black", "gray"] }).legend({ title: "Metric", orient: "right" }) ) .title(`Bedroom Price Comparison for ${city}`) .width(width / 1.35) .height({ step: 40 }) .render(); } 33:T966,{ // filter for the selected city const cityData = filteredData.filter(d => d.RegionName === city); if (!cityData.length) { return html`

No data found for ${city}.

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

No date columns found in ${city} data.

`; } const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; // Aggregate by (year, month) const agg = new Map(); for (const row of cityData) { for (const col of dateCols) { const dt = new Date(col); const y = dt.getFullYear(); if (y < 2020 || y > 2026) continue; const m = dt.getMonth(); const v = +row[col]; if (Number.isFinite(v)) { const key = `${y}-${m}`; const e = agg.get(key) || { sum: 0, count: 0, year: y, month: m }; e.sum += v; e.count += 1; agg.set(key, e); } } } const chartData = Array.from(agg.values()) .map(e => ({ year: String(e.year), month: months[e.month], monthNum: e.month, value: e.sum / e.count })) .sort((a, b) => a.year.localeCompare(b.year) || a.monthNum - b.monthNum); if (!chartData.length) { return html`

No data points for ${city} between 2020–2026.

`; } // Cool modern chart return vl .markLine({ point: { filled: true, size: 65 }, interpolate: "monotone" }) .data(chartData) .title(`Home Price Trends in ${city}`) .encode( vl.x() .fieldO("month") .title("Month") .sort(months) .axis({ labelAngle: 0, labelFontSize: 12, titleFontSize: 14 }), vl.y() .fieldQ("value") .title("Median Home Price") .axis({ format: "$,.0f", labelFontSize: 12, titleFontSize: 14 }), vl.color() .fieldN("year") .title("Year") .sort(["2020","2021","2022","2023","2024","2025", "2026"]) .scale({ scheme: "tableau10" }), vl.tooltip([ vl.fieldN("year"), vl.fieldN("month"), vl.fieldQ("value"), ]) ) .width(650) .height(400) .config({ axis: { grid: true, gridColor: "#e5e7eb", tickColor: "#9ca3af" }, legend: { orient: "top", titleFontSize: 14, labelFontSize: 12 } }) .render(); } 34:T274b,function generateSummaryTable(filteredData, selectedView, bedroomDataFiltered) { // Choose the right dataset based on selectedView const data = selectedView === 'bedroom_count' ? bedroomDataFiltered : filteredData; const dateColumns = Object.keys(data[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const baseDate = '2020-01-31'; const finalDate = dateColumns[dateColumns.length - 1]; const oneYearAgo = dateColumns[dateColumns.length - 13]; // ==== bedroom_count view ==== if (selectedView === 'bedroom_count') { const groups = d3.groups(data, d => d.RegionName, d => d.bdrm_label); const tableData = groups.flatMap(([city, bedroomGroups]) => bedroomGroups.map(([bedroomLabel, rows]) => { const validRows = rows.filter(r => +r[finalDate] && +r[baseDate] && +r[oneYearAgo]); const count = validRows.length; if (!count) return null; const totalFinal = d3.sum(validRows, r => +r[finalDate]); const totalPct = d3.sum(validRows, r => (+r[finalDate] - +r[baseDate]) / +r[baseDate]); const totalYoY = d3.sum(validRows, r => (+r[finalDate] - +r[oneYearAgo]) / +r[oneYearAgo]); return { City: city, Bedrooms: bedroomLabel, AvgFinal: totalFinal / count, PctChange: (totalPct / count) * 100, YoY: (totalYoY / count) * 100 }; }) ).filter(d => d !== null); const maxAbsPct = Math.max( ...tableData.map(d => Math.abs(d.PctChange)), ...tableData.map(d => Math.abs(d.YoY)) ); return html` ${tableData.map(row => { const pctBarWidth = `${(Math.abs(row.PctChange) / maxAbsPct) * 100}%`; const pctColor = row.PctChange >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const yoyBarWidth = `${(Math.abs(row.YoY) / maxAbsPct) * 100}%`; const yoyColor = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; return html``; })}

City	Bedrooms	Avg. Home Price	% Change since Jan 2020	YoY % Change
${row.City}	${row.Bedrooms}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${row.PctChange.toFixed(1)}%	${row.YoY.toFixed(1)}%

`; } // ==== percentile view ==== if (selectedView === 'percentile') { const basePrices = filteredData .map(row => +row[baseDate]) .filter(p => !isNaN(p)); const sortedPrices = [...basePrices].sort((a, b) => a - b); const p90 = sortedPrices[Math.floor(sortedPrices.length * 0.9)]; let summary = { 'Bottom 90%': { count: 0, totalBase: 0, totalFinal: 0, totalPctChange: 0, totalYoY: 0 }, 'Top 10%': { count: 0, totalBase: 0, totalFinal: 0, totalPctChange: 0, totalYoY: 0 } }; filteredData.forEach(row => { const basePrice = +row[baseDate]; const finalPrice = +row[finalDate]; const yoyPrice = +row[oneYearAgo]; if (!basePrice || !finalPrice || !yoyPrice) return; const pctChange = (finalPrice - basePrice) / basePrice; const yoyPctChange = (finalPrice - yoyPrice) / yoyPrice; const group = basePrice >= p90 ? 'Top 10%' : 'Bottom 90%'; summary[group].count += 1; summary[group].totalBase += basePrice; summary[group].totalFinal += finalPrice; summary[group].totalPctChange += pctChange; summary[group].totalYoY += yoyPctChange; }); const tableData = Object.entries(summary).map(([group, stats]) => { const count = stats.count; return { Group: group, AvgBase: stats.totalBase / count, AvgFinal: stats.totalFinal / count, AvgPctChange: (stats.totalPctChange / count) * 100, YoY: (stats.totalYoY / count) * 100, Count: count }; }).sort((a, b) => d3.ascending(a.Group, b.Group)); const maxAbsPct = Math.max( ...tableData.map(d => Math.abs(d.AvgPctChange)), ...tableData.map(d => Math.abs(d.YoY)) ); return html` ${tableData.map(row => { if (isNaN(row.AvgPctChange)) return null; const pctBarWidth = `${(Math.abs(row.AvgPctChange) / maxAbsPct) * 100}%`; const pctColor = row.AvgPctChange >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const yoyBarWidth = `${(Math.abs(row.YoY) / maxAbsPct) * 100}%`; const yoyColor = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; return html``; })}

Tier	Avg. Home Price	Average % Change	YoY % Change	Cities
${row.Group}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${row.AvgPctChange.toFixed(1)}%	${row.YoY.toFixed(1)}%	${row.Count}

`; } // ==== city view only ==== const groups = d3.groups(filteredData, d => d.RegionName); const tableData = groups.map(([group, rows]) => { const validRows = rows.filter(r => +r[finalDate] && +r[baseDate] && +r[oneYearAgo]); const count = validRows.length; if (!count) return null; const totalFinal = d3.sum(validRows, r => +r[finalDate]); const totalPct = d3.sum(validRows, r => (+r[finalDate] - +r[baseDate]) / +r[baseDate]); const totalYoY = d3.sum(validRows, r => (+r[finalDate] - +r[oneYearAgo]) / +r[oneYearAgo]); return { Group: group, AvgFinal: totalFinal / count, AvgPctChange: (totalPct / count) * 100, YoY: (totalYoY / count) * 100 }; }).filter(d => d !== null && !isNaN(d.AvgPctChange)) .sort((a, b) => d3.ascending(a.Group, b.Group)); const maxAbsPct = Math.max( ...tableData.map(d => Math.abs(d.AvgPctChange)), ...tableData.map(d => Math.abs(d.YoY)) ); return html` ${tableData.map(row => { const pctBarWidth = `${(Math.abs(row.AvgPctChange) / maxAbsPct) * 100}%`; const pctColor = row.AvgPctChange >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const yoyBarWidth = `${(Math.abs(row.YoY) / maxAbsPct) * 100}%`; const yoyColor = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; return html``; })}

City	Avg. Home Price	Average % Change	YoY % Change
${row.Group}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${row.AvgPctChange.toFixed(1)}%	${row.YoY.toFixed(1)}%

`; } 35:[] 2f:{"title":"Zillow Home Price Trends","cells":[{"id":0,"value":"# Zillow Home Price Trends\n\n**Average Home Price Change Since Jan. 2020** \n*Zillow Home Value Index: All Homes, Seasonally Adjusted, Indexed to January 2020* \n*Data Source: [Zillow Research](https://www.zillow.com/research/data/)*\n","pinned":false,"hidden":false,"mode":"md"},{"id":1910,"value":"viewof state = select({\n options: Array.from(new Set(data.map(d => d.State))).sort(),\n value: 'CO',\n title: 'State'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"viewof metro = select({\n options: Array.from(new Set(\n data\n .filter(d => d.State === state && d.Metro !== \"\")\n .map(d => d.Metro)\n )).sort(),\n value: state === \"CO\" &&\n Array.from(new Set(\n data\n .filter(d => d.State === state && d.Metro !== \"\")\n .map(d => d.Metro)\n )).sort().includes(\"Denver-Aurora-Lakewood, CO\")\n ? \"Denver-Aurora-Lakewood, CO\"\n : Array.from(new Set(\n data\n .filter(d => d.State === state && d.Metro !== \"\")\n .map(d => d.Metro)\n )).sort()[0],\n title: 'Metro'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"viewof city = {\n const cities = Array.from(\n new Set(data.filter(d => d.Metro === metro).map(d => d.RegionName))\n ).sort();\n\n // Add \"Select All\" at the top\n const options = [...cities];\n\n const citySelect = select({\n title: \"City\",\n options\n });\n\n citySelect.input.style.fontSize = \"0.8em\";\n return citySelect;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1955,"value":"viewof date_button = radio({\n options: [\n { label: 'Since Jan 2020', value: 'covid' },\n { label: '1-Year', value: 'yoy' },\n ],\n title: 'Date',\n value: 'covid'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"viewof trends_button = radio({\n options: [\n { label: '% Change', value: 'percent_change' },\n { label: 'Price', value: 'price' },\n { label: 'Percentile', value: 'percentile' },\n { label: 'Bedrooms', value: 'bedroom_count' }\n ],\n value: 'percent_change'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1618,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"generateSummaryTable(filteredData, trends_button, bedroomDataFiltered)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2049,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2121,"value":"$33","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(\n \"https://files.zillowstatic.com/research/public_csvs/zhvi/City_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\"\n).then(rawData => {\n const startDate = \"2020-01-01\";\n\n return rawData.map(d => {\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col) && col >= startDate)\n .sort();\n \n const staticFields = [\"RegionName\", \"State\", \"RegionName\", \"Metro\", \"CountyName\", \"SizeRank\"];\n const trimmedRow = Object.fromEntries(staticFields.map(f => [f, d[f]]));\n\n Object.assign(trimmedRow, Object.fromEntries(dateColumns.map(col => [col, d[col]])));\n\n return trimmedRow;\n });\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"// Keep filteredData static with both values\nfilteredData = data\n .filter(d => d.State === state && d.Metro === metro)\n .map(d => {\n const startDate = \"2020-01-01\";\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col) && col >= startDate)\n .sort();\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 const maxVal = d3.max(dateColumns, col => +d[col]);\n\n return {\n Metro: d.Metro,\n RegionName: d.RegionName,\n State: d.State,\n ...Object.fromEntries(dateColumns.map(col => [col, d[col]])),\n fromPeakPctChange: maxVal ? (lastVal - maxVal) / maxVal : null,\n COVIDPctChange: d['2020-01-31'] ? (lastVal - d['2020-01-31']) / d['2020-01-31'] : null,\n yoyPctChange: prevVal ? (lastVal - prevVal) / prevVal : null,\n lastVal\n };\n })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1940,"value":"combinedBedroomData = Promise.all(\n [1,2,3,4,5].map(n =>\n d3.csv(\n `https://files.zillowstatic.com/research/public_csvs/zhvi/City_zhvi_bdrmcnt_${n}_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv`\n ).then(rawData => {\n const startDate = \"2020-01-01\";\n\n return rawData.map(d => {\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col) && col >= startDate)\n .sort();\n\n // Start the final object with the static fields and the bdrm fields\n const result = {\n RegionName: d.RegionName,\n State: d.State,\n Metro: d.Metro,\n CountyName: d.CountyName,\n SizeRank: d.SizeRank,\n bdrmcnt: n,\n bdrm_label: n === 5 ? \"5+\" : String(n)\n };\n\n // Add the date columns afterward\n dateColumns.forEach(col => {\n result[col] = d[col];\n });\n\n return result;\n });\n })\n)).then(results => results.flat())\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1947,"value":"bedroomDataFiltered = combinedBedroomData\n .filter(d => d.RegionName === city && d.Metro === metro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}