3e:null 3f:["$","title",null,{"children":"Housing Market Changes After Covid | Nicholas Koffler | Observable"}] 45:T8d5,stateUnemploymentDecade = { // 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(); }46:T9a1,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 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(); }47: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(); }48: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; } 49: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(); }4a: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(); }4b:[{"id":"bbb87556feb6204410b30e5f773eaec503d905181c44c085608520756b7cea8229cc527e1fa79ea72191ee2b68a72563393fcb909498189ccfe0f9d23607ee3c","href":"https://static.observableusercontent.com/files/bbb87556feb6204410b30e5f773eaec503d905181c44c085608520756b7cea8229cc527e1fa79ea72191ee2b68a72563393fcb909498189ccfe0f9d23607ee3c","name":"percent_change.csv","type":"text/csv","lastModified":1682649778756.744,"size":6319},{"id":"11eef6a3bc83918a413362205127b771063f58ddfbaaab138189a52a7db3cb6ca8a47cf5be62a9837dca715c5a450c9af2b8fd93ed8fd1b1b24d9d79b321f209","href":"https://static.observableusercontent.com/files/11eef6a3bc83918a413362205127b771063f58ddfbaaab138189a52a7db3cb6ca8a47cf5be62a9837dca715c5a450c9af2b8fd93ed8fd1b1b24d9d79b321f209","name":"last@3.csv","type":"text/csv","lastModified":1682649778756.744,"size":12428},{"id":"f77db6fe3d52e378c9fc34039390abf95d297294e0f719be4343d2f41307622cb1907353c81fd2de1c3aae1897f26afcc413ca47cd9fa65c515c6cc35e35e0da","href":"https://static.observableusercontent.com/files/f77db6fe3d52e378c9fc34039390abf95d297294e0f719be4343d2f41307622cb1907353c81fd2de1c3aae1897f26afcc413ca47cd9fa65c515c6cc35e35e0da","name":"stateTiles2.json","type":"application/json","lastModified":1682649778756.744,"size":10555},{"id":"f7d3f2ceccb3401ddabc9efea12921504509b4b9c2bceed1a5e412482eac8bb64aee7cd68e0c29d01479788c11a39cc80a6380219ecae7186e42ceebc7731a91","href":"https://static.observableusercontent.com/files/f7d3f2ceccb3401ddabc9efea12921504509b4b9c2bceed1a5e412482eac8bb64aee7cd68e0c29d01479788c11a39cc80a6380219ecae7186e42ceebc7731a91","name":"un1.csv","type":"text/csv","lastModified":1682649778756.744,"size":4526},{"id":"756a3aa52814ab2997159f556fb9b7f61ab78ff76bb0d74f812514073cf7b555bf7af7e4289b747294541c278b9cdbf805e12f5bfb54c7bd904b92d90eb51045","href":"https://static.observableusercontent.com/files/756a3aa52814ab2997159f556fb9b7f61ab78ff76bb0d74f812514073cf7b555bf7af7e4289b747294541c278b9cdbf805e12f5bfb54c7bd904b92d90eb51045","name":"home_price_change@1.csv","type":"text/csv","lastModified":1682649778756.744,"size":2531},{"id":"c73508bf43bd2e38f19bda9bb8dbe39da5571561dd4872c2300c038155d543ebae666ae30f342a7a59f774a6029c6a473bb854242ec0ce722af5485cab5f302d","href":"https://static.observableusercontent.com/files/c73508bf43bd2e38f19bda9bb8dbe39da5571561dd4872c2300c038155d543ebae666ae30f342a7a59f774a6029c6a473bb854242ec0ce722af5485cab5f302d","name":"rent_cleaned-2.csv","type":"text/csv","lastModified":1682649778756.744,"size":5349},{"id":"4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","href":"https://static.observableusercontent.com/files/4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","name":"states-10m.json","type":"application/json","lastModified":1682649778756.744,"size":114554}] 43:{"id":"dd95b2476d2fd40f","slug":null,"title":"Housing Market Changes After Covid","thumbnail":"bc3d7b5944fc109a579baaaf851cbc4d01eef16f43f52d44c28a96f2a2d32c66","access_level":"public","create_time":"$D2023-04-28T02:42:58.756Z","update_time":"$D2023-04-28T02:47:08.978Z","view_time":null,"first_public_time":"$D2023-04-28T02:42:58.756Z","has_unpublished_edits":null,"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":"64cd14c802889fbb","login":"nkk2122","name":"Nicholas Koffler","avatar_url":"https://avatars-next.observableusercontent.com/ec708e1454fbf84b815dd38ec1abcfda313c5fb079d4d2a8f80088e3c96a9090","tier":"starter_2024","bio":"","following":false},"version":1060,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1330c118b68a609f","login":"nkk2122","name":"Nicholas Koffler","avatar_url":"https://avatars-next.observableusercontent.com/ec708e1454fbf84b815dd38ec1abcfda313c5fb079d4d2a8f80088e3c96a9090","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"1330c118b68a609f","login":"nkk2122","name":"Nicholas Koffler","avatar_url":"https://avatars-next.observableusercontent.com/ec708e1454fbf84b815dd38ec1abcfda313c5fb079d4d2a8f80088e3c96a9090","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":881,"value":"Has the American housing market been effected by the global pandemic? In this observable we aim to answer that question by exploring data surrounding covid, rent, housing, and other sources. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":675,"value":"covid_curve_map = make_map()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"This map shows the trends of covid cases over the years of the pandemic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":867,"value":"# Rent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":871,"value":" When comparing rent of each state pre and post covid by a period of three years we see a much more dramatic increase after 2020. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":678,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"# Unemployment rate\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"# Percentage change in rent by state ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":616,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"## Home Prices Change","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":557,"value":"**Home Price Index(HPI)**: A house price index measures the price changes of residential housing as a percentage change from some specific start date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":535,"value":"viewof chartChoice = Inputs.select(['one_year', 'five_year' ], {label: \"Change period\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"legend({\n color: colorState2,\n title: 'Percentage Increased %',\n tickSize: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"us = FileAttachment(\"states-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"counties = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"data = FileAttachment(\"rent_cleaned-2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"data.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"filter_2017 = data.map((item) => ({ name: item.state, year: item.twoseven }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"namemap = new Map(counties.features.map(d => [d.properties.name, d.id]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"filter_1 = new Map(data.map(({state, twoseven}) => [state, twoseven]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"combinedMap = Array.from(filter_1, ([state, twoseven]) => {\n const id = namemap.get(state);\n return [id, twoseven];\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"mapy = new Map(combinedMap)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"data.columns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"minUnemploymentRate = d3.min(pairsByState3, state => d3.min(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"filter = data.map((item) => ({ name: item.state, year: item[selectYears] }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":" nameToYearMap = new Map(filter.map(({ name, year }) => [name, year]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"combinedMap2 = Array.from(nameToYearMap, ([state, selectYears]) => {\n const id = namemap.get(state);\n return [id, selectYears];\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"mapy2 = new Map(combinedMap2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"his_filter = data.filter(d => d.state == 'Alabama')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"values = his_filter.flatMap(d => Object.values(d).slice(2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"years = [\"2017\", \"2018\", \"2019\", \"2020\", \"2021\", \"2022\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"zip = _.zip","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"import {unemployment, stateToAbbr, color} from \"@nyuvis/graphical-encoding-exercise\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"stateToAbbr","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"dimensions = {\n const margin = { top: 30, bottom: 20, right: 10, left: 30 };\n const visWidth = width - margin.left - margin.right;\n const visHeight = 600 - margin.top - margin.bottom;\n \n return { margin, visWidth, visHeight };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"numRows = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"row = d3.scaleBand()\n .domain(d3.range(numRows))\n .range([0, dimensions.visHeight])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"numCols = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"col = d3.scaleBand()\n .domain(d3.range(numCols))\n .range([0, dimensions.visWidth])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"filter_small = data.map((item) => ({ name: item.state, 2017: item.twoseven ,2018: item.twoeight,2019: item.twonine, 2020: item.twozero, 2021: item.twoone, 2022: item.twotwo }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"nestedData = filter_small.reduce((accumulator, current) => {\n const { name, ...values } = current;\n accumulator[name] = Object.values(values);\n return accumulator;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"pairsByState3 = Object.entries(nestedData).map(([state, values]) => {\n return {\n name: state,\n values: years.map((year, i) => ({ year, rate: values[i] }))\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"maxUnemploymentRate = d3.max(pairsByState3, state => d3.max(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"y = d3.scaleLinear()\n .domain([0, maxUnemploymentRate])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"dateExtent = d3.extent(pairsByState3[0].values, d => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"x = d3.scaleLinear()\n .domain(dateExtent)\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"area = d3.area()\n .x(d => x(d.year))\n .y1(d => y(d.rate))\n .y0(d => y(0))\n .defined(d => d.rate !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"xAxis = d3.axisBottom(x)\n .tickSizeOuter(0)\n .ticks(6)\n .tickFormat(function(d) {\n return \"'\" + d.toString().slice(-2);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"yAxis = d3.axisLeft(y)\n .tickSizeOuter(0)\n .ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"import {states, statemesh, Choropleth, Legend} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"function state_data(input,file, state_select) {\n var data = []\n for (var i=0; i < file.length; i++){\n if (file[i].State == state_select)\n data.push({input:file[i][input]});\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"function UsStateChoropleth(data, {\n features = states,\n borders = statemesh,\n width = 975,\n height = 610,\n ...options\n} = {}) {\n return Choropleth(data, {features, borders, width, height, ...options});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"homeprice_map = new Map(states.features.map(d => [d.properties.name, d.id]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"home_price = FileAttachment(\"home_price_change@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"projection = d3.geoIdentity().fitSize([600*0.95,400*0.95], us.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"here we can see a state by state view of the countries unemployment rate. We notice that for each state there is a sharp decrease in the years preceding covid but ultimately leading to a massive spike once the pandemic hits. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"data_unemployment = FileAttachment(\"un1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"unemploymentData1 = data_unemployment.map(d => {\n const state = d.Area;\n \n const parse = d3.timeParse('%Y');\n \n const rates = Object.entries(d)\n .filter(([key, value]) => key !== 'Area')\n .map(([date, rate]) => ({ date: parse(date), rate }))\n .sort((a, b) => d3.ascending(a.date, b.date)); \n return { state, rates};\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"maxUnemploymentRate1 = d3.max(unemploymentData1, state => d3.max(state.rates, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"y1 = d3.scaleLinear()\n .domain([0, maxUnemploymentRate1])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"dateExtent1 = d3.extent(unemploymentData1[0].rates, d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"x1 = d3.scaleTime()\n .domain(dateExtent1)\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"area1 = d3.area()\n .x(d => x1(d.date))\n .y1(d => y1(d.rate))\n .y0(d => y1(0))\n .defined(d => d.rate !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"xAxis1 = d3.axisBottom(x1)\n .tickSizeOuter(0)\n .ticks(5, \"'%y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"yAxis1 = d3.axisLeft(y1)\n .tickSizeOuter(0)\n .ticks(5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"per_change = FileAttachment(\"percent_change.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"filter_small_change = per_change.map((item) => ({ name: item.state,2017: 0,2018: item.twoeightper,2019: item.twonineper, 2020: item.twozeroper, 2021: item.twooneper, 2022: item.twotwoper }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"nestedData_change = filter_small_change.reduce((accumulator, current) => {\n const { name, ...values } = current;\n accumulator[name] = Object.values(values);\n return accumulator;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"pairsByState_change1 = Object.entries(nestedData_change).map(([state, values]) => {\n return {\n name: state,\n values: years.map((year, i) => {\n if (values[i] === 100) { // replace specificValue with the value you want to delete\n return { year, rate: 0 };\n } else {\n return { year, rate: values[i] };\n }\n })\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"maxUnemploymentRate_change = d3.max(pairsByState_change1, state => d3.max(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"minUnemploymentRate_change = d3.min(pairsByState_change1, state => d3.min(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"y_change = d3.scaleLinear()\n .domain([minUnemploymentRate_change, maxUnemploymentRate_change])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"dateExtent_change = d3.extent(pairsByState_change1[0].values, d => d.year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"x_change = d3.scaleLinear()\n .domain(dateExtent_change)\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"area_change = d3.area()\n .x(d => x_change(d.year))\n .y1(d => y_change(d.rate))\n .y0(d => y_change(0))\n .defined(d => d.rate !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"xAxis_change = d3.axisBottom(x_change )\n .tickSizeOuter(0)\n .ticks(6)\n .tickFormat(function(d) {\n return \"'\" + d.toString().slice(-2);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"yAxis_change = d3.axisLeft(y_change )\n .tickSizeOuter(0)\n .ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"line_change = d3.line()\n .x(d => x_change(d.year))\n .y(d => y_change(d.rate));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"years","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"home_price.sort(function(x, y){\n return d3.ascending(x[chartChoice], y[chartChoice]);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"colorState2 = d3.scaleSequential(d3.interpolatePuOr)\n .domain(extent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"extent = d3.extent(home_price, d => d[chartChoice])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"max = d3.max(home_price, d=>d[chartChoice])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"min = d3.min(home_price, d=>d[chartChoice])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"mean = d3.median(home_price.map( d => d[chartChoice]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"mutable state_selected = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"-------imports for corona map below-------","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"stateTiles = {\n let stateTiles = await FileAttachment(\"stateTiles2.json\").json();\n let tiles = topojson.feature(stateTiles, stateTiles.objects.tiles);\n return tiles;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"tippy = require(\"tippy.js@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"import { Radio } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"covid_data = {\n let parseDate = d3.utcParse(\"%Y-%m-%d\");\n return (await (await fetch(\n 'https://api.covidactnow.org/v2/states.timeseries.json?apiKey=b496b11f1f5347aa88bc5573e536eef8'\n )).json()).map(function(o) {\n o.actualsTimeseries.forEach(d => (d.date = parseDate(d.date)));\n return o;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"max_case_density = d3.max(\n covid_data.map(\n o =>\n d3.mean(o.actualsTimeseries.slice(-14).map(o => o.newCases)) /\n o.population\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":658,"value":"max_vaccination_density = d3.max(\n covid_data.map(o => o.actuals.vaccinationsInitiated / o.population)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"function rolling_sum(values, N) {\n let i = 0;\n let sum = 0;\n let sums = new Float64Array(values.length).fill(NaN);\n for (let n = Math.min(N - 1, values.length); i < n; ++i) {\n sum += values[i];\n }\n for (let n = values.length; i < n; ++i) {\n sum += values[i];\n sums[i] = sum;\n sum -= values[i - N + 1];\n }\n return sums;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":668,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"-------end of imports for corona data-------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":699,"value":"data_lastmultiple = FileAttachment(\"last@3.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"// import PapaParse library\npairsByState_change1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"nestedchange = data_lastmultiple.reduce((accumulator, current) => {\n const { DATE, ...values } = current;\n accumulator[DATE] = Object.values(values);\n return accumulator;\n}, {});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"lastyear = Object.keys(data_lastmultiple[0]) \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"lastyear2 = lastyear.slice(1);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"PairsByState = Object.entries(nestedchange).map(([state, values]) => {\n return {\n name: state,\n values: lastyear2.map((date, i) => {\n \n return { date: date.slice(0,4), rate: values[i] };\n \n })\n };\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"max_change = d3.max(PairsByState, state => d3.max(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"min_change = d3.min(PairsByState, state => d3.min(state.values, d => d.rate))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"Y_change = d3.scaleLinear()\n .domain([min_change , max_change])\n .range([row.bandwidth(), 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"DateExtent_change = d3.extent(PairsByState[0].values, d => d.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"X_change = d3.scaleLinear()\n .domain(DateExtent_change)\n .range([0, col.bandwidth()])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"Area_change = d3.area()\n .x(d => X_change(d.date))\n .y1(d => Y_change(d.rate))\n .y0(d => Y_change(0))\n .defined(d => d.rate !== '-')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"XAxis_change = d3.axisBottom(X_change )\n .tickSizeOuter(0)\n .ticks(7)\n .tickFormat(function(d) {\n return \"'\" + d.toString().slice(-2);\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"YAxis_change = d3.axisLeft(Y_change)\n .tickSizeOuter(0)\n .ticks(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"Line_Change = d3.line()\n .x(d => X_change(d.date))\n .y(d => Y_change(d.rate));\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"