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"},"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}],"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":{"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","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","output":"","database":"$undefined"},{"id":998,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"## multiline chart (Date Truncate)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"**Choose time unit, type and state**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"$${viewof time} ${timeTruncateSelected}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"viewof state = Inputs.select(\n states, { label: \"Choose the state: \", value: \"CA\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof type = Inputs.select(\n ['tot_cases', 'tot_death', 'new_case', 'new_death'],\n {\n label: 'Select which type: ',\n value: 'new_case'\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"dateTruncateChart = {\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 == \"${state}\"`, 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","output":"$undefined","database":"$undefined"},{"id":431,"value":"After checking all different time unit, I think **yearmonth** is the best option to visualize this dataset. \n\nWhen I look at the chart using year and year as timeunit, the graph is not clear enough and when x is the same, there are many different y. There, it is hard to get much information out of it. Also, the chart is not very enjoyable. \n\nFor the chart using yearmonthdate, yearmonthdatehours and yearmonthdatehoursminutes, there is not much difference compared to the chart using yearmonth. It is because the dataset I downloaded from CDC is not updated in real time. Hence, using hours and minutes won't help us much.\n\nTherefore, yearmonthdate is the best option. It gives us a clear line chart, from which we can tell the trends of covid in each state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":457,"value":"## Heapmap (Date Part)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1315,"value":"**choose date parts, type and state**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":468,"value":"

${viewof unitsX} ${viewof unitsY}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":550,"value":"viewof type2 = Inputs.select(\n ['tot_cases', 'tot_death', 'new_case', 'new_death'],\n {\n label: 'Select which type: ',\n value: 'total cases'\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"viewof state2 = Inputs.select(\n states, { label: \"Choose the state: \", value: \"CA\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"datePartChart = {\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","output":"$undefined","database":"$undefined"},{"id":573,"value":"I think the best combination of x and y is year and month. It is easier to find the exact the number on certain time. And it allows us to see how the number has changed from Jan 2020 to Oct 2022. It doesn't make much sense to use other combinations such as year-date or year-hour. We can't get useful insight out of if. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"## Introduction\n\nCOVID-19 is a highly infectious respiratory illness caused by the SARS-CoV-2 virus. It was first identified in Wuhan, China in December 2019 and quickly spread globally, leading to a pandemic. Common symptoms include fever, cough, and in severe cases, the virus can lead to death. The pandemic has had a profound impact on the world in many ways. It has caused illness and death, with hundreds of thousands of lives lost. The pandemic has also had significant economic consequences, leading to job losses.\n\nI got dataset from [CDC](https://data.cdc.gov/Case-Surveillance/United-States-COVID-19-Cases-and-Deaths-by-State-o/9mfq-cb36/data). Dataset looks like: \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"dataset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":115,"value":"## Data Processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":664,"value":"printTable(dataset.slice(0, 5))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"- In original dataset, create_date looks like: \"03/12/2021 03:20:13 PM\". I need to format all the dates to \"%m/%d/%Y %H:%M:%S %p\" so that my date truncate and date part can use different time units. Here I am creating a formatter for later use.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"create_at_formatter = d3.timeParse(\"%m/%d/%Y %H:%M:%S %p\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"- This dataset also contains many different attributes but in this visualization, we will only use new_case, new_death, tot_cases and tot_death. So I am trying to get rid of other attributes to minimize the size of the dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"dataSet = dataset.map((d) => {\n d.parse_create_date = create_at_formatter(d.created_at) \n delete d.conf_cases\n delete d.prob_cases\n delete d.pnew_case\n delete d.conf_death\n delete d.pnew_death\n delete d.prob_death\n delete d.consent_deaths\n delete d.parse_crea\n delete d.parse_created_at\n delete d.parse_submission_date\n delete d.consent_cases\n delete d.submission_date\n return d;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"- Get all the states in the dataSet so that users can choose what states they want to see in the charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":164,"value":"states = {\n const seen = new Set()\n const result = []\n dataSet.forEach(d => {\n if (!seen.has(d.state)){\n seen.add(d.state)\n result.push(d.state)\n }\n })\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"viewof selected = navio(dataSet)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"## Data Abstraction (What)\n- **Dataset Type**: Table, Temporal;\n- **Attributes**:\n - created_at: Ordinal, Sequential (temporal)\n - state: Categorical\n - tot_cases: Quantitative, Sequential\n - new_case: Quantitative, Sequential\n - tot_death: Quantitative, Sequential\n - new_death: Quantitative, Sequential\n- **Derived Attributes**:\n I use those attributes in date truncate and date part idiom, so that users can change the time unit based on what they want to see.\n - parse_create_date, year, month, week, day, dayofyear, date, hour, minute: Ordinal, Sequential (temporal)\n- **Data Availability**: Static (CDC stopped updating this dataset)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"## Task Abstraction (Why)\n- **Audience**: US public heath scientists who wants to know more about the latest information about Covid 19 in US and plan new policies accordingly.\n- **Tasks**\n - T1: **Compare** the newly confirmed cases and deaths in 2022 with the newly confirmed cases and deaths in 2020 and 2021. **(Compare, Trends)**
\n - T2: **Identify** the time periods when newly confirmed cases and deaths reached the highest point and then kept dropping after that. **(Identify, Features)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"## 5 Visualization Exploration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1129,"value":"viewof time1 = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"change time unit here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1113,"value":"$${viewof time1} ${timechoose}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","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","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","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","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","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","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","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","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","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","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","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","output":"","database":"$undefined"},{"id":146,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"## appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"viewof time = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":403,"value":"timePartOptions = [\"year\", \"month\", \"date\", \"hours\", \"minutes\", \"seconds\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":372,"value":"timeTruncateSelected = timePartOptions.slice(0, time).join(\"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1158,"value":"timechoose = timePartOptions.slice(0, time1).join(\"\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":49,"value":"import {navio} from \"@john-guerra/navio\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"dataset","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"