31:T8e8,md` This visualization aims to investigate the **impact of the COVID-19 pandemic on the United States** and provides an explaination of the **unemployment problem** by looking at both international and domestic Unempolyment Rate data. We will look at international Covid and Employment Rate data in 2020 and cover the changes in the US Unemployment Rates from early 2019 to late 2020. ## Design Methods We utilized the nested model of design as our main design method. 1. We characterized the tasks and data in the the problem domain of COVID-19 and unemployment. Some questions we have asked included: What is the **impact of COVID-19 on employment rate?** Which country has the largest number of confirmed cases and which country has the lowest number of confirmed cases? What's the **relationship between Covid death rate and unemployment rate**? 2. Secondly, we looked at more abstract and low-level tasks such as determing data types as numerical or chategorical, identifying the distribution of our datasets, finding extreme values and correlation if possible. 3. Thirdly, we designed the visual encoding and interactions for different types of data and questions we aim to answer to present the information efficiently to the audiences. 4. Fourthly, we created algorithms in order to deliver these visualizations with good performance as you can see in this notebook. We will start by exploring the relationship between death rate and employment rate to compare US employment rate with other countries in the world to highlight the **serverity of the the pandemic's impact on employment** overall. Then, we will focus on unemployment rate in senses of different demographics and regions within the US to explore more detailed information of the pandemic's impact. We will also address noticeble findings, in this case, the high unemployment rate in Hawaii. We explore along the way by providing aditional visualizations. ## Note Employment rate are calculated **differently** than Unemployment rate. Employment rate is the *population in the workforce* divided by the *country's total population*. Unemployment rate is the *population in the workforce* divdided by the *population eligible to work in that country*, **excluding underaged or retired citizens**. `32:Te8b,graph_age = { let x = d3 .scaleBand() .domain(d3.range(by_age.length)) .range([margin.left, width - margin.right]); let y = d3 .scaleLinear() .domain([0, 50]) .nice() .range([height - margin.bottom, margin.top]); let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => by_age[i].Label.substring(2, 8)) .tickSizeOuter(0) ); let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); let color = d3.scaleOrdinal().range(["#6b486b", "#ff8c00"]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "display"); const circles = svg .selectAll("circle") .data(by_age) .join("circle") .attr("r", 20) .attr("cx", (d, i) => x(i) + 18) .attr("cy", d => y(d[metric])) .attr("opacity", 0); const line = d3 .line() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y(function(d) { return y(d[metric]); }); let line_covid = d3 .line() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y(d => y(d.Value)); svg .append("path") .datum(by_age) .attr("class", "line") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); svg .append("path") .datum(covid_death_rate) .attr("class", "line") .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line_covid); const tip = svg .append("g") .style("pointer-events", "none") .style("text-anchor", "middle"); circles.on("mouseenter", event => { const value = event.target.__data__; const pointer = d3.pointer(event); const text = [ metric + " Yrs Old", value.Label, "Unemployment Rate: " + value[metric] + "%" ]; tip.call(hover, pointer, text); }); circles.on("mouseout", event => { tip.selectAll("*").remove(); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("text") .attr("x", width / 2 - 80) .attr("y", 40) .style('text-anchor', 'middle') .style("font-size", "20px") .text("Unemployment Rate for the age group of " + `${[metric]}`); svg .append("text") .attr("x", width / 2) .attr("y", height - 20) .style('text-anchor', 'middle') .text('Month'); svg .append("text") .attr("x", -(height / 2)) .attr("y", Math.floor(margin.left / 5.5)) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Unemplyment Rate %"); svg .append("line") .attr("x1", 620) .attr("y1", 100) .attr("x2", 620) .attr("y2", 440) .style("stroke", "black"); // append lockdown vertical line text svg .append("text") .attr("x", 540) .attr("y", 200) .text("Lockdown") .style("font-size", "15px") .attr("alignment-baseline", "middle"); // append Employment rate label svg .append("text") .attr("x", 95) .attr("y", 370) .text("Unempolyment Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); // append Covid death rate label svg .append("text") .attr("x", 95) .attr("y", 433) .text("Covid Death Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); return svg.node(); }33:Te93,graph_job_type = { let x = d3 .scaleBand() .domain(d3.range(by_job_type.length)) .range([margin.left, width - margin.right]); let y = d3 .scaleLinear() .domain([0, 50]) .nice() .range([height - margin.bottom, margin.top]); let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => by_job_type[i].Label.substring(2, 8)) .tickSizeOuter(0) ); let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "display"); const circles = svg .selectAll("circle") .data(by_job_type) .join("circle") .attr("r", 20) .attr("cx", (d, i) => x(i) + 18) .attr("cy", d => y(d[metric1])) .attr("opacity", 0); const area = d3 .area() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y0(y(0)) .y(function(d) { return y(d[metric1]); }); let line_covid = d3 .line() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y(d => y(d.Value)); svg .append("path") .datum(by_job_type) //.attr("class", "line") .attr("fill", "steelblue") .attr("stroke", "steelblue") //.attr("stroke-linejoin", "round") //.attr("stroke-linecap", "round") //.attr("stroke-width", 1.5) .attr("d", area); svg .append("path") .datum(covid_death_rate) .attr("class", "line") .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line_covid); const tip = svg .append("g") .style("pointer-events", "none") .style("text-anchor", "middle"); circles.on("mouseenter", event => { const value = event.target.__data__; const pointer = d3.pointer(event); const text = [ metric1, value.Label, "Unemployment Rate: " + value[metric1] + "%" ]; tip.call(hover, pointer, text); }); circles.on("mouseout", event => { tip.selectAll("*").remove(); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("text") .attr("x", width / 2 - 80) .attr("y", 40) .style('text-anchor', 'middle') .style("font-size", "20px") .text("Unemployment Rate of " + `${[metric1]}` + " Workers"); svg .append("text") .attr("x", width / 2) .attr("y", height - 20) .style('text-anchor', 'middle') .text('Month'); svg .append("text") .attr("x", -(height / 2)) .attr("y", Math.floor(margin.left / 5.5)) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Unemplyment Rate %"); // append lockdown vertical lin svg .append("line") .attr("x1", 620) .attr("y1", 100) .attr("x2", 620) .attr("y2", 440) .style("stroke", "black"); // append lockdown vertical line text svg .append("text") .attr("x", 630) .attr("y", 200) .text("Lockdown") .style("font-size", "15px") .attr("alignment-baseline", "middle"); // append Employment rate label svg .append("text") .attr("x", 95) .attr("y", 390) .text("Unempolyment Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); // append Covid death rate label svg .append("text") .attr("x", 95) .attr("y", 433) .text("Covid Death Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); return svg.node(); }34:Te51,graph_sex = { let x = d3 .scaleBand() .domain(d3.range(by_sex.length)) .range([margin.left, width - margin.right]); let y = d3 .scaleLinear() .domain([0, 50]) .nice() .range([height - margin.bottom, margin.top]); let xAxis = g => g.attr("transform", `translate(0,${height - margin.bottom})`).call( d3 .axisBottom(x) .tickFormat(i => by_sex[i].Label.substring(2, 8)) .tickSizeOuter(0) ); let yAxis = g => g.attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "display"); const circles = svg .selectAll("circle") .data(by_sex) .join("circle") .attr("r", 20) .attr("cx", (d, i) => x(i) + 18) .attr("cy", d => y(d[metric2])) .attr("opacity", 0); let line = d3 .line() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y(function(d) { return y(d[metric2]); }); let line_covid = d3 .line() .curve(d3.curveCatmullRom) .x(function(d, i) { return x(i) + 18; }) .y(d => y(d.Value)); svg .append("path") .datum(by_sex) .attr("class", "line") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line); svg .append("path") .datum(covid_death_rate) .attr("class", "line") .attr("fill", "none") .attr("stroke", "orange") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("d", line_covid); const tip = svg .append("g") .style("pointer-events", "none") .style("text-anchor", "middle"); circles.on("mouseenter", event => { const value = event.target.__data__; const pointer = d3.pointer(event); const text = [ metric2, value.Label, "Unemployment Rate: " + value[metric2] + "%" ]; tip.call(hover, pointer, text); }); circles.on("mouseout", event => { tip.selectAll("*").remove(); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("text") .attr("x", width / 2 - 80) .attr("y", 40) .style('text-anchor', 'middle') .style("font-size", "20px") .text("Unemployment Rate of " + `${[metric2]}`); svg .append("text") .attr("x", width / 2) .attr("y", height - 20) .style('text-anchor', 'middle') .text('Month'); svg .append("text") .attr("x", -(height / 2)) .attr("y", Math.floor(margin.left / 5.5)) .style("text-anchor", "middle") .attr('transform', "rotate(-90)") .text("Unemplyment Rate %"); // append lockdown vertical line svg .append("line") .attr("x1", 620) .attr("y1", 100) .attr("x2", 620) .attr("y2", 440) .style("stroke", "black"); // append lockdown vertical line text svg .append("text") .attr("x", 630) .attr("y", 200) .text("Lockdown") .style("font-size", "15px") .attr("alignment-baseline", "middle"); // append Employment rate label svg .append("text") .attr("x", 95) .attr("y", 390) .text("Unempolyment Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); // append Covid death rate label svg .append("text") .attr("x", 95) .attr("y", 433) .text("Covid Death Rate") .style("font-size", "15px") .style("fill", "#000") .attr("alignment-baseline", "middle"); return svg.node(); }35:Td76,chart2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, 975, 610]) .on("click", reset); const zoom = d3 .zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); svg .append("g") .attr("transform", "translate(610,20)") .append(() => legend({ color: color_choropleth, title: "Worker Job Loss Rate (%)", width: 260, tickFormat: ".2%" }) ) .raise(); const g = svg.append("g"); const county = g .append("g") .selectAll("path") .data(topojson.feature(shapefile, shapefile.objects.counties).features) .join("path") .on("click", clicked) .attr("fill", d => color_choropleth(data_obj.get(d.id))) .attr("stroke", "#DCDCDC") .attr("d", path); const p = g .append("path") .datum( topojson.mesh(shapefile, shapefile.objects.states, (a, b) => a !== b) ) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const tip = svg .append("g") // append a group of stuff .style("pointer-events", "none") .style("text-anchor", "middle"); county.on("mouseenter", event => { const data = event.target.__data__; const id = data.id; const county = data.properties.name; const state = states.get(id.slice(0, 2)).name; const value = data_obj.get(id); const pointer = d3.pointer(event, this); tip .style("text-anchor", "middle") .attr("transform", `translate(${pointer[0]}, ${pointer[1]})`) .append("text") .text(`${county}, ${state} ${d3.format(".2%")(value)}`); const bbox = tip.node().getBBox(); const side_padding = 3; tip .append("rect") .attr("y", bbox.y) .attr("x", bbox.x - side_padding) .attr("width", bbox.width + side_padding * 2) .attr("height", bbox.height) .style("fill", "white") .style("stroke", "#d3d3d3") .lower(); if (pointer[0] + bbox.x < margin.left) { tip.attr( "transform", `translate(${margin.left + bbox.width / 2}, ${pointer[1]})` ); } // Make sure it doesn't go to the right of the chart if (pointer[0] - bbox.x > width - margin.right) { tip.attr( "transform", `translate(${width - margin.right - bbox.width / 2}, ${pointer[1]})` ); } }); county.on("mouseout", event => { tip.selectAll("*").remove(); svg.selectAll("circle").remove(); }); svg.call(zoom); function reset() { county.transition(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity, d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) ); } function clicked(event, d) { const [[x0, y0], [x1, y1]] = path.bounds(d); event.stopPropagation(); county.transition(); d3.select(this).transition(); svg .transition() .duration(750) .call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale( Math.min(8, 0.9 / Math.max((x1 - x0) / width, (y1 - y0) / height)) ) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), d3.pointer(event, svg.node()) ); } function zoomed(event) { const { transform } = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return svg.node(); }36:T9c7,bar_chart2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 550]) .style("overflow", "display"); // Bar graph for industries const county_name = bar_metric.split(","); const selected_county = data .filter( d => d.county_name == county_name[0].trim() && d.state_name == county_name[1].trim() ) .map(d => d["county_fips"].length < 5 ? "0" + d["county_fips"] : "" + d["county_fips"] ); const selected_data = bar_obj.get(selected_county[0]); var sortable = []; for (var industry in selected_data) { sortable.push([industry, selected_data[industry]]); } sortable.sort((a, b) => { return b[1] - a[1]; }); console.log(sortable); const col_names = sortable.map(d => d[0]); console.log(col_names); const y_bar_scale = d3 .scaleBand() .domain(col_names) .range([0 + 70, height - 20]) .paddingInner(0); const x_bar_scale = d3 .scaleLinear() .domain([-100, 100]) .range([margin.left + 320, width - margin.right]); const z_color_scale = d3.scaleSequential(d3.interpolateRdBu).domain([-2, 2]); const xAxis = d3.axisBottom().scale(x_bar_scale); svg .append("g") .call(xAxis) .attr("transform", `translate(0,${height - 20})`); const yAxis = d3.axisLeft().scale(y_bar_scale); svg .append("g") .call(yAxis) .attr("transform", `translate(${margin.left + 320},0)`); svg.append("g").attr("transform", `translate(${margin.left + 320},0)`); svg .selectAll("circle") .data(sortable) .join("circle") .attr("cx", (d, i) => x_bar_scale(d[1] * 100)) .attr("cy", (d, i) => y_bar_scale(d[0]) + 12) .attr("r", 3) .attr("fill", d => z_color_scale(d[1] * d[1] * d[1] * -1000)) .attr("stroke", d => (d[1] < 0 ? "blue" : "red")) .attr("stroke-opacity", 0.4) .append("title") .text(d => d3.format(".2%")(d[1])); svg .append("line") .attr("x1", 662.5) .attr("y1", 70) .attr("x2", 662.5) .attr("y2", 480) .style("stroke", "grey"); //title svg .append("text") .attr("x", width / 2 + 170) .attr("y", 40) .style('text-anchor', 'middle') .style("font-size", "20px") .text("Change in Job Loss Rate by industry for " + `${[bar_metric]}`); // x label svg .append("text") .attr("x", width / 2 + 180) .attr("y", height + 20) .style('text-anchor', 'middle') .text('Change in Job Loss Rate(%)'); return svg.node(); }37:T914,chart4 = { const svg = d3.select(DOM.svg(width, height)); let x0 = d3 .scaleBand() .domain(hawaii.map(d => d["Month"])) .rangeRound([margin.left, width - margin.right]) .paddingInner(0.1); let x1 = d3 .scaleBand() .domain(keys) .rangeRound([0, x0.bandwidth()]) .padding(0.05); let y = d3 .scaleLinear() .domain([0, d3.max(hawaii, d => d3.max(keys, key => d[key]))]) .nice() .rangeRound([height - margin.bottom, margin.top]); let color = d3.scaleOrdinal().range(["#6b486b", "#ff8c00"]); let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x0).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(null, "s")) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Visitor Arrivals") ); let legend = svg => { const g = svg .attr("transform", `translate(${width},0)`) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data( color .domain() .slice() .reverse() ) .join("g") .attr("transform", (d, i) => `translate(0,${i * 20})`); g.append("rect") .attr("x", -19) .attr("width", 19) .attr("height", 19) .attr("fill", color); g.append("text") .attr("x", -24) .attr("y", 9.5) .attr("dy", "0.35em") .text(d => d); }; svg .append("g") .selectAll("g") .data(hawaii) .join("g") .attr("transform", d => `translate(${x0(d["Month"])},0)`) .selectAll("rect") .data(d => keys.map(key => ({ key, value: d[key] }))) .join("rect") .attr("x", d => x1(d.key)) .attr("y", d => y(d.value)) .attr("width", x1.bandwidth()) .attr("height", d => y(0) - y(d.value)) .attr("fill", d => color(d.key)); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(legend); return svg.node(); }38:T546,hover = (tip, pos, text) => { const side_padding = 3; tip .style("text-anchor", "middle") .style("pointer-events", "none") .attr("transform", `translate(${pos[0]}, ${pos[1]})`) .selectAll("text") .data(text) .join('text') .style("dominant-baseline", "ideographic") .text(d => d) .attr("y", (d, i) => (i - (text.length - 1)) * 15) .style("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); const bbox = tip.node().getBBox(); // Add a rectangle (as background) tip .append("rect") .attr("y", bbox.y) .attr("x", bbox.x - side_padding) .attr("width", bbox.width + side_padding * 2) .attr("height", bbox.height) .style("fill", "white") .style("stroke", "#d3d3d3") .lower(); // Reposition the full g element to make sure it doesn't go offscreen let x = pos[0]; let y = pos[1]; // Make sure it doesn't go beyond the left of the chart if (x + bbox.x < margin.left) { x = margin.left + bbox.width / 2 + side_padding; } // Make sure it doesn't go beyond the right of the chart else if (x - bbox.x > width - margin.right) { x = width - margin.right - bbox.width / 2; } // Make sure it doesn't go over the top of the chart if (y + bbox.y < 0) { y = margin.top + bbox.height + 10; } tip.attr("transform", `translate(${x}, ${y})`); }39:[{"id":"3ce71e1e4d83244a30628870f98d3639c3aaf96ff6b18e47603a0eae954285838b5913bca5a7dbea79f0087fd323d12376b080c5dad18b5c12ba6b88c7f8185e","href":"https://static.observableusercontent.com/files/3ce71e1e4d83244a30628870f98d3639c3aaf96ff6b18e47603a0eae954285838b5913bca5a7dbea79f0087fd323d12376b080c5dad18b5c12ba6b88c7f8185e","name":"Combined@2.csv","type":"text/csv","lastModified":1609107517667.034,"size":939},{"id":"02bc27e206b6f43ab8b32379afa36711b3c0fae77b765d576fc45e98da2d62c8f99b4c53c89bd65a6c82b4f8c4f6d8de1817b51a14275e3444efd73f54ad8781","href":"https://static.observableusercontent.com/files/02bc27e206b6f43ab8b32379afa36711b3c0fae77b765d576fc45e98da2d62c8f99b4c53c89bd65a6c82b4f8c4f6d8de1817b51a14275e3444efd73f54ad8781","name":"Combined.csv","type":"text/csv","lastModified":1609107517667.034,"size":949},{"id":"bf721c4f208bf941687344765e2d6b1a08c42ff828445cc72a708d56b5e522ee056d5042d33af486d51b9bdfa465d3d69cad2649d14a1749f3a7e28f33ce018e","href":"https://static.observableusercontent.com/files/bf721c4f208bf941687344765e2d6b1a08c42ff828445cc72a708d56b5e522ee056d5042d33af486d51b9bdfa465d3d69cad2649d14a1749f3a7e28f33ce018e","name":"CovidDR.csv","type":"text/csv","lastModified":1609107517667.034,"size":840},{"id":"b533ceeda695179957bac70496648a4561e00b753b6c5b6322c94c57c4955fc08c80030a5b53153dd5b985d0ffeb480ba83a88b0bf2ec90cfeaa9fa5a88ae9bc","href":"https://static.observableusercontent.com/files/b533ceeda695179957bac70496648a4561e00b753b6c5b6322c94c57c4955fc08c80030a5b53153dd5b985d0ffeb480ba83a88b0bf2ec90cfeaa9fa5a88ae9bc","name":"hawaii_tourist@2.csv","type":"text/csv","lastModified":1609107517667.034,"size":225},{"id":"7ac7206ec82fc5460178f1d59b4ec9265773fc560cb75c72286d66b0bc12af958820e2ae0df5472fd43104b2c60b915dd48fa3b100b20ca1400ff9e0196dd221","href":"https://static.observableusercontent.com/files/7ac7206ec82fc5460178f1d59b4ec9265773fc560cb75c72286d66b0bc12af958820e2ae0df5472fd43104b2c60b915dd48fa3b100b20ca1400ff9e0196dd221","name":"unemployment_rate_by_age.csv","type":"text/csv","lastModified":1609107517667.034,"size":862},{"id":"f5441c6036266f5fee7b96051a661a0c3a5adf1988d422be6ac51ac28e8855fb84cd19a6abf2435c348b8ba4eec59a5f00f945a861b94fefc001586fe33dbe2c","href":"https://static.observableusercontent.com/files/f5441c6036266f5fee7b96051a661a0c3a5adf1988d422be6ac51ac28e8855fb84cd19a6abf2435c348b8ba4eec59a5f00f945a861b94fefc001586fe33dbe2c","name":"all_jobs_sum_job_loss_county_col.txt","type":"text/plain","lastModified":1609107517667.034,"size":472744}] 2f:{"title":"INFO 474 AU2020 Final Deliverable","cells":[{"id":0,"value":"md`# INFO 474 AU2020 Final Deliverable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"md`Made by Coco Li, Wayne Li, Jingzhao Huang, Haoyang Chen, Andi Ren`","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`## Overview`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`\n## Covid-19 Death Rate & Employment Rate of Japan, Canada, and the US in 2020\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"viewof country = select({\n title: \"Select Country\",\n options: [\"Japan\", \"United States\", \"Canada\"],\n value: \"data\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"relationship1","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"md`Here we explore the relationship between the **monthly death rate** and **monthly employment rate** from Janurary 2020 to October 2020 in three countries: Japan, Canada, and the United States. The death rate is calculated by the *number of new covid death* divided by the *number of new covid cases* in each month. All three counties exprienced a climax of covid death rate around April and May. In the meantime, Canada and the United State both had a drop in employment rate, while Japan maintained a quite steady employment rate even when the death rate increased to about 20%. It is to our common sense that the **monthly employment rate is negatively related to the monthly death rate**. However, it is interesting to observe that the employment rate in Canada increased after May with a rise in death rate. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"md`\n## Unemployment by Age Group\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":850,"value":"md`As seen in the graph below, **unemployment rates tended to increase more for younger workers**. The unemployment rates of all the four age groups remained roughly flat from January 2019 to February 2020. However, starting in March 2020, all four rates rose sharply and peaked in April. Since then it has fallen, but by November 2020 it has not returned to the levels before February in 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"viewof metric = select({\n title: \"Selected Age Group\",\n options: [\"16-19\", \"20-24\", \"25-54\", \"55_yrs_over\"],\n value: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"md`\n## Unemployment by Job Type\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"md`As shown in the graph below, the unemployment rate for both the full-time workers and part-time workers remained roughly flat before February 2020. However, starting in March 2020, both rates rose sharply, peaked in April, then gradually dropped to a level slightly higher than the unemployment rate before February 2020. In terms of the difference, the **unemployment rate of part-time workers rises higher and more rapidly than the unemployment rate of full-time workers** between March 2020 (lockdown) to April 2020. The unemployment rate for part-time workers dropped more dramatically than the unemployment rate of full-time workers after April 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof metric1 = select({\n title: \"Selected Job Type\",\n options: [\"Full Time\", \"Part Time\"],\n value: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"md`\n## Unemployment by sex\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"md`The graph below shows that the unemployment rate for both men and women remained roughly flat before March 2020 the lockdown. However, starting in March 2020, both rates for men and women rose sharply, peaked in April, then gradually dropped to a level slightly higher than the unemployment rate before the lockdown. In terms of the difference, the **unemployment rate of women rises higher and more rapidly than the unemployment rate of men between March 2020 (lockdown) to April 2020**. Afterwards, the drop of unemployment rate of women is slightly more noticeable than the drop of unemployment rate of men after April 2020.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"viewof metric2 = select({\n title: \"Selected Sex\",\n options: [\"Men\", \"Women\"],\n value: \"Unemployment Rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`\n## Job Loss Rate by Region and Industry\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"md`The zoomable and clickable map below shows the job loss rate by county, comparing the employed number between the start of pandemic and October. Darker color signifies a higher percentage of job loss of that county. It is noteworthy that **the pandemic has a devastating effect in Hawaii** in terms of high worker job loss rate of around 25%. The majority of counties in the central region has a relatively low worker job loss rate, but remains **relatively high and concentrates mostly in the west and north-east regions**. The worker job loss rate in certain counties of Nevada, California, Oregon, Michigan, North Dakota, New Mexico, New York, Washington, Maine, New Hampshire, Oebbsylvinia, Minnesota, Oklahoma, Pennsylvania, Delaware, and Alaska remain in a range between 5.9% to 13.94%, which means **there are a lot of people who still have not recovered from losing their job**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"md`\nWe created another visualization to see the impact of COVID-19 on every industry in every county. For Hawaii County, Hawaii in particular, **the accomodation and food services industry had lost over 55% of jobs**, which is very significant. Feel free to clear the search box and look at COVID's effects on other counties' industries. **The accomodation and food services industry generally gets hit the hardest**, health care and manufacturing industries also tops the chart frequently. **Retail trade and construction industries on the other hand, often seen an overall job gain**.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"viewof bar_metric = autoSelect({\n options: data.map(d => \"\" + d.county_name + \", \" + d.state_name),\n value: \"Hawaii County, Hawaii\",\n placeholder: `Try \"Hawaii\"`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`\n## Dive into Hawaii\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`As shown in the map above with the contrast of color density, it is obvious to see that the pandamic had an extraodinary impact on Hawaii. After researching online, we found that the **amount of taxes received from normal tourists contibutes to about 60% of the total tax amount in Hawaii**. This is a plot comparing the number of visitors in Hawaii this year and last year, which clearly shows **how greatly the number of tourists decreased since the lockdown in March**. The Hawaii Department of Labor and Industrial Relations even established a temporary program called the Pandamic Unemployment Assistance that provides a weekly assistance about $300-$600 to people who lost their jobs and individuals who are not eligible for regular unemployment benefits.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"margin = ({ top: 20, right: 30, bottom: 60, left: 80 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { select, autoSelect } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { nest } from \"@bayre/unrolling-a-d3-rollup\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"data = await FileAttachment(\"all_jobs_sum_job_loss_county_col.txt\").tsv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"shapefile = d3.json(\n \"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"categories = data.columns.slice(4, 24)","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"max_val = d3.max(data, d => +d[\"worker_job_loss_rate\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"min_val = d3.min(data, d => +d[\"worker_job_loss_rate\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"color_choropleth = d3.scaleQuantize([min_val, max_val], d3.schemeBlues[7])","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"data_obj = new Map(\n data.map(d => [\n d[\"county_fips\"].length < 5\n ? \"0\" + d[\"county_fips\"]\n : \"\" + d[\"county_fips\"],\n +d[\"worker_job_loss_rate\"]\n ])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"bar_obj = new Map(\n data.map(d => {\n var res = [];\n\n res.push(\n d[\"county_fips\"].length < 5\n ? \"0\" + d[\"county_fips\"]\n : \"\" + d[\"county_fips\"]\n );\n\n var dict = {};\n categories.forEach(f => {\n dict[f] = +d[f] / +d[\"Total Job Loss Index\"];\n });\n res.push(dict);\n\n return res;\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"features = new Map(\n topojson\n .feature(shapefile, shapefile.objects.counties)\n .features.map(d => [d.id, d])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"formatted_data = data.map(row => {\n var id = row[\"county_fips\"];\n if (id.length < 5) {\n id = \"0\" + id;\n }\n const feature = features.get(id);\n return {\n id,\n position: feature && path.centroid(feature),\n title: id,\n value: +row[\"worker_job_loss_rate\"]\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"states = new Map(\n shapefile.objects.states.geometries.map(d => [d.id, d.properties])\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":599,"value":"by_age = FileAttachment(\"unemployment_rate_by_age.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"covid_death_rate = FileAttachment(\"CovidDR.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":602,"value":"value = {\n let maximum = 0;\n for (let i = 0; i < by_age.length; i++) {\n if (maximum < +by_age[i][metric]) {\n maximum = +by_age[i][metric];\n }\n }\n return maximum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"by_job_type = await FileAttachment(\"Combined.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"by_sex = await FileAttachment(\"Combined@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"hawaii = FileAttachment(\"hawaii_tourist@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"keys = hawaii.columns.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"import { chart3 as relationship1 } with {\n country\n} from \"@uw-info474/data-analysis-script/2\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}