32:[] 30:{"title":"COVID-19: Pick a country to display data","cells":[{"id":0,"value":"md`# COVID-19: Pick a country to display data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`\nI'm grabbing the data from [COVID-19 API](https://covid19api.com). The data may not be as up-to-date as [some other resources](https://coronavirus.jhu.edu/map.html). The point of this notebook was to familiarise myself with Observable, so please keep in mind this is made for educational purposes, but it's great if it will give someone an additional value. Observable looked pretty intimidating at first. [This tutorial](https://observablehq.com/@observablehq/tutorial) got me up and running.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"viewof selectedCountry = autoSelect({\n title: \"Select a country you want to know the progression of confirmed cases for:\",\n options: availableCountries.map(country => country.Slug),\n value: \"croatia\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof typeOfCase = select({\n title: \"Select what type of data you want to see (confirmed, recovered or deaths):\",\n options: [\"confirmed\", \"recovered\", \"deaths\"],\n value: \"confirmed\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof selectedScale = radio({\n title: \"Select the scale you want to use\",\n options: [\n { label: 'None', value: '' },\n { label: 'Log (base 2)', value: 'log2' },\n { label: 'Log (base 10)', value: 'log10' },\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Most recent data for ${selectedCountry} (as of ${new Date(dailySummary.Date).toDateString()})\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"html`\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

New confirmed cases	${dailySummarySelected.NewConfirmed}
Total confirmed cases	${dailySummarySelected.TotalConfirmed}
New deaths	${dailySummarySelected.NewDeaths}
Total deaths	${dailySummarySelected.TotalDeaths}
New recovered	${dailySummarySelected.NewRecovered}
Total recovered	${dailySummarySelected.TotalRecovered}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"md`# ${selectedCountry}: Line chart of ${typeOfCase} cases`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"html`Note: In case of displaying in log scale, data is shifted by 1 in order to be able to produce the graph for 0 values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"graph = {\n \n let dataToPlot = (selectedScale === \"\" ? \n countryData : \n countryData.map(country => ({...country, Cases: country.Cases+1})))\n \n return (vegalite(\n {\n data: {values: dataToPlot},\n layer: [{\n transform: [{\n aggregate: [{op: \"sum\", field: \"Cases\", as: \"sum_cases\"}],\n groupby: [\"Country\", \"Date\"]\n }],\n mark: {type: \"line\", color: \"steelblue\", point: true, tooltip: {field: \"sum_cases\"}},\n autosize: \"fit\",\n height: 400,\n width: width-100,\n encoding: {\n x: {\n title: \"Date\",\n field: \"Date\",\n type: \"temporal\",\n timeUnit: \"utcyearmonthdate\"\n },\n y: {\n title: \"Cases\",\n field: \"sum_cases\",\n type: \"quantitative\",\n scale: (selectedScale===\"\" ? \"\" : {\n type: \"log\",\n base: selectedScale===\"log2\" ? 2 : 10\n })\n }\n }\n }\n ]\n }\n))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"md`# ${selectedCountry}: Difference in ${typeOfCase} cases from the previous day`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"vegalite(\n {\n data: {values: countryCasesDiff},\n layer: [{\n transform: [{\n aggregate: [{op: \"sum\", field: \"Cases\", as: \"sum_cases\"}],\n groupby: [\"Country\", \"Date\"]\n }],\n mark: {type: \"bar\", color: \"salmon\", point: true, tooltip: {field: \"sum_cases\"}},\n autosize: \"fit\",\n height: 400,\n width: width-100,\n encoding: {\n x: {\n title: \"Date\",\n field: \"Date\",\n type: \"ordinal\",\n timeUnit: \"utcyearmonthdate\"\n },\n y: {\n title: `Difference in ${typeOfCase} cases from previous day`,\n field: \"sum_cases\",\n type: \"quantitative\"\n }\n }\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`\n## Data\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"fetchCountries = (await fetch(\"https://api.covid19api.com/countries\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"availableCountries = fetchCountries.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"countryData = (await fetch(`https://api.covid19api.com/country/${selectedCountry}/status/${typeOfCase}`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"aggregateByCountryDate = d3.nest()\n .key(function(d) {return d.Country})\n .key(function(d) {return d.Date})\n .rollup(function(v) {return d3.sum(v, function(d) {return d.Cases})})\n .entries(countryData)","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"aggData = aggregateByCountryDate[0].values","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"countryCasesDiff = {\n let cases = aggData.map(daily => daily.value);\n let dates = aggData.map(daily => daily.key).slice(1);\n let diffCases = cases.slice(1).map((a, i) => a - cases.slice(0,cases.length-1)[i]);\n let combine = diffCases.map((item, i) => ({Cases: item, Date: dates[i]}));\n return combine;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"dailySummary = (await fetch(`https://api.covid19api.com/summary`)).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"dailySummarySelected = dailySummary.Countries.filter(country => country.Slug === selectedCountry)[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"md`\n## Appendix\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"vegalite = require(\"@observablehq/vega-lite\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import {autoSelect, select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}