2b:null 2c:["$","title",null,{"children":"Corona Virus Race Chart | Muhammad Usman | Observable"}] 31:T4f9,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "end") .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((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .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((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))) }32:[] 2f:{"id":"703704420bccfbd9","slug":"corona-virus-race-chart","title":"Corona Virus Race Chart","thumbnail":"268ef73d1c254ca22d002220efae4980386024d9d2a5779cea5fbd79a31cb703","access_level":"public","create_time":"$D2020-03-15T21:12:34.099Z","update_time":"$D2020-03-15T21:26:42.275Z","view_time":null,"first_public_time":"$D2020-03-15T21:20:19.668Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"093eb8c734de2cec","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":"starter_2024"},"version":113,"publish_version":113,"role":null,"authored":false,"authors":[{"type":"individual","id":"efd52393487ce9a5","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":null}],"members":[{"type":"individual","id":"efd52393487ce9a5","login":"muhammad-usman17","name":"Muhammad Usman","avatar_url":"https://avatars-next.observableusercontent.com/3b966ac93e5e492f148010515c60f068cab871a0be44b03324fcbe5884ba4e0f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Corona Virus Race Chart","cells":[{"id":0,"value":"md`# Corona Virus Race Chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"viewof object = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"chart = {\n object.replay;\n\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 yield svg.node();\n\n for (const keyframe of keyframes) {\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 invalidation.then(() => svg.interrupt());\n await transition.end();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"duration = object.speed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"n = 15","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"k = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"names = new Set(data.map(d => d.location))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"Parse=number=>Number.isNaN(parseInt(number))?0:parseInt(number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"datevalues = Array.from(d3.rollup(data, ([d]) => Parse(d[object.type]), d => +new Date(d.date), d => d.location))\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"},{"id":39,"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"},{"id":35,"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"},{"id":33,"value":"nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"function bars(svg) {\n let bar = svg.append(\"g\")\n .attr(\"fill-opacity\", 0.6)\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\", d => y((prev.get(d) || d).rank))\n .attr(\"width\", d => x((prev.get(d) || d).value) - x(0)),\n update => update,\n exit => exit.transition(transition).remove()\n .attr(\"y\", d => y((next.get(d) || d).rank))\n .attr(\"width\", d => x((next.get(d) || 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"},{"id":25,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"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"},{"id":21,"value":"formatNumber = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"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"},{"id":17,"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))\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"},{"id":64,"value":"formatDate = d3.utcFormat(\"%B %d, %Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeTableau10);\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"},{"id":13,"value":"x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"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"},{"id":56,"value":"barSize = 48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"height = margin.top + barSize * n + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"margin = ({top: 16, right: 6, bottom: 6, left: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"data = d3.csv(\"https://cors-anywhere.herokuapp.com/http://cowid.netlify.com/data/full_data.csv\").then(function(data) {\n return data.filter(d=> (d.location!==\"Worldwide\"&& d.location!==\"International\"&& d.location!==\"World\" ))\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"