2f:T94c,legend_price = { // Get the last column name (representing the most recent home price data) const last_column_name = Object.keys(filteredPrice[0]).pop(); // Prepare the data with zip codes and home prices const homePricesByZip = filteredPrice.map(d => ({ zip: d.RegionName, price: +d[last_column_name], // Convert price to a number })); // Define width and height for the SVG const width = 280, height = 80; // Increase height to accommodate the label // Create the SVG const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Add the label at the top of the legend svg.append("text") .attr("x", width / 2) .attr("y", 15) // Position the label slightly below the top .attr("text-anchor", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(`Zillow Home Price (${last_column_name})`); // Define the gradient for the color scale (light green to dark green) const gradient = svg.append("defs") .append("linearGradient") .attr("id", "gradient") // Unique gradient ID .attr("x1", "0%").attr("y1", "0%") .attr("x2", "100%").attr("y2", "0%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#d0f0c0"); // Light green gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#004d00"); // Dark green // Draw the rectangle for the gradient svg.append("rect") .attr("x", 0) .attr("y", 25) // Position the rectangle below the label .attr("width", width) .attr("height", 20) .style("fill", "url(#gradient)"); // Add axis to indicate the values as dollars const xScale = d3.scaleLinear() .domain([d3.min(homePricesByZip, d => d.price), d3.max(homePricesByZip, d => d.price)]) .range([0, width]); const xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat(d => { if (d >= 1_000_000) { return `$${d3.format(".0s")(d / 1_000_000)}M`; // Format in millions with dollar sign } else if (d >= 1_000) { return `$${d3.format(".0s")(d / 1_000)}k`; // Format in thousands with dollar sign } else { return `$${d3.format(",")(d)}`; // Format in standard notation with dollar sign } }); svg.append("g") .attr("transform", `translate(0, 50)`) // Position axis below the gradient rectangle .call(xAxis); return svg.node(); } 30:T985,viewof map_price = { const height = 0.55 * width; const last_column_name = Object.keys(filteredPrice[0]).pop(); const homePricesByZip = filteredPrice.map(d => ({ zip: d.RegionName.padStart(5, '0'), price: +d[last_column_name], })); const isDesktop = width > 800; // Same projection and scale as the forecast map for Hawaii const projection = d3.geoMercator() .center([-157.5, 20.6]) .scale(isDesktop ? 9500 : 3000) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const colorScale = d3.scaleLinear() .domain([ d3.min(homePricesByZip, d => d.price), d3.max(homePricesByZip, d => d.price) ]) .range(['#d0f0c0', '#004d00']); const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.selectAll("path") .data(zipGeoJSON.features .filter(d => d.properties.ZCTA5CE10.startsWith("967") || d.properties.ZCTA5CE10.startsWith("968"))) .join("path") .attr("d", path) .attr("fill", d => { const zip = d.properties.ZCTA5CE10; const data = homePricesByZip.find(h => h.zip === zip); return data ? colorScale(data.price) : '#ccc'; }) .attr("stroke", "#fff") .attr("stroke-width", 0.1) .on("mouseover", function(event, d) { const zip = d.properties.ZCTA5CE10; const data = homePricesByZip.find(h => h.zip === zip); const price = data ? formatPrice(data.price) : 'N/A'; tooltip.html(`ZIP: ${zip}
Value: ${price}`) .style("visibility", "visible") .style("top", `${event.pageY + 5}px`) .style("left", `${event.pageX + 5}px`); }) .on("mousemove", function(event) { tooltip.style("top", `${event.pageY + 5}px`) .style("left", `${event.pageX + 5}px`); }) .on("mouseout", () => tooltip.style("visibility", "hidden")); function formatPrice(price) { if (price >= 1_000_000) return `$${(price / 1_000_000).toFixed(2)}M`; else if (price >= 1_000) return `$${(price / 1_000).toFixed(1)}K`; else return `$${price.toFixed(0)}`; } const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #ccc") .style("padding", "5px") .style("border-radius", "3px") .style("visibility", "hidden"); return svg.node(); } 31:Tb8f,viewof chart2 = { const current_forecast = forecast; // Compute min and max for color scale domain using forecastPercent const labeledData = filteredForecast.map(d => ({ ...d, metroZip: `${d.RegionName}`, forecastPercent: +d[current_forecast] / 100 })); const prices = labeledData.map(d => d.forecastPercent); const minPrice = Math.min(...prices); const maxPrice = Math.max(...prices); const colorDomain = [-0.06, 0, 0.06]; const colorRange = ['#e84343', '#ffffff', '#0b70db']; // red, white, blue const chartWidth = window.innerWidth < 600 ? 280 : 400; const histogram = vl.data(labeledData) .title("Home Price Forecast Distribution") .layer( vl.markBar() .encode( vl.x().fieldQ("forecastPercent").bin({ maxbins: 20 }).axis({ format: ".1%", title: `${current_forecast} Price Forecast (%)` }), vl.y().count().axis({ orient: 'left' }).title("Zip Code Count"), vl.color().fieldQ("forecastPercent") .scale({ domain: colorDomain, range: colorRange }), vl.tooltip([ { field: "forecastPercent", type: "quantitative", title: `${current_forecast} Forecast`, format: ".1%" }, { aggregate: "count", type: "quantitative", title: "Zip Code Count" } ]) ), vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .encode( vl.x().fieldQ("forecastPercent").aggregate('median') ), vl.markText({ color: 'black', align: 'left', dx: 3, y: 10 }) .encode( vl.x().median("forecastPercent"), vl.text().median("forecastPercent").format(".1%") ) ) .width(chartWidth) .height(200) .config({ view: { stroke: null } }); const barchart = vl.data(labeledData) .title(`Home Price Forecast by Zip Code (${current_forecast})`) .layer( vl.markBar() .encode( vl.x().fieldQ("forecastPercent").axis({ format: ".1%", title: `${current_forecast} Forecast (%)` }), vl.y().fieldN('metroZip').title(null), vl.color().fieldQ("forecastPercent") .scale({ domain: colorDomain, range: colorRange }), vl.tooltip([ { field: "RegionName", type: "nominal", title: "Zip Code" }, { field: "Metro", type: "nominal", title: "Metro" }, { field: "forecastPercent", type: "quantitative", title: `${current_forecast} Forecast`, format: ".2%" } ]) ), vl.markRule({ color: 'black', size: 2, strokeDash: [4, 4], opacity: 0.8 }) .encode( vl.x().fieldQ("forecastPercent").aggregate('median') ), vl.markText({ align: "left", dx: 5, dy: 1 }) .encode( vl.x().fieldQ("forecastPercent"), vl.y().fieldN('metroZip'), vl.text().fieldQ("forecastPercent").format(".1%") ) ) .width(chartWidth); return vl.vconcat(histogram, barchart).render(); } 32:T6bf,legend_forecast = { const last_column_name = forecast_map; const homePricesByZip = filteredForecast.map(d => ({ zip: d.RegionName, price: +d[last_column_name], })); const width = 300, height = 80; const min = d3.min(homePricesByZip, d => d.price); const max = d3.max(homePricesByZip, d => d.price); // Calculate 0-position as percentage between min and max const zeroOffset = ((0 - min) / (max - min)) * 100; 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(`Zillow Home Price Change Forecast (${last_column_name})`); const gradient = svg.append("defs") .append("linearGradient") .attr("id", "gradientId") .attr("x1", "0%").attr("y1", "0%") .attr("x2", "100%").attr("y2", "0%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#e84343"); // red for negative gradient.append("stop") .attr("offset", `${zeroOffset}%`) .attr("stop-color", "#ffffff"); // white at 0 gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#0b70db"); // blue for positive svg.append("rect") .attr("x", 0) .attr("y", 25) .attr("width", width) .attr("height", 20) .style("fill", "url(#gradientId)"); const xScale = d3.scaleLinear() .domain([min, max]) .range([0, width]); const xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat(d => `${d3.format(".1%")(d / 100)}`); svg.append("g") .attr("transform", `translate(0, 50)`) .call(xAxis); return svg.node(); } 33:T906,viewof map = { const last_column_name = forecast_map; const homePricesByZip = filteredForecastMap.map(d => ({ zip: d.RegionName.padStart(5, '0'), // ensure leading zeros price: +d[last_column_name], city: d.City })); const height = 0.55 * width; const isDesktop = width > 800; // Same projection and scale as the forecast map for Hawaii const projection = d3.geoMercator() .center([-157.5, 20.6]) .scale(isDesktop ? 9500 : 3000) .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const colorScale = d3.scaleLinear() .domain([ d3.min(homePricesByZip, d => d.price), 0, d3.max(homePricesByZip, d => d.price) ]) .range(['#e84343', '#ffffff', '#0b70db']); const svg = d3.create("svg") .attr("width", width) .attr("height", height); svg.selectAll("path") .data(zipGeoJSON.features.filter(d => d.properties.ZCTA5CE10.startsWith("967") || d.properties.ZCTA5CE10.startsWith("968"))) .join("path") .attr("d", path) .attr("fill", d => { const zip = d.properties.ZCTA5CE10; const data = homePricesByZip.find(h => h.zip === zip); return data ? colorScale(data.price) : '#ccc'; }) .attr("stroke", "#fff") .attr("stroke-width", 0.1) .on("mouseover", function(event, d) { const zip = d.properties.ZCTA5CE10; const data = homePricesByZip.find(h => h.zip === zip); const tooltipText = data ? `ZIP: ${zip}
City: ${data.city}
Forecast Price: ${data.price}%` : `ZIP: ${zip}`; tooltip.html(tooltipText) .style("visibility", "visible") .style("top", `${event.pageY + 5}px`) .style("left", `${event.pageX + 5}px`); }) .on("mousemove", function(event) { tooltip.style("top", `${event.pageY + 5}px`) .style("left", `${event.pageX + 5}px`); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); }); const tooltip = d3.select("body").append("div") .style("position", "absolute") .style("background", "#fff") .style("border", "1px solid #ccc") .style("padding", "5px") .style("border-radius", "3px") .style("visibility", "hidden"); return svg.node(); } 34:[] 2d:{"title":"Zillow Home Price by Zip Code","cells":[{"id":0,"value":"# Zillow Home Price by Zip Code\n\n**Zillow Home Value Index:** All Homes, Smoothed, Seasonally Adjusted\n\n*Source: [Zillow](https://www.zillow.com/research/data/)*","pinned":false,"hidden":false,"mode":"md"},{"id":1613,"value":"viewof state = {\n const type = select({\n title: \"State\",\n options: Array.from(\n new Set(forecast_zip.map(d => d.State))\n )\n .sort()\n .map(d => ({ label: d, value: d })),\n value: \"HI\",\n description: \"Select State to chart.\"\n });\n type.input.style.fontSize = \"0.8em\";\n return type;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":920,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"

\n## Zillow Home Price Forecast Map by Zip Code\n*A month-ahead, quarter-ahead and year-ahead forecast of the Zillow Home Value Index.*","pinned":false,"hidden":false,"mode":"md"},{"id":1129,"value":"viewof metro_forecast = {\n // Filter dataset to only include rows where State matches the selected state\n const metros = Array.from(\n new Set(forecast_zip.filter(d => d.State === state).map(d => d.Metro))\n ).sort();\n\n // Build options with \"Select All\" at the top\n const options = [{ label: \"Select All\", value: \"Select All\" }]\n .concat(metros.map(m => ({ label: m, value: m })));\n\n // Create select input\n const type = select({\n title: \"Metro\",\n options,\n value: \"Select All\" // default\n });\n\n // Style\n type.input.style.fontSize = \"0.8em\";\n\n return type;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1061,"value":"viewof forecast = {\n const forecastCols = Object.keys(filteredForecast[0]).slice(-3);\n\n const labelMap = {\n 0: \"1 Month\",\n 1: \"3 Month\",\n 2: \"1 Year\"\n };\n\n return radio({\n title: 'Forecast',\n options: forecastCols.map((col, i) => ({\n label: labelMap[i],\n value: col\n })),\n value: forecastCols[2]\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"
\n## Zillow Home Price Forecast (Zip Code)","pinned":false,"hidden":false,"mode":"md"},{"id":1073,"value":"viewof forecast_map = {\n const forecastCols = Object.keys(filteredForecastMap[0]).slice(-3);\n\n const labelMap = {\n 0: \"1 Month\",\n 1: \"3 Month\",\n 2: \"1 Year\"\n };\n\n return radio({\n title: 'Forecast',\n options: forecastCols.map((col, i) => ({\n label: labelMap[i],\n value: col\n })),\n value: forecastCols[2]\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":812,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":798,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"

\n## Code and Data","pinned":false,"hidden":false,"mode":"md"},{"id":593,"value":"forecast_zip = d3.csv(\"https://files.zillowstatic.com/research/public_csvs/zhvf_growth/Zip_zhvf_growth_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"price_zip = d3.csv(\"https://files.zillowstatic.com/research/public_csvs/zhvi/Zip_zhvi_uc_sfrcondo_tier_0.33_0.67_sm_sa_month.csv\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"filteredForecast = forecast_zip.filter(d =>\n d.State === state &&\n (metro_forecast === \"Select All\" || d.Metro === metro_forecast)\n);\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"filteredForecastMap = forecast_zip.filter(d =>\n d.State === state\n);","pinned":false,"hidden":false,"mode":"ojs"},{"id":916,"value":"filteredPrice = price_zip.filter(d => d.State == state)","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"zipGeoJSON = d3.json('https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/hi_hawaii_zip_codes_geo.min.json')","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":"$W34","stdlib":"1","titling":"auto"}