29:null 2a:["$","title",null,{"children":"Housing Market Changes After Covid | Columbia Dataviz | Observable"}] 2f:T1014,{ const margin = {top: 30, right: 70, bottom: 70, left: 50}; var select = 0; const width = 1000 - margin.left - margin.right, height = 700 - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const config = { labelMargin: 3, xAxisMargin: 10, legendRightMargin: 10 } const x = d3.scaleLinear() .range([0, width]); const y = d3.scaleBand() .range([height, 0]) .padding(0.3); const legend = svg.append("g") .attr("class", "legend"); legend.append("text") .attr("x", width / 2) .attr("y", -margin.top+10) .attr("text-anchor", "middle") .attr("dominant-baseline", "hanging") .attr("font-family", "sans-serif") .attr("font-size", "16px") .text("Home Price Index Percentage Change"); y.domain(home_price.map(function(d) { return d.State; })); x.domain(d3.extent(home_price, function(d) { return d[chartChoice]; })); const max = d3.max(home_price, function(d) { return d[chartChoice]; }) const min = d3.min(home_price, function(d) { return d[chartChoice]; }) colorState2.domain(extent); const aScale = d3.scaleLinear().domain(extent).range([0.6,1]); const yAxis = svg.append("g") .attr("class", "y-axis") .attr("transform", "translate(" + x(0) + ",0)") .append("line") .attr("y1", 0) .attr("y2", height); const xAxis = svg.append("g") .attr("class", "x-axis") .attr("transform", "translate(0," + (height + config.xAxisMargin) + ")") .call(d3.axisBottom(x).tickSizeOuter(0)); const xTitle = svg.append("g") .attr("class", "legend"); xTitle.append("text") .attr("font-family", "sans-serif") .attr("font-size", "13px") .attr("x", (width/2) - 100) .attr("y", 650) .text("Percentage increased %") const bars = svg.append("g") .attr("class", "bars") bars.selectAll("rect") .data(home_price) .enter().append("rect") .attr("class", "annual-growth") .attr("x", function(d) { return x(Math.min(mean, d[chartChoice])); }) .attr("y", function(d) { return y(d.State); }) .attr("height", y.bandwidth()) .attr("width", function(d) { return Math.abs(x(d[chartChoice]) - x(mean)) }) .style("fill", function(d) { return colorState2(d[chartChoice]) }) .on("click", function(d){ mutable state_selected.append(d.State); select = 1; // var timer = setInterval(function() {select = 0}, 10000); }) .on("mouseover", d => { svg.selectAll("rect").transition() .attr("delay", 0) .attr("duration", 200) .style("opacity", i => { if (d.region !== i.region) { return 0; } }) }) .on("mouseout", d => { svg.selectAll("rect").transition() .attr("delay", 0) .attr("duration", 100) .style("opacity",d=>aScale(d.rate))}); var labels = svg.append("g") .attr("class", "labels"); labels.selectAll("text") .data(home_price) .enter().append("text") .attr("class", "bar-label") .attr("x", x(mean)) .attr("y", function(d) { return y(d.State)}) .attr("dx", function(d) { return d[chartChoice] < mean ? config.labelMargin : -config.labelMargin; }) .attr("dy", y.bandwidth()) .attr("text-anchor", function(d) { return d[chartChoice] < mean ? "start" : "end"; }) .attr("font-size", "13px") .text(function(d) { return d.State }) return svg.node().parentNode; } 30:T8d6,stateUnemploymentDecade1 = { // the usual set up const {visWidth, visHeight, margin} = dimensions; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title g.append('text') .text(`Rent change by state, January 2017 -January 2022`) // add the state label to each cell // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(pairsByState3) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); // add the area to each cell cells.append('path') .attr('d', d => area(d.values)) .attr('fill', 'steelblue'); // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', y(2000)) .text(d => stateToAbbr[d.name]) // Axes // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth()})`) .call(xAxis) // remove tick labels from all charts except the ones at the bottom of the columns xAxes.filter((d, i) => i < pairsByState3.length - numCols) .selectAll('text') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(yAxis) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter((d, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }31:T945,stateUnemploymentDecade_change = { // the usual set up const {visWidth, visHeight, margin} = dimensions; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title g.append('text') .text(`Percentage change rent, January 2017 -January 2022`) // add the state label to each cell // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(pairsByState_change1) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); // add the area to each cell cells.append("path") .datum(d => d.values) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", line_change); // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x_', 5) .attr('y', y_change(20)) .text(d => stateToAbbr[d.name]) // Axes // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth() })`) .call(xAxis_change) // remove tick labels from all charts except the ones at the bottom of the columns xAxes.filter((d, i) => i < pairsByState_change1.length - numCols) .selectAll('text') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(yAxis_change) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter((d, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }32:T9a1,stateUnemploymentDecade2 = { // the usual set up const {visWidth, visHeight, margin} = dimensions; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title const format = d3.timeFormat('%B %Y'); g.append('text') .text(`Unemployment Rate, ${format(dateExtent1[0])} - ${format(dateExtent1[1])}`) // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(unemploymentData1) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); // add the area to each cell cells.append('path') .attr('d', d => area1(d.rates)) .attr('fill', 'steelblue'); // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x', 5) .attr('y', y(2000)) .text(d => stateToAbbr[d.state]) // Axes // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth()})`) .call(xAxis1) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the ones at the bottom of the columns xAxes.filter((d, i) => i < unemploymentData1.length - numCols) .selectAll('text') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(yAxis1) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter((d, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }33:Ta27,collastmultiple1= { // the usual set up const {visWidth, visHeight, margin} = dimensions; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom); const g = svg.append('g') .attr('font-family', 'sans-serif') .attr('transform', `translate(${margin.left}, ${margin.top})`); // title //g.append('text') //.text(`change by state from 1997 to 2022`) const format = d3.timeFormat('%B %Y'); g.append('text') .attr("x", 12) .attr("y", 2) .text(`Change in GDSP from 1997 to 2022`) // add the state label to each cell // add a group for each cell and position it according to its row and column const cells = g.selectAll('g') .data(PairsByState) .join('g') .attr('transform', (d, i) => { /* i is the current index in this case, the value of i will be from 0-25. */ // get the row index and column index for this cell const r = Math.floor(i / numCols); const c = i % numCols; // use the scales to get the x, y coordinates return `translate(${col(c)}, ${row(r)})`; }); // add the area to each cell cells.append("path") .datum(d => d.values) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("d", Line_Change); // add the state label to each cell cells.append('text') .attr('font-size', 12) .attr('dominant-baseline', 'middle') .attr('x_', 5) .attr('y', Y_change(1800000)) .text(d => d.name) g.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("x", 6) .attr("y", 2) .text("GSP"); // Axes // add x axes to each chart const xAxes = cells.append('g') // move it to the bottom .attr('transform', d => `translate(0,${row.bandwidth() })`) .call(XAxis_change) // remove tick labels from all charts except the ones at the bottom of the columns xAxes.filter((d, i) => i < PairsByState.length - numCols) .selectAll('text') .remove(); // add y axes to each chart const yAxes = cells.append('g') .call(YAxis_change) // remove the baseline .call(g => g.select('.domain').remove()) // change the tick color to gray .call(g => g.selectAll('line').attr('stroke', '#c0c0c0')); // remove tick labels from all charts except the first column yAxes.filter((d, i) => i % numCols !== 0) .selectAll('text') .remove(); return svg.node(); }34:Tee9,**Methodology** Data sources: Rent price: [2020-2022](https://www.statista.com/statistics/1219332/average-apartment-rent-usa-by-state/) Average home price: [2023](https://wisevoter.com/state-rankings/median-home-price-by-state/ ) [2022](https://www.fool.com/the-ascent/research/average-house-price-state/ ) [2021](https://en.wikipedia.org/wiki/List_of_U.S._states_by_median_home_price ) Income and gdp: [historical data](https://apps.bea.gov/iTable/?reqid=99&step=1&acrdn=4#eyJhcHBpZCI6OTksInN0ZXBzIjpbMSwyNCwyOSwyNSwyNiwyNyw0MF0sImRhdGEiOltbIlRhYmxlSWQiLCIzNiJdLFsiQ2xhc3NpZmljYXRpb24iLCJOb24tSW5kdXN0cnkiXSxbIlJlYWxfVGFibGVfSWQiLCIzNiJdLFsiTWFqb3JBcmVhS2V5IiwiMCJdLFsiTGluZSIsIjIiXSxbIlN0YXRlIiwiMCJdLFsiVW5pdF9vZl9NZWFzdXJlIiwiTGV2ZWxzIl0sWyJNYXBDb2xvciIsIkJFQVN0YW5kYXJkIl0sWyJuUmFuZ2UiLCI1Il0sWyJZZWFyIiwiMjAyMlE0Il0sWyJZZWFyQmVnaW4iLCItMSJdLFsiWWVhckVuZCIsIi0xIl1dfQ==) Covid Cases: [2019-2023](https://github.com/nytimes/covid-19-data) Unemployment: [historical data](https://www.bls.gov/charts/state-employment-and-unemployment/state-unemployment-rates-map.htm#) **Design**– What were the primary considerations for the visual and interaction encodings you chose? Were there alternatives that you attempted but needed to abandon? We wanted to make sure we had a good storyline, as we could have easily gotten lost in the abundance of data. We chose a simple design, inspired by New York Times articles reading state statistics, such as the small multiples, as well as some of the projects that explained particular phenomena that were done in the previous year. For the line graph that represents percent changes we were debating between a line and an area graph, but we chose the line graph as it would be cleaner and would make the viewer only focus on the directionality, and the change, rather than the value below the line. Furthermore, we chose to make a section for each type of factor that influenced the housing market, trying to give fluidity to the storyline, and at the same time allowing for further inspection into the particular factors. **Implementation** We used pandas data frames to process some of the data, as well as Python. We also changed some of the formattings of the data directly in Observable with javascript to fit into the types of data visualizations we were aiming for. **Discussion** The audience reacted positively to the maps, as they found them very intuitive, as well as the racing bar chart. Initially, we did not have the small multiples graphs correlated to each factor, which was more confusing for the audience, but we were able to group them, and hopefully get rid of the confusion, making it more breathable. Furthermore, the last graph that we made comparing the rent prices side by side with the covid cases, created a full ending that was meant to help the reader come back to the original point of the project: the change in the housing market due to COVID-19. **Future Work** Something that would further advance the project, would be embedding it into a website, and making it more similar to a New York Times article where there are connections between the data that the reader can explore and the written storyline of the articles. **Acknowledgements or References** [Reference map rent](https://observablehq.com/@observablehq/build-your-first-choropleth-map-with-observable-plot) [Reference for covid map](https://observablehq.com/@mcmcclur/covid-curves) [Reference for home price index graph](https://observablehq.com/@d3/horizontal-bar-chart) [References small multiples](https://observablehq.com/@nyuvis/small-multiples) [References for racing bar chart](https://observablehq.com/@d3/bar-chart-race-explained) [References for side by side compassion](https://observablehq.com/@uwdata/multi-view-composition) 35:T1052,//map by Mark Mclure function make_map() { let max_size = 1200; let break_size = 640; // Use alternative tooltip when tless than this size. let map_width = width < max_size ? width : max_size; let height = 0.475 * map_width; let div = d3 .create("div") .style("width", `${map_width}px`) .style("height", `${height}px`) .style("overflow", "hidden") .style("position", "relative"); let svg = div .append("svg") .style("overflow", "hidden") .attr("viewBox", [0, 0, map_width, height]); let proj = d3 .geoIdentity() .reflectY(true) .fitSize([map_width, height], stateTiles); let path = d3.geoPath().projection(proj); let map = svg.append("g"); let density_map = new Map(); map .selectAll("path.tile") .data(stateTiles.features) .join("path") .attr("class", "tile") .attr("data-fips", (o) => o.properties.fips) .attr("data-name", (o) => o.properties.name) .attr("d", path) .attr("fill", function (d) { let this_covid_data = covid_data.filter( (o) => o.fips == d.properties.fips )[0]; let rolling_mean = d3.mean( this_covid_data.actualsTimeseries.slice(-14).map((o) => o.newCases) ); let population = this_covid_data.population; let density = rolling_mean / population; density_map.set(d.properties.fips, density); return d3.interpolateReds((density / max_case_density) ** 1); }) .attr("data-density", (o) => density_map.get(o.properties.fips)) .attr("stroke-width", "0.8px") .attr("stroke", function (d) { return "#000"; }) .attr("stroke-linejoin", "round"); map .selectAll("text") .data(stateTiles.features) // .join("text") .text((o) => o.properties.abbr) .attr("font-size", `${0.022 * map_width}px`) .attr("x", function (o) { return path.centroid(o)[0]; }) .attr("text-anchor", "middle") .attr("y", function (o) { return path.centroid(o)[1]; }) .attr("dy", 0.008 * map_width) .attr("pointer-events", "none"); if (map_width > break_size) { // Use Tippy, if big enough map .selectAll("path.tile") .nodes() .forEach(function (t) { let graph = make_graph(t.getAttribute("data-fips"), { parameter: "newCases", roll_by: 40 }); let content = html`

${t.getAttribute( "data-name" )}

${graph}`; tippy(t, { content: content, theme: "light", maxWidth: 500 }); }); } else { // Overlay a transparent DIV, if smaller map .selectAll("path.tile") .on("pointerenter", function (evt, d) { let fips = d.properties.fips; let graph_width = 0.96 * map_width; let graph_height = 0.96 * height; let graph_div = div .append("div") .attr("id", `graph${fips}`) .style("width", `${graph_width}px`) .style("height", `${graph_height}px`) .style("position", "absolute") .style("top", `${0.02 * graph_height}px`) .style("left", `${0.02 * graph_width}px`) .style("pointer-events", "none"); div .append("div") .attr("class", "close") .style("width", "20px") .style("height", "20px") .style("background-color", "#eee") .style("border", "solid 1px black") .style("position", "absolute") .style("left", "0px") .style("top", "0px") .style("text-align", "center") .text("X") .on("pointerdown", function (evt) { evt.stopPropagation(); div.selectAll(".close").remove(); graph_div.remove(); }); graph_div.append(() => make_graph(fips, { graph_width: graph_width, graph_height: graph_height, roll_by: 14 }) ); }) .on("mouseout", function (evt, d) { let fips = d.properties.fips; div.select(`#graph${fips}`).remove(); }); } return div.node(); }36:T817,function make_graph(fips, opts = {}) { let { show_axes = true, graph_width = 450, // 0.7 * width, graph_height = 250, // 0.7 * width, margin = { left: 50, right: 15, bottom: 25 }, strokeOpacity = 1, roll_by = 1, background_opacity = 0 } = opts; let this_covid_data = covid_data.filter(o => o.fips == fips)[0]; let population = this_covid_data.population; this_covid_data = this_covid_data.actualsTimeseries.filter(o => o.newCases); let values = this_covid_data.map(o => o.newCases); let rolled = rolling_sum(values, roll_by); let y_max = (100000 * d3.max(rolled)) / (roll_by * population); this_covid_data.map((o, i) => (o.rolled = rolled[i])); this_covid_data = this_covid_data.slice(roll_by - 1); let x_scale = d3 .scaleTime() .domain([this_covid_data[0].date, this_covid_data.slice(-302)[0].date]) .range([margin.left, graph_width - margin.right]); let y_scale = d3 .scaleLinear() .domain([0, y_max * 100]) .range([graph_height - margin.bottom, 0]); let pts_to_path = d3 .line() .x(d => x_scale(d.date)) .y(d => y_scale((10000000 * d.rolled) / (roll_by * population))); let svg = d3 .create("svg") .attr("width", graph_width) .attr("height", graph_height); svg .append("rect") .attr("width", graph_width) .attr("height", graph_height) .attr("fill", "white") .attr("fill-opacity", background_opacity); svg .append("path") .attr("d", pts_to_path(this_covid_data)) .style("stroke", "black") .style("stroke-opacity", strokeOpacity) .style("stroke-width", 2) .style("stroke-linejoin", "round") .style("fill", "none"); if (show_axes) { svg .append("g") .attr("transform", `translate(0,${graph_height - margin.bottom})`) .call( d3 .axisBottom(x_scale) .ticks(6) .tickFormat(d3.timeFormat("%b %y")) ); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call(d3.axisLeft(y_scale)); } return svg.node(); }37:T518,function labels(svg) { let label = svg.append("g") .style("font", "bold 11px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .selectAll("text"); return ([date, data1], transition) => label = label .data(data1.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x_new((prev.get(d) || d).Value)},${y_new((prev.get(d) || d).rank)})`) .attr("y", y_new.bandwidth() / 2) .attr("x", -6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", -6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x_new((next.get(d) || d).Value)},${y_new((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.Value, (next.get(d) || d).Value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x_new(d.Value)},${y_new(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).Value, d.Value)))); }38:[{"id":"4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","href":"https://static.observableusercontent.com/files/4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","name":"states-10m.json","type":"application/json","lastModified":1683168929083.459,"size":114554},{"id":"c73508bf43bd2e38f19bda9bb8dbe39da5571561dd4872c2300c038155d543ebae666ae30f342a7a59f774a6029c6a473bb854242ec0ce722af5485cab5f302d","href":"https://static.observableusercontent.com/files/c73508bf43bd2e38f19bda9bb8dbe39da5571561dd4872c2300c038155d543ebae666ae30f342a7a59f774a6029c6a473bb854242ec0ce722af5485cab5f302d","name":"rent_cleaned-2.csv","type":"text/csv","lastModified":1683168929083.459,"size":5349},{"id":"6e250a864a94dcea15b3ce4aca46872a1529e7de6362c0b48a9083315bc3d7659e5610318a71946451f15eb2a63ee67dc8a2c52be47f2efedd7e5d260625ebd2","href":"https://static.observableusercontent.com/files/6e250a864a94dcea15b3ce4aca46872a1529e7de6362c0b48a9083315bc3d7659e5610318a71946451f15eb2a63ee67dc8a2c52be47f2efedd7e5d260625ebd2","name":"GSP_new.csv","type":"text/csv","lastModified":1683168929083.459,"size":18458},{"id":"667c78486d1174bf9c36e28f3b6931d782b145cd10dddff5dbf56e45027a1e44d5b674c45a9cef18194368ae3d3a464e78cde9cbd6f72da5ed78ecb8ada81160","href":"https://static.observableusercontent.com/files/667c78486d1174bf9c36e28f3b6931d782b145cd10dddff5dbf56e45027a1e44d5b674c45a9cef18194368ae3d3a464e78cde9cbd6f72da5ed78ecb8ada81160","name":"Regression.csv","type":"text/csv","lastModified":1683168929083.459,"size":42642},{"id":"756a3aa52814ab2997159f556fb9b7f61ab78ff76bb0d74f812514073cf7b555bf7af7e4289b747294541c278b9cdbf805e12f5bfb54c7bd904b92d90eb51045","href":"https://static.observableusercontent.com/files/756a3aa52814ab2997159f556fb9b7f61ab78ff76bb0d74f812514073cf7b555bf7af7e4289b747294541c278b9cdbf805e12f5bfb54c7bd904b92d90eb51045","name":"home_price_change@1.csv","type":"text/csv","lastModified":1683168929083.459,"size":2531},{"id":"f7d3f2ceccb3401ddabc9efea12921504509b4b9c2bceed1a5e412482eac8bb64aee7cd68e0c29d01479788c11a39cc80a6380219ecae7186e42ceebc7731a91","href":"https://static.observableusercontent.com/files/f7d3f2ceccb3401ddabc9efea12921504509b4b9c2bceed1a5e412482eac8bb64aee7cd68e0c29d01479788c11a39cc80a6380219ecae7186e42ceebc7731a91","name":"un1.csv","type":"text/csv","lastModified":1683168929083.459,"size":4526},{"id":"f77db6fe3d52e378c9fc34039390abf95d297294e0f719be4343d2f41307622cb1907353c81fd2de1c3aae1897f26afcc413ca47cd9fa65c515c6cc35e35e0da","href":"https://static.observableusercontent.com/files/f77db6fe3d52e378c9fc34039390abf95d297294e0f719be4343d2f41307622cb1907353c81fd2de1c3aae1897f26afcc413ca47cd9fa65c515c6cc35e35e0da","name":"stateTiles2.json","type":"application/json","lastModified":1683168929083.459,"size":10555},{"id":"11eef6a3bc83918a413362205127b771063f58ddfbaaab138189a52a7db3cb6ca8a47cf5be62a9837dca715c5a450c9af2b8fd93ed8fd1b1b24d9d79b321f209","href":"https://static.observableusercontent.com/files/11eef6a3bc83918a413362205127b771063f58ddfbaaab138189a52a7db3cb6ca8a47cf5be62a9837dca715c5a450c9af2b8fd93ed8fd1b1b24d9d79b321f209","name":"last@3.csv","type":"text/csv","lastModified":1683168929083.459,"size":12428},{"id":"bbb87556feb6204410b30e5f773eaec503d905181c44c085608520756b7cea8229cc527e1fa79ea72191ee2b68a72563393fcb909498189ccfe0f9d23607ee3c","href":"https://static.observableusercontent.com/files/bbb87556feb6204410b30e5f773eaec503d905181c44c085608520756b7cea8229cc527e1fa79ea72191ee2b68a72563393fcb909498189ccfe0f9d23607ee3c","name":"percent_change.csv","type":"text/csv","lastModified":1683168929083.459,"size":6319}] 2d:{"id":"65d2eebf47989f2f","slug":null,"title":"Housing Market Changes After Covid","thumbnail":"8c9fc432836c6a26ccbb0f49038438414cc2cb7f7ce7d158dffaf83dd30ce99a","access_level":"public","create_time":"$D2023-05-04T02:55:29.083Z","update_time":"$D2023-05-08T18:13:46.271Z","view_time":null,"first_public_time":"$D2023-05-06T20:48:49.359Z","fork":{"id":"7d31f8729b679478","slug":null,"title":"Housing Market Changes After Covid","owner":{"id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz "}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":1882,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e4c10320d0784d1","login":"silviatoderas88","name":"Silvia Toderas","avatar_url":"https://avatars-next.observableusercontent.com/bd1ca8f184cdf6a78d5ab248250955bb815aa4a40810b057955559060d854246","tier":null}],"members":[{"type":"individual","id":"6e773b7b2b04728e","login":"cz2741","name":"charles","avatar_url":"https://avatars-next.observableusercontent.com/3b3329416376c3a25716c0c6c264afb68872aeae694599b06400d75c88cb0d15","tier":null,"role":"editor"},{"type":"individual","id":"ae6995dc15b385e9","login":"llliting","name":"Liting","avatar_url":"https://avatars-next.observableusercontent.com/9629f5f8e9ba601ed6b87eff7cbb42c7557c16e960119b38431c7ce81d3cd4ec","tier":null,"role":"editor"},{"type":"individual","id":"1330c118b68a609f","login":"nkk2122","name":"Nicholas Koffler","avatar_url":"https://avatars-next.observableusercontent.com/ec708e1454fbf84b815dd38ec1abcfda313c5fb079d4d2a8f80088e3c96a9090","tier":null,"role":"editor"},{"type":"individual","id":"6e4c10320d0784d1","login":"silviatoderas88","name":"Silvia Toderas","avatar_url":"https://avatars-next.observableusercontent.com/bd1ca8f184cdf6a78d5ab248250955bb815aa4a40810b057955559060d854246","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Housing Market Changes After Covid","cells":[{"id":0,"value":"# Housing Market Changes After Covid \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":881,"value":"Has the American housing market been affected by the global pandemic? In this Observable, we aim to answer that question by exploring data surrounding COVID-19, rent, housing, and other sources. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1603,"value":"The following choropleth graph showcases the change of home price index of US states during covid period. A **Home Price Index (HPI)** is a measure of the change in the price of residential real estate properties over time. From the graph, we can clearly see that \n**home prices are falling in the west but are still posting annual gains in the east** .\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1580,"value":"homePriceChart = UsStateChoropleth(home_price, {\n id: d => homeprice_map.get(d.State),\n value: d => d['one_year'],\n scale: d3.scaleQuantize,\n domain: [-1, 16],\n range: d3.schemeBlues[8],\n title: (f, d) => `${f.properties.name}\\n${d?.one_year}%`\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"### Recent HPI Change \nNow, to further delve into this phenomenon, we rank the HPI change of each state in a one-year and a five-year change period respectively. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1385,"value":"viewof chartChoice = Inputs.select(['one_year', 'five_year' ], {label: \"Change period\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1396,"value":"legend({\n color: colorState2,\n title: 'Percentage Increased %',\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1390,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":867,"value":"### Rent Price Change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":871,"value":"This next graph can give us a better understanding of the housing prices from 2017 to 2022, so we are able to not only compare how the housing market was evolving in the years before COVID-19, but also during those years. You can select the year from the dropdown menu, and then explore the differences in rent prices for each state as you hover over each state. We can see that California is consistently the most expensive state throughout the years and that both the East and the West remain the most expensive throughout the 6 years. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1874,"value":"viewof selectYears = select({\n title: \"Years\",\n options: [\n { value: \"twoseven\", label: \"2017\" },\n { value: \"twoeight\", label: \"2018\" },\n { value: \"twonine\", label: \"2019\" },\n { value: \"twozero\", label: \"2020\" },\n { value: \"twoone\", label: \"2021\" },\n { value: \"twotwo\", label: \"2022\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"addTooltips( // Add tooltips\n Plot.plot({\n projection: \"albers-usa\",\n marks: [\n Plot.geo(counties, {\n fill: (d) => mapy2.get(d.id),\n title: (d) =>\n `${d.properties.name} County \\n ${(\n mapy2.get(d.id) // Custom tooltip text\n )}`\n }), \n Plot.geo(name, { stroke: \"#fff\", strokeWidth: 0.5 })\n ],\n color: {\n scheme: \"Blues\",\n unknown: \"#ddd\",\n type: \"linear\",\n label: \"rent\",\n legend: true,\n domain: [minUnemploymentRate -100,maxUnemploymentRate]\n }\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1520,"value":"Now let's use **small multiples** to show how rent price changed over the last six years in each state. The following two graphs allow us to see the overall change in rent as well as the percentage change for each state. This analysis is important, as the residents of each state would have been affected more by a percentage increase, rather than an absolute one. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1737,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1523,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1744,"value":"As demonstrated by the two graphs, ** rental prices show a similar trend to that of house prices ** . States in the West, such as NY, NJ, FL, and MA, experienced a much higher growth compared to states in the East, such as CA, OR, and WA.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1792,"value":"Now let us look at some important factors that may contribute to this phenomenon. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1749,"value":"### 1) COVID-19 Cases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1511,"value":"As you hover over each hexagon in the graph (state), you can see the evolution of COVID-19 cases from 2020 to early 2022. In this way we can see which states were more affected by COVID-19 and have a basis for how the housing market changed as a result of this. The color intensity represents number of recent covid cases in relation to population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":675,"value":"covid_curve_map = make_map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1549,"value":"### *Comparison between number of covid cases and average rent changes*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1551,"value":"In the following graph, we can see a side-by-side comparison of the average rent and the number of COVID-19 cases for each state. We can select the state that we want to inspect from the dropdown menu, and then we are able to see both the spikes in Cvid cases from 2020 to 2022, as well as the average rent. For instance, in the case of NY, we can see that the number of cases increased, and the average rent also increased. Something interesting to observe is that in 2021, the rent average dropped at the beginning of the increase in covid cases, which is consistent with political decisions around the housing market, and housing market attitudes that were circulating during that time. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1410,"value":"viewof state = Inputs.select([\"AL\", \"AZ\", \"AR\", \"CA\", \"CO\", \"CT\", \"DE\", \"FL\", \"GA\", \n\"HI\", \"ID\", \"IL\", \"IN\", \"IA\", \"KS\", \"KY\", \"LA\", \"ME\", \"MD\", \n\"MA\", \"MI\", \"MN\", \"MS\", \"MO\", \"MT\", \"NE\", \"NV\", \"NH\", \"NJ\", \n\"NM\", \"NY\", \"NC\", \"ND\", \"OH\", \"OK\", \"OR\", \"PA\", \"RI\", \"SC\", \n\"SD\", \"TN\", \"TX\", \"UT\", \"VT\", \"VA\", \"WA\", \"WI\", \"WY\"], {label: \"Select period\", value: \"month\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1414,"value":"{\n const base = vl.markLine()\n .data(stateData1)\n .encode(\n vl.x().fieldT('year').type('temporal').title(null)\n )\n .width(240)\n .height(180);\n\n const covid = base.encode(vl.y().average('Covid_cases'));\n const rent = base.encode(vl.y().average('Rent'));\n \n return vl.hconcat(covid, rent).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1532,"value":"### 2) Unemployment rate change ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1427,"value":"In this next graph, we can see a state-by-state view of the country's unemployment rate. We notice that for each state there is a sharp decrease in the years preceding COVID-19. After the pandemic hit in March we can see the sharp spike in unemployment. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1376,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1861,"value":" **While unemployment data in all states show similar trends, the COVID-19 pandemic has caused a higher spike in western states such as CA and NV, compared to eastern states such as FL, MD, and PA. ** ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1538,"value":"### 3)GDSP changes for each state ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1542,"value":"** Gross State Domestic Product (GSDP) **is a measure in monetary terms, the sum total volume of all finished goods and services produced during a given period of time, usually a year, within the geographical boundaries of the State, accounted without duplication.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1540,"value":"By pressing replay we are able to see how each state's resources that are encompassed in the GDSP are changing relative to one another from 2014 to 2022. We observe that California, Texas, and New York are always in the top 3, and we can see how constant the states stay relative to each other, as well as the discrepancies between them. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1402,"value":"viewof replay = html`