31:T24f5,{ const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const baseDate = '2020-01-31'; 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, Region: row.Region, date, pctChange: (price - basePrice) / basePrice, basePrice, Top10: isTop10 ? 'Top 10%' : 'Bottom 90%' }); }); }); // ─── City Line (blue) ───────────────────────── const cityRow = city_data[0]; // assuming only one city row const cityBase = +cityRow[baseDate]; const longCityData = []; if (cityBase) { filteredDates.forEach(date => { const price = +cityRow[date]; if (!price) return; longCityData.push({ RegionName: cityRow.RegionName, date, pctChange: (price - cityBase) / cityBase, 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) + '%' })); // ─── Region Averages ───────────────────────────── const regionAvgMap = {}; filteredDates.forEach(date => { regionAvgMap[date] = {}; }); longData.forEach(d => { const region = d.Region; if (!region) return; if (!regionAvgMap[d.date][region]) { regionAvgMap[d.date][region] = []; } regionAvgMap[d.date][region].push(d.pctChange); }); const regionLines = []; for (const date of filteredDates) { for (const region in regionAvgMap[date]) { const arr = regionAvgMap[date][region]; if (arr.length) { const avg = arr.reduce((a, b) => a + b, 0) / arr.length; regionLines.push({ date, Region: region, pctChange: avg }); } } } const regionLabelData = regionLines.filter(d => d.date === lastDate); const regionLabelDataFormatted = regionLabelData.map(d => ({ ...d, pctChangeFormatted: (d.pctChange * 100).toFixed(1) + '%' })); // ─── Highlight Selection ──────────────────────────────── const highlight = vl.selectSingle('highlight') .fields([trends_button === 'region' ? 'Region' : 'RegionName']) .on('click') .clear('dblclick'); let layers = []; if (trends_button === 'neighborhood') { const lines = vl.markLine() .data(longData) .encode( vl.x().fieldT('date').axis({ title: 'Year', format: '%Y', tickCount: '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.4)).value(0.05), vl.tooltip([ { field: 'RegionName', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' }, { field: 'basePrice', type: 'quantitative', format: '$,.0f' } ]) ) .params(highlight); layers.push(lines); } if (trends_button === 'percentile') { const avgLinesMark = vl.markLine({ strokeWidth: 3, strokeDash: [6, 4] }) .data(avgLines) .encode( vl.x().fieldT('date').axis({ title: 'Year', format: '%Y', tickCount: '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'] }), vl.tooltip([ { field: 'Top10', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' } ]) ); 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, fontWeight: 'normal' }) .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); } if (trends_button === 'region') { const regionLinesMark = vl.markLine() .data(regionLines) .encode( vl.x().fieldT('date').axis({ title: 'Year', format: '%Y', tickCount: 'year' }), vl.y().fieldQ('pctChange').axis({ title: 'Percent Change Since Jan 2020', format: '.0%' }), vl.color().fieldN('Region'), // Stroke width changes: 3 if highlighted, else 1 vl.strokeWidth().if(vl.param('highlight'), vl.value(3)).value(1), // Opacity: 1 if highlighted or none selected, else 0.1 for others vl.opacity().if(vl.param('highlight'), vl.value(1)).value(0.4), vl.tooltip([ { field: 'Region', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' } ]) ) .params(highlight); const regionNameLabels = vl.markText({ align: 'left', dx: 5, dy: 0, fontSize: 12, fontWeight: 'bold' }) .data(regionLabelData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('Region'), vl.color().fieldN('Region') ); const regionValueLabels = vl.markText({ align: 'left', dx: 4, dy: 0, fontSize: 12, fontWeight: 'bold' }) .data(regionLabelDataFormatted) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.text().fieldN('pctChangeFormatted'), vl.color().fieldN('Region') ); layers.push(regionLinesMark, /*regionNameLabels,*/ regionValueLabels); } // ─── City Line + Labels: only for neighborhood or region view ──────── if (['neighborhood'].includes(trends_button)) { const cityLine = vl.markLine({ strokeWidth: 3 }) .data(longCityData) .encode( vl.x().fieldT('date'), vl.y().fieldQ('pctChange'), vl.color().value('#1f77b4'), vl.tooltip([ { field: 'RegionName', type: 'nominal' }, { field: 'date', type: 'temporal' }, { field: 'pctChange', type: 'quantitative', format: '.1%' } ]) ); 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(cityLine, cityNameLabel, cityValueLabel); } return vl.layer(...layers) .width(width / 1.35) .height(350) .config({ legend: { disable: trends_button === 'neighborhood' // || trends_button === 'region' } }) .render(); } 32:Td7b,{ const neighborhoodData = bedroomDataFiltered.filter( d => d.RegionName === neighborhood && d.City === city ); if (!neighborhoodData.length) { return html`

No data for neighborhood: ${neighborhood}, 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 (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 below 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 above 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 ${neighborhood}, ${city}`) .width(width / 1.35) .height({ step: 40 }) .render(); } 33:T6cd,{ const columns = Object.keys(filteredData[0]); const current_month = columns[columns.length - 5]; const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); const subPlot = (field, note) => vl.layer( // Main scatter points vl.markPoint({ color: 'black', filled: true, size: 50 }) .params(panzoom, brush) .encode( vl.x().fieldQ(field).title(note).axis({ format: '.1%' }), vl.y().fieldQ(current_month).title(`Home Price (${current_month})`).axis({ format: '$.2s' }), vl.color().value('grey').if(brush, vl.color().value('black')), vl.opacity().if(brush, vl.value(0.6)).value(0.2), vl.tooltip().fieldN('RegionName') ), // Trend line vl.markLine({ type: 'line', color: 'firebrick', size: 3 }) .transform(vl.loess(current_month).on(field).as('x', 'y').bandwidth(0.8)) .encode( vl.x().fieldQ('x'), vl.y().fieldQ('y') ), // Vertical dashed rule at x = 0 vl.markRule({ strokeDash: [4, 4], color: '#333' }) .data([{ [field]: 0 }]) .encode( vl.x().fieldQ(field) ) ); return vl.hconcat( subPlot('yoyPctChange', 'YoY % Change').width(width / 3.5).height(300), subPlot('fromPeakPctChange', '% Change From Peak').width(width / 3.5).height(300), subPlot('monthChange', 'MoM % Change').width(width / 3.5).height(300) ) .data(filteredData) .render(); } 34:T7fc,viewof chart = { const columns = Object.keys(filteredData[0]); const current_month = columns[columns.length - 5]; const selectedField = priceField === "current" ? current_month : "yoyPctChange"; const isYoy = selectedField === "yoyPctChange"; const histogram = vl.data(filteredData) .title(isYoy ? "Neighborhood YoY % Change Distribution" : "Neighborhood Home Price Distribution") .layer( vl.markBar() .encode( vl.x().fieldQ(selectedField) .bin({ maxbins: 20 }) .axis(isYoy ? { format: ".1%", title: "YoY % Change" } : { format: "$,d", title: "Price" }), vl.y().count().axis({ orient: 'left' }).title("Neighborhood Count") ), vl.markRule({ color: 'orange', size: 2, opacity: 0.8 }) .encode( vl.x().fieldQ(selectedField).aggregate('median') ), vl.markText({ color: 'orange', align: 'left', dx: 3, y: 10 }) .encode( vl.x().median(selectedField), vl.text().median(selectedField).format(isYoy ? ".1%" : "$,d") ) ) .width(350) .height(100) .config({ view: { stroke: null } }); const barchart = vl.data(filteredData) .title(isYoy ? "Median YoY % Change by Neighborhood" : "Median Home Price by Neighborhood (" + current_month + ")") .layer( vl.markBar() .encode( vl.x().fieldQ(selectedField) .title(isYoy ? "YoY % Change" : "Price") .axis(isYoy ? { format: ".1%" } : { format: "$,s" }), vl.y().fieldN('RegionName').title(null) ), vl.markRule({ color: 'orange', size: 2, opacity: 0.8 }) .encode( vl.x().fieldQ(selectedField).aggregate('median') ), vl.markText({ align: "left", dx: 5, dy: 1 }) .encode( vl.x().fieldQ(selectedField), vl.y().fieldN('RegionName'), vl.text().fieldQ(selectedField).format(isYoy ? ".1%" : "$,d") ) ) .width(350); return vl.vconcat(histogram, barchart).render(); } 35:Tde7,legend_price = { const last_price_col = Object.keys(price_zip[0]).pop(); const last_yoy_col = Object.keys(price_zip_change[0]).pop(); const last_forecast_col = Object.keys(forecast_zip[0]).pop(); const columnMap = { price: { label: `Zillow Home Price (${last_price_col})`, colorRange: ['#d0f0c0', '#004d00'], domainFn: (values) => { const sorted = values.slice().sort((a, b) => a - b); return [ sorted[Math.floor(values.length * 0.05)] || d3.min(values), d3.max(values) ]; }, scaleType: 'log', format: d => d >= 1_000_000 ? `$${(d / 1_000_000).toFixed(0)}M` : d >= 1_000 ? `$${(d / 1_000).toFixed(0)}K` : `$${d.toFixed(0)}` }, yoy: { label: 'YoY % Change', colorRange: ['#e84343', '#ffffff', '#0b70db'], domain: [-6, 0, 6], scaleType: 'linear', format: d => `${d.toFixed(1)}%` }, forecast: { label: `1yr Forecast % Change ${last_forecast_col}`, colorRange: ['#e84343', '#ffffff', '#0b70db'], domain: [-6, 0, 6], scaleType: 'linear', format: d => `${d.toFixed(1)}%` } }; const config = columnMap[mapType]; let data, getValue; if (mapType === 'price') { data = price_zip; getValue = d => +d[last_price_col]; } else if (mapType === 'yoy') { data = price_zip_change; getValue = d => +d[last_yoy_col] * 100; } else if (mapType === 'forecast') { data = forecast_zip; getValue = d => +d[last_forecast_col]; } const values = data.map(getValue).filter(v => isFinite(v) && !isNaN(v)); if (values.length === 0) return html`

⚠️ No data for ${mapType}

`; const width = 340, height = 70; const margin = { left: 15, right: 15 }; const svg = d3.create("svg").attr("width", width).attr("height", height); svg.append("text") .attr("x", width / 2) .attr("y", 15) .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(config.label); const gradientId = `gradient-${mapType}`; const gradient = svg.append("defs").append("linearGradient") .attr("id", gradientId) .attr("x1", "0%").attr("y1", "0%") .attr("x2", "100%").attr("y2", "0%"); const stops = config.colorRange.length === 2 ? [ { offset: "0%", color: config.colorRange[0] }, { offset: "100%", color: config.colorRange[1] } ] : [ { offset: "0%", color: config.colorRange[0] }, { offset: "50%", color: config.colorRange[1] }, { offset: "100%", color: config.colorRange[2] } ]; gradient.selectAll("stop") .data(stops) .enter() .append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); svg.append("rect") .attr("x", margin.left) .attr("y", 25) .attr("width", width - margin.left - margin.right) .attr("height", 20) .style("fill", `url(#${gradientId})`); let domain; if (config.scaleType === 'log') { domain = config.domainFn(values); } else { domain = config.domain; } const xScale = config.scaleType === 'log' ? d3.scaleLog().domain(domain).range([margin.left, width - margin.right]).clamp(true) : d3.scaleLinear().domain(domain).range([margin.left, width - margin.right]); const xAxis = d3.axisBottom(xScale) .ticks(config.scaleType === 'log' ? 3 : 5) .tickFormat(config.format); svg.append("g") .attr("transform", `translate(0, 50)`) .call(xAxis); return svg.node(); } 36:Tdab,viewof unified_map = { const isDesktop = width > 800; if (!isDesktop) { const placeholder = document.createElement("div"); placeholder.textContent = "Map not available on mobile"; placeholder.style.fontStyle = "italic"; placeholder.style.color = "#666"; placeholder.style.textAlign = "center"; placeholder.style.padding = "1em"; return placeholder; } const last_price_col = Object.keys(price_zip[0]).pop(); const last_yoy_col = Object.keys(price_zip_change[0]).pop(); const last_forecast_col = Object.keys(forecast_zip[0]).pop(); const height = 0.55 * width; const projection = d3.geoMercator() .center([-105.5, 39.1]) .scale(6000) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const datasets = { price: price_zip.map(d => ({ zip: d.RegionName, value: +d[last_price_col] })), yoy: price_zip_change.map(d => ({ zip: d.RegionName, value: +d[last_yoy_col] * 100 })), forecast: forecast_zip.map(d => ({ zip: d.RegionName, value: +d[last_forecast_col] })) }; const data = datasets[mapType]; const colorScale = mapType === 'price' ? (() => { const values = data.map(d => d.value).filter(d => d > 0); const minDomain = d3.quantile(values.sort((a,b)=>a-b), 0.05) || d3.min(values); return d3.scaleLog() .domain([minDomain, d3.max(values)]) .range(['#f0fff0','#004d00']) .clamp(true); })() : d3.scaleLinear() .domain([-6,0,6]) .range(['#e84343','#ffffff','#0b70db']); const formatValue = v => mapType === 'price' ? v >= 1_000_000 ? `$${(v/1_000_000).toFixed(2)}M` : v >= 1_000 ? `$${(v/1_000).toFixed(1)}K` : `$${v.toFixed(0)}` : `${v.toFixed(1)}%`; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("font-family", "sans-serif"); const g = svg.append("g"); // Draw ZIP polygons g.selectAll("path") .data(zipGeoJSON.features) .join("path") .attr("d", path) .attr("fill", d => { const zip = d.properties.ZCTA5CE10; const match = data.find(h => h.zip === zip); return match ? colorScale(match.value) : '#eee'; }) .attr("stroke", "#fff") .attr("stroke-width", 0.2) .on("mouseover", function(event,d) { d3.select(this).attr("stroke-width", 1).attr("fill-opacity",0.8); const zip = d.properties.ZCTA5CE10; const match = data.find(h => h.zip === zip); tooltip.html(`ZIP: ${zip}
Value: ${match ? formatValue(match.value) : 'N/A'}`) .style("visibility", "visible"); }) .on("mousemove", function(event) { tooltip.style("top", `${event.pageY + 5}px`).style("left", `${event.pageX + 5}px`); }) .on("mouseout", function() { d3.select(this).attr("stroke-width", 0.2).attr("fill-opacity",1); tooltip.style("visibility", "hidden"); }); // Tooltip const tooltip = d3.select("body").append("div") .style("position","absolute") .style("background","#fff") .style("border","0.5px solid #ccc") .style("padding","5px 8px") .style("border-radius","4px") .style("box-shadow","0 2px 8px rgba(0,0,0,0.2)") .style("pointer-events","none") .style("visibility","hidden") .style("font-size","12px"); // Zoom / pan svg.call(d3.zoom() .scaleExtent([1, 10]) .on("zoom", (event) => g.attr("transform", event.transform)) ); return svg.node(); } 37:T506,city_data = d3.csv("https://files.zillowstatic.com/research/public_csvs/zhvi/City_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv").then(data => { const startDate = "2020-01-01"; return data .filter(d => d.RegionName === city && d.Metro === metro) .map(d => { // only use date columns >= startDate const dateColumns = Object.keys(d) .filter(col => /^\d{4}-\d{2}-\d{2}$/.test(col) && col >= startDate) .sort(); const lastIndex = dateColumns.length - 1; const prevIndex = lastIndex - 12; const maxVal = d3.max(dateColumns, col => +d[col]); const lastVal = +d[dateColumns[lastIndex]]; const prevVal = +d[dateColumns[prevIndex]]; const pctChange = prevVal !== 0 ? (lastVal - prevVal) / prevVal : null; const COVIDpctChange = +d['2020-01-31'] !== 0 ? (lastVal - +d['2020-01-31']) / +d['2020-01-31'] : null; const fromPeakPctChange = maxVal !== 0 ? (lastVal - maxVal) / maxVal : null; return { ...d, // if you also want to drop the pre-2020 fields entirely, // you could replace `...d` with only the fields you want fromPeakPctChange, COVIDPctChange: COVIDpctChange, yoyPctChange: pctChange }; }); }); 38:Tb33,filteredData = data .filter(d => d.City === city && d.Metro === metro) .map(d => { const regionMap = { "Northwest Denver": ["Berkeley","Berkley","Regis","West Highland","Sloan Lake","Chaffee Park","Highland","Sunnyside"], "Northeast Denver": ["Central Park","North Park Hill","Northeast Park Hill","South Park Hill","East Colfax","Montbello","Gateway - Green Valley Ranch","Skyland","Elyria Swansea","Cole","Clayton","Denver International Airport","Globeville"], "Central Denver": ["Union Station","Civic Center","Capitol Hill","Cheesman Park","Congress Park","City Park","City Park West","North Capitol Hill","Central Business District","Five Points","Whittier"], "South Broadway / Central South": ["Platt Park","Speer","Baker","Lincoln Park","Overland","Rosedale","Cory - Merrill","Washington Park","Washington Park West","University","University Park","University Hills","Wellshire"], "Southwest Denver": ["Harvey Park","Harvey Park South","Mar Lee","Westwood","Barnum","Barnum West","Valverde","Athmar Park","Ruby Hill","College View - South Platte","Fort Logan","Bear Valley"], "Southeast Denver": ["Hampden","Hampden South","Southmoor Park","Goldsmith","Virginia Village","Washington Virginia Vale","Windsor","Indian Creek"], "Cherry Creek Corridor": ["Cherry Creek","Montclair","Hilltop","Country Club","Belcaro","Lowry Field","Hale"], "West Denver": ["West Colfax","Jefferson Park","Villa Park","Auraria","Sun Valley"] }; const getRegion = (regionName) => { for (const [region, names] of Object.entries(regionMap)) { if (names.includes(regionName)) return region; } return "Other"; }; const dateColumns = Object.keys(d) .filter(col => /^\d{4}-\d{2}-\d{2}$/.test(col)) .sort(); const lastIndex = dateColumns.length - 1; const lastMonthIndex = dateColumns.length - 2; const prevIndex = lastIndex - 12; const maxVal = d3.max(dateColumns, col => +d[col]); const lastVal = +d[dateColumns[lastIndex]]; const prevVal = +d[dateColumns[prevIndex]]; const monthVal = +d[dateColumns[lastMonthIndex]]; const pctChange = prevVal !== 0 ? (lastVal - prevVal) / prevVal : null; const monthChange = monthVal !== 0 ? (lastVal - monthVal) / monthVal : null; const COVIDpctChange = +d['2020-01-31'] !== 0 ? (lastVal - +d['2020-01-31']) / +d['2020-01-31'] : null; const fromPeakPctChange = maxVal !== 0 ? (lastVal - maxVal) / maxVal : null; return { Region: getRegion(d.RegionName), City: d.City, Metro: d.Metro, RegionName: d.RegionName, State: d.State, ...Object.fromEntries(dateColumns.map(col => [col, d[col]])), fromPeakPctChange, COVIDPctChange: COVIDpctChange, yoyPctChange: pctChange, monthChange: monthChange }; }); 39:T1bb1,function generateSummaryTable(filteredData, selectedView) { const dateColumns = Object.keys(filteredData[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]; 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.max(Math.abs(d.AvgPctChange), Math.abs(d.YoY))) .filter(p => !isNaN(p))); return html` ${tableData.map(row => { if (isNaN(row.AvgPctChange)) return null; const pct = row.AvgPctChange.toFixed(1); const yoy = row.YoY.toFixed(1); const colorPct = row.AvgPctChange >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const colorYoY = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const barWidthPct = `${(Math.abs(row.AvgPctChange) / maxAbsPct) * 100}%`; const barWidthYoY = `${(Math.abs(row.YoY) / maxAbsPct) * 100}%`; return html``; })}

Tier	Avg. Home Price	Average % Change	YoY % Change	Neighborhoods
${row.Group}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${pct}%	${yoy}%	${row.Count}

`; } // ==== neighborhood/region view ==== const groupKey = selectedView === 'neighborhood' ? 'RegionName' : 'Region'; const groups = d3.groups(filteredData, d => d[groupKey]); 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.max(Math.abs(d.AvgPctChange), Math.abs(d.YoY))) .filter(p => !isNaN(p))); return html` ${tableData.map(row => { const pct = row.AvgPctChange.toFixed(1); const yoy = row.YoY.toFixed(1); const colorPct = row.AvgPctChange >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const colorYoY = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const barWidthPct = `${(Math.abs(row.AvgPctChange) / maxAbsPct) * 100}%`; const barWidthYoY = `${(Math.abs(row.YoY) / maxAbsPct) * 100}%`; return html``; })}

${selectedView === 'neighborhood' ? 'Neighborhood' : 'Region'}	Avg. Home Price	Average % Change	YoY % Change
${row.Group}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${pct}%	${yoy}%

`; } 3a:Tbd8,function generateNeighborhoodSummary(filteredData, neighborhoodSelected) { const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const finalDate = dateColumns[dateColumns.length - 1]; const oneYearAgo = dateColumns[dateColumns.length - 13]; // Filter for selected neighborhood const neighborhoodData = filteredData.filter(d => d.RegionName === neighborhoodSelected); const tableData = neighborhoodData.map(d => { const finalPrice = +d[finalDate]; const yoyPrice = +d[oneYearAgo]; const covidPrice = +d['2020-01-31']; const changeSinceCovid = (finalPrice - covidPrice) / covidPrice * 100; const yoyChange = (finalPrice - yoyPrice) / yoyPrice * 100; return { Neighborhood: d.RegionName, Bedrooms: d.bdrm_label, AvgFinal: finalPrice, ChangeSinceCovid: changeSinceCovid, YoY: yoyChange }; }).filter(d => !isNaN(d.AvgFinal)); const maxChange = Math.max(...tableData.map(d => Math.abs(d.ChangeSinceCovid))); const maxYoY = Math.max(...tableData.map(d => Math.abs(d.YoY))); return html` ${tableData.map(row => { const covidBarWidth = `${(Math.abs(row.ChangeSinceCovid) / maxChange) * 100}%`; const covidColor = row.ChangeSinceCovid >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; const yoyBarWidth = `${(Math.abs(row.YoY) / maxYoY) * 100}%`; const yoyColor = row.YoY >= 0 ? 'rgba(74, 144, 226, 0.7)' : '#f44336'; return html``; })}

Neighborhood	Bedrooms	Avg. Home Price	Change Since COVID	YoY Change
${row.Neighborhood}	${row.Bedrooms}	$${row.AvgFinal.toLocaleString(undefined, { maximumFractionDigits: 0 })}	${row.ChangeSinceCovid.toFixed(1)}%	${row.YoY.toFixed(1)}%

`; } 3b:[] 2f:{"title":"Zillow Denver Home Price Dashboard","cells":[{"id":0,"value":"# Zillow Denver Home Price Dashboard\n\n*Source: [Zillow](https://www.zillow.com/research/data/)*","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"viewof metro = radio({\n options: [\n { label: 'Denver-Aurora-Lakewood, CO', value: 'Denver-Aurora-Lakewood, CO' }\n ],\n value: 'Denver-Aurora-Lakewood, CO'\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.City))\n ).sort();\n\n const citySelect = select({\n title: \"City\",\n options: cities,\n value: cities.includes(\"Denver\") ? \"Denver\" : cities[0]\n });\n\n citySelect.input.style.fontSize = \"0.8em\";\n return citySelect;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1621,"value":"## Neighborhood Home Price Trends\n*Avg. Home Price by Neighborhood, Index on January 2020*","pinned":false,"hidden":false,"mode":"md"},{"id":1623,"value":"viewof trends_button = radio({\n options: [\n { label: 'Neighborhood', value: 'neighborhood' },\n { label: 'Region', value: 'region' },\n { label: 'Percentile', value: 'percentile' },\n ],\n value: 'neighborhood'\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)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"

\n## ${neighborhood} Home Prices by Bedrooms","pinned":false,"hidden":false,"mode":"md"},{"id":1742,"value":"// Neighborhood dropdown based on the selected city\nviewof neighborhood = {\n const neighborhoods = Array.from(\n new Set(\n bedroomDataFiltered\n .filter(d => d.RegionName && d.Metro === metro && d.City === city)\n .map(d => d.RegionName)\n )\n ).sort();\n\n const neighborhoodSelect = select({\n title: \"Neighborhood\",\n options: neighborhoods,\n value: neighborhoods[0] // default first neighborhood\n });\n\n neighborhoodSelect.input.style.fontSize = \"0.8em\";\n return neighborhoodSelect;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1748,"value":"{\n const covidBaseDate = \"2020-01-31\"; // baseline\n const neighborhoodData = bedroomDataFiltered.filter(\n d => d.RegionName === neighborhood && d.City === city\n );\n\n const melted = [];\n for (const d of neighborhoodData) {\n const base = +d[covidBaseDate]; \n Object.keys(d).forEach(key => {\n if (/^\\d{4}-\\d{2}-\\d{2}$/.test(key) && base > 0) {\n melted.push({\n date: new Date(key),\n bdrm_label: d.bdrm_label,\n priceChange: ((+d[key] - base) / base) * 100\n });\n }\n });\n }\n\n return vl\n .markLine()\n .data(melted)\n .encode(\n vl.x().fieldT(\"date\").axis({ title: 'Year', format: '%Y', tickCount: 'year' }),\n vl.y().fieldQ(\"priceChange\").axis({ title: \"% Change Since Jan 2020\" }),\n vl.color().fieldN(\"bdrm_label\").title(\"Bedrooms\")\n )\n .width(width / 1.35)\n .height(350)\n .render();\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"neighborhoodSummary = generateNeighborhoodSummary(bedroomDataFiltered, neighborhood)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"

\n## Home Price Correlation Plot\n*Click-drag and scroll to pan and zoom. Hold the shift key and click-drag for brushing.*","pinned":false,"hidden":false,"mode":"md"},{"id":1118,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1643,"value":"

\n## Neighborhood Home Prices","pinned":false,"hidden":false,"mode":"md"},{"id":1637,"value":"viewof priceField = radio({\n options: [\n { label: 'Current Month Price', value: 'current' },\n { label: 'Year-over-Year % Change', value: 'yoy' }\n ],\n value: 'current'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"

\n## Zillow Home Price Map (Zip Code)","pinned":false,"hidden":false,"mode":"md"},{"id":1650,"value":"viewof mapType = radio({\n title: 'Map View',\n options: [\n { label: 'Current Home Price', value: 'price' },\n { label: 'YoY % Change', value: 'yoy' },\n { label: '1yr Forecast', value: 'forecast' }\n ],\n value: 'price'\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"$36","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/Neighborhood_zhvi_uc_sfrcondo_sm_sa_month.csv\"\n).then(rawData => {\n const startDate = \"2020-01-01\";\n\n return rawData\n .filter(d => d.Metro === \"Denver-Aurora-Lakewood, CO\")\n .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\", \"City\", \"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":1533,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1711,"value":"combinedBedroomData = Promise.all(\n [1,2,3,4,5].map(n =>\n d3.csv(\n `https://files.zillowstatic.com/research/public_csvs/zhvi/Neighborhood_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\n .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 City: d.City,\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":1724,"value":"bedroomDataFiltered = combinedBedroomData\n .filter(d => d.Metro === metro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"forecast_zip = d3.csv(\n \"https://files.zillowstatic.com/research/public_csvs/zhvf_growth/Zip_zhvf_growth_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\"\n).then(data => {\n return data\n .filter(d => d.State === \"CO\");\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"price_zip = {\n const isDesktop = width > 800; // only load on desktop\n if (!isDesktop) return []; // return empty array on mobile\n\n return d3.csv(\n \"https://files.zillowstatic.com/research/public_csvs/zhvi/Zip_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\"\n ).then(data => {\n const startDate = \"2020-01-01\";\n\n return data\n .filter(d => d.State === \"CO\") // keep only Colorado rows\n .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', 'City', 'Metro', 'CountyName', 'SizeRank'];\n const trimmedData = Object.fromEntries(staticFields.map(f => [f, d[f]]));\n Object.assign(trimmedData, Object.fromEntries(dateColumns.map(col => [col, d[col]])));\n\n return trimmedData;\n });\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1035,"value":"price_zip_change = {\n const isDesktop = width > 800;\n if (!isDesktop) return []; // skip all processing on mobile\n\n return price_zip\n .map(d => {\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col))\n .sort();\n\n const lastCol = dateColumns[dateColumns.length - 1];\n const prevCol = dateColumns[dateColumns.length - 13]; // 12 months back\n\n const lastVal = +d[lastCol];\n const prevVal = +d[prevCol];\n\n const maxVal = d3.max(dateColumns, col => +d[col]);\n\n const pctChange = prevVal !== 0 ? (lastVal - prevVal) / prevVal : null;\n const COVIDpctChange = +d['2020-01-31'] !== 0\n ? (lastVal - +d['2020-01-31']) / +d['2020-01-31']\n : null;\n const fromPeakPctChange = maxVal !== 0\n ? (lastVal - maxVal) / maxVal\n : null;\n\n return {\n ...d,\n fromPeakPctChange,\n COVIDPctChange: COVIDpctChange,\n yoyPctChange: pctChange\n };\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"filteredForecast = forecast_zip.filter(d => d.Metro == metro)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1578,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1767,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"zipGeoJSON = {\n const isDesktop = width > 800;\n if (!isDesktop) return null; // skip loading on mobile\n\n return d3.json('https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/co_colorado_zip_codes_geo.min.json');\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import {select, radio, autoSelect} 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":"$W3b","stdlib":"1","titling":"auto"}