31: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)})` })) ] }); }32:Tead,{ 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")}

`; }33: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)}%` })) ] }); }34:T7b8,{ const isMobile = width < 600; const plotWidth = width; const plotHeight = isMobile ? 360 : 420; const dateColumns = Object.keys(filteredData[0]) .filter(c => /^\d{4}-\d{2}-\d{2}$/.test(c)) .sort(); const longData = []; filteredData.forEach(row => { dateColumns.forEach(date => { const price = +row[date]; if (!price) return; longData.push({ RegionName: row.RegionName, State: row.State, date: new Date(date), price }); }); }); // Domain order = selection order, so colors stay stable 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: "Home Price Change: CO Cities", subtitle: "Change in Home Price since " + d3.timeFormat("%b %Y")(new Date(priceStartDate)), width: plotWidth, height: plotHeight, marginLeft: 50, marginRight: isMobile ? 60 : 110, style: { background: "#ffffff" }, x: { type: "utc", label: "Date" }, y: { label: "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)}` })) ] }); }35: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)}%` })) ] }); }36:[] 2f:{"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"},{"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"},{"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"},{"id":1618,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2593,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2354,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2364,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2609,"value":"$35","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_sfr_tier_0.33_0.67_sm_sa_month.csv\",\n d => {\n if (d.State !== \"CO\") return;\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col))\n .sort();\n const staticFields = [\"RegionName\", \"State\", \"Metro\", \"CountyName\", \"SizeRank\"];\n const trimmedRow = Object.fromEntries(staticFields.map(f => [f, d[f]]));\n trimmedRow.RegionState = `${d.RegionName}, ${d.State}`;\n Object.assign(trimmedRow, Object.fromEntries(dateColumns.map(col => [col, d[col]])));\n return trimmedRow;\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2157,"value":"mountainTowns = new Set(data.map(d => d.RegionState))","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"filteredData = data\n .filter(d => city_list.includes(d.RegionState))\n .map(d => {\n const startDate = priceStartDate;\n const dateColumns = Object.keys(d)\n .filter(col => /^\\d{4}-\\d{2}-\\d{2}$/.test(col) && col >= startDate)\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"},{"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"},{"id":2409,"value":"priceStartDate = d3.utcFormat(\"%Y-%m-%d\")(date_range[0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":2522,"value":"import {offsetInterval} from \"@mootari/offset-slider\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2653,"value":"import {yamultiselect} from \"@saneef/yet-another-multi-select\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}