25:null 26:["$","title",null,{"children":"6.894 A4 - Top 20 Covid19 Infected Countries | dishitaturakhia | Observable"}] 2b:Te31,md `## Project Idea: While originally I had planned to use my research project data, the past week's events inspired me to convert my anxiety into this assignment project. Over the last 2 weeks, I had the [worldometer](https://www.worldometers.info/coronavirus/) webpage open on my browser. While the charts there showed the numbers, I realized that because I was observing the data regularly, I had started noticing trends, such as some countries had an increase in infections reported faster than others. These trends are not noticeable in regular bar charts and required a temporal component. ## Step 1: Data Sourcing and Analysis: The dataset of the number of daily record of COVID19 infections is sourced from [worldometer](https://www.worldometers.info/coronavirus/). The dataset had recorded number of COVID19 infections from January 22, 2020 to March 26, 2020. To understand the dataset better, I first imported it in Tableau and did initial expoloration and analysis. I noticed that names of some countries appeared multiple times, because the record for those countries were further broken down in regions. For example, data for China, Canada and Australia was further detailed in regions. I also noticed that the format of the data was not in the tabular format that I needed, indicating that the data would need some wrangling and cleaning up before I could use it for the visualization. Furthermore, the data also had missing information of "continents" which I was interested in using for visualization. ## Step 2: Data Wrangling: For this step, I first imported the data in Trifacta and then aggregated the repeated occurances of the country names that had regions specified. I then changed the tabular format to match the format I needed for having a time based animation. I then added the continent category for the countries using a country to continent mapping. ## Step 3: Design and Story: The goal of this visualization was to demonstrate the growth rate of infections in different countries and continents. I wanted to convey how the order of the highest infected countries changed rapidly over time. Using a bar chart race concept was the perfect medium to communicate this story. Furthermore, this animation revealed some interesting patterns of speed of increase and the time of first recorded infections. To further show the continent-wise infection number, I color coded the countries according to the continents. Using this technique helped in communicating geographical information without a map in an effective way as we ca see how the infections started in Asia, progressed into Europe and then North America. ## Step 4: Features: Having an automatic player that plays the animation at a constant speed helps the viewer understadn the speed of different countries better. However, this would not give specific information in case the viewer wanted to track a particular time-line or specific date. This is why I added the slider feature so the viewer can track detailed information about a particular country or extract information for a particular date. ## Step 5: Possible Future Work: If I extedn this into the final project, Iwould like to add more features such as including the number of deaths recorded in the countries. I would also like to add the feature of breaking a country into its regions and visualizaing the peaks of infection numbers per country. Also, right now the visualization is not helpful in predicting future outcomes, so adding features like analysing speed of increase to predict the number in future or order of countries for particular dates would be helpful. `2c:T46f,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "start") .selectAll("text"); return ([date, data], transition) => label = label .data(data.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x(d.value)},${y(n)})`) .attr("y", y.bandwidth() / 2) .attr("x", 6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", 6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x(d.value)},${y(n)})`) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", function(d) { return textTween(parseNumber(this.textContent), d.value); }))); }2d:T103b,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); return svg.node(); }2e:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }2f:[{"id":"c733c1ce8ba7b659217343da8434150b8125eea20fb86da6ef5f181020498a80387a879e9c39a753fe1e639e39d71ee847e09a014ca02f5b41ac229ad3ab5171","href":"https://static.observableusercontent.com/files/c733c1ce8ba7b659217343da8434150b8125eea20fb86da6ef5f181020498a80387a879e9c39a753fe1e639e39d71ee847e09a014ca02f5b41ac229ad3ab5171","name":"covid-4 – 8wr@3.csv","type":"text/csv","lastModified":1585442134016.296,"size":452025}] 29:{"id":"bec36cb4ad8c610f","slug":"covid19-infected-countries/2","title":"6.894 A4 - Top 20 Covid19 Infected Countries","thumbnail":null,"access_level":"public","create_time":"$D2020-03-29T00:35:34.016Z","update_time":"$D2020-03-29T23:12:37.620Z","view_time":null,"first_public_time":"$D2020-03-29T00:35:47.557Z","has_unpublished_edits":null,"fork":{"id":"23704cdc9e63b82b","slug":"covid19-infected-countries","title":"Covid19 Infected Countries","owner":{"id":"be32f447d5d01bce","login":"dishitaturakhia","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"be32f447d5d01bce","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":"starter_2024"},"version":3244,"publish_version":3244,"role":null,"authored":false,"authors":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null}],"members":[{"type":"individual","id":"bee2ba543c85ea56","login":"dishitaturakhia","name":"","avatar_url":"https://avatars-next.observableusercontent.com/28a0943e6dca879b32ac6f9e3241d9407e3e0e71bd46c267e8440bc45b8b26d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"6.894 A4 - Top 20 Covid19 Infected Countries","cells":[{"id":239,"value":"md`# 6.894 A4 - Top 20 Covid19 Infected Countries\n\nThis chart animates the no. of infected people in the top 20 countries with highest coronavirus infections from January 22, 2020 to March 27, 2020. Data: [worldometer](https://www.worldometers.info/coronavirus/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":982,"value":"viewof keyframe = Scrubber(keyframes, {\n format: ([date]) => formatDate(date),\n delay: duration,\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3121,"value":"swatches({\n color: d3.scaleOrdinal([\"Asia\", \"Europe\", \"Africa\", \"North America\", \"South America\", \"Oceania\", \"Diamond Princess\"], d3.schemeSet1),\n columns: \"180px\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n const updateBars = bars(svg);\n const updateAxis = axis(svg);\n const updateLabels = labels(svg);\n const updateTicker = ticker(svg);\n\n invalidation.then(() => svg.interrupt());\n\n return Object.assign(svg.node(), {\n update(keyframe) {\n const transition = svg.transition()\n .duration(duration)\n .ease(d3.easeLinear);\n\n // Extract the top bar’s value.\n x.domain([0, keyframe[1][0].value]);\n\n updateAxis(keyframe, transition);\n updateBars(keyframe, transition);\n updateLabels(keyframe, transition);\n updateTicker(keyframe, transition);\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3049,"value":"chart.update(keyframe)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3216,"value":"md`## Observations:\nThe above chart shows how the COVID19 infection numbers changed across countries over the last 2 months. The animation brings to attention some interesting trends in the data:\n\n1. It is evident how fast Italy's numbers increased from February to March. \n\n2. It is also noteworthy that in late January, the reported numbers were mainly in Asia, but US was also among the top 10 countries above other asian countries like Singapore, Malaysia and european countries like Germany and France. \n\n3. By the begnning of February ). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3225,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3241,"value":"md `## Code below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"data = d3.csvParse(await FileAttachment(\"covid-4 – 8wr@3.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"duration = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"n = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"names = new Set(data.map(d => d.name))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => d.value, d => +d.date, d => d.name))\n .map(([date, data]) => [new Date(date), data])\n .sort(([a], [b]) => d3.ascending(a, b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"function rank(value) {\n const data = Array.from(names, name => ({name, value: value(name)}));\n data.sort((a, b) => d3.descending(a.value, b.value));\n for (let i = 0; i < data.length; ++i) data[i].rank = Math.min(n, i);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"k = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"keyframes = {\n const keyframes = [];\n let ka, a, kb, b;\n for ([[ka, a], [kb, b]] of d3.pairs(datevalues)) {\n for (let i = 0; i < k; ++i) {\n const t = i / k;\n keyframes.push([\n new Date(ka * (1 - t) + kb * t),\n rank(name => (a.get(name) || 0) * (1 - t) + (b.get(name) || 0) * t)\n ]);\n }\n }\n keyframes.push([new Date(kb), rank(name => b.get(name) || 0)]);\n return keyframes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.9)\n .selectAll(\"rect\");\n\n return ([date, data], transition) => bar = bar\n .data(data.slice(0, n), d => d.name)\n .join(\n enter => enter.append(\"rect\")\n .attr(\"fill\", color)\n .attr(\"height\", y.bandwidth())\n .attr(\"x\", x(0))\n .attr(\"y\", y(n))\n .attr(\"width\", d => x(d.value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", y(n))\n .attr(\"width\", d => x(d.value) - x(0))\n )\n .call(bar => bar.transition(transition)\n .attr(\"y\", d => y(d.rank))\n .attr(\"width\", d => x(d.value) - x(0)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"function textTween(a, b) {\n const i = d3.interpolateNumber(a, b);\n return function(t) {\n this.textContent = formatNumber(i(t));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3080,"value":"parseNumber = string => +string.replace(/,/g, \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"function axis(svg) {\n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(0,${margin.top})`);\n\n const axis = d3.axisTop(x)\n .ticks(width / 160)\n .tickSizeOuter(0)\n .tickSizeInner(-barSize * (n + y.padding()));\n\n return (_, transition) => {\n g.transition(transition).call(axis);\n g.select(\".tick:first-of-type text\").remove();\n g.selectAll(\".tick:not(:first-of-type) line\").attr(\"stroke\", \"white\");\n g.select(\".domain\").remove();\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"function ticker(svg) {\n const now = svg.append(\"text\")\n .style(\"font\", `bold ${barSize}px var(--sans-serif)`)\n .style(\"font-variant-numeric\", \"tabular-nums\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"x\", width - 6)\n .attr(\"y\", margin.top + barSize * (n - 0.45) - 150)\n .attr(\"dy\", \"0.32em\")\n .text(formatDate(keyframes[0][0]));\n\n return ([date], transition) => {\n transition.end().then(() => now.text(formatDate(date)));\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"formatDate = d3.utcFormat(\"%B %d, %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeSet1);\n if (data.some(d => d.category !== undefined)) {\n const categoryByName = new Map(data.map(d => [d.name, d.category]))\n scale.domain(Array.from(categoryByName.values()));\n return d => scale(categoryByName.get(d.name));\n }\n return d => scale(d.name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right - 50])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"y = d3.scaleBand()\n .domain(d3.range(n + 1))\n .rangeRound([margin.top, margin.top + barSize * (n + 1 + 0.1)])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1971,"value":"height = margin.top + barSize * n + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"barSize = 38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3100,"value":"md `Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3110,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3108,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3104,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3102,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3040,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2a:"$29:body"