2b:null 2c:["$","title",null,{"children":"Assignment 5: The number of Covid-19 new confirmed cases/deaths in most of US has been dropping since January 2022 | LilyLi | Observable"}] 31:T5a2,## Made up insights(Hypothesis)

Covid-19 has been under control since January 2022 in all US states. The number of new confirmed cases has dropped because of the vaccine. The new death rate also dropped because virus has less fatality now.
Covid-19 caused more death during winter and spring (Dec - April) than summer and fall(May - Nov) because covid 19 and flu together have stronger affect on people.

I choose the first insight for this homework.
**What it takes to test insights（Consideration）** - Insight 1 Consideration: For me to test this insights, I will need to see the trends of new case and new death. By comparing the trends between 2022 with 2020 and 2021, we can see if this insight is true. Line is the best mark for trends and color hue is the first option for different states. Therefore, I will need to create a multiseries line chart with different colors representing different states - Insight 2 Consideration: For me to test this insight, I will need to see the distribution of new death between Dec-April and May-Nov. By comparing the total number of different time period from 2022 to 2021, we can see if this insight is true. We can use bar chart for showing the distribution and color hue is the first option for different time period. Therefore, I will need to create a grouped bar chart with different colors representing different time period.32:Tba0,## How abstraction - Idiom 1 (multiline date truncate) [Chart Link](https://observablehq.com/d/43ee08e89d7c9d05#dateTruncateChart) - **Mark**: Line - **Channel**: - Date: horizontal position (Express) - tot_case, new_case, tot_death, new_death: vertical position (Express) - state: color hue - **Expressivity**: By using a line chart, we can see the trend over last three years and find out the number of certain date. Therefore, the line chart shows all the information in the dataset. So it is expressive. - **Effectiveness**: It is easy to compare the trends by looking at the line chart. So it is effective. - Idiom 2 (heapmap date part) [Chart Link](https://observablehq.com/d/43ee08e89d7c9d05#datePartChart) - **Mark**: Point - **Channel**: - Date: horizontal position, vertical position (separate, order, align) - tot_case, new_case, tot_death, new_death: color saturation (Express) - **Expressivity**: By using an area chart, we can see the color changes over last three years and see the overall trend. Therefore, the area chart shows all the information in the dataset. So it is expressive. - **Effectiveness**: It is easy to compare the trends by looking at the color change. So it is effective. - Idiom 3 (single line date truncate) [Chart Link](https://observablehq.com/d/43ee08e89d7c9d05#dateTruncateChart2) - **Mark**: Line - **Channel**: - Date: horizontal position(Express) - tot_case, new_case, tot_death, new_death: vertical position(Express) - **Expressivity**: By using a line chart, we can see the trend over last three years and find out the number of certain date. Therefore, the line chart shows all the information in the dataset. So it is expressive. - **Effectiveness**: It is easy to compare the trends by looking at the line chart. So it is effective. - Idiom 4 (bar chart date truncate) [Chart Link](https://observablehq.com/d/43ee08e89d7c9d05#barChart) - **Mark**: line - **Channel**: - Date: horizontal position(Express) - tot_case, new_case, tot_death, new_death: vertical position(separate, order, align) - **Expressivity**: By using a bar chart, we can see the changes over last three years and find out the number of certain date. Therefore, the bar chart shows all the information in the dataset. So it is expressive. - **Effectiveness**: It is easy to compare the trends by looking at the line chart. So it is effective. - Idiom 5 (area chart date truncate) [Chart Link](https://observablehq.com/d/43ee08e89d7c9d05#areaChart) - **Mark**: area - **Channel**: - Date: horizontal position(Express) - tot_case, new_case, tot_death, new_death: vertical position(Express) - **Expressivity**: By using a stacked area chart, we can see the trend over last three years. Therefore, the area chart shows all the information in the dataset. So it is expressive. - **Effectiveness**: It is easy to compare the trends by looking at the area chart. So it is effective.33:[{"id":"1a169fb7bc6042c338b6ab878613bf673d34feb8ab72eeafbd0c3398ea686dbe78cc202533f76f192b7ca88d47573ae6213df7e293a30a077c06d21ca417afd3","href":"https://static.observableusercontent.com/files/1a169fb7bc6042c338b6ab878613bf673d34feb8ab72eeafbd0c3398ea686dbe78cc202533f76f192b7ca88d47573ae6213df7e293a30a077c06d21ca417afd3","name":"United_States_COVID-19_Cases_and_Deaths_by_State_over_Time_-_ARCHIVED.csv","type":"text/csv","lastModified":1678325359459.375,"size":5095500}] 2f:{"id":"43ee08e89d7c9d05","slug":null,"title":"Assignment 5: The number of Covid-19 new confirmed cases/deaths in most of US has been dropping since January 2022","thumbnail":"9596eda9e9d87ce76a16568599d9c43bf1a3ef96821a50d414590cedf807466b","access_level":"public","create_time":"$D2023-03-08T23:12:04.056Z","update_time":"$D2023-03-15T21:32:10.052Z","view_time":null,"first_public_time":"$D2023-03-08T23:12:04.056Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"132517a03a3dd931","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":"starter_2024","bio":""},"version":1382,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null,"bio":""}],"members":[{"type":"individual","id":"d06cccb760acb8c3","login":"lilyneu","name":"LilyLi","avatar_url":"https://avatars-next.observableusercontent.com/57d00e99e7bd16a222a22f6669c9ce03fafca3705a95350ea5f4e3608b1f0ec9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 5: The number of Covid-19 new confirmed cases/deaths in most of US has been dropping since January 2022","cells":[{"id":0,"value":"# Assignment 5: The number of Covid-19 new confirmed cases/deaths in most of US has been dropping since January 2022\n\nCreated by [Jiangyan Li](https://observablehq.com/@lilyneu?tab=profile)
\nClass: [Data Visualization / Information Visualization](https://johnguerra.co/classes/data_visualization_spring_2023/)
\nTweet: [Link](https://twitter.com/neu7295/status/1634472139687608321)
\nYoutube: [Link](https://youtu.be/Ns2GDDaS0M4)\n\ninsight: **The number of Covid-19 new confirmed cases/deaths in most of US has been dropping since January 2022**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1357,"value":"[insights](https://observablehq.com/d/43ee08e89d7c9d05#cell-0)
\n[Work Description & Introduction](https://observablehq.com/d/43ee08e89d7c9d05#cell-12)
\n[Data Abstraction](https://observablehq.com/d/43ee08e89d7c9d05#cell-94)
\n[Data Processing](https://observablehq.com/d/43ee08e89d7c9d05#cell-115)
\n[Made up insights](https://observablehq.com/d/43ee08e89d7c9d05#cell-73)
\n[Audience & Task Abstraction](https://observablehq.com/d/43ee08e89d7c9d05#cell-80)
\n[How Abstraction](https://observablehq.com/d/43ee08e89d7c9d05#cell-91)
\n[Main Chart Date Truncate](https://observablehq.com/d/43ee08e89d7c9d05#cell-452)
\n[Main Chart Date Part](https://observablehq.com/d/43ee08e89d7c9d05#datePartChart)
\n[5 Visual exploration](https://observablehq.com/d/43ee08e89d7c9d05#cell-148)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":998,"value":"

${viewof unitsX} ${viewof unitsY}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"## 5 Visualization Exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"viewof time1 = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"change time unit here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1113,"value":"$${viewof time1} ${timechoose}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1187,"value":"viewof state4 = Inputs.select(\n states, { label: \"Choose the state: \", value: \"CA\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"- (1) **multiline Date Truncate**: Users can change the time unit by dragging the bar and highlight the state that they are interested in by selecting it. Multiseries line char allows us to compare the trends between different states and also compare the trend in one state over time.\n - **Exploration**: Use date truncate to see all states' covid trends in different time unit;","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1249,"value":"dateChart = {\n const x = vl.x().fieldT(\"parse_create_date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markLine()\n .data(\n dataSet\n // .filter(d => d.state == state)\n )\n .encode(\n x.timeUnit(timeTruncateSelected), \n vl.y().mean(type),\n vl.color().fieldN('state'),\n vl.opacity()\n .if(`datum.state == \"${state4}\"`, vl.opacity().value(1.5)).value(0.1)\n )\n .width(width - 250);\n\n const points = line\n .markPoint({ tooltip: true, size: 1 })\n .select(onmouseover)\n .encode(\n vl\n .color()\n .if(onmouseover, vl.color().value(\"firebrick\"))\n .value(\"steelblue\")\n );\n\n return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"- (2) **Date Part**: I copied this chart from the top of this notebook. User can choose the state they are interested in and also change the x y axises by selection time part. By looking at the color saturation changes, it is pretty easy to see the trend over time.\n - **Exploration**: Try date part in the visualization to see the trends changes in different states.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1254,"value":"partChart = {\n const x = vl.x().fieldO(\"parse_create_date\"),\n y = vl.y().fieldO(\"parse_create_date\")\n\n const square = vl\n .markRect({ tooltip: true })\n .data(dataSet.filter(d => d.state == state2))\n .encode(x.timeUnit(unitsX), y.timeUnit(unitsY), vl.color().fieldQ(type2))\n\n return square.width(300).height(400).render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"- (3) **Single line date truncate**: in this single line chart, it will only display the state that user selected. It is cleaner than multiseries line chart but also we lose the ability to compare different states' trends. It is a tradeoff. I prefer the multiseries line chart since we can get more information. You can change time unit and state by interacting with the bar and select dropdown on top of this section.\n - **Exploration**: Instead of seeing all states' trends, I am trying to separate states for cleaner idiom. We can still see each state's trends but we couldn't compare states. It is a tradeoff between clean idiom and getting more information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1070,"value":"dateTruncateChart2 = {\n const x = vl.x().fieldT(\"parse_create_date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markLine()\n .data(\n dataSet.filter(d => d.state == state4)\n )\n .encode(\n x.timeUnit(timechoose).title('Date '+timechoose), \n vl.y().mean(type).title('Mean of new case'),\n // vl.color().fieldN('state')\n )\n \n .width(width - 250);\n\n const points = line\n .markPoint({ tooltip: true, size:3 })\n .select(onmouseover)\n .encode(\n vl\n .color()\n .if(onmouseover, vl.color().value(\"firebrick\"))\n .value(\"steelblue\")\n );\n\n return vl.layer(points, line).render();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"- (4) **Bar Chart date truncate**: it displays the selected state data in the selected time unit. It still enable us to see the trend over time but I think the line chart is better for this case. Because we use bar chart if the key attribute is categorical. Since date here is ordinal, line chart makes more sense.\n - **Exploration**: Trying to use bar chart here to see the trends. But since the key attributes is not categorical, it makes more sense to use line chart to see the trends over time. But bar chart is a good option if we want to see each time-unit's covid number","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"barChart = {\n const x = vl.x().fieldT(\"parse_create_date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n\n .markBar()\n .data(\n dataSet\n .filter(d => d.state == state4)\n )\n .encode(\n x.timeUnit(timechoose), \n vl.y().mean(type))\n .width(width - 250);\n return line.render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1145,"value":"- (5) **Stacked Area chart date truncate**: This is another fun way to display the data. Though it looks pretty fun but I think line chart or bar chart are better for this case. The tasks are to compare the trend and identify the feature. Stacked area chart is more about showing the quantitative not trends.\n - **Exploration**: I am exploring different marks for this dataset. Instead of Line mark, I am trying Area mark in this one. I think area mark is not the best choice here.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1171,"value":"areaChart = {\n const x = vl.x().fieldT(\"parse_create_date\");\n\n const onmouseover = vl\n .selectSingle()\n .on(\"mouseover\")\n .encodings(\"x\")\n .nearest(true)\n .empty({ created: [] });\n\n const line = vl\n .markArea()\n .data(\n dataSet\n )\n .encode(\n x.timeUnit(timechoose), \n vl.y().mean(type),\n vl.color().fieldN('state')\n )\n .width(width - 250);\n return line.render()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1235,"value":"## What I think\nAfter exploring 5 different idioms, I think my first idiom (multiseries line chart with different opacity) is the best. In that chart, we can see all states' information and also the target state is highlighted. So we can complete our task more efficiently. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"## appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"viewof time = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"viewof unitsX = select({\n options: timeUnitOptions,\n value: [\"hour\"],\n title: \"x\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"viewof unitsY = select({\n options: timeUnitOptions,\n value: [\"day\"],\n title: \"y\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"timePartOptions = [\"year\", \"month\", \"date\", \"hours\", \"minutes\", \"seconds\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"timeUnitOptions = [ \"year\", \"month\", \"date\", \"week\", \"day\", \"dayofyear\", \"hours\", \"minutes\", \"seconds\"] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"timeTruncateSelected = timePartOptions.slice(0, time).join(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"timechoose = timePartOptions.slice(0, time1).join(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"dataset = await FileAttachment(\"United_States_COVID-19_Cases_and_Deaths_by_State_over_Time_-_ARCHIVED.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"dataset","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"