31:T4f4,## Usage This visual allows you to compare Covid-19 cases, deaths, hospitalizations, and vaccinations amongst the five boroughs of NYC. You can select which of these stats to explore via the drop-down menu. Furthermore, a transformation can be applied on these stats to visualize the data in different ways. Cumulative values are the total number of unique values for that variable up to that point. Cumulative values per capita weigh the boroughs by their population to account for population differences between areas. New values are the amount of unique values that were plotted for that day. Use new cases to see which This visual also offers the ability to visualize these stats in the context of important dates during the pandemic to see if there are any associations between the two - simply check the boxes for the type of dates that you would like to have included on the chart. To view the details on these events, hover the mouse over the dotted line of interest and the label for the event will show in the top left corner. If you are only interested in a few boroughs, you can toggle which boroughs are of interest using the checkboxes. You can also see which borough is associated with a trend line at any point by hovering the mouse near that line.32:T10ff,## Write-up The initial step in designing this data visualization was to identify the relevant data sources and potential visualizations. We collected data on the COVID cases in each of the five New York City boroughs from January 2020 to September 2022, and then controlled them by population to be per capita. We also collected information on significant policy changes and landmark COVID events during this period using a mixture of scraping methods. Next, we created a few prototype visualizations to identify the most effective way to communicate the data. One prototype was a scatter plot with the x-axis representing time and the y-axis representing per capita COVID cases, while another was a bar plot showing a pattern in number of cases reported on each day of the week. We also experimented with different types of lines and shapes to represent the different boroughs. This prototype allowed us to quickly identify the trends in the data but was difficult to interpret for users who are not familiar with scatterplots. We also explored moving averages and using context views, shown in the images at the end of the notebook. After some feedback from user tests, we decided to try the straightforward approach of using a line chart. We tested this version with users, and they found it much easier to understand, especially with the interactivity of highlighting the boroughs each line corresponds to and being able to choose which boroughs to examine. We then added vertical dotted lines to indicate the dates of key policy changes and landmark COVID events. To increase the number of dimensions represented, we allow the user to choose whether to look at per capita cases, hospitalizations, vaccinations, or deaths, all of which show a different element of the COVID pandemic in NYC. The interactivity was found to let users explore patterns present in the data (for example how case patterns are similar throughout New York but Manhattan has far less deaths, perhaps due to healthcare disparities) without being didactic. Overall, we found the format of Observable to be our biggest challenge, with all of our team members finding Python or even straight D3 to be more intuitive to use. We also had a lively debate as to the way to colour the different dates in the chart, in order to best differentiate and make it intuitive without expressing a political opinion. Through user testing, we discovered that this colouring was less important it the user was able to filter what dates they included in the visualisation. Throughout our process, we deligated work by people's availability and preferences through discussion given that this project was over several weeks and during midterms. During the developmental stages, we each explored the data with different graph types and then reviewed our findings to settle on a direction to go in. From there, we split up developing features and works by familiarity and general interest but also aided each other when getting stuck. If we had another week, we would make the date hovering easier by imposing transparent full lines over each dotted vertical line. This would mean the user was triggering the display for the whole area rather than just the dashed mark. Furthermore, we would want to add/improve the brushability aspect of the interactivity of the visualisation. We would want to change it so the 'steady-state' graphic had the boroughs identified, either by labelling or colour, for users who don't interact with the graphic. Lastly, we would want to conduct more user tests to see whether incorporating more data domains for the user to choose between and interact with would be a valuable addition or confuse the user and obfuscate the underlying patterns. Overall, the late-stage feedback from user tests was overwhelmingly positive. Users found the line chart to be easy to understand and appreciated the addition of vertical dotted lines to indicate significant policy changes and landmark COVID events, as well as the feature of the interactive filtering. We believe this data visualization provides an easy-to-understand representation of how different policy changes and landmark COVID events have impacted COVID in each of the NYC boroughs. It could be used by policymakers to evaluate the effectiveness of different policies and inform future decision-making. 33:T2b19,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/multi-line-chart function A4_deliverable( data, { x = ([x]) => x, // given d in data, returns the (temporal) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value z = () => 1, // given d in data, returns the (categorical) z-value title, // given d in data, returns the title text defined, // for gaps in data curve = d3.curveLinear, // method of interpolation between points marginTop = 20, // top margin, in pixels marginRight = 120, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xType = d3.scaleUtc, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yType = d3.scaleLinear, // type of y-scale yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop], // [bottom, top] yFormat, // a format specifier string for the y-axis yLabel, // a label for the y-axis zDomain, // array of z-values color = "currentColor", // stroke color of line, as a constant or a function of *z* strokeLinecap, // stroke line cap of line strokeLinejoin, // stroke line join of line strokeWidth = 1.5, // stroke width of line strokeOpacity, // stroke opacity of line mixBlendMode = "multiply", // blend mode of lines voronoi // show a Voronoi overlay? (for debugging) } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); var Z = d3.map(data, z); const O = d3.map(data, (d) => d); if (defined === undefined) defined = (d, i) => !isNaN(X[i]) && !isNaN(Y[i]); const D = d3.map(data, defined); // Compute default domains, and unique the z-domain. if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = [0, d3.max(Y, (d) => (typeof d === "string" ? +d : d))]; if (zDomain === undefined) zDomain = Z; zDomain = new d3.InternSet(cb_boroughs); //zDomain = new d3.InternSet(zDomain); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter((i) => zDomain.has(Z[i])); // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = yType(yDomain, yRange); const xAxis = d3 .axisBottom(xScale) .ticks(width / 80) .tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 60, yFormat); // Compute titles. const T = title === undefined ? Z : title === null ? null : d3.map(data, title); // Construct a line generator. const line = d3 .line() .defined((i) => D[i]) .curve(curve) .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [-20, -20, width + 50, height + 20]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", (event) => event.preventDefault()); // // LEGEND - Andrew // // Note that we need to change the right margin to 120 for the display to work // // Define the colors for each line // const colors = d3 // .scaleOrdinal() // .domain(zDomain) // .range(["red", "green", "blue", "purple", "yellow"]); // // Create a new element to hold the legend // const legend = svg // .append("g") // .attr("transform", `translate(${width - marginRight + 20}, ${marginTop})`); // // Create a and element for each item in the legend // legend // .selectAll("rect") // .data(zDomain) // .join("rect") // .attr("x", 0) // .attr("y", (d, i) => i * 25) // .attr("width", 20) // .attr("height", too20) // .attr("fill", colors); // legend // .selectAll("text") // .data(zDomain) // .join("text") // .attr("x", 30) // .attr("y", (d, i) => i * 25 + 14) // .text((d) => d); // Tool tip for displaying event text one click const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); // Date handlers var date_colorScale = d3.scaleOrdinal( [-1, 0, 1, 2], ["red", "grey", "green", "orange"] ); var key_dates = dates; var vert_lines_invis = svg .selectAll(".key-date-line-invis") .data(key_dates) .enter() .append("line") .attr("class", "key-date-line-invis") .attr("x1", (x) => xScale(x.Date)) .attr("y1", yScale(yDomain[0])) .attr("x2", (x) => xScale(x.Date)) .attr("y2", yScale(yDomain[1])) .attr("date", (x) => x.Date) .attr("event", (x) => x.Event) .style("stroke-width", 10) .style("stroke", "white") //.style("stroke-dasharray", "5, 5") //.style("stroke", "white") //.style("stroke-dasharray", "5, 5") .style("fill", "none") .style("display", function (x) { if (x.action == 0) { return cb_settings.includes("Key Dates") ? "block" : "none"; } if (x.action == 1) { return cb_settings.includes("Covid Restriction Policy") ? "block" : "none"; } else if (x.action == -1) { return cb_settings.includes("Opening Policy") ? "block" : "none"; } else { return cb_settings.includes("Holiday") ? "block" : "none"; } }) .on("mouseover", function (d) { // Get this bar's x/y values, then augment for the tooltip var xpos = 10; // parseFloat(d3.select(this).attr("x1")) + xScale.bandwidth() / 2; var ypos = 10; // const event_name = data.find((e) => e.Date === d.Date).Event; var date_name = d3.select(this).attr("date"); var event_name = d3.select(this).attr("event"); // parseFloat(d3.select(this).attr("y1")); // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg .append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); var slen = d3.max([event_name.length + 6, 18]) * 8; tgrp .append("rect") .attr("x", 330) .attr("y", -30) //.attr("width", "350px") .attr("width", slen.toString() + "px") .attr("height", "44px") .attr("fill", "burlywood"); tgrp .append("text") .attr("x", 350) .attr("y", -14) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text(`Event: ${event_name}`); tgrp .append("text") .attr("x", 350) .attr("y", 8) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("fill", "black") .text(`Date: ${date_name.slice(0, 16)}`); }) .on("mouseout", function (d) { // Remove the tooltip d3.select("#tooltip").remove(); }); let vert_lines = svg .selectAll(".key-date-line") .data(key_dates) .enter() .append("line") .attr("class", "key-date-line") .attr("x1", (x) => xScale(x.Date)) .attr("y1", yScale(yDomain[0])) .attr("x2", (x) => xScale(x.Date)) .attr("y2", yScale(yDomain[1])) .attr("date", (x) => x.Date) .attr("event", (x) => x.Event) .style("stroke-width", 2) .style("stroke", (x) => date_colorScale(x.action)) .style("stroke-dasharray", "5, 5") .style("fill", "none") .style("display", function (x) { if (x.action == 0) { return cb_settings.includes("Key Dates") ? "block" : "none"; } if (x.action == 1) { return cb_settings.includes("Covid Restriction Policy") ? "block" : "none"; } else if (x.action == -1) { return cb_settings.includes("Opening Policy") ? "block" : "none"; } else { return cb_settings.includes("Holiday") ? "block" : "none"; } }); // An optional Voronoi display (for fun). if (voronoi) svg .append("path") .attr("fill", "none") .attr("stroke", "#ccc") .attr( "d", d3.Delaunay.from( I, (i) => xScale(X[i]), (i) => yScale(Y[i]) ) .voronoi([0, 0, width, height]) .render() ); svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call( voronoi ? () => {} : (g) => g .selectAll(".tick line") .clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1) ) .call((g) => g .append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(yLabel) ); const path = svg .append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .selectAll("path") .data(d3.group(I, (i) => Z[i])) .join("path") .style("mix-blend-mode", mixBlendMode) .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)); const dot = svg.append("g").attr("display", "none"); dot.append("circle").attr("r", 2.5); dot .append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.least(I, (i) => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym) ); // closest point path .style("stroke", ([z]) => (Z[i] === z ? null : "#ddd")) .filter(([z]) => Z[i] === z) .raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); if (T) dot.select("text").text(T[i]); svg.property("value", O[i]).dispatch("input", { bubbles: true }); } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { path.style("mix-blend-mode", mixBlendMode).style("stroke", null); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", { bubbles: true }); } return Object.assign(svg.node(), { value: null }); }34:T407,function y_data(d) { if (sb_view == "Cumulative") { if (sb_data == "Cases") return d.cumulative_confirmed; if (sb_data == "Deaths") return d.cumulative_deceased; if (sb_data == "Persons Vaccinated") return d.cumulative_persons_fully_vaccinated; if (sb_data == "Persons Hospitalized") return d.cumulative_hospitalized_patients; } else if (sb_view == "Cumulative Per Capita") { if (sb_data == "Cases") return d.cumulative_confirmed_percap; if (sb_data == "Deaths") return d.cumulative_deceased_percap; if (sb_data == "Persons Vaccinated") return d.cumulative_persons_fully_vaccinated_percap; if (sb_data == "Persons Hospitalized") return d.cumulative_hospitalised_percap; } else if (sb_view == "New") { if (sb_data == "Cases") return d.new_confirmed; if (sb_data == "Deaths") return d.new_deceased; if (sb_data == "Persons Vaccinated") return d.new_persons_fully_vaccinated; if (sb_data == "Persons Hospitalized") return d.new_hospitalized_patients; } }35:[{"id":"3f073d624e5fd002a4ff99319980ab9c389f039d3ee9e0f71de079387380551ce7058dd01f4963afbeb411353764ff13659793c78c7a488ea5338837b461acfb","href":"https://static.observableusercontent.com/files/3f073d624e5fd002a4ff99319980ab9c389f039d3ee9e0f71de079387380551ce7058dd01f4963afbeb411353764ff13659793c78c7a488ea5338837b461acfb","name":"percapita_data.csv","type":"text/csv","lastModified":1684011897605.025,"size":1066900},{"id":"f579d4f35db2c697623aa75154526595087481e6092dea576f10df3671395360eaee00634cda6ca06bd2a7e446db769426b71850dcb214e4ba435d11df900f19","href":"https://static.observableusercontent.com/files/f579d4f35db2c697623aa75154526595087481e6092dea576f10df3671395360eaee00634cda6ca06bd2a7e446db769426b71850dcb214e4ba435d11df900f19","name":"Bar.png","type":"image/png","lastModified":1684011897605.025,"size":28973},{"id":"3af185dba8e036d9566e4e8fea61abdc7664e336311024b645c9b1672b277b46ebfc455daae1d92d6e1dfd70470e5d7f1561f362da747cded18e2fb236c2fbbb","href":"https://static.observableusercontent.com/files/3af185dba8e036d9566e4e8fea61abdc7664e336311024b645c9b1672b277b46ebfc455daae1d92d6e1dfd70470e5d7f1561f362da747cded18e2fb236c2fbbb","name":"Multi_Line_Chart2a1.png","type":"image/png","lastModified":1684011897605.025,"size":117454},{"id":"02cfa08f556b1999af9af4216d80c69d8adc0360eff91859ab7eee1b8c1157ea16e7472362904da04d39cff21808a460fa8421953192d743406b3f364b2defdc","href":"https://static.observableusercontent.com/files/02cfa08f556b1999af9af4216d80c69d8adc0360eff91859ab7eee1b8c1157ea16e7472362904da04d39cff21808a460fa8421953192d743406b3f364b2defdc","name":"Multi_Line_Chart2a2.png","type":"image/png","lastModified":1684011897605.025,"size":63361},{"id":"2a9911574ac744de88c956f451257995fd6d7c8f60a99086fa3050a0503c5e964a3cb43cd7ae60131fdff26be901a314cb451d620c9cc93eab56814fffc8e19b","href":"https://static.observableusercontent.com/files/2a9911574ac744de88c956f451257995fd6d7c8f60a99086fa3050a0503c5e964a3cb43cd7ae60131fdff26be901a314cb451d620c9cc93eab56814fffc8e19b","name":"trends_dates@1.png","type":"image/png","lastModified":1684011897605.025,"size":141416},{"id":"071720b979f0551b93c75db6d7e6271a3ed94c01a0f04b4467824c3ec5cd407f665ebe8d7c4ea1d187ef2df50d93e624234444e0231728cd5d77fbbf17558f09","href":"https://static.observableusercontent.com/files/071720b979f0551b93c75db6d7e6271a3ed94c01a0f04b4467824c3ec5cd407f665ebe8d7c4ea1d187ef2df50d93e624234444e0231728cd5d77fbbf17558f09","name":"brushed_view.png","type":"image/png","lastModified":1684011897605.025,"size":53689},{"id":"e4dea64cc0048840aa17acb25ee8e545bfa431ce55d69d914c72141d1a87c3704412b707fa0efc3a93d209f44615afafd929415053151fa50919f37dafeab95d","href":"https://static.observableusercontent.com/files/e4dea64cc0048840aa17acb25ee8e545bfa431ce55d69d914c72141d1a87c3704412b707fa0efc3a93d209f44615afafd929415053151fa50919f37dafeab95d","name":"Multi_Line_Chart_Types1@1.png","type":"image/png","lastModified":1684011897605.025,"size":25338},{"id":"ca4330d2a62a4544255ff1c01a0cf59d7f42470e9c72b35615bc237862fae8fcf2c20f160ce2efdf76a964a7a345049bd18760c842f91c5503b42ccc3bf61fcc","href":"https://static.observableusercontent.com/files/ca4330d2a62a4544255ff1c01a0cf59d7f42470e9c72b35615bc237862fae8fcf2c20f160ce2efdf76a964a7a345049bd18760c842f91c5503b42ccc3bf61fcc","name":"Multi_Line_Chart_Types2@1.png","type":"image/png","lastModified":1684011897605.025,"size":29087},{"id":"cad09753b9b289463f81a19b3bbe90b9db3bd51a539872e845da9f7b039ee5e4c501958fe99fb07a164ded1a754bf3153c36b9f957ab548a943053b4f208fce8","href":"https://static.observableusercontent.com/files/cad09753b9b289463f81a19b3bbe90b9db3bd51a539872e845da9f7b039ee5e4c501958fe99fb07a164ded1a754bf3153c36b9f957ab548a943053b4f208fce8","name":"Legend_Early_Events.png","type":"image/png","lastModified":1684011897605.025,"size":114063},{"id":"663073991230170a6d25c44f9af60896c68cec50641cd586ee1439d9cdd9a9f9ba824f2f31d1e3901e8af901c47373490316578fbe3313a69401f210354cc4bc","href":"https://static.observableusercontent.com/files/663073991230170a6d25c44f9af60896c68cec50641cd586ee1439d9cdd9a9f9ba824f2f31d1e3901e8af901c47373490316578fbe3313a69401f210354cc4bc","name":"brushed_view_noselection.png","type":"image/png","lastModified":1684011897605.025,"size":66450},{"id":"65890efcfa3628a12239d73f1643a2ca674b6e912579f4088a282d7417c16ad7a892dbd9a2d207d172eed8a991a52bbc15abc9508a5244390faf825700e032a9","href":"https://static.observableusercontent.com/files/65890efcfa3628a12239d73f1643a2ca674b6e912579f4088a282d7417c16ad7a892dbd9a2d207d172eed8a991a52bbc15abc9508a5244390faf825700e032a9","name":"new_dates@3.csv","type":"text/csv","lastModified":1684011897605.025,"size":1188}] 2f:{"title":"NYC Covid-19 Exploratory Visual","cells":[{"id":5,"value":"# NYC Covid-19 Exploratory Visual","pinned":false,"hidden":false,"mode":"md"},{"id":1121,"value":"viewof cb_boroughs = Inputs.checkbox(\n [\"Manhattan\", \"Brooklyn\", \"Queens\", \"Bronx\", \"Staten Island\"],\n {\n label: html`Boroughs`,\n value: [\"Manhattan\", \"Brooklyn\", \"Queens\", \"Bronx\", \"Staten Island\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"viewof cb_settings = Inputs.checkbox(\n [\"Key Dates\", \"Covid Restriction Policy\", \"Opening Policy\", \"Holiday\"],\n { label: html`Displayed Dates`}\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1127,"value":"viewof sb_view = Inputs.select([\"Cumulative Per Capita\", \"Cumulative\", \"New\"], {\n label: html`Measurement`,\n value: \"Cumulative Per Capita\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1130,"value":"viewof sb_data = Inputs.select(\n [\"Cases\", \"Deaths\", \"Persons Vaccinated\", \"Persons Hospitalized\"],\n {\n label: html`Data Type`,\n value: \"Deaths\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"A4_output = A4_deliverable(percapita_data, {\n x: (d) => d.date,\n y: (d) => y_data(d),\n z: (d) => d.Borough,\n yLabel: y_type(),\n width: 1000,\n height: 500,\n color: \"steelblue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1154,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1140,"value":"## Preparation","pinned":false,"hidden":false,"mode":"md"},{"id":1179,"value":"### Importing Data","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"all_dates = FileAttachment(\"new_dates@3.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"dates = all_dates","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"percapita_data = FileAttachment(\"percapita_data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"{\n // Maybe include other dates as neutrals\n dates[0].action = 0;\n dates[1].action = 0;\n dates[2].action = 0;\n dates[3].action = 1;\n dates[4].action = -1;\n dates[5].action = -1;\n dates[6].action = -1;\n dates[7].action = 1;\n dates[8].action = 1;\n dates[9].action = -1;\n dates[10].action = 0;\n dates[11].action = 1;\n dates[12].action = 0;\n dates[13].action = -1;\n for (let i = 14; i < all_dates.length; i++) {\n dates[i].action = 2;\n }\n return dates;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"Cumulative Confirmed Cases by Borough (Total) <---- what is this for","pinned":false,"hidden":false,"mode":"md"},{"id":1183,"value":"### Main Graphic","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"function y_type(d) {\n if (sb_view == \"Cumulative\") {\n if (sb_data == \"Cases\") return \"Cumulative Cases\";\n if (sb_data == \"Deaths\") return \"Cumulative Deaths\";\n if (sb_data == \"Persons Vaccinated\") return \"Cumulative Persons Vaccinated\";\n if (sb_data == \"Persons Hospitalized\")\n return \"Cumulative Persons Hospitalized\";\n } else if (sb_view == \"Cumulative Per Capita\") {\n if (sb_data == \"Cases\") return \"Cumulative Cases Per Capita\";\n if (sb_data == \"Deaths\") return \"Cumulative Deaths Per Capita\";\n if (sb_data == \"Persons Vaccinated\")\n return \"Cumulative Persons Vaccinated Per Capita\";\n if (sb_data == \"Persons Hospitalized\")\n return \"Cumulative Persons Hospitalized Per Capita\";\n } else if (sb_view == \"New\") {\n if (sb_data == \"Cases\") return \"New Cases\";\n if (sb_data == \"Deaths\") return \"New Deaths\";\n if (sb_data == \"Persons Vaccinated\") return \"Newly Vaccinated Persons\";\n if (sb_data == \"Persons Hospitalized\") return \"Newly Hospitalized Patients\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"## Previous Iterations and Features\nBelow are versions of our graphics containing early divergent ideas, early feature prototypes, and scrapped features/versions.","pinned":false,"hidden":false,"mode":"md"},{"id":1229,"value":"// Toggle image display size default is 800\nimage_width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"Graph below shows frequency of confirmed cases over the day of the week. It is generally noted that there are higher number of positive cases through the weekdays, likely due to work scheduling.","pinned":false,"hidden":false,"mode":"md"},{"id":1185,"value":"image = FileAttachment(\"Bar.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1267,"value":"Next 2 graphs below shows frequency of confirmed cases over time. The first graph uses a moving average of 1 day, while the second graph uses a moving average of 7 days. It is noted that the fluctuations are lesser in the second graph, which makes it more readable.","pinned":false,"hidden":false,"mode":"md"},{"id":1187,"value":"image2 = FileAttachment(\"Multi_Line_Chart2a1.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"image3 = FileAttachment(\"Multi_Line_Chart2a2.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"The next graph shows the number of cumulative cases over time, across boroughs. Vertical lines show various types of events happening at various times.","pinned":false,"hidden":false,"mode":"md"},{"id":1196,"value":"image4 = FileAttachment(\"trends_dates@1.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1276,"value":"The next 2 graphs show the intensity of certain government policies over time, such as school closing, vaccinations etc. This is to be placed together with the chart above to observe the correlation between cumulative cases and the intensity of various policies.","pinned":false,"hidden":false,"mode":"md"},{"id":1204,"value":"image5 = FileAttachment(\"Multi_Line_Chart_Types2@1.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"image6 = FileAttachment(\"Multi_Line_Chart_Types1@1.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"The next 2 graphs shows our preliminary integration of brushing, where the top graph is the 'Focus View' while the bottom graph is the 'Context View'. The 'Context View' is where one can select a region along the x-axis to zoom-in on the data within the 'Focus View' chart. This was intended to be in the final chart but the various forms of input made it hard to dynamically add this with all of the other variables. With more time, we would finish this feature.","pinned":false,"hidden":false,"mode":"md"},{"id":1292,"value":"image7point5 = FileAttachment(\"brushed_view_noselection.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"image7 = FileAttachment(\"brushed_view.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"The following graph(s) are earlier iterations of our final visual. Early forms of the legend, lack of grouping events, and lack of displaying event details or labels are some of the features lacking that we had to alter or discard to reach our final result.","pinned":false,"hidden":false,"mode":"md"},{"id":1288,"value":"image8 = FileAttachment(\"Legend_Early_Events.png\").image({\n width: image_width,\n style: \"border: 1px solid black\"\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}