29:null 2a:["$","title",null,{"children":"New Research Work on COVID-19 as the pandemic develops | Kristian Garza | Observable"}] 2f:T551,vegalite({ $schema: "https://vega.github.io/schema/vega-lite/v4.json", width: 500, height: 214, padding: 1, data: { name: "table", values: dx }, transform: [ { calculate: "time(datum.date) > time('2020-03-11') ? 'Yes' : 'No'", as: "pandemic" } ], encoding: { x: { field: "date", type: "temporal", timeUnit: "yearmonthdate", title: "Date", axis: { format: "%B %d" } } }, layer: [ { mark: { type: "bar", binSpacing: 1 }, encoding: { y: { field: "count", type: "quantitative", title: "Published Academic Works on SARS-CoV-2", axis: { orient: "right", titleColor: "#00609f" } }, color: { field: "pandemic", type: "nominal", title: "Pandemic declared?", scale: { range: ['#00609f', '#d365ba', '#154866', '#666666', '#c4c4c4'] } } } }, { mark: { type: "line", interpolate: "monotone" }, encoding: { y: { field: "confirmed_sum", type: "quantitative", title: "SARS-CoV-2 Confirmed Cases", axis: { orient: "left", titleColor: "#ab5787" } } } } ], resolve: { scale: { y: "independent" } } })30:T447,md` ## Data and Tools For the COVID-19 data I took a similar approach to J Kae (https://observablehq.com/@jkaempfer/visualizing-covid-19-in-d3) and use the API endpoint for COVID-19 data by John Hopkins university. For the research works data I use the Public API endpoint for persistent identifiers by Datacite. Most public, academic works have a persistent identifier assigned to them; therefore, this is a good place to get the data. I searched for academic works that included the terms *COVID-19*, *SARS-CoV-2*, *2019-nCoV*. I found a [good number of works](https://search.datacite.org/works?query=%22COVID-19%22+OR+%22SARS-CoV-2%22+OR+%222019-nCoV%22) on the topic since January 2020. This dataset is saved in Github. In the table below there are a few examples: `31:T551,vegalite({ $schema: "https://vega.github.io/schema/vega-lite/v4.json", width: 500, height: 214, padding: 1, data: { name: "table", values: dx }, transform: [ { calculate: "time(datum.date) > time('2020-03-11') ? 'Yes' : 'No'", as: "pandemic" } ], encoding: { x: { field: "date", type: "temporal", timeUnit: "yearmonthdate", title: "Date", axis: { format: "%B %d" } } }, layer: [ { mark: { type: "bar", binSpacing: 1 }, encoding: { y: { field: "count", type: "quantitative", title: "Published Academic Works on SARS-CoV-2", axis: { orient: "right", titleColor: "#00609f" } }, color: { field: "pandemic", type: "nominal", title: "Pandemic declared?", scale: { range: ['#00609f', '#d365ba', '#154866', '#666666', '#c4c4c4'] } } } }, { mark: { type: "line", interpolate: "monotone" }, encoding: { y: { field: "confirmed_sum", type: "quantitative", title: "SARS-CoV-2 Confirmed Cases", axis: { orient: "left", titleColor: "#ab5787" } } } } ], resolve: { scale: { y: "independent" } } })32:T4f6,function denormalized() { var data = []; //placeholder for denormalized data to be returned var i = 0; // counter for location //counters to iterate days var startDate = new Date(2020, 0, 22); var timespan = Object.keys(covid_data.confirmed.locations[0].history).length; // number of days in the dataset // iterate across locations while (i < covid_data.confirmed.locations.length) { var j = 0; while (j < timespan) { var d = new Date( startDate.getFullYear(), startDate.getMonth(), j + startDate.getDate() ); var d_formatted = d.getMonth() + 1 + "/" + d.getDate() + "/" + (+d.getFullYear() - 2000); data.push({ country: covid_data.confirmed.locations[i].country, province: covid_data.confirmed.locations[i].province, lat: +covid_data.confirmed.locations[i].coordinates.lat, lon: +covid_data.confirmed.locations[i].coordinates.long, date: d.toISOString().substring(0, 10), confirmed: covid_data.confirmed.locations[i].history[d_formatted], deaths: covid_data.deaths.locations[i].history[d_formatted] // recovered: covid_data.recovered.locations[i].history[d_formatted] }); j++; } i++; } return data; }33:T6fd,vegalite({ $schema: "https://vega.github.io/schema/vega-lite/v4.json", description: "A simple donut chart with embedded data.", padding: { left: 55, top: 10, right: 10, bottom: 10 }, data: { values: resources_list.meta.resourceTypes }, layer: [ { mark: { type: "arc", innerRadius: 68, outerRadius: 90, cursor: "pointer", tooltip: true }, encoding: { theta: { field: "count", type: "quantitative", sort: "descending" }, color: { field: "title", type: "nominal", title: "type", legend: false, scale: { range: [ "#fccde5", "#fdb462", "#fb8072", "#fb8072", "#b3de69", "#bc80bd", "#fccde5", "#8dd3c7", "#ffed6f", "#d9d9d9", "#ffffb3", "#bebada", "#80b1d3", "#ccebc5", "#d9d9d9" ], domain: [ "Audiovisual", "Collection", "Dataset", "Data Paper", "Event", "Image", "Interactive Resource", "Model", "Physical Object", "Service", "Sound", "Software", "Text", "Workflow", "Other" ] } } } }, { mark: { type: "text", fill: "#767676", align: "center", baseline: "middle", fontSize: 27 }, encoding: { text: { value: "32" } } } ], view: { stroke: null } })34:[] 2d:{"id":"f6b333cca9c85999","slug":"new-research-work-on-covid-19-as-the-pandemic-develops","title":"New Research Work on COVID-19 as the pandemic develops","thumbnail":"dff3b880770b855a991ce9c47bbbdb16dc20942d4927fc1b08c33b3cdd82c221","access_level":"public","create_time":"$D2020-03-18T02:09:46.088Z","update_time":"$D2021-03-07T21:41:54.218Z","view_time":null,"first_public_time":"$D2020-03-19T06:47:42.887Z","has_unpublished_edits":null,"fork":{"id":"1a80f6dd7a51b5df","slug":"visualizing-covid-19-in-d3","title":"Exploring Vega-Lite with Covid-19 data","owner":{"id":"ebf225f14f4b15d7","login":"jkaempfer","name":"J Kae"}},"stars":1,"starred":false,"owner":{"type":"team","id":"091264fb5a212322","login":"kjgarza","name":"Kristian Garza","avatar_url":"https://avatars-next.observableusercontent.com/c82ecf812010ad39cede6614ef3e355a21d84bf6e3f6056acd969b59adcc469b","tier":"starter_2024"},"version":1108,"publish_version":1108,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d63bcd9ed913548","login":"kjgarza","name":"Kristian Garza","avatar_url":"https://avatars-next.observableusercontent.com/c82ecf812010ad39cede6614ef3e355a21d84bf6e3f6056acd969b59adcc469b","tier":null}],"members":[{"type":"individual","id":"5d63bcd9ed913548","login":"kjgarza","name":"Kristian Garza","avatar_url":"https://avatars-next.observableusercontent.com/c82ecf812010ad39cede6614ef3e355a21d84bf6e3f6056acd969b59adcc469b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"New Research Work on COVID-19 as the pandemic develops","cells":[{"id":0,"value":"md`# New Research Work on COVID-19 as the pandemic develops`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"md`COVID-19 is probably the main topic of every conversation I have nowadays. At the same time, I know there is loads of research happening just on the subject; scientists are working 24/7 to unravel the virus. I thought it would be a great opportunity take a look at the data available on these two subjects and mess around with the \"layering\" capabilities in Vega-Lite (https://vega.github.io/vega-lite.html). In this blog, I look at new research that has been published on COVID-19 while the virus takes over the world population.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1051,"value":"printTable(\n resources_list[\"data\"]\n .map(e => ({\n DOI: e.attributes.doi,\n Publisher: e.attributes.publisher,\n Title: e.attributes.titles[0].title.replace(/['\"]+/g, '')\n }))\n .sort(function() {\n return .5 - Math.random();\n })\n .slice(0, 7)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"md`I performed most of the data transformation using the Vega-lite transform directive. Still, in the case of summarising the COVID-19 dataset, I used [DataLib](https://github.com/vega/datalib) and some specific functions that can be found in the appendix section.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`\n## Creating charts\nFirst, let's take a look at the basic summary chart of COVID-19 cases globally. J Kae prepared this chart already using Vega-lite. However, I prefer creating Vega-lite specifications. Here it's the same chart of COVID-19 cases globally. Additionally, I am overplotting the COVID-19 deaths globally.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"vegalite({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"width\": 500,\n \"height\": 214,\n data: {\n values: df},\n \"transform\": [\n {\n \"aggregate\": [{\n \"op\": \"sum\",\n \"field\": \"confirmed\",\n \"as\": \"confirmed_cases\"\n },\n {\n \"op\": \"sum\",\n \"field\": \"deaths\",\n \"as\": \"deaths_cases\"\n }],\n \"groupby\": [\"date\"]\n }\n ],\n \"encoding\": {\n \"x\": {\"field\": \"date\", \"type\": \"temporal\", timeUnit:\"yearmonthdate\", \"title\":\"Date\", \"axis\": {\"format\": \"%B %d\"}},\n },\n \"layer\": [\n {\n mark: {\n type: \"line\",\n \"interpolate\": \"monotone\"\n }, \n \"encoding\": {\n \"y\": {\"field\": \"confirmed_cases\", \"type\": \"quantitative\", \"title\":\"Confirmed Cases\"}\n }},\n {\n mark: {\n type: \"line\", \"stroke\": \"#51b2e5\",\"interpolate\": \"monotone\"\n }, \n \"encoding\": {\n \"y\": {\"field\": \"deaths_cases\", \"type\": \"quantitative\", \"title\":\"Deaths\"}\n }}]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"md`Next, also get a summary of the academic work published on COVID-19. It must be noticed that dates are a bit fuzzy here, as some works only state the year of the publication (i.e., 2020). In those cases, I use the year the record of the API was created.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"vegalite({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"width\": 500,\n \"height\": 214,\n data: {\n values: resources},\n\n mark: {\n type: \"bar\", \"binSpacing\": 1\n }, \n \"encoding\": {\n \"x\": {\"field\": \"year\", \"type\": \"temporal\", timeUnit:\"yearmonthdate\", title:\"Date\", \"axis\": {\"format\": \"%B %d\"}},\n \"y\": {\"field\": \"count\", \"type\": \"quantitative\", title:\"Published Academic Works on SARS-CoV-2\", \"axis\": {\"orient\": \"left\"}},\n \n \n \"color\": {\n \"scale\": {\"range\": [ \n '#00609f',\n '#d365ba',\n '#154866',\n '#666666',\n '#c4c4c4']}\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"md`Finally, another important aspect is the time when the [WHO](https://www.who.int/) declared that this was a pandemic. [That happened on March 11th](https://time.com/5791661/who-coronavirus-pandemic-declaration/). There are many ways to visualize marker. Vega-lite has a marker capability. Another option is to use a shade for that part of the graph. I went for highlighting the bars representing the research works published after the pandemic declaration.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"vegalite({\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"width\": 500,\n \"height\": 214,\n data: {\n values: resources},\n \"transform\":[{\"calculate\": \"time(datum.year) > time('2020-03-11') ? 'Yes' : 'No'\", \"as\": \"pandemic\"}],\n\n mark: {\n type: \"bar\", \"binSpacing\": 1\n }, \n \"encoding\": {\n \"x\": {\"field\": \"year\", \"type\": \"temporal\", timeUnit:\"yearmonthdate\", title:\"Date\", \"axis\": {\"format\": \"%B %d\"}},\n \"y\": {\"field\": \"count\", \"type\": \"quantitative\", title:\"Published Academic Works on SARS-CoV-2\", \"axis\": {\"orient\": \"left\"}},\n \n \n\n \"color\": { \"field\": \"pandemic\", \"type\": \"nominal\", \"title\":\"Pandemic declared?\",\n \"scale\": {\"range\": [ \n '#00609f',\n '#d365ba',\n '#154866',\n '#666666',\n '#c4c4c4']}\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"md`As the last step, we can then layer both charts together and setting an independent y-axis. I made each axis title on the main color of the graph that represents: Confirmed Cases on the right and Academic works on the left.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"md` ## Conclusions\n\n\nThe result is rather obvious, but it allows for creating a beautiful visualization, as time progresses, more and more research on COVID-19 gets published.\n\nOn making this chart, a great surprise was how easy it is to use DataLib to transform data. If one is familiar with R's dplry one won't have a problem getting up-to-speed. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"md` ### Functions\n\n\nthis is a helper function to transpose the json from the API to a denormalized table as shown above`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"dl = require('datalib')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"// vegalite = require(\"@observablehq/vega-lite@0.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"// Create an embed function that applies the loader and theme\nvegalite = function(spec) {\n return vegaEmbed(spec, {loader: vegaEmbed.vega.loader({baseURL: 'https://vega.github.io/vega/'}), theme: \"quartz\", actions: true})\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"// load the Vega-Embed library\nvegaEmbed = require(\"vega-embed@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"import { printTable } from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"// merges different datasets\nfunction mergeArrayObjects(source,target) {\n source.forEach((sourceElement) => {\n const targetElement = target.find((targetElement) => sourceElement.year === targetElement.date);\n targetElement ? Object.assign(targetElement, sourceElement) : target.push(sourceElement);\n });\n return target;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"md` ### Datasets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"url=\"https://coronavirus-tracker-api.herokuapp.com/all\"\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"covid_data = (await fetch(url)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"df = denormalized();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"resources = d3.json(\n \"https://gist.githubusercontent.com/kjgarza/088ee5b8b0c70e381e1b0e68f11a63ce/raw/d9afa22ae59cecdb90a0adc1212165b5dc27c6e3/covid-19_query_march18.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"resources_list = d3.json(\n \"https://api.datacite.org/dois?query=%22COVID-19%22+OR+%22SARS-CoV-2%22+OR+%222019-nCoV%22&has-citations=1\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"// printTable(resources_with_citations[\"data\"].slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"newdf = dl.groupby('date')\n .summarize([{name: 'confirmed', ops: ['sum'], as: ['confirmed_sum']}])\n .execute(df)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"dx = mergeArrayObjects(resources,newdf);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1104,"value":"resources_list.resourceTypes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"