2f:Te64,md`

To visualize the relationship between total number of cases vs. number of deaths per locality, I have created a scatterplot by using "cases" as the x-axis and "deaths" as the y-axis set inside the encoding property. The data used for this chart is "covid_total", based on the last day in the dataset as the data is cumulative. I used point as the mark and increased the size of the point by setting the size property as *size:40*. Out of all the localities in VA, Fairfax has the highest number of cases with the reported deaths whereas Highland has the lowest number of cases with zero deaths.

#### Design Decisions *

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*text:* The title used, "Total Cases Vs. Deaths Reported per Each Locality in VA" is pretty straight forward. I wanted to use a more descriptive title based on an interpretation of the chart. But a title like "the number of deaths increases with the increase of total cases" seemed stating what's readily perceived.

*size:* I have set the size of the title by setting the size property as *fontSize:"30"*.

**axis: **Axis field is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * This is used to set both the x-axis and y-axis titles inside the *encoding* property. If we do not set a specific axes titles, the default title will be the field name used for plotting.

*titleFontSize: * To specify the axes titles font size. I have set this as *titleFontSize:"20"* for both axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "15"*.

*tickCount*: Used to control the number of ticks in the axis. I set *tickCount:15* for the x-axis and did not set a specific value for y-axis as it seems appropriate.

*grid:* I have decided to remove the grid lines altogether by adding *grid:false* to the axis attribute. This was decided to make sure the chart is more visually appealing and less cluttered. *

**scale:** I used a logarithmic scale for the x axis to make sure both the scales are comparable easily since the range of “cases” is approximately two orders of magnitude higher than the “number of deaths”.

**tooltip:** I used the tooltip encoding channel to allow the viewer to see what each point represents. If a user points the cursor in any of the point marks on the chart, they will be able to see what locality it represents, its total number cases, and its number of reported deaths.

**color:** Color is a mark property channel that can be used to specify a color we would like. I have used the *vl.color()* in *encode* property to set the value as *{"value": "teal"}* to change the mark color to teal.

**height & width: ** The width and height of standalone single view is set in pixels with the use of *.height(600)* and *.width(700)* here.

**padding: ** This property is set to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block.

` 30:Tb9e,md`

To visualize the relationship between total cases vs. hospitalizations in VA over time, I have created a scatterplot by using "total_cases'' as the x-axis and "total_hospitalizations" as the y-axis set inside the encoding property. The "total_cases” is the aggregate sum of cases per each day and the "total_hospitalizations" is the aggregate sum of hospitalizations per each day. I have done some data transformations on the "covid" dataset using transform property to derive the required data field. I used point as the mark and increased the size of the point by setting the size property as size:40. From the graph we can see that the rate of hospitalizations was higher at the beginning of time and is gradually decreasing lately.

#### Design Decisions *

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*size:* I have set the size of the title by setting the size property as *fontSize:"30"*

**axis: **Axis field is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * This is used to set x-axis title as "Total Number of Cases" and y-axis title as "Total Number of Hospitalizations" inside *encoding* property..

*titleFontSize: * To specify the axes titles font size. I have set this as *titleFontSize:"20"* for both axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "15"*.

*grid:* I have decided to remove the grid lines altogether by adding *grid:false* to the axis attribute. This was decided to make sure the chart is more visually appealing and less cluttered. *

**tooltip:** I used the tooltip encoding channel to allow the viewer to see what each point represents. If a user points the cursor in any of the point marks on the chart, they will be able to see what date it is, total number cases and total number of hospitalizations on that specific day.

**height & width: ** The width and height of standalone single view is set in pixels with the use of *.height(600)* and *.width(700)* here.

**padding: ** This property is set to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block.

` 31:T137c,md`

To visualize the variation of total number of cases, hospitalizations, and number of deaths over time, I have created a repeated line chart by using "date" as the x-axis and "Total Cases", "Total Hospitalizations", and "Total Deaths" as the y-axis on three different charts in the same view (same row). The axes are encoded using the *encoding* property, and *repeat* function is utilized to create the repeated line charts. Per each day, the "Total Cases" is the aggregate sum of cases, the "total_hospitalizations" is the aggregate sum of hospitalizations, and the "Total Deaths" is the aggregate sum of reported deaths. The data used for this chart is the initial "covid" dataset. I have done some data transformations on this dataset using *transform* property to derive the required total data fields. I used line as the mark and used the repeat function to draw multiple charts in the single view. I also set *size:5* property inside the mark to make the line a bit wider so that we can easily point the cursor on it to check the data values. With the three charts side by side, we can easily see that the number of cases, hospitalizations, and deaths are all increasing over time. However, we should be careful when comparing the three charts since the y-axis scale is different in each chart.

#### Design Decisions *

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*offset:* I used this parameter to set the offset in pixels by which to displace the title from its position along the edge of the chart since the title and chart seemed too close.

*size:* I have set the size of the title by setting the size property as *fontSize:"30"*

**axis: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * I used this parameter to set the x-axis title inside *encoding* property. If we do not set a specific axes title, the default title will be the field name used for plotting. Since I was not able to find out how axis titles can be adjusted in repeated view, I have set an appropriate field name for the y-axis to make sure the y-axis titles are up to the mark.

*titleFontSize: * To specify the axes titles font size. I have set the *titleFontSize:"15"* for both the axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "12"* for both axes.

*tickCount*: Used to control the number of ticks in the axis. I set *tickCount:10* for the x-axis and did not set a specific value for y-axis as the range differs in the three separate charts.

*grid:* I have decided to remove the grid lines altogether by adding *grid:false* to the axis attribute. This was decided to make sure the chart is more visually appealing and less cluttered.

*labelAngle:* This property can be used to set the angle in degrees of axis tick labels. I have set it as *labelAngle: "90"* to have the labels perpendicular to the x-axis. This was decided since the axis labels are long (name of the month), and having them horizontally will only display two or three tick labels depending on the label length.

**repeat: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

**tooltip:** I used the tooltip encoding channel within the *markLine()* function itself as *tooltip: {"content": "data"}*. If a user points the cursor in any of the point marks on the chart, they will be able to see what date it represents, total number of cases, total number of hospitalizations, and the total number of reported deaths.

**height & width: ** The width of the view is set in pixels with the use of *.width(width/5)* here. I thought I would use a fraction of original width which is appropriate to fit all three charts without having to scroll side-ways. I didn't specify a height for the height of the view.

**padding: ** This property is set to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block.

` 32:T564,viewof chart_4 = { const hover = vl.selectSingle("hover") .on("mouseover") .encodings("x") .nearest(true) .clear("moouseout"); const marks = vl.layer( vl.markLine(), vl.markPoint() .transform(vl.filter(hover)) ).encode( vl.y().fieldQ("total_cases").axis({grid: false, title: "Total Cases", titleFontSize:"12", labelFontSize: "12"}), vl.color({"legend": {title: "District"}}).fieldN("district") ); const rules =vl.markRule({ strokeWidth: 0, tooltip: true }) .transform(vl.pivot("district").value("total_cases").groupby(["date"])) .encode( vl.opacity().value(0).if(hover, vl.value(0.7)), vl.tooltip([vl.fieldT("date"), "Chesapeake", "Hampton", "Norfolk", "Peninsula", "Portsmouth", "Virginia Beach","Western Tidewater"]) ) .select(hover); return vl .layer(marks, rules ) .encode(vl.x().fieldT("date").axis({grid: false, title: "Date", titleFontSize:"12", labelFontSize: "12", labelAngle: "90"}) ) .data(hr_covid) .transform(vl.groupby('date','district').aggregate(vl.sum('cases').as('total_cases'))) .title( {text:"Total Cases over Time for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts", fontSize:"14.5", offset: "20"} ) .width(650) .height(600) .padding("10") .render(); }33:T1491,md`

#### Design Decisions *

***const hover: *** There are different kinds of selections we can do using the vega-lite selection method. What I have defined here is to select the most nearest point out of the "date" values during hover.

***const marks: ***Here, I have set the marks as point and line. A *filter transform* the above defined hover selection is done. In this same layer, I have set the y-axis to be "total_cases" with several axis properties. The color property is used to encode the "district" with different colors. A legend was automatically created but I have updated the title of the legend by setting the title property as {"legend": {title: "District"}}. The title of the legend was all in lowercase ("district") prior to that.

***const rules: ***The rule is used as a helpful skeleton which will help us identify the nearest value. The trick used here is to draw all the rules and then set the opacity as *vl.opacity().value(0)* so that the rules will be there and in a way the opacity can be increased when hovered over by using *.if(hover, vl.value(0.7)*.

*tooltip:* Tooltip is also set in the rule layer under the *encode* property. I used the tooltip encoding channel to allow the viewer to see what each point represents. If a user points the cursor anywhere on the chart, they will be able to see how many total cases for each Hampton road district were reported at a given time. I decided to put the values in the same order as displayed in the legend for the tooltip as well so it will be helpful for the user when mapping the numbers with colors. A function where this order can be changed according to order of total number of cases in each district at a given time would have been much more helpful but I was not able to create such.

***.layer(marks, rules ): *** Now the layers are combined using .layer(marks, rules ). With this we have a multi-layered plot and other properties can be defined now.

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*offset:* I used this parameter to set the offset in pixels by which to displace the title from its position along the edge of the chart since the title and chart seemed too close.

*size:* I have set the size of the title by setting the size property as *fontSize:"14.5"*

**axis: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * I used this parameter to set the axis titles inside *encoding* property. *title: "Date"* and *title: "Total Cases"* are used to set the x-axis and y-axis titles respectively.

*titleFontSize: * To specify the axes titles font size. I have set the *titleFontSize:"15"* for both the axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "12"* for both axes.

*grid:* I have decided to remove the grid lines altogether by adding *grid:false* to the axis attribute. This was decided to make sure the chart is more visually appealing and less cluttered. Also, the rule during hover will be more perceivable this way.

**height & width: ** The width of the view is set in pixels with the use of *.width(650)* and height as *.height(600) * in this chart.

**padding: ** This property is set by *.padding("10")* to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block.

` 34:T121e,md`

To visualize the variation of total number of cases for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, and Peninsula health districts over time, I have created a faceted line chart by using "Date" as the x-axis and "Total Cases" as the y-axis on seven different charts in the same row with a single y-axis.The column function is used within the encoding property to have all the seven charts in the single row. The data used for this chart is the "hr_covid" dataset since we are looking at hampton roads districts. I have done some data transformations on this dataset using *transform* property to derive the required total data fields. For a particular district per each day, the "total_cases" is the aggregate sum of cases. I used line as the mark and used the column function to draw multiple charts in the single view. I also set *size:3* property inside the mark to make the line a bit wider so that we can easily point the cursor on it to check the data values. With the three charts side by side, we can see how the number of cases increased over time. This chart looks better for comparison between multiple charts since it has a shared y-axis as opposed to chart 3. However, if our requirement is to compare how the numbers changed (trend) between the districts, the layered line chart (chart 4) seems more suitable.

#### Design Decisions *

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*offset:* I used this parameter to set the offset in pixels by which to displace the title from its position along the edge of the chart since the title and chart seemed too close.

*size:* I have set the size of the title by setting the size property as *fontSize:"14"*

**axis: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * I used this parameter to set the x-axis title inside *encoding* property. If we do not set a specific axes title, the default title will be the field name used for plotting.

*titleFontSize: * To specify the axes titles font size. I have set the *titleFontSize:"12"* for both the axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "12"* for both axes.

*grid:* I have decided to remove the grid lines altogether by adding *grid:false* to the axis attribute. This was decided to make sure the chart is more visually appealing and less cluttered.

**column:** I used the *column* parameter within the *encode* property as *vl.column()*. There are header labels with district names and I adjusted the size of the labels as *{"header": {labelFontSize: 12}}*. Also I used *.title(null)* to remove the title of the headers "district".

**padding: ** This property is set to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block.

` 35:Tf11, md`

To visualize the total number of cases for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, and Peninsula health districts over time, I have created a horizontal bar chart by using "Total Cases" as the x-axis and "District" as the y-axis. The data used for this chart is the "hr_totals" dataset since we looked at Hampton roads districts and visualized the total number till the last day of the dataset (again, this is because the data is cumulative). I have done some data transformations on this dataset using transform property to derive the required total data fields. For a particular district, the "total_cases" is the aggregate sum of "cases". I used bar as the mark to draw multiple required chart. Since it is required for the bars to be sorted in descending order by total cases, I used the sort property as *.sort(vl.field('total_cases').order('descending'))* to achieve that requirement. I also learned that simply doing *.sort("-x")* would give the same effect.

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*offset:* I used this parameter to set the offset in pixels (*offset:"30"*) by which to displace the title from its position along the edge of the chart since the title and chart seemed near.

*size:* I have set the size of the title by setting the size property as *fontSize:"16"*

**color: ** In order to add colors to the bar chart, I used the color property inside the *encoding* property as *vl.color().fieldN("district")*. By executing this piece of code a different color will be set to each district category (each bar).

*legend:* I have updated the title of the legend by setting the title property as *{"legend": {title: "District"}}*. The title of the legend was all in lowercase ("district") prior to that.

**axis: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * This is used to set both the x-axis and y-axis titles inside the *encoding* property. If we do not set a specific axes titles, the default title will be the field name used for plotting.

*titleFontSize: * To specify the axes titles font size. I have set the *titleFontSize:"15"* for both the axes.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "12"* for both the axes.

*grid:* I have decided not to remove the vertical grid lines here since they will be a helpful to reference from the bars to the x-axis.

**tooltip:** I used the tooltip encoding channel to allow the viewer to see what each point represents. If a user points the cursor in any of the point marks on the chart, they will be able to see what district it represents and the its total number cases.

**height & width: ** The width of the view is set in pixels with the use of *.width(600)* and *.height(250)*.

**padding: ** This property is set to specify padding for each side of the chart. I set a padding value of *padding("10")* a smaller padding compared to the other charts as it seemed apt. Even though it is not a heavy padding, it ensures that the tooltip for the bar closer to the x-axis will not get hidden behind the code block if a user hovers closer to the x-axis.

`36:Tf38,md`

To explore the total number of cases per each health district, I have created a box plot. The data used for this chart is the "covid_totals" dataset since we are trying to get an overview of total cases in all of the districts in VA. I have used "covid_totals" instead of the initial "covid" dataset as the data set reports cumulative values. I have done some data transformations on this dataset using *transform* property to derive the required total cases data field. For a particular district, the "total_cases" is the aggregate sum of "cases". I used the composite mark type “boxplot" as the mark to create the required chart. I encoded the y-axis with the quantitative "total_cases" field since I prefer the vertical box plot over horizontal. It appears that we can adjust the same by setting the *orient* property as *vertical* inside boxplot mark as well. *

**title: **I have decided to use a title for the chart since chart caption is the first thing a user notice in a chart.

*offset:* I used this parameter to set the offset in pixels by which to displace the title from its position along the edge of the chart since the title and chart seemed near.

*size:* I have set the size of the title by setting the size property as *fontSize:"20"*

**axis: **Axis parameter is used to control properties related to both the axes like labels, gridlines, and ticks.

*title: * I used this parameter to set the x-axis title inside *encoding* property. Once the title is set here as *title: "Total Cases"*, I got an issue with the same title showing up twice in the y-axis. If we do not set a specific axes title, the default title will be the field name used for plotting. Since I was not able to find out how the error I was can be fixed, I have set an appropriate field name for the y-axis during aggregation to make sure the y-axis titles is changed.

*titleFontSize: * To specify the axes titles font size. I have set the *titleFontSize:"15"* for the y-axis.

*labelFontSize*: This is to change the tick mark label font size from default value of 10 to a size of our choice. I have set this as *labelFontSize: "12"* for the y-axis.

*grid:* I have decided not to remove the horizontal grid lines here since the box is far from the baseline y-axis. The grid lines are helpful to easily refer back to the y-axis values.

**size**: The size parameter can be used to set the size of the box in the plot which can be defined within the "encoding" property as *vl.size( {"value": 75})*. I set the value as 75 since the default box which was drawn seemed too small.

**tooltip:** The tool tip I have used in this box plot is the default tooltip for the boxplot chart. I also learned that it's also possible for us to customize the box plot tooltips and override the default tooltip if needed.

**height & width: ** The width of the view is set in pixels with the use of *.width(250)* and *.height(400)*.

**padding: ** This property is set to specify padding for each side of the chart. This ensures that the tooltip for the points closer to the x-axis will not get hidden behind the code block. I set a padding value of *padding("100")*.

`37:T487,md`## References 1. https://observablehq.com/@uwdata/introduction-to-vega-lite 1. https://observablehq.com/@uwdata/scales-axes-and-legends 1. https://observablehq.com/@uwdata/data-types-graphical-marks-and-visual-encoding-channels 1. https://observablehq.com/@uwdata/multi-view-composition 1. https://observablehq.com/@mariodelgadosr/answer-to-tooltip-with-multi-series-line-chart-in-vega-lite-a 1. https://observablehq.com/@vega/multi-series-line-chart-with-tooltip 1. https://vega.github.io/vega-lite/examples/#labeling--annotation 1. https://vega.github.io/vega-lite/docs/tooltip.html 1. https://vega.github.io/vega-lite/docs/sort.html 1. https://vega.github.io/vega-lite-api/api/selectSingle.html 1. https://observablehq.com/@john-guerra/vega-lite-selection-methods 1. https://vega.github.io/vega-lite/docs/boxplot.html 1. https://vega.github.io/vega-lite-v3/docs/boxplot.html#color-size-and-opacity-encoding-channels 1. https://vega.github.io/vega-lite/docs/legend.html 1. https://vega.github.io/vega-lite/docs/header.html#labels 1. https://vega.github.io/vega-lite/docs/field.html 1. https://vega.github.io/vega-lite/docs/repeat.html#repeat-mapping `38:[{"id":"983aee09bb6eb613eaba04cb17cd7f55c846c10a3beca2c72fd0d88566385ca9fccba1138dae5b7dedf5f52149962a4e21bd279f72e61ac0e8a9fa443b913ab3","href":"https://static.observableusercontent.com/files/983aee09bb6eb613eaba04cb17cd7f55c846c10a3beca2c72fd0d88566385ca9fccba1138dae5b7dedf5f52149962a4e21bd279f72e61ac0e8a9fa443b913ab3","name":"VDH-COVID-19-PublicUseDataset-Cases.csv","type":"text/csv","lastModified":1613916040663.916,"size":2101268}] 2d:{"title":"CS 725/825, Spr21 - HW1 - Vega-Lite Intro","cells":[{"id":0,"value":"md`# CS 725/825, Spr21 - HW1 - Vega-Lite Intro \n[HW1 Assignment](https://github.com/cs725-infovis-master/public/spr21/blob/main/HW1.md) \n**Due:** Thursday, February 9, 2021 by 11:59pm\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`Himarsha Jayanetti - CS 825`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1214,"value":"toc()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1215,"value":"import {toc} from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## Data\n\n[VDH-COVID-19-PublicUseDataset-Cases](https://data.virginia.gov/Government/VDH-COVID-19-PublicUseDataset-Cases/bre9-aqqr) from [VDH's COVID-19 in Virginia page](https://www.vdh.virginia.gov/coronavirus/)\n\nThe datafile was downloaded and attached to this notebook on 2021-02-02\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`### Data Processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"covid = d3.csvParse(await FileAttachment(\"VDH-COVID-19-PublicUseDataset-Cases.csv\").text(), function(d) {\n return {\n date: d3.timeParse(\"%x\")(d[\"Report Date\"]),\n fips: d.FIPS,\n locality: d.Locality,\n district: d[\"VDH Health District\"],\n cases: +d[\"Total Cases\"],\n hospitalizations: +d.Hospitalizations,\n deaths: +d.Deaths\n };\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`This cell uses the *d3.csvParse()* function to read in a CSV formatted file and store it in an Array of Objects named *covid*. \n\nd3 functions, which we'll discuss more in Week 3, often allow you to include a callback function. The data coming from the first part of the function will be passed to the callback (in this example as the variable *d*). This callback function performs several type formatting operations on the data before returning it.\n\nAll data is read in as a String by default. So first, the \"Report Date\" field is parsed into a *Date* object using [*d3.timeParse()*](https://github.com/d3/d3-time-format). We also change the name of the field to the simpler *date*. \"FIPS\" and \"Locality\" are Strings, so we just lowercase the field names. We do the same for \"VDH Health District\", but since that field name contains spaces, we have to change how we access it from the datastream. The last three fields are numeric, so we need to add a *+* operator before the field name to convert it to a number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"covid.sort(function (a, b) {\n return a.date - b.date;\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`This cell sorts the Array based on *date*. Even though the VDH says the dataset is sorted by date, if you inspect the CSV file, you'll find that it's not properly sorted -- the first date is 11/28/20 and the actual first date of 3/17/20 does not appear until row 899.\n\nSince we want to sort an Array of Objects, we have to use a function to define how we want the Array to be sorted. This is standard JavaScript (see [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"printTable(covid.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"printTable(covid.slice(-5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"md`In the Appendix section (at the end of the notebook), I've imported a *printTable()* function from another notebook. The previous two cells use this function to print out the first 5 lines and last 5 lines of the dataset, respectively. It's always good to preview your dataset before you start building charts.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"hr_districts = new Set([\"Western Tidewater\", \"Chesapeake\", \"Virginia Beach\", \"Norfolk\", \"Portsmouth\", \"Hampton\", \"Peninsula\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"hr_covid = covid.filter(d => hr_districts.has(d.district))","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`For some of the charts, you're asked to show only data from certain health districts (those near Hampton Roads). We can use standard JavaScript functions to filter the dataset. First, we create a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) with the names of those health districts. Then we use the Array [filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) function to filter the data. For each element in the array, the item is only returned if the value evaluates to *true*. The Set *has()* function returns true if the item (in this case *d.district*) appears in the Set.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"md`*You should use *printTable() *to verify that non-Hampton Roads health districts have been removed from* hr_covid.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"printTable(hr_covid.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"printTable(covid.slice(-5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"last_date = covid[covid.length-1].date","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"covid_totals = covid.filter(d => d.date >= last_date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"hr_totals = covid_totals.filter(d => !hr_districts.has(d.district))","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`Finally, for some charts, we want to be able to show only the cumulative totals. Since all of the data is cumulative, the latest total is found on the last date. These cells first identify the latest date *last_date* by looking at the last array element. Then, we filter the *covid* dataset by looking for *d.date* that matches *last_date* (we have to use >= instead of == here -- try it and see what happens if you just use ==). Finally, we can also create a Hampton Roads version of this by repeating the Hampton Roads filtering from earlier. (You could also have performed the date filtering on the *hr_covid* dataset.)\n\nHimarsha: *If we use == instead of >= while filtering for covid_totals, it's only showing the last row of data.*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`*You should use *printTable() *to verify the contents of *covid_totals* and *hr_totals.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"printTable(covid_totals.slice(0,5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"printTable(covid_totals.slice(-5))","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"printTable(hr_totals)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"md`## Charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`### Chart 1 - Scatterplot 1 - total cases vs. deaths per locality\n * x: cases\n * y: deaths\n * each point represents the total number of cases and deaths for a particular locality\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"viewof chart_1 = vl.markPoint({size: 40})\n .data(covid_totals)\n .encode(\n vl.x().fieldQ(\"cases\").axis({grid: false, title: \"Number of Cases\", titleFontSize:\"20\", labelFontSize: \"15\", tickCount:15}).scale({\"type\": \"log\"}), // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"deaths\").axis({grid: false,title: \"Number of Deaths\", titleFontSize:\"20\", labelFontSize: \"15\"}), \n vl.tooltip([vl.fieldN(\"locality\"), \"cases\", \"deaths\"]), //.fieldQ(\"cases\") \n vl.color( {\"value\": \"teal\"})\n )\n .title \n .height(600)\n .width(700)\n .padding(\"80\")\n //.background(\"#f5f7ff\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`### Chart 2 - Scatterplot 2 - total cases vs. hospitalizations in VA over time\n * for each date, sum the cases and hospitalizations over all localities\n * x: cases\n * y: hospitalizations\n * each point represents the number of total cases and hospitalizations in the state as of a particular day\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"viewof chart_2 = vl.markPoint({size:40})\n .data(covid)\n .transform(\n vl.groupby('date')\n .aggregate(vl.sum('cases').as('total_cases'), vl.sum('hospitalizations').as('total_hospitalizations') )\n )\n .encode(\n vl.x().fieldQ(\"total_cases\").axis({grid: false, title: \"Total Number of Cases\", titleFontSize:\"20\", labelFontSize: \"15\"}), // .timeUnit('utcmonthdate'),\n vl.y().fieldQ(\"total_hospitalizations\").axis({grid: false,title: \"Total Number of Hospitalizations\", titleFontSize:\"20\", labelFontSize: \"15\"}),\n vl.tooltip([vl.fieldT(\"date\"), \"total_cases\", \"total_hospitalizations\"]), \n vl.color( {\"value\": \"teal\"})\n ) \n .title(\n {text:\"Total Cases Vs. Hospitalizations in VA over Time\", fontSize:\"30\"} \n )\n .height(600)\n .width(700)\n .padding(\"80\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`### Chart 3 - Repeated Line Chart - time series of total cases, hospitalizations, and deaths in VA over time\n * x: time\n * y: {cases, hospitalizations, deaths} per day\n * three separate line charts in a single row\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"/.?","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`### Chart 4 - Layered Line Chart - time series of total cases over time for certain health districts\n * filter for only these health districts: Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula\n * x: time\n * y: cases per day summed over a district\n * color: health district\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1044,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1159,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"md`### Chart 5 - Faceted Line Chart - time series of total cases over time for certain health districts\n * filter for only these health districts: Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula\n * x: time\n * y: cases per day summed over a district\n * one line chart for each district (should be all in a single row with a single y-axis label)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"viewof chart_5 = vl.markLine({tooltip: {\"content\": \"data\"}, size:3})\n .data(hr_covid)\n .transform(\n vl.groupby('date','district').aggregate(vl.sum('cases').as('total_cases'))\n )\n .encode(\n vl.column({\"header\": {labelFontSize: 12}}).fieldN(\"district\").title(null),\n vl.x().fieldT(\"date\").axis({grid: false, title: \"Date\", titleFontSize:\"12\", labelFontSize: \"12\", labelAngle: \"90\"}),\n vl.y().fieldQ(\"total_cases\").axis({grid: false, title: \"Total Cases\", titleFontSize:\"12\", labelFontSize: \"12\"}),\n vl.color( {\"value\": \"teal\"})\n )\n .width(85) \n .title(\n {text:\"Total Cases over Time for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts\", fontSize:\"14\", offset:\"30\"} \n ) \n .padding(\"30\")\n .render()\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`### Chart 6 - Horizontal Bar Chart - total cases for certain health districts \n * filter for only these health districts: Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula\n * x: total cases\n * y: health district\n * bars should be sorted descending by total cases\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"viewof chart_6 = vl.markBar()\n .data(hr_totals)\n .transform(\n vl.groupby('district').aggregate(vl.sum('cases').as('total_cases'))\n )\n .encode(\n vl.x().fieldQ(\"total_cases\").axis({title: \"Total Cases\", titleFontSize:\"15\", labelFontSize: \"12\", labelAngle: \"90\"}),\n vl.y().fieldN(\"district\").sort(vl.field('total_cases').order('descending')).axis({grid: false, title: \"District\", titleFontSize:\"15\", labelFontSize: \"12\"}),\n vl.color({\"legend\": {title: \"District\"}}).fieldN(\"district\"),\n vl.tooltip([vl.fieldN(\"district\"), \"total_cases\"])\n )\n .title(\n {text:\"Total Cases for Western Tidewater, Chesapeake, Virginia Beach, Norfolk, Portsmouth, Hampton, Peninsula Health Districts\", fontSize:\"16\", offset:\"30\"} \n ) \n .width(600)\n .height(250)\n .padding(\"10\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1023,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`### Chart 7 - Boxplot - total cases per health district\n * sum over all localities in each health district (include all in the state)\n * a single boxplot of total cases per health district\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"viewof chart_7 = vl.markBoxplot()\n .data(covid_totals)\n .transform(\n vl.groupby('district').aggregate(vl.sum('cases').as('Total Cases'))\n )\n .encode(\n vl.y().fieldQ(\"Total Cases\").axis({ titleFontSize:\"15\", labelFontSize: \"12\"}),\n vl.size( {\"value\": 75}), \n vl.color( {\"value\": \"teal\"}),\n // vl.whisker()\n )\n .title(\n {text:\"Total Cases per Each Health District in VA\", fontSize:\"20\", offset:\"30\"} \n ) \n .width(250) \n .height(400)\n .padding(\"100\")\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1039,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"import {printTable} from '@uwdata/data-utilities'","pinned":true,"hidden":false,"mode":"ojs"},{"id":815,"value":"vegaEmbed = require(\"vega-embed@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}