2d:null 2e:["$","title",null,{"children":"Colorado Metro Home Price Comparison | Bobby Reedy | Observable"}] 33:Tb67,{ const isMobile = width < 600; const plotHeight = isMobile ? 360 : 420; const plotMarginRight = isMobile ? 60 : 120; const plotMarginLeft = isMobile ? 50 : 60; const baseDate = priceStartDate; const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort() .filter(d => d >= baseDate); const longData = []; filteredData.forEach(row => { const basePrice = +row[baseDate]; if (!basePrice) return; dateColumns.forEach(date => { const price = +row[date]; if (!price) return; longData.push({ RegionName: row.RegionName, State: row.State, date: new Date(date), pctChange: (price - basePrice) / basePrice, price }); }); }); const cities = filteredData.map(d => d.RegionName); const nytColors = ["#4E79A7", "#E15759", "#59A14F", "#B07AA1", "#F28E2B", "#76B7B2", "#EDC948", "#9C755F", "#BAB0AC"]; const color = d3.scaleOrdinal(cities, nytColors); const cityLabels = d3.rollups(longData, v => v[v.length - 1], d => d.RegionName).map(([, d]) => d); const usRow = usMetroRaw.find(d => d.RegionName === "United States"); const usLine = []; if (usRow) { const usBase = +usRow[baseDate]; if (usBase) { dateColumns.forEach(date => { const price = +usRow[date]; if (!price) return; usLine.push({ date: new Date(date), pctChange: (price - usBase) / usBase, price }); }); } } const formatPrice = d3.format("$.3s"); const fmt = v => formatPrice(v).replace('G', 'B'); return Plot.plot({ width: width, height: plotHeight, marginRight: plotMarginRight, marginLeft: plotMarginLeft, x: { type: "utc", label: "Date" }, y: { label: "Percent Change Since " + d3.timeFormat("%b %Y")(new Date(priceStartDate)), tickFormat: ".1%", grid: true }, marks: [ Plot.ruleY([0], { stroke: "#ccc" }), Plot.lineY(longData, { x: "date", y: "pctChange", z: "RegionName", stroke: d => color(d.RegionName), strokeWidth: 2 }), Plot.text(cityLabels, { x: "date", y: "pctChange", text: d => `${d.RegionName}\n${(d.pctChange * 100).toFixed(1)}%`, dx: 6, fill: d => color(d.RegionName), fontWeight: "bold", textAnchor: "start", stroke: "white", strokeWidth: 3, paintOrder: "stroke" }), Plot.lineY(usLine, { x: "date", y: "pctChange", stroke: "#000", strokeWidth: 3, strokeDasharray: "6,4" }), Plot.text(usLine.slice(-1), { x: "date", y: "pctChange", text: d => `US Avg.\n${(d.pctChange * 100).toFixed(1)}%`, dx: 6, dy: 12, fill: "#000", fontWeight: "bold", textAnchor: "start", stroke: "white", strokeWidth: 3, paintOrder: "stroke" }), Plot.tip(longData, Plot.pointer({ x: "date", y: "pctChange", title: d => `${d.RegionName}, ${d.State}\n${d3.timeFormat("%b %Y")(d.date)}\n${(d.pctChange * 100).toFixed(1)}% (${fmt(d.price)})` })) ] }); }34:T1144,{ const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const baseDate = priceStartDate; const latestDate = dateColumns[dateColumns.length - 1]; const latestD = new Date(latestDate); const yoyTarget = new Date(latestD); yoyTarget.setFullYear(yoyTarget.getFullYear() - 1); const yoyDate = dateColumns.reduce((best, d) => Math.abs(new Date(d) - yoyTarget) < Math.abs(new Date(best) - yoyTarget) ? d : best ); const usRow = usMetroRaw.find(d => d.RegionName === "United States"); const usBase = +usRow[baseDate]; const usLatest = +usRow[latestDate]; const usPctChange = usBase ? (usLatest - usBase) / usBase : null; const rows = filteredData.map(row => { const base = +row[baseDate]; const latest = +row[latestDate]; const yoyPast = +row[yoyDate]; const pctChange = base ? (latest - base) / base : null; const yoyChange = yoyPast ? (latest - yoyPast) / yoyPast : null; const diffFromUS = pctChange != null && usPctChange != null ? pctChange - usPctChange : null; return { RegionName: row.RegionName, State: row.State, price: latest, pctChange, yoyChange, diffFromUS }; }); const fmtPrice = d3.format("$,.0f"); const fmtPct = v => v == null ? "—" : (v >= 0 ? "+" : "") + (v * 100).toFixed(1) + "%"; const pctColor = v => v == null ? "#666" : v >= 0 ? "#1a7a3c" : "#c0392b"; const maxAbs = key => d3.max(rows, d => d[key] == null ? 0 : Math.abs(d[key])) || 1; const scales = { pctChange: maxAbs("pctChange"), yoyChange: maxAbs("yoyChange"), diffFromUS: maxAbs("diffFromUS") }; const barCell = (v, key) => { const trackWidth = 70; const half = trackWidth / 2; const w = v == null ? 0 : Math.min(half, (Math.abs(v) / scales[key]) * half); return html`

${fmtPct(v)}

`; }; return html`

${rows.map(d => html` `)}

City	Price	% Change	Y/Y Change	Diff. from US Avg.
${d.RegionName}, ${d.State}	${fmtPrice(d.price)}	${barCell(d.pctChange, "pctChange")}	${barCell(d.yoyChange, "yoyChange")}	${barCell(d.diffFromUS, "diffFromUS")}

`; }35:T8b7,{ const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const cityMonthly = []; filteredData.forEach(row => { for (let i = 1; i < dateColumns.length; i++) { const prev = +row[dateColumns[i - 1]]; const curr = +row[dateColumns[i]]; if (!prev || !curr) continue; cityMonthly.push({ RegionName: row.RegionName, date: new Date(dateColumns[i]), momChange: (curr - prev) / prev }); } }); const cities = filteredData.map(d => d.RegionName); const nytColors = ["#4E79A7", "#E15759", "#59A14F", "#B07AA1", "#F28E2B", "#76B7B2", "#EDC948", "#9C755F", "#BAB0AC"]; const usRow = usMetroRaw.find(d => d.RegionName === "United States"); const usMonthly = []; if (usRow) { for (let i = 1; i < dateColumns.length; i++) { const prev = +usRow[dateColumns[i - 1]]; const curr = +usRow[dateColumns[i]]; if (!prev || !curr) continue; usMonthly.push({ RegionName: "US Avg.", date: new Date(dateColumns[i]), momChange: (curr - prev) / prev }); } } const allNames = [...cities, "US Avg."]; const allColors = [...nytColors.slice(0, cities.length), "#999999"]; const isMobile = width < 600; return Plot.plot({ title: "Monthly Percent Change: CO Cities vs. US", subtitle: "Month-over-month change since " + d3.timeFormat("%b %Y")(new Date(priceStartDate)), width: isMobile ? width : width, height: isMobile ? 300 : 380, style: { background: "#ffffff" }, x: { type: "utc", label: "Date" }, y: { label: "Month-over-Month % Change", tickFormat: ".1%", grid: true }, color: { domain: allNames, range: allColors, legend: true }, marks: [ Plot.ruleY([0], { stroke: "#d9d9d9" }), Plot.lineY(cityMonthly, { x: "date", y: "momChange", z: "RegionName", stroke: "RegionName", strokeWidth: 2 }), Plot.lineY(usMonthly, { x: "date", y: "momChange", z: "RegionName", stroke: "RegionName", strokeWidth: 2 }), Plot.tip(cityMonthly.concat(usMonthly), Plot.pointer({ x: "date", y: "momChange", title: d => `${d.RegionName}\n${d3.timeFormat("%b %Y")(d.date)}\n${(d.momChange * 100).toFixed(2)}%` })) ] }); }36:T999,{ const isMobile = width < 600; const plotHeight = isMobile ? 360 : 420; const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const isReal = adjustInflation === "Inflation-Adjusted"; const deflator = isReal ? new Map(dateColumns.map(date => [date, baseCPI / cpiByMonth.get(date.slice(0, 7))])) : null; const longData = filteredData.flatMap(row => dateColumns .map(date => { const nominal = +row[date]; if (!nominal) return null; const price = isReal ? nominal * deflator.get(date) : nominal; if (isReal && !price) return null; return { RegionName: row.RegionName, State: row.State, date: new Date(date), price }; }) .filter(Boolean) ); const cities = filteredData.map(d => d.RegionName); const nytColors = ["#4E79A7", "#E15759", "#59A14F", "#B07AA1", "#F28E2B", "#76B7B2", "#EDC948", "#9C755F", "#BAB0AC"]; const color = d3.scaleOrdinal(cities, nytColors); const cityLabels = d3.rollups(longData, v => v[v.length - 1], d => d.RegionName).map(([, d]) => d); const formatPrice = d3.format("$.3s"); const fmt = v => formatPrice(v).replace('G', 'B'); return Plot.plot({ title: isReal ? "Home Price Change: Inflation-Adjusted" : "Home Price Change", subtitle: isReal ? `Home price in today's dollars (adjusted for inflation, ${d3.timeFormat("%b %Y")(d3.max(cpiData, d => d.observation_date))})` : "Change in Home Price since " + d3.timeFormat("%b %Y")(new Date(priceStartDate)), width: width, height: plotHeight, marginLeft: 50, marginRight: isMobile ? 60 : 110, style: { background: "#ffffff" }, x: { type: "utc", label: "Date" }, y: { label: isReal ? "Real Home Price" : "Home Price", tickFormat: "$.1s", grid: true }, marks: [ Plot.lineY(longData, { x: "date", y: "price", z: "RegionName", stroke: d => color(d.RegionName), strokeWidth: 2 }), Plot.text(cityLabels, { x: "date", y: "price", text: d => `${d.RegionName}\n${fmt(d.price)}`, dx: 6, fill: d => color(d.RegionName), fontWeight: "bold", textAnchor: "start", stroke: "white", strokeWidth: 3, paintOrder: "stroke" }), Plot.tip(longData, Plot.pointer({ x: "date", y: "price", title: d => `${d.RegionName}, ${d.State}\n${d3.timeFormat("%b %Y")(d.date)}\n${fmt(d.price)}${isReal ? " (real)" : ""}` })) ] }); }37:T98a,{ const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const cityMonthly = []; filteredData.forEach(row => { for (let i = 1; i < dateColumns.length; i++) { const prev = +row[dateColumns[i - 1]]; const curr = +row[dateColumns[i]]; if (!prev || !curr) continue; cityMonthly.push({ RegionName: row.RegionName, date: new Date(dateColumns[i]), momChange: (curr - prev) / prev }); } }); const usRow = usMetroRaw.find(d => d.RegionName === "United States"); const usMonthly = []; if (usRow) { for (let i = 1; i < dateColumns.length; i++) { const prev = +usRow[dateColumns[i - 1]]; const curr = +usRow[dateColumns[i]]; if (!prev || !curr) continue; usMonthly.push({ RegionName: "US Avg.", date: new Date(dateColumns[i]), momChange: (curr - prev) / prev }); } } const allData = cityMonthly.concat(usMonthly); const yDomain = [...filteredData.map(d => d.RegionName), "US Avg."]; // band scale needs an explicit sorted x domain const xDomain = Array.from(new Set(allData.map(d => +d.date))) .sort((a, b) => a - b) .map(t => new Date(t)); // only label January of each year to avoid a cluttered axis const januaryTicks = xDomain.filter(d => d.getUTCMonth() === 0); const maxAbs = d3.max(allData, d => Math.abs(d.momChange)) || 0.01; const isMobile = width < 600; return Plot.plot({ title: "Monthly Percent Change: Selected Cities vs. US", subtitle: "Month-over-month change, by city", width: isMobile ? width : width, height: 40 * yDomain.length + 80, marginLeft: 100, marginRight: 0, style: { background: "#ffffff" }, x: { type: "band", domain: xDomain, ticks: januaryTicks, tickFormat: d3.timeFormat("%Y"), label: "Date" }, y: { domain: yDomain, label: null }, color: { type: "diverging", scheme: "RdBu", domain: [-maxAbs, maxAbs], pivot: 0, legend: true, label: "MoM % change", tickFormat: ".1%" }, marks: [ Plot.cell(allData, { x: "date", y: "RegionName", fill: "momChange", inset: 0.5 }), Plot.tip(allData, Plot.pointer({ x: "date", y: "RegionName", title: d => `${d.RegionName}\n${d3.timeFormat("%b %Y")(d.date)}\n${(d.momChange * 100).toFixed(2)}%` })) ] }); }38:[] 31:{"id":"9ee6be37d4252678","slug":"colorado-metro-home-price-comparison","title":"Colorado Metro Home Price Comparison","thumbnail":"aff31044c4d952ed50f30c34f862a2558dfbab7d6090f57e3d395c6a097e3c12","access_level":"public","create_time":"$D2026-07-07T03:27:06.136Z","update_time":"$D2026-09-16T04:17:55.644Z","view_time":null,"first_public_time":"$D2026-07-07T03:59:48.340Z","has_unpublished_edits":null,"fork":{"id":"dabffec850dc1a3f","slug":"ski-town-home-price-trends","title":"Ski Town Home Price Trends","owner":{"id":"3b88b27becc4bbe6","login":"robertmreedy","name":"Bobby Reedy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"3b88b27becc4bbe6","login":"robertmreedy","name":"Bobby Reedy","avatar_url":"https://avatars-next.observableusercontent.com/90f1a7d743c3a2110c947721108b59ac8dcf7901079833e3803e54258687e7a4","tier":"starter_2024"},"version":2788,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"78c022c35bbdd3b7","login":"robertmreedy","name":"Bobby Reedy","avatar_url":"https://avatars-next.observableusercontent.com/90f1a7d743c3a2110c947721108b59ac8dcf7901079833e3803e54258687e7a4","tier":null}],"members":[{"type":"team","id":"3b88b27becc4bbe6","login":"robertmreedy","name":"Bobby Reedy","avatar_url":"https://avatars-next.observableusercontent.com/90f1a7d743c3a2110c947721108b59ac8dcf7901079833e3803e54258687e7a4","tier":"starter_2024","role":"editor"},{"type":"individual","id":"78c022c35bbdd3b7","login":"robertmreedy","name":"Bobby Reedy","avatar_url":"https://avatars-next.observableusercontent.com/90f1a7d743c3a2110c947721108b59ac8dcf7901079833e3803e54258687e7a4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Colorado Metro Home Price Comparison","cells":[{"id":0,"value":"# Colorado Metro Home Price Comparison\n\n**Average Home Price Change** \n*Zillow Home Value Index: Single Family Homes* \n*Data Source: [Zillow Research](https://www.zillow.com/research/data/)*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2528,"value":"viewof date_range = offsetInterval(dateArray, {\n label: \"Date range\",\n value: [\n dateArray.find(d => d >= new Date(\"2015-12-01\")) ?? dateArray[0],\n dateArray[dateArray.length - 1]\n ],\n format: ([a, b]) => htl.html`\n ${a.toISOString().slice(0, 10)}\n ${b.toISOString().slice(0, 10)}\n `\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2660,"value":"viewof city_list = yamultiselect(mountainTowns, { label: \"City\", value: [\"Denver, CO\", \"Englewood, CO\", \"Centennial, CO\", \"Evergreen, CO\"] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2593,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2354,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2704,"value":"viewof adjustInflation = Inputs.radio([\"Standard\", \"Inflation-Adjusted\"], { value: \"Standard\", label: \"Price Type\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2609,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"

\n## Code and Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"data = d3.csv(\n \"https://files.zillowstatic.com/research/public_csvs/zhvi/City_zhvi_uc_sfr_tier_0.33_0.67_sm_sa_month.csv\",\n d => {\n if (!state_list.includes(d.State)) return;\n d.RegionState = `${d.RegionName}, ${d.State}`;\n return d;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2698,"value":"viewof state_list = yamultiselect(\n [\"AK\",\"AL\",\"AR\",\"AZ\",\"CA\",\"CO\",\"CT\",\"DC\",\"DE\",\"FL\",\"GA\",\"HI\",\"IA\",\n \"ID\",\"IL\",\"IN\",\"KS\",\"KY\",\"LA\",\"MA\",\"MD\",\"ME\",\"MI\",\"MN\",\"MO\",\"MS\",\n \"MT\",\"NC\",\"ND\",\"NE\",\"NH\",\"NJ\",\"NM\",\"NV\",\"NY\",\"OH\",\"OK\",\"OR\",\"PA\",\n \"RI\",\"SC\",\"SD\",\"TN\",\"TX\",\"UT\",\"VA\",\"VT\",\"WA\",\"WI\",\"WV\",\"WY\"],\n { label: \"State\", value: [\"CO\"] }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"usMetroRaw = d3.csv(\n \"https://files.zillowstatic.com/research/public_csvs/zhvi/Metro_zhvi_uc_sfr_tier_0.33_0.67_sm_sa_month.csv\"\n).then(rawData => rawData.filter(d => d.RegionName === \"United States\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2157,"value":"mountainTowns = new Set(data.map(d => d.RegionState))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"filteredData = data\n .filter(d => city_list.includes(d.RegionState))\n .map(d => {\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col) && col >= priceStartDate)\n .sort();\n return {\n Metro: d.Metro,\n RegionName: d.RegionName,\n State: d.State,\n RegionState: d.RegionState,\n isMountainTown: true,\n ...Object.fromEntries(dateColumns.map(col => [col, d[col]]))\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"dateArray = Object.keys(data[0])\n .filter(c => /^\\d{4}-\\d{2}-\\d{2}$/.test(c))\n .sort()\n .map(d => new Date(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2409,"value":"priceStartDate = d3.utcFormat(\"%Y-%m-%d\")(date_range[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2699,"value":"cpiData = FileAttachment(\"CPIAUCSL.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2700,"value":"cpiByMonth = new Map(\n cpiData.map(d => [d3.timeFormat(\"%Y-%m\")(d.observation_date), +d.CPIAUCSL])\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2702,"value":"latestCPIDate = d3.max(cpiData, d => d.observation_date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2703,"value":"baseCPI = cpiByMonth.get(d3.timeFormat(\"%Y-%m\")(latestCPIDate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2522,"value":"import {offsetInterval} from \"@mootari/offset-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2653,"value":"import {yamultiselect} from \"@saneef/yet-another-multi-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"