2b:null 2c:["$","title",null,{"children":"[Copy] 442 Final Project Explorable Visualizations: COVID-19 Throughout the Years | heer | Observable"}] 31:T423,### CASES AND DEATHS COVID-19 cases first began in China and then spread to other countries. These world maps reflect the total COVID-19 cases and deaths respectively from World Health Organization data. The sliders animate the maps by updating the countries with their case and death counts every three weeks, reflected by the color value. Additionally, the user can interact with the slider and pause it or manually drag it to the date they wish to view. Hovering over the maps after pausing the sliders allows viewers to clearly see cumulative case and death counts of countries. This is helpful for users to see instead of only viewing color values from the legend, as total counts may vary greatly, even within the same color range, due to large variability in cases and deaths amongst countries and population counts. This is crucial to our story, as there are some countries that had significantly more or less cases and deaths than other countries. Note that data was not found for grayed out countries.32:T80c,rename = new Map([ ["Madagascar(Malagasy)", "Madagascar"], ["Germany Fed. Republic", "Germany"], ["Antigua and Barbuda", "Antigua and Barb."], ["Bolivia (Plurinational State of)", "Bolivia"], ["Bosnia and Herzegovina", "Bosnia and Herz."], ["Brunei Darussalam", "Brunei"], ["RepublicofSouthAfrica", "South Africa"], ["IvoryCoast", "Côte d’Ivoire"], ["Central African Republic", "Central African Rep."], ["Cook Islands", "Cook Is."], ["PapuaNewGuinea", "Papua New Guinea"], ["Myanmar(Burma)", "Myanmar"], ["SriLanka", "Sri Lanka"], ["Democratic People's Republic of Korea", "North Korea"], ["Democratic Republic of the Congo", "Dem. Rep. Congo"], ["Yemen(Sana)", "Yemen"], ["Dominican Republic", "Dominican Rep."], ["Equatorial Guinea", "Eq. Guinea"], ["CostaRica", "Costa Rica"], ["Iran (Islamic Republic of)", "Iran"], ["Laos", "Laos"], ["MarshallIslands", "Marshall Is."], ["BurkinaFaso", "Burkina Faso"], ["CentralAfricanRepublic", "Central African Rep."], ["MicronesiaFederatedStates", "Micronesia"], ["Republic of Korea", "South Korea"], ["NewZealand", "New Zealand"], ["Moldova", "Moldova"], ["Russian Federation", "Russia"], ["Saint Kitts and Nevis", "St. Kitts and Nevis"], ["St.Vincent and The Grenadine", "St. Vin. and Gren."], ["SaoTomeandPrincipe", "São Tomé and Principe"], ["SolomonIslands", "Solomon Is."], ["South Sudan", "S. Sudan"], ["Sudan", "Sudan"], ["Swaziland", "eSwatini"], ["Syrian Arab Republic", "Syria"], ["NewCaledonia", "New Caledonia"], ["Macedonia(Skopje)", "Macedonia"], ["The United Kingdom", "United Kingdom"], // ["Tuvalu", ?], ["United Republic of Tanzania", "Tanzania"], ["Venezuela (Bolivarian Republic of)", "Venezuela"], ["Viet Nam", "Vietnam"], ["Republic of Moldova", "Moldova"], ["North Macedonia", "Macedonia"], ["Falkland Islands (Malvinas)", "Falkland Is."], ["Eswatini", "eSwatini"], ["Kosovo[1]", "Kosovo"], ["Sao Tome and Principe", "São Tomé and Principe"], ["Solomon Islands", "Solomon Is."] ])33:T23a4,map = { const width = 900; const height = 600; const projection = d3 .geoAlbersUsa() // composite projection of the United States .translate([width / 2, height / 2]) // fit our map a little better .fitSize([width, height], json); const path = d3.geoPath().projection(projection); //display our geographic data const svg = d3 .select(DOM.element('svg')) .attr('width', width) .attr('height', height); // Create a mapping from id to party const partyMapping = { "01": {party: "Republican", deaths: 461, Fact: "The virus is surging across rural America, where populations \n are poorer, older and more prone to health issues. Rural counties \n now have some of the highest rates of covid-19 cases \n and deaths in the country, topping even the hardest-hit New York City boroughs."}, // Alabama "02": {party: "Republican", deaths: 211, Fact:""}, //Alaska "04": {party: "Swing (won by Democrat in 2020 election)", deaths: 413, Fact:""},// Arizona "05": {party: "Republican", deaths: 421, Fact:""}, // Arkansas "06": {party: "Democrat", deaths: 279, Fact:"California, particularly the Los Angeles area, \n faced significant challenges with the spread of \n the virus.The state implemented strict lockdown measures, \n and there were concerns about the impact on the economy."}, //California "08": {party: "Democrat", deaths: 266, Fact:""},// Colorado "09": {party: "Democrat", deaths: 351, Fact:""}, // Connecticut "10": {party: "Democrat", deaths: 361, Fact:""}, //Delaware "12": {party: "Republican", deaths: 386, Fact:"Florida witnessed a tumultuous period during the pandemic. \n Governor Ron DeSantis faced criticism for swift \n lockdown reversals and controversial decisions. \n In response to rising cases, DeSantis quipped, \n 'It's not about the virus; it's about the election.'"},// Florida "13": {party: "Swing (won by Democrat in 2020 election)", deaths: 345, Fact:""}, // Georgia "15": {party: "Democrat", deaths: 143, Fact:""}, // Hawaii "16": {party: "Republican", deaths: 313, Fact:""},// Idaho "17": {party: "Democrat", deaths: 323, Fact:""}, // Illinois "18": {party: "Republican", deaths: 391, Fact:""}, //Indiana "19": {party: "Republican", deaths: 358, Fact:""}, // Iowa "20": {party: "Republican", deaths: 368, Fact:""},// Kansas "21": {party: "Republican", deaths: 456, Fact:""}, // Kentucky "22": {party: "Republican", deaths: 384, Fact:""}, //Louisiana "23": {party: "Democrat", deaths: "\n252", Fact:""}, // Maine "24": {party: "Democrat", deaths: 306, Fact:""},// Maryland "25": {party: "Democrat", deaths: 310, Fact:""}, // Massachusetts "26": {party: "Swing (won by Democrat in 2020 election)", deaths: 383, Fact:""}, //Michigan "27": {party: "Democrat", deaths: 282, Fact:""}, // Minnesota "28": {party: "Republican", deaths: 506, Fact:""},// Mississippi "29": {party: "Republican", deaths: 372, Fact:""}, // Missouri "30": {party: "Republican", deaths: 368, Fact:""}, //Montana "31": {party: "Republican", deaths: 302, Fact:""}, // Nebraska "32": {party: "Swing (won by Democrat in 2020 election)", deaths: 390, Fact:""},// Nevada "33": {party: "Democrat", deaths: 247, Fact:""}, // New Hampshire "34": {party: "Democrat", deaths: 403, Fact:""}, //New Jersey "35": {party: "Democrat", deaths: 451, Fact:""}, // New Mexio "36": {party: "Democrat", deaths: 424, Fact:"New York, an early epicenter, faced a staggering \nimpact. The stringent measures, including a statewide \nlockdown, were implemented to combat the virus. "},// New York "37": {party: "Swing (won by Republican in 2020 election)", deaths: 333, Fact:""}, // North Carolina "38": {party: "Republican", deaths: 351, Fact:""}, //North Dakota "39": {party: "Republican", deaths: 431, Fact:""}, // Ohio "40": {party: "Republican", deaths: 500, Fact:""},// Oklahoma "41": {party: "Democrat", deaths: 226, Fact:""}, // Oregon "42": {party: "Swing (won by Democrat in 2020 election)", deaths: 420, Fact:""}, //Pennsylvania "44": {party: "Democrat", deaths: "\n381", Fact:""},// Rhode Island "45": {party: "Republican", deaths: 419, Fact:""}, // South Carolina "46": {party: "Republican", deaths: 376, Fact:""}, //South Dakota "47": {party: "Republican", deaths: 427, Fact:""}, // Tennessee "48": {party: "Republican", deaths: 363, Fact:"Texas, known for its resilience, faced challenges during the pandemic. \n Governor Greg Abbott's decisions on lockdowns \n drew attention, with some questioning their effectiveness. \n The state experienced a surge, prompting Abbott to declare a \n state disaster on March 13, 2020. \n Texas recorded a total of 44,516 deaths"},// Texas "49": {party: "Republican", deaths: 175, Fact:""}, // Utah "50": {party: "Democrat", deaths: 172, Fact:""}, //Vermont "51": {party: "Democrat", deaths: 281, Fact:""}, //Virginia "53": {party: "Democrat", deaths: 202, Fact:"Governor Jay Inslee declared a state of emergency \n on February 29, 2020. The statewide stay-at-home \n order, initially intended for 'at least 2 weeks,' \n lasted until May 31, 2020. "}, //Washington "54": {party: "Republican", deaths: 492, Fact:""}, //West Virginia "55": {party: "Swing (won by Democrat in 2020 election)", deaths: 299, Fact:""}, //Wisconsin "56": {party: "Republican", deaths: 377, Fact:""}, //Wyoming // ... continue for other states }; // go through each state and assign all of our values for (let j = 0, jmax = json.features.length; j < jmax; j++) { const jsonState = json.features[j].properties.name; } svg .selectAll("path") .data(json.features) .enter() .append("path") .attr("d", path) .style('stroke', 'white') .attr('stroke', 'gray') .style('fill', d => { const stateID = d.id; const info = partyMapping[stateID] || { party: 'Unknown', deaths: 0 }; // Get party information from the mapping const deathValues = Object.values(partyMapping).map(entry => entry.deaths); const maxDeaths = Math.max(...deathValues); const minDeaths = Math.min(...deathValues); // Define color scales for each party //const republicanColorScale = d3.scaleLinear().domain([0, 50000]).range(['lightcoral', 'darkred']); //const democratColorScale = d3.scaleLinear().domain([0, 50000]).range(['lightblue', 'darkblue']); //const swingColorScale = d3.scaleLinear().domain([0, 50000]).range(['lightyellow', 'darkorange']); const republicanColorScale = d3.scaleSequential([0, maxDeaths], d3.interpolateReds) const democratColorScale = d3.scaleSequential([0, maxDeaths], d3.interpolateBlues) const swingColorScale = d3.scaleSequential([0, maxDeaths], d3.interpolatePurples) // const republicanColorScale = d3.scaleLinear().domain([minDeaths, maxDeaths]).range(['lightcoral', 'darkred']); // const democratColorScale = d3.scaleLinear().domain([minDeaths, maxDeaths]).range(['lightblue', 'darkblue']); // const swingColorScale = d3.scaleLinear().domain([minDeaths, maxDeaths]).range(['lightyellow', 'darkorange']); // Set the fill color based on the party and number of deaths let fillColor; if (info.party === 'Republican') { fillColor = republicanColorScale(info.deaths); } else if (info.party === 'Democrat') { fillColor = democratColorScale(info.deaths); } else { // Assume 'Swing' for other cases //fillColor = swingColor; fillColor = swingColorScale(info.deaths); } return fillColor; //.selectAll("path") //.data(json.features) //.enter() //.append("path") //.attr("d", path) //.style('stroke', 'white') //.attr('stroke', 'gray') //.text('test') //.style('fill', d => { //const value = d.properties.value; //return mapColor; //const info = partyMapping[d.id]|| { party: 'Unknown' }; // Get party information from the mapping // Set the fill color based on party //return info.party === 'Republican' ? 'red' : 'blue'; }) // Mouse events and tooltips // have the mouse's position be updated // assign the name of the states to our variable .on('touchmove mousemove', function(d) { const name = d.properties.name; const stateID = d.id; const info = partyMapping[stateID]; const [x, y] = d3.mouse(this); // call the tooltip // the .call is used to display what to see when the mouse goes over a state, in this case the name tooltip .attr('transform', `translate(${x},${y})`) .call(callout, `${name}\nParty: ${info.party}\nTotal Deaths/100k ppl: ${info.deaths}\n ${info.Fact}`); }) .on('touchend mouseleave', () => tooltip.call(callout, null)); const tooltip = svg.append('g'); yield svg.node(); svg .append('g') .attr('style', "font-family: 'Lato';") .attr( 'transform', ); } 34:T8ee,plot = { // select a point for which to provide details-on-demand const hover = vl.selectPoint('hover') .encodings('x') // limit selection to x-axis value .on('mouseover') // select on mouseover events .toggle(false) // disable toggle on shift-hover .nearest(true); // select data point nearest the cursor // predicate to test if a point is hover-selected // return false if the selection is empty const isHovered = hover.empty(false); // define our base line chart of stock prices const line = vl.markLine().encode( vl.x().fieldT('date').title("Date"), vl.y().fieldQ('cases').scale({type: 'linear', domain: [0, 47000000]}).title("Cumulative COVID-19 Cases"), vl.color().value('DarkOrange') ); // shared base for new layers, filtered to hover selection const base = line.transform(vl.filter(isHovered)); // mark properties for text label layers const label = {align: 'left', dx: 5, dy: -5}; const white = {stroke: 'white', strokeWidth: 2}; return vl.data(india) .layer( line, // add a rule mark to serve as a guide line vl.markRule({color: '#aaa'}) .transform(vl.filter(isHovered)) .encode(vl.x().fieldT('date')), // add circle marks for selected time points, hide unselected points line.markCircle() .params(hover) // use as anchor points for selection .encode(vl.opacity().if(isHovered, vl.value(1)).value(0)), // // labels for date base.markText({...label, dx: -75, dy: -20}, white). encode(vl.text().fieldT('date') ), base.markText({...label, dx: -75, dy: -20}).encode( vl.text().fieldT('date') ), // labels for cases base.markText({...label, dx: -75, dy: -10}, white). encode(vl.text(vl.value("Cases: "))), base.markText({...label, dx: -75, dy: -10}). encode(vl.text(vl.value("Cases: "))), base.markText({...label, dx: -35, dy: -10}, white).encode( vl.text().fieldQ('cases') ), base.markText({...label, dx: -35, dy: -10}).encode( vl.text().fieldQ('cases') ), ) .width(700) .height(650) .title("Cumulative COVID-19 Cases in India from January 2020 to November 2023\n") .render(); }35:T8be,italy = { // select a point for which to provide details-on-demand const hover = vl.selectPoint('hover') .encodings('x') // limit selection to x-axis value .on('mouseover') // select on mouseover events .toggle(false) // disable toggle on shift-hover .nearest(true); // select data point nearest the cursor // predicate to test if a point is hover-selected // return false if the selection is empty const isHovered = hover.empty(false); // define our base line chart of stock prices const line = vl.markLine().encode( vl.x().fieldT('Date').title("Date"), vl.y().fieldQ('Cases').title("Cumulative COVID-19 Cases"), vl.color().value('purple') ); // shared base for new layers, filtered to hover selection const base = line.transform(vl.filter(isHovered)); // mark properties for text label layers const label = {align: 'left', dx: 5, dy: -5}; const white = {stroke: 'white', strokeWidth: 2}; return vl.data(italyData) .layer( line, // add a rule mark to serve as a guide line vl.markRule({color: '#aaa'}) .transform(vl.filter(isHovered)) .encode(vl.x().fieldT('Date')), // add circle marks for selected time points, hide unselected points line.markCircle() .params(hover) // use as anchor points for selection .encode(vl.opacity().if(isHovered, vl.value(1)).value(0)), // // labels for date base.markText({...label, dx: -75, dy: -20}, white). encode(vl.text().fieldT('Date') ), base.markText({...label, dx: -75, dy: -20}).encode( vl.text().fieldT('Date') ), // labels for cases base.markText({...label, dx: -75, dy: -10}, white). encode(vl.text(vl.value("Cases: "))), base.markText({...label, dx: -75, dy: -10}). encode(vl.text(vl.value("Cases: "))), base.markText({...label, dx: -35, dy: -10}, white).encode( vl.text().fieldQ('Cases') ), base.markText({...label, dx: -35, dy: -10}).encode( vl.text().fieldQ('Cases') ), ) .width(700) .height(440) .title("Cumulative COVID-19 Cases in Italy from January 2020 to November 2023") .render(); }36:T10ba,chart = { const svg = d3.create("svg") .attr("viewBox", [-1, 0, 600, 110 * 2]); // Adjust the overall width const margin = { top: 40, right: 20, bottom: 20, left: 40 }; // Adjusted top margin for titles const width = 300 - margin.left - margin.right; const height = 200 - margin.top - margin.bottom; const createChart = (svg, yearsFilter, xPos, chartTitle, countryName) => { const chartGroup = svg.append("g") .attr("transform", `translate(${margin.left + xPos},${margin.top})`); // Adjusted translation const x = d3.scaleBand() .domain(inflationData2 .filter(d => d.Country === dropdownCountry && yearsFilter.includes(+d.Year)) .map(d => d.Year)) .range([0, width]) .padding(0.1); const numYears = yearsFilter.length; const bandwidth = width / numYears; const dynamicDomain = [d3.min(inflationData2, d => d.Inflation_Rate), d3.max(inflationData2, d => d.Inflation_Rate)]; const y = d3.scaleLinear() .domain([-10,80]) .range([height, 0]); const xAxis = g => g .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .append("text") // X-axis label .attr("x", width / 2) .attr("y", 30) .attr("dy", "0.71em") .attr("fill", "#000") .attr("text-anchor", "middle") .style("font-size", "8px") // Adjusted font size .text("Year"); const yAxis = g => g .call(d3.axisLeft(y)) .append("text") // Y-axis label .attr("transform", "rotate(-90)") .attr("y", -40) .attr("dy", "0.71em") .attr("fill", "#000") .attr("text-anchor", "end") .style("font-size", "8px") // Adjusted font size .text("Inflation in Consumer Prices (Annual %)"); chartGroup.append("g").call(xAxis); chartGroup.append("g").call(yAxis); // Add horizontal grid lines chartGroup.append("g") .attr("class", "grid") .call(d3.axisLeft(y).tickSize(-width).tickFormat("").ticks(10)) .call(g => g.select(".domain").remove()) .selectAll(".tick line") .attr("stroke-opacity", 0.2) // Adjust the opacity of horizontal grid lines; // Add vertical grid lines chartGroup.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).tickSize(-height).tickFormat("").tickValues(x.domain().filter((d, i) => i % 1 === 0))) .call(g => g.select(".domain").remove()) .selectAll(".tick line") .attr("stroke-opacity", 0.2); // Adjust the opacity of vertical grid lines // Chart title with two lines const titleLines = chartTitle.split("\n"); // Split the title into two lines const titleFontSize = 10; // Font size of the title const titleHeight = titleFontSize * 1.2; // Line height chartGroup.append("text") .attr("x", width / 2) .attr("y", -30) .attr("text-anchor", "middle") // .style("font-size", titleFontSize + "px") // Adjusted font size .style("font-size", 9) .style("font-weight", "bold") .append("tspan") // First line .text(titleLines[0]) .attr("dy", "0em") .append("tspan") // Second line .text(titleLines[1]) .attr("dy", titleHeight / titleFontSize + "em") .attr("x", width / 2) // Set x attribute for the second line // Country name label chartGroup.append("text") .attr("x", width / 2) .attr("y", -10) // Adjusted y position .attr("text-anchor", "middle") .style("font-size", "8px") // Adjusted font size .style("fill", "red") .text(countryName); const line = d3.line() .x(d => x(d.Year) + x.bandwidth() / 2) .y(d => y(+d.Inflation_Rate)); chartGroup.append("path") .datum(inflationData2.filter(d => d.Country === dropdownCountry && yearsFilter.includes(+d.Year))) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line) }; createChart(svg, [2017, 2018, 2019], 0, "Inflation in Consumer Prices \nBefore COVID-19 (2017, 2018, 2019)", dropdownCountry); createChart(svg, [2020, 2021, 2022], width + 50, "Inflation in Consumer Prices \nDuring COVID-19 (2020, 2021, 2022)", dropdownCountry); return svg.node(); }37:T712,Alt = There are two line charts side by side that display the annual percentage change of inflation in consumer prices where the left chart consists of the years 2017, 2018, 2019 to show the inflation trends right before the COVID-19 and the right line chart consists of the years 2020, 2021, and 2022 to show the inflation trends since covid. It consists of a drop down menu to select each of 131 total countries at a time. The countries are: Albania, Algeria, Armenia, Australia, Austria, Azerbaijan, Bahrain, Bangladesh, Belarus, Belgium, Belize, Benin, Bhutan, Bolivia, Botswana, Brazil, Bulgaria, Burundi, Cambodia, Cameroon, Canada, Chad, Chile, China, Colombia, Costa Rica, Croatia, Cyprus, Czechia, Denmark, Djibouti, Dominican Republic, Eastern Africa, Ecuador, Egypt, El Salvador, Estonia, Fiji, Finland, France, Gabon, Georgia, Germany, Ghana, Greece, Grenada, Guatemala, Guinea, Guyana, Haiti, Honduras, Hungary, Iceland, India, Indonesia, Iraq, Ireland, Israel, Italy, Jamaica, Japan, Jordan, Kenya, Korea, Kosovo, Kuwait, Latvia, Libya, Lithuania, Luxembourg, Madagascar, Malawi, Malaysia, Maldives, Malta, Mauritania, Mauritius, Mexico, Moldova, Mongolia, Montenegro, Morocco, Mozambique, Namibia, Nepal, Netherlands, New Zealand, Nicaragua, Niger, Nigeria, Norway, Oman, Pakistan, Palau, Palestine, Panama, Paraguay, Peru, Philippines, Poland, Portugal, Qatar, Romania, Rwanda, Samoa, Saudi Arabia, Senegal, Serbia, Singapore, Slovenia, South Africa, Sri Lanka, Sweden, Switzerland, Tanzania, Thailand, Togo, Tonga, Tunisia, Turkiye, Uganda, Ukraine, United Arab Emirates, United Kingdom, United States, Uruguay, Uzbekistan, Vanuatu, Viet Nam, Western Africa, and Zambia. The x-axes plot the years, and the y-axes plot the percentage of Annual Percentage Change of Inflation in Consumer Prices.38:T702,### HOUSING BEFORE AND DURING COVID-19 Interactive line chart showing the changes in real housing cost, rent cost, and real housing cost to income ratios for 20 global countries from 2017 to 2022, which includes years prior to COVID-19 and also during COVID-19. In addition to selecting countries and indicator to view, hovering over points allows users to see the exact annual percent change value. Focusing on 20 global countries provides an opportunity for viewers to make comparisons between different regions. Generally, viewers can see an increasing trend for the different indicators as time goes on. The comparable metric is supported through the base year of 2015 where the percentage growth indicates the increase or decrease of different housing trends compared to the housing trends in 2015. For example, if in 2017 the annual change for Real Housing Cost is 9%, it means the Real Housing Cost in 2017 increased about 9% since 2015. Similarly for Italy in 2019, if the annual change for Real Housing Cost is -4%, it means the the Real Housing Cost in 2019 decreased about 4% since 2015 in Italy. Real Housing Cost: Indicates the annual percentage growth in prices of the houses adjusted by the inflation. Rent Cost: Indicates the annual percentage growth in prices of renting places. Housing Cost to Income Ratio: Indicates the nominal house price index divided by the nominal disposable income per head and can be considered as a measure of affordability. In most cases, the nominal house price index covers the sales of newly-built and existing dwellings, following the recommendations from the RPPI (Residential Property Prices Indices) manual. 39:T544,graph = { const customOrder = ['United States', 'Canada', 'United Kingdom', 'Ireland', 'France', 'Belgium', 'Germany', 'Netherlands', 'Greece', 'Italy', 'Switzerland', 'Denmark', 'Spain', 'Portugal', 'Korea', 'Japan', 'Australia', 'New Zealand', 'Slovak Republic', 'South Africa']; const dataWithCustomOrder = housingData.map(d => ({ d, Order: customOrder.indexOf(d.Country) })); const countrySelection = vl.selectPoint('Select') .fields('Country') .init('United States') .bind(vl.menu(customOrder)) const indicatorFilter = vl.param("Indicators") .value('Real Housing Cost') .bind(vl.radio(indicator_type)); return vl.markLine({ point: { filled: true, size: 100 } }) .data(housingData) .transform( vl.filter('datum.Indicator === Indicators') ) .params(countrySelection, indicatorFilter) .encode( vl.x().fieldT('Year').scale({ domain: ['2017', '2022-01-02'] }), vl.y().fieldQ('Annual Change (%)'), // .scale({type: 'logarithmic'}) vl.color().fieldN("Country").scale({range: colors, domain: customOrder}), vl.opacity().if(countrySelection, vl.value(1)).value(0.07), vl.tooltip(['Country', 'Annual Change (%)']) ) .width(400) .height(400) .title("Rent and Housing Trends Before and During COVID-19 In 20 Global Countries") .render(); } 3a:T403,### MENTAL HEALTH IN THE U.S. The graphical representation spanning from 2019 to 2023 provides a visual narrative of how depression rates evolved in the United States. Each year signifies a distinct chapter in the nation's mental health story. In 2019, we observe a baseline with the lowest depression rate at 22% through the tooltips, setting the stage for the subsequent years. The year 2020 unfolds with the COVID-19 pandemic, showing a noticeable uptick as depression rates reach 23%. This marks the beginning of a mental health challenge coinciding with the unprecedented global crisis. However, the most noteworthy revelation comes in the following years, as depression rates soar to an all-time high of 29% in both 2021 and 2023. This significant increase underscores the prolonged and enduring impact of the pandemic on the mental well-being of the population. It highlights a pressing need for sustained attention to mental health issues resulting from remote schooling and work, quarantines, and other pandemic fact3b:T4d5,### Data Sources - https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7378494/ - https://covid19.who.int/data - https://abcnews.go.com/Health/depression-rates-us-adults-reach-new-high-gallup/story?id=99387994 - https://www.washingtonpost.com/nation/interactive/2021/coronavirus-timeline/ - https://www.kxan.com/news/coronavirus/365-days-of-covid-how-the-coronavirus-in-texas-unfolded-one-year-after-the-first-case/ - https://data.worldbank.org/indicator/FP.CPI.TOTL.ZG?view=chart - https://data.oecd.org/price/housing-prices.htm#indicator-chart - https://www.nytimes.com/interactive/2023/us/covid-cases.html - https://www.cnn.com/election/2020/results/president - https://usafacts.org/articles/what-are-the-current-swing-states-and-how-have-they-changed-over-time/ ### References - https://observablehq.com/@d3/world-choropleth - https://observablehq.com/@d3/choropleth - https://observablehq.com/@mbostock/scrubber - https://observablehq.com/@d3/color-legend - https://observablehq.com/@d3/bubble-chart-component - https://observablehq.com/@27ed378f60dd4c20/us-map-with-state-tooltips - https://observablehq.com/@vega/vega-lite-annotated-time-series - https://observablehq.com/@d3/bar-line-chart - https://observablehq.com/d/c34e6d84b2492b643c:[{"id":"8265cb86a41a16cffce84d3ffebc1f9410561ed1f0434fd3c8f51dc4ba5693cb2be0a81c72993e868b3b3d4414efc828981dcfea66b105b2137a84f06d631174","href":"https://static.observableusercontent.com/files/8265cb86a41a16cffce84d3ffebc1f9410561ed1f0434fd3c8f51dc4ba5693cb2be0a81c72993e868b3b3d4414efc828981dcfea66b105b2137a84f06d631174","name":"TestHousing@2.csv","type":"text/csv","lastModified":1702569759428.251,"size":8523},{"id":"8267d413329210824d2386e6601bd44440cf2e379b1ee2fffd68f2efbb2684e005c81b160db1349575f3a7c88295a13a67c2a5b5d8cc1c36478bea295d067f27","href":"https://static.observableusercontent.com/files/8267d413329210824d2386e6601bd44440cf2e379b1ee2fffd68f2efbb2684e005c81b160db1349575f3a7c88295a13a67c2a5b5d8cc1c36478bea295d067f27","name":"How Did COVID-19 Affect the Depression Rates in the US_.png","type":"image/png","lastModified":1702569759428.251,"size":18848},{"id":"3dfe576bf314a6c8f725c6558a74a332a21511e5e202462e66c0925fd74cbef67e29a590ac1689f9eb304c07debb43d0a729671fef1e44d2a6e8e49ca824ebd1","href":"https://static.observableusercontent.com/files/3dfe576bf314a6c8f725c6558a74a332a21511e5e202462e66c0925fd74cbef67e29a590ac1689f9eb304c07debb43d0a729671fef1e44d2a6e8e49ca824ebd1","name":"vaccination-data@6.csv","type":"text/csv","lastModified":1702569759428.251,"size":9170},{"id":"006f302bf437c03398f515691d7f3ade3815002de60f1a9f89744508632c711272a3d17c4a5e4683b469779054154f15cd2bc23e3a738eb24edd79a4408744ca","href":"https://static.observableusercontent.com/files/006f302bf437c03398f515691d7f3ade3815002de60f1a9f89744508632c711272a3d17c4a5e4683b469779054154f15cd2bc23e3a738eb24edd79a4408744ca","name":"india.csv","type":"text/csv","lastModified":1702569759428.251,"size":27482},{"id":"97fb829a6030800a36b60ee66caa6ec5a1c50bfce90db01de9cd0950a7b1f4af2eb72203ae16b7270fa7b38033f8d8d9b4f976900862be90b370783774f2573c","href":"https://static.observableusercontent.com/files/97fb829a6030800a36b60ee66caa6ec5a1c50bfce90db01de9cd0950a7b1f4af2eb72203ae16b7270fa7b38033f8d8d9b4f976900862be90b370783774f2573c","name":"deathsupdated.csv","type":"text/csv","lastModified":1702569759428.251,"size":9048906},{"id":"f2ab2103f166dbe9353fcdef08e7430891ee22ef388b3e4cdb47cda2e7db18fec6998139bd3355192c3a8a1f57312f04764de38a8ffe3c6c9b82081364bbec9c","href":"https://static.observableusercontent.com/files/f2ab2103f166dbe9353fcdef08e7430891ee22ef388b3e4cdb47cda2e7db18fec6998139bd3355192c3a8a1f57312f04764de38a8ffe3c6c9b82081364bbec9c","name":"HousingPrices@3.csv","type":"text/csv","lastModified":1702569759428.251,"size":16705},{"id":"88d2f90e85df354f9ef1284cac4d5c2b38ad9081e207d778d0d9c0e4e78cd04715d57c565af37bee607fc96779ebb4cd590bcd6fea6e566f00e9e6d052d91e39","href":"https://static.observableusercontent.com/files/88d2f90e85df354f9ef1284cac4d5c2b38ad9081e207d778d0d9c0e4e78cd04715d57c565af37bee607fc96779ebb4cd590bcd6fea6e566f00e9e6d052d91e39","name":"current@6.csv","type":"text/csv","lastModified":1702569759428.251,"size":10551282},{"id":"0ffc48435b2cf07683e5eabed32fa22eb5a07cfa7266940c9abca9b6e7603005363b24d565c3d570974825df007be9b8b14baa112ab38e6a0f19bbdf0fd6d525","href":"https://static.observableusercontent.com/files/0ffc48435b2cf07683e5eabed32fa22eb5a07cfa7266940c9abca9b6e7603005363b24d565c3d570974825df007be9b8b14baa112ab38e6a0f19bbdf0fd6d525","name":"covidCases (1)-1@1.csv","type":"text/csv","lastModified":1702569759428.251,"size":9620674},{"id":"44101dfccd706a906d6cba51fe50c5cf1f8b3a23445df91ada4405ffaa905986cea54e4af458a10424c89002df7dd212e23db799a3145b4b3c554d6094b0c3a7","href":"https://static.observableusercontent.com/files/44101dfccd706a906d6cba51fe50c5cf1f8b3a23445df91ada4405ffaa905986cea54e4af458a10424c89002df7dd212e23db799a3145b4b3c554d6094b0c3a7","name":"InflationDataSet@3.csv","type":"text/csv","lastModified":1702569759428.251,"size":20786},{"id":"f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","href":"https://static.observableusercontent.com/files/f4afb2d49f0b38843f6d74521b33d41f371246e1acd674ed78016dca816cb1d262b7c54b95d395a4dad7fba5d58ed19db2944698360d19483399c79565806794","name":"countries-50m.json","type":"application/json","lastModified":1702569759428.251,"size":756420},{"id":"0db34929f4c4d43b11781c9bbf3965945941668e51cef42bc33cb98d52b1919bd824a2734bb1fea66e5a9c7a6143f226cf18898155241fa571ea626604b38c35","href":"https://static.observableusercontent.com/files/0db34929f4c4d43b11781c9bbf3965945941668e51cef42bc33cb98d52b1919bd824a2734bb1fea66e5a9c7a6143f226cf18898155241fa571ea626604b38c35","name":"italy.csv","type":"text/csv","lastModified":1702569759428.251,"size":27105}] 2f:{"id":"8131aa28c43391f0","slug":null,"title":"[Copy] 442 Final Project Explorable Visualizations: COVID-19 Throughout the Years","thumbnail":"4f8beac4770779c55777bfd2c70ccb2fd7bf4375390542b60bb63879aa8a6bd6","access_level":"public","create_time":"$D2023-12-14T16:02:39.428Z","update_time":"$D2024-09-09T03:39:30.029Z","view_time":null,"first_public_time":"$D2023-12-14T16:02:39.428Z","has_unpublished_edits":null,"fork":{"id":"3d6fb795f2b34c52","slug":null,"title":"442 Final Project Explorable Visualizations: COVID-19 Throughout the Years","owner":{"id":"13b760d5bc254859","login":"heerpatel","name":"heer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"13b760d5bc254859","login":"heerpatel","name":"heer","avatar_url":"https://avatars-next.observableusercontent.com/93ad149880f1024f4d03be5242ef3f5bab9ca3278527a8c0c42db6db909dd849","tier":"starter_2024"},"version":2955,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19df5c69e8198c81","login":"heerpatel","name":"heer","avatar_url":"https://avatars-next.observableusercontent.com/93ad149880f1024f4d03be5242ef3f5bab9ca3278527a8c0c42db6db909dd849","tier":null}],"members":[{"type":"individual","id":"19df5c69e8198c81","login":"heerpatel","name":"heer","avatar_url":"https://avatars-next.observableusercontent.com/93ad149880f1024f4d03be5242ef3f5bab9ca3278527a8c0c42db6db909dd849","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"[Copy] 442 Final Project Explorable Visualizations: COVID-19 Throughout the Years","cells":[{"id":0,"value":"# [Copy] 442 Final Project Explorable Visualizations: COVID-19 Throughout the Years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1855,"value":"**WEBSITE:** https://cse442.pages.cs.washington.edu/23au/final-project/story_of_covid/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1824,"value":"The COVID-19 pandemic impacted our world and society in several aspects. Not only was there a rise in sickness and deaths \n during the pandemic, but factors like politics, vaccinations, inflation, housing, and mental health also became important. \n The following explorable visualizations aim to provide insight into the complex aspects of COVID-19 throughout the years.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1361,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1143,"value":"covidData = (await FileAttachment(\"covidCases (1)-1@1.csv\").csv({ typed: true })).map(d => ({\n Country: rename.get(d.Country) || d.Country,\n Cases: d.Cases,\n Date: new Date(d.Date), // Assuming your date format is compatible\n})).sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"hale = (await FileAttachment(\"covidCases (1)-1@1.csv\").csv({typed:true})).map(d => ({Country: rename.get(d.Country) || d.Country,\n Value: d.Cases,\n Year: new Date(d.Date).getFullYear(), // Extracting the year from the date\n Long_value: d.Long_value,}), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"filteredArray = hale.filter(function(el) {\n return !el.Value==0;\n} );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1159,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"countrymesh = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"deaths = (await FileAttachment(\"deathsupdated.csv\").csv({ typed: true })).map(d => ({\n Country: rename.get(d.country) || d.country,\n Deaths: d.deaths,\n Date: new Date(d.date), // Assuming your date format is compatible\n})).sort((a, b) => a.date - b.date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1986,"value":"filteredCases = covidData\n .filter(d => d.Date <= date);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"filteredDeaths = deaths\n .filter(d => d.Date <= date2);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"viewof date = Scrubber(d3.utcWeek.every(3).range(...d3.extent(covidData, d => d.Date)), {format: d3.utcFormat(\"%Y %b %-d\"), loop: false, delay: null}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"key2 = Legend(d3.scaleSequential([0, 103436829], d3.interpolateGreens), {\n title: \"Cumulative COVID-19 Cases\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"chartFinal2 = addTooltips(Choropleth(filteredCases, {\n id: d => d.Country,\n value: d => d.Cases, \n range: d3.interpolateGreens,\n domain: [1, 103436829],\n features: countries,\n featureId: d => d.properties.name,\n borders: countrymesh,\n projection: d3.geoEqualEarth(),\n width\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2862,"value":"Alt= This animated and interactive world map displays the progression of total COVID-19 case counts in countries from January 5, 2020 to December 3, 2023 in increments of three weeks. It consists of a slider that can automatically play and can be dragged and adjusted to stop at a certain date. When the slider is paused, it supports hovering interaction to view the exact case counts of countries. As the cases increase, the green color value of that country darkens. At the end of the animation, the United States has the highest total COVID-19 cases, followed by China.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2005,"value":"viewof date2 = Scrubber(d3.utcWeek.every(3).range(...d3.extent(deaths, d => d.Date)), {format: d3.utcFormat(\"%Y %b %-d\"), loop: false}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2010,"value":"key4 = Legend(d3.scaleSequential([0, 1144877], d3.interpolateOranges), {\n title: \"Cumulative COVID-19 Deaths\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2007,"value":"chartFinal5 = addTooltips(Choropleth(filteredDeaths, {\n id: d => d.Country,\n value: d => d.Deaths, \n domain: [0, 1144877],\n range: d3.interpolateOranges,\n features: countries,\n featureId: d => d.properties.name,\n borders: countrymesh,\n projection: d3.geoEqualEarth(),\n width\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2857,"value":"Alt= This animated and interactive world map displays the progression of total COVID-19 death counts in countries from January 5, 2020 to December 3, 2023 in increments of three weeks. It consists of a slider that can automatically play and can be dragged and adjusted to stop at a certain date. When the slider is paused, it supports hovering interaction to view the exact death counts of countries. As the deaths increase, the orange color value of that country darkens. At the end of the animation, the United States has significantly higher total COVID-19 deaths than other countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1836,"value":"### FOCUSED LOOK AT THE UNITED STATES\nFrom the world maps above, it is apparent that the United States had the highest number of total cases and deaths. To aid users in looking closer at the United States, this US map presents COVID-19 deaths per 100,000 people as of November 2023 with enabled tooltips for presenting important policy information and insights on key states. Each state's color hue is based off of its majority political party in the 2020 presidential election: red for Republican, blue for Democrat, and purple for swing states. The color value is lighter or darker in relation to the number of deaths per 100,000 people within states. Viewers can observe that of the states with over 400 deaths per 100,000 people, the majority of them are Republican as indicated by their red coloring. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1481,"value":"json = d3.json(\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/25240/us-states.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"auto\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"auto\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .html(function(d){\n return d}));\n\n const {x, y, width: w, height: h} = text.node().getBBox(); // the box that our text is in\n// place the text\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"topojson = require(\"https://d3js.org/topojson.v1.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\", \"d3-svg-legend@2\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2173,"value":"US State COVID-19 Deaths Per 100,000 People as of 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2311,"value":"reds = Legend(d3.scaleSequential([0, 506], d3.interpolateReds), {\n title: \"Republican State Total COVID-19 Deaths Per 100,000 People\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"blues = Legend(d3.scaleSequential([0, 506], d3.interpolateBlues), {\n title: \"Democrat State Total COVID-19 Deaths Per 100,000 People\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2325,"value":"swing = Legend(d3.scaleSequential([0, 506], d3.interpolatePurples), {\n title: \"Swing State Total COVID-19 Deaths Per 100,000 People\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2855,"value":"Alt = This map shows the covid deaths per state in the US for every 100,000 people. Furthermore, states are color coded to represent which party is dominant within that state. Democratic states are blue, Republican states are red, and Swing states are purple. We can also see that the stats vary in which shade or red, blue, or purple they are. The deeper the color of the state, the more deaths per 100,000 people due to COVID-19 happened in that state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1367,"value":"### COUNTRIES WITH CASE SPIKES\nCOVID-19 affected countries differently, and some were harder hit with cases than others. These hoverable line charts allow viewers to explore two countries (India and Italy) affected by large COVID-19 spikes. This interactivity supports viewer exploration of the short time range in which India and Italy had millions of cases accumulate. Seeing the numbers directly, in addition to the estimate that can be made from the y-axis, puts the severity of the situation into perspective.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"india = FileAttachment(\"india.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1391,"value":"italyData = FileAttachment(\"italy.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2868,"value":"Alt = This line chart displays the evolution of cumulative COVID-19 cases from January 2020 to November 2023 in India. It supports hovering interaction, where it will display the exact date and total cases at that date. The x-axis plots the date, and the y-axis plots the cumulative cases.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1395,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2872,"value":"Alt = This line chart displays the evolution of cumulative COVID-19 cases from January 2020 to November 2023 in Italy. It supports hovering interaction, where it will display the exact date and total cases at that date. The x-axis plots the date, and the y-axis plots the cumulative cases. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2262,"value":"### COVID-19 VACCINATIONS AROUND THE GLOBE\nTaking a look at one last world map below, the color value correlates with the cumulative persons vaccinated \n against COVID-19 with at least one dose per 100 population as of 2023 (provided by the World Health Organization's \n most recent updates). Hovering over countries shows us the actual number \n of cumulative persons vaccinated with at least one dose per 100 population addition to the color range the country is in. \n Viewers can observe that African countries tend to have lower numbers than other countries, showing the high variability \n in vaccinations around the world. Note that data was not found for grayed out countries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2194,"value":"vaccinationData = (await FileAttachment(\"vaccination-data@6.csv\").csv({ typed: true })).map(d => ({\n COUNTRY: rename.get(d.COUNTRY) || d.COUNTRY,\n PERSONS_VACCINATED_1PLUS_DOSE_PER100: d.PERSONS_VACCINATED_1PLUS_DOSE_PER100\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2242,"value":"vac = Legend(vaccination.scales.color, {title: \"Cumulative persons vaccinated with 1+ dose per 100 population\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2198,"value":"vaccination = addTooltips(Choropleth(vaccinationData, {\n id: d => d.COUNTRY,\n value: d => d.PERSONS_VACCINATED_1PLUS_DOSE_PER100, \n range: d3.interpolatePurples,\n features: countries,\n featureId: d => d.properties.name,\n borders: countrymesh,\n projection: d3.geoEqualEarth(),\n width\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2842,"value":"Alt = This global purple map displays the persons vaccinated with one plus dose per 100 population for different countries. The color legend on top of the map shows the intensity of vaccinated people. The darker purple the country is, the more vaccinated people are there in that country. It also has an interactive hover option where the user can see the country name and the amount of total vaccinated people per 100 population of that country.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"### INFLATION BEFORE AND DURING COVID-19\nInflation as measured by the consumer price index reflects the annual percentage change in the cost \n to the average consumer of acquiring a basket of goods and services that may be fixed or changed at \n specified intervals, such as yearly.\n
\n The two charts below show the overall inflation rate change from 2017 to 2019 and 2020 to 2022 for 131 countries, with\n a drop down selection to encourage viewer exploration. There are two period separations to show a clear picture of the \n potential impacts of COVID-19 on inflation in consumer prices.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"inflationData2 = FileAttachment(\"InflationDataSet@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"countrie = uniqueValid(inflationData2, d => d.Country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2642,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2646,"value":"d31 = require(\"d3@5\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2649,"value":"d31.tip = require(\"d3-tip\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"viewof dropdownCountry = select({options: countrie})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2835,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1732,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":772,"value":"housingData = FileAttachment(\"HousingPrices@3.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"countriesH = uniqueValid(housingData, d => d.Country)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"indicator_type = ['Real Housing Cost', 'Rent Cost', 'Housing Cost to Income Ratio']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"colors = [\"#1f77b4\",\"#aec7e8\",\"#ff7f0e\",\"#ffbb78\",\"#2ca02c\",\"#98df8a\",\"#d62728\",\"#ff9896\",\"#9467bd\",\"#c5b0d5\",\"#8c564b\",\"#c49c94\",\"#e377c2\",\"#f7b6d2\",\"#7f7f7f\",\"#c7c7c7\",\"#bcbd22\",\"#dbdb8d\",\"#17becf\",\"#9edae5\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"housingDataTest = FileAttachment(\"TestHousing@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2829,"value":"Alt = This line chart displays the annual change of percentage in housing trends right before and since covid from 2017 to 2022 for twenty global countries: Australia, Belgium, Canada, Denmark, France, Germany, Greece, Italy, Ireland, Japan, Korea, New Zealand, Netherlands, Portugal, Switzerland, Spain, Slovak Republic, South Africa, United Kingdom, and the United States. It consists of a drop down menu to select each of the countries at a time, and you can interact with radio selection buttons to see plots for Real Housing Cost, Rent Cost, and Housing Cost to Income Ratio. The x-axis plots the year, and the y-axis plots the percentage of Annual Change in housing trends. The chart also has an hover option with a circle data point where if the user hovers over the point, it shows them the country and the percentage of housing trend annual change.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2089,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1319,"value":"data = [\n { year: 2019, percentage: 22 },\n { year: 2020, percentage: 23 },\n { year: 2021, percentage: 29 },\n { year: 2022, percentage: 27 },\n { year: 2023, percentage: 29 }\n];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2180,"value":"howDidCovid19AffectTheDepressionRatesInTheUs_ = FileAttachment(\"How Did COVID-19 Affect the Depression Rates in the US_.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2177,"value":"**[Interactive Mental Health Chart Link](https://docs.google.com/spreadsheets/d/e/2PACX-1vR4wwUa2kjUuCekExGaJN9FSCzVqkssk0-I70HbvQk5rix7zYzhRmWUSmjy9hCs-VKcuDI5Qk_t0F3n/pubchart?oid=15986575&format=interactive)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2863,"value":"Alt = This line chart shows how the percentage of people in the United States with depression changed during Covid-19. Right before the start of the pandemic, it was 22 percent. Then, during covid, the graph shows a spike as depression rates shot up to 29 percent in 2021. Rates seemed to decrease slightly in 2022 but went back up in the next year. It contains tooltips displaying these percentages.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":672,"value":"### COVID-19 TODAY\nFocusing on the total number of cases or deaths may seem overwhelming. However, it is important to \n realize that the growth of COVID-19 has greatly decreased since it's highly active years. This\n bubble chart provides perspective into how many new cases have occurred in countries in the past \n three months. Hovering over bubbles allows users to read the full name of the country, as well as total cases. \n Countries are color hued by their World Health Organization regions. Viewers can notice that primarily countries\n from the European and Western Pacific Regions have the highest amount of new COVID-19 cases in the past three months.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2166,"value":"New COVID-19 Cases Occurred in Countries in the Past Three Months (9/1/2023 - 11/30/2023)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"bubbles = current.filter(d => d.sum !== null) // just the leaves","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"current = FileAttachment(\"current@6.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1941,"value":"legend = Swatches(d3.scaleOrdinal([\"African Region\",\"Western Pacific Region\", \"Region of the Americas\", \"European Region\", \"South-East Asia Region\", \"Eastern Mediterranean Region\"], d3.schemeTableau10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"bubbleChart = BubbleChart(bubbles, {\n label: d => [...d.Country.split(\".\").pop().split(/(?=[A-Z][a-z])/g), d.sum.toLocaleString(\"en\")].join(\"\\n\"),\n value: d => d.sum,\n group: d => d.WHO_region,\n title: d => `${d.Country}\\n${d.sum.toLocaleString(\"en\")}`,\n width: 950,\n height: 980\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2879,"value":"Alt = Bubble chart displaying countries with their total new COVID-19 cases counts from the past three months: September 2023 to November 2023. Country bubbles are color coded by World Heath Organization regions. The chart supports hovering interaction to see the full country name and new case counts from the past three months. Italy has the largest bubble, demonstrating the highest amount of new cases in the past three months, followed by other European Region and Western Pacific Region countries. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":478,"value":"import {uniqueValid} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {button, select, text, radio, checkbox, number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"import {BubbleChart} from \"@d3/bubble-chart-component\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"import {howto} from \"@d3/example-components\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"import {printTable} from \"@uwdata/data-utilities\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"import {slider as slide} from \"@lorenries/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"import {Choropleth, Legend} from \"@d3/choropleth\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 30:"$2f:body"