2b:null 2c:["$","title",null,{"children":"Plotting COVID-19 Cases | Rami Krispin | Observable"}] 31:[] 2f:{"id":"38be8564be687a48","slug":null,"title":"Plotting COVID-19 Cases","thumbnail":"3c9420b8f010fda5fa9140e3caa21275e357c5391858be0c5f2297f3f9ab515d","access_level":"public","create_time":"$D2023-02-17T10:52:18.806Z","update_time":"$D2023-10-06T06:47:12.443Z","view_time":null,"first_public_time":"$D2023-02-17T10:52:18.806Z","has_unpublished_edits":null,"fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"69ac531d30d6f232","login":"ramikrispin","name":"Rami Krispin","avatar_url":"https://avatars-next.observableusercontent.com/256bb78185aebee4ce1cd6ad79ec934ddb1c24fcf60a0b36be97c72bc3dcc88e","tier":"starter_2024"},"version":430,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"309f9bf54ea7c6e3","login":"ramikrispin","name":"Rami Krispin","avatar_url":"https://avatars-next.observableusercontent.com/256bb78185aebee4ce1cd6ad79ec934ddb1c24fcf60a0b36be97c72bc3dcc88e","tier":null}],"members":[{"type":"individual","id":"309f9bf54ea7c6e3","login":"ramikrispin","name":"Rami Krispin","avatar_url":"https://avatars-next.observableusercontent.com/256bb78185aebee4ce1cd6ad79ec934ddb1c24fcf60a0b36be97c72bc3dcc88e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Plotting COVID-19 Cases","cells":[{"id":4,"value":"# Plotting COVID-19 Cases\n\nPlotting COVID-19 daily new cases and death cases by country.\n\nData: Using data from the [coronavirus](https://github.com/RamiKrispin/coronavirus) R package.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":288,"value":"viewof selectedCountry = Inputs.select(df.map(d => d.country), {label: \"Country\", unique: true, sort: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof selectedCase = Inputs.select([\"Confirmed\", \"Death\"], {label: \"Case Type\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"\n \n \n \n

\n ${plot}\n

\n ${monthly_cases}\n

\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":278,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"df","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":413,"value":"## Data Prep","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":300,"value":"df_aq = aq.from(df)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"df_agg = df_aq\n .groupby(\"date_monthly\", \"continent_name\")\n .rollup({total_cases: d => d3.sum(d.cases)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"df_agg.view()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"d = df_agg.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"monthly_cases = Plot.plot({\n marginTop: 20,\n marginRight: 20,\n marginBottom: 30,\n marginLeft: 70,\n width: 900,\n color: {legend: true},\n y: {\n grid: true,\n label: \"Total Cases\"\n },\n marks: [\n Plot.areaY(d, {x: \"date_monthly\", y: \"total_cases\", tip: true, fill: \"continent_name\", offset: \"center\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"chart = Streamgraph(d, {\n x: d => d.date_monthly,\n y: d => d.tota_cases,\n z: d => d.continent_name,\n yLabel: \"Total Cases\",\n width: 900,\n height: 600\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"## Resources\n\n- Introducing to Arquero - https://observablehq.com/@uwdata/introducing-arquero\n- Streamgraph with D3 - https://observablehq.com/@d3/streamgraph\n- Wiggle Streamgraph - https://observablehq.com/@observablehq/plot-stack-offset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":221,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"data2020 = d3.csv(\"https://raw.githubusercontent.com/RamiKrispin/coronavirus/main/csv/coronavirus_2020.csv\", function(df) {\n return {\n date: new Date(df.date),\n province: df.province,\n country: df.country,\n lat: df.lat,\n long: df.long,\n type: df.type,\n cases: + df.cases,\n population: + df.population,\n continent_name: df.continent_name,\n continent_code: df.continent_name\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data2021 = d3.csv(\"https://raw.githubusercontent.com/RamiKrispin/coronavirus/main/csv/coronavirus_2021.csv\", function(df) {\n return {\n date: new Date(df.date),\n province: df.province,\n country: df.country,\n lat: df.lat,\n long: df.long,\n type: df.type,\n cases: + df.cases,\n population: + df.population,\n continent_name: df.continent_name,\n continent_code: df.continent_name\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"data2022 = d3.csv(\"https://raw.githubusercontent.com/RamiKrispin/coronavirus/main/csv/coronavirus_2022.csv\", function(df) {\n return {\n date: new Date(df.date),\n province: df.province,\n country: df.country,\n lat: df.lat,\n long: df.long,\n type: df.type,\n cases: + df.cases,\n population: + df.population,\n continent_name: df.continent_name,\n continent_code: df.continent_name\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data2023 = d3.csv(\"https://raw.githubusercontent.com/RamiKrispin/coronavirus/main/csv/coronavirus_2023.csv\", function(df) {\n return {\n date: new Date(df.date),\n province: df.province,\n country: df.country,\n lat: df.lat,\n long: df.long,\n type: df.type,\n cases: + df.cases,\n population: + df.population,\n continent_name: df.continent_name,\n continent_code: df.continent_name\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"raw = Promise.all([\n data2020, \n data2021,\n data2022,\n data2023\n]).then((big_datas) => d3.merge(big_datas))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"df = raw.map(d => ({ ...d, \n date_monthly: new Date([d.date.getFullYear().toString().padStart(4, \"0\"),\n (d.date.getMonth() + 1).toString().padStart(2, \"0\"),\n \"01\"].join(\"-\"))}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"df","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// Source: https://observablehq.com/@harrystevens/unique-values-from-an-array-of-objects\nuniqueWhile = (arr, fn) => {\n let out = [],\n i = -1,\n n = arr.length;\n \n while (++i < n){\n const d = fn ? fn(arr[i], i, arr) : arr[i];\n if (!out.includes(d)) out.push(d);\n }\n \n return out;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"country_list = uniqueWhile(df, d => d.country);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"uniqueWhile(df, d => d.type);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"country_df = df.filter(function(field) {\n return field.country == selectedCountry && field.type == selectedCase.toLowerCase();\n}).sort(function(a,b){\n return new Date(a.date) - new Date(b.date);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"plot = Plot.plot({\n width: 900,\n x: {\n tickSize: 0,\n tickPadding: 10,\n label: null\n },\n y: {\n grid: true,\n tickSize: 0,\n tickPadding: 3,\n label: selectedCase\n },\n marks: [\n Plot.line(country_df, {x: \"date\", y: \"cases\", \n tip: true,\n channels: {Country: \"country\",\n \"Number of Case\": \"cases\"},\n strokeWidth: 1, stroke: \"#457b9d\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"import {howto, altplot} from \"@d3/example-components\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"import {Streamgraph} from \"@d3/streamgraph\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"