2d:null 2e:["$","title",null,{"children":"Tracking COVID-19 Cases in Vietnam | Duy Nguyen | Observable"}] 33:T524,md` With ${numFormat( d3.max(confirmed.totals, d => d.value) )} confirmed cases, ${numFormat( recovered.totals[dates.length - 1].value )} recoveries, and ${numFormat( d3.max(deceased.totals, d => d.value) )} deaths as of ${dateStringFormat( dates[dates.length - 1] )}, Vietnam is doing an [amazing job](https://www.reuters.com/article/us-health-coronavirus-who-asiapac-vietna/vietnams-leadership-public-showing-strong-response-to-contain-coronavirus-who-idUSKBN2230EQ) at keeping the coronavirus at bay. But we can't afford to be cocky. What we need is less action on the maps. And, for now, that only happens when there's less action on the streets. Do your part to keep your loved ones safe. *Ở nhà đi.* *Source: [Vietnam's Ministry of Health](https://ncov.moh.gov.vn/). Many thanks to Jeremy Ashkenas for the [bubble-map](https://observablehq.com/@jashkenas/italy-coronavirus-daily-cases-map-covid-19) design, Mike Bostock for the [heatmap](https://observablehq.com/@mbostock/electric-usage-2019) and [tooltip](https://observablehq.com/@d3/line-chart-with-tooltip) designs, and FiveThirtyEight for the triangular [event marker](https://projects.fivethirtyeight.com/2020-primary-forecast/).* _{**TODO:** Responsive design. Suggestions or bones to pick?}`34:T1aa2,dashboard = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); /*---HEATMAP---*/ const heat = svg.append("g"); // Zoom const zoom = // Legend heat .append("g") .attr("transform", `translate(${heatMargin.left},0)`) .append(() => heatLegend({ color: cellColor, title: "No. new cases" }) ); // x-axis heat.append("g").call(xAxis, x); // y-axis heat.append("g").call(yAxis); // Cells const cell = heat .append("g") .attr("id", "heatmap") .selectAll("rect") .data(confirmedNonCum.totals) .join("rect") .attr("x", d => x(d.date)) .attr("y", d => y(d.name)) .attr("width", cellWidth) .attr("height", cellHeight) .attr("fill", d => cellColor(d.value)); // Event marker heat .append("g") .attr("transform", `translate(0,${heatOffset})`) .selectAll("g") .data(events) .join("g") .attr("class", "marker"); // Marker triangle heat .selectAll(".marker") .append("path") .attr("class", "triangle") .attr( "d", d => `M${x(d.date)},0l-${tHeight / 1.5},-${tHeight}l${(tHeight / 3) * 4},0z` ); // Marker line heat .selectAll(".marker") .append("line") .attr("class", "bar") .attr("x1", d => x(d.date)) .attr("x2", d => x(d.date)) .attr("y2", heatHeight) .style("visibility", "hidden"); // Event title heat .append("g") .attr("transform", `translate(${heatMargin.left},${heatOffset - tHeight})`) .append("text") .attr("x", (heatWidth - heatMargin.right - heatMargin.left) / 2) .attr("y", -10) .attr("text-anchor", "middle") .attr("class", "event-title"); heat .select(".event-title") .append("tspan") .attr("id", "date"); heat .select(".event-title") .append("tspan") .attr("id", "event"); // Marker pointer behavior heat .selectAll(".marker") .on("mouseover", function(d) { d3.select(this) .select(".triangle") .style("fill-opacity", 0.8); d3.select(this) .select(".bar") .style("visibility", "visible"); d3.select(".event-title") .select("#date") .text(`${dateStringFormat(d.date)}: `); d3.select(".event-title") .select("#event") .text(d.event); }) .on("mouseout mousewheel", function(d) { d3.select(this) .select(".bar") .style("visibility", "hidden"); d3.select(".event-title") .selectAll("tspan") .text(null); d3.select(this) .select(".triangle") .style("fill-opacity", 0.2); }); /*---BUBBLE MAP---*/ // Map const map = svg .append("g") .attr("transform", `translate(${mapOffset},0)`) .attr("class", "vietnam"); map .selectAll("path") .data(provinces.features) .join("path") .attr("class", "subunit") .attr("d", path); // TS & HS Islands (in footnote instead of map) const foot = map .append("g") .attr("transform", `translate(${[width - mapOffset, height]})`); const footer = foot .selectAll("text") .data(confirmed.archipelagoes[mutable index]) .join("text") .attr("class", "footer") .style("text-anchor", "end") .attr("y", (_, i) => i * -14 - 4) .text( d => `${d.name} (${archipelagoesEng.get(d.name)}): ${numFormat( d.value )} cases` ); // Map legend const mapLegend = map .append("g") .attr("class", "legend") .attr("transform", `translate(20, ${centroids.get("Đà Nẵng")[1] + 100})`); mapLegend .append("text") .attr("class", "legend-title") .text("Total no. confirmed cases") .attr("dy", -maxRadius * 2.9); const mapLGBubbles = mapLegend .selectAll("g") .data(legendRadii) .join("g"); let lgMargin = 0; mapLGBubbles .attr("transform", (d, i) => { lgMargin += i === 0 ? 0 : confirmedRadius(mapLGBubbles.data()[i - 1]) * 2 + 15; return `translate(${lgMargin + confirmedRadius(d)}, 0)`; }) .append("circle") .attr("class", "legend-bubble") .attr("fill", d => confirmedColorScale(d)) .attr("cy", d => -confirmedRadius(d)) .attr("r", confirmedRadius); mapLGBubbles .append("text") .attr("dy", "1.3em") .attr("text-anchor", "middle") .text(d => numFormat(d)); // Place dots (for Hanoi, Saigon, and Danang) map .selectAll(".place") .data(places) .join("circle") .attr("class", "place") .attr("r", 2.5) .attr("transform", d => `translate(${centroids.get(d)})`); // Place labels map .selectAll(".place-label") .data(places) .join("text") .attr("class", "place-label") .attr("transform", d => `translate(${centroids.get(d)})`) .attr("dy", ".35em") .text(d => d) .attr("x", 6) .style("text-anchor", "start"); // Bubbles const bubble = map .selectAll(".bubble") .data(confirmed.provinces[mutable index]) .join("circle") .attr("class", "bubble") .attr("transform", d => `translate(${centroids.get(d.name)})`) .attr("fill-opacity", 0.5) .attr("fill", d => confirmedColorScale(d.value)) .attr("r", d => confirmedRadius(d.value)); // Tooltip const tooltip = svg.append("g"); // Tooltip for bubble bubble .on("mouseover", function(d) { tooltip.call(callout, `${d.name}: ${valFormat(d.value)}`); }) .on("mousemove", function(d) { tooltip.attr( "transform", `translate(${d3.mouse(this)[0] + centroids.get(d.name)[0] + mapOffset},${d3.mouse(this)[1] + centroids.get(d.name)[1]})` ); }) .on("mouseout mousewheel", function() { tooltip.call(callout, null); }); // Tooltip for heatmap cell cell .on("mouseover", function(d) { tooltip.call( callout, `${valFormat(d.value)} ${d.name}, ${d.date.toLocaleDateString()}` ); }) .on("mousemove", function(d) { tooltip.attr("transform", `translate(${d3.mouse(this)})`); }) .on("mouseout mousewheel", function() { tooltip.call(callout, null); }); return Object.assign(svg.node(), { update(i) { const t = map .transition() .duration(i === 0 ? 0 : delay) .ease(d3.easeLinear); // Bubble bubble.data(confirmed.provinces[i]).call(b => { b.transition(t) .attr("fill", d => confirmedColorScale(d.value)) .attr("r", d => confirmedRadius(d.value)); }); // Footnote footer.data(confirmed.archipelagoes[i]).call(f => { f.text( d => `${d.name} (${archipelagoesEng.get(d.name)}): ${numFormat( d.value )} cases` ); }); } }); }35:T5a8,{ const c = `rgb(255, 255, 255, 0.5)`; return html` `; }36:T51e,preprocess = (url, config = { p: true, t: true }) => d3 .csv(url, d => { const date = d3.timeParse(dateFormat)(`${d["Date"]}/2020`); delete d["Date"]; const newD = []; Object.keys(d).forEach(key => newD.push({ date: date, name: key, value: +d[key] }) ); return newD; }) .then(data => { function paSplit(d) { return [ d.filter(e => archipelagoes.indexOf(e.name) === -1), d.filter(e => archipelagoes.indexOf(e.name) !== -1) ]; } const processed = {}; if (config.p && config.t) { processed.provinces = []; processed.archipelagoes = []; processed.totals = []; data.forEach(d => { processed.totals.push(d[0]); d.shift(); const split = paSplit(d); processed.provinces.push(split[0]); processed.archipelagoes.push(split[1]); }); } else if (config.p) { processed.provinces = []; processed.archipelagoes = []; data.forEach(d => { const split = paSplit(d); processed.provinces.push(split[0]); processed.archipelagoes.push(split[1]); }); } else if (config.t) { processed.totals = data.flat(); } return processed; })37:[{"id":"85ccb7e28d1f2eeeb994823356e54753be3987abd9a0e9a7f3972842d3a82ffd3ba0b736974675376b75033399c5fb8397a086a58885211057d21d6e80ec2e49","href":"https://static.observableusercontent.com/files/85ccb7e28d1f2eeeb994823356e54753be3987abd9a0e9a7f3972842d3a82ffd3ba0b736974675376b75033399c5fb8397a086a58885211057d21d6e80ec2e49","name":"gadm36_VNM_1.json","type":"application/json","lastModified":1586471907466.614,"size":605313}] 31:{"id":"4d8b9aeb006e2030","slug":"tracking-covid-19-cases-in-vietnam","title":"Tracking COVID-19 Cases in Vietnam","thumbnail":"304e71be4bddf457f483a180f6da0837c98d3209ddcd3d714c8fef101a290b4b","access_level":"public","create_time":"$D2020-04-09T22:32:36.505Z","update_time":"$D2020-10-09T04:05:54.479Z","view_time":null,"first_public_time":"$D2020-04-12T04:24:10.884Z","fork":{"id":"a92586907406b61c","slug":"italy-coronavirus-daily-cases-map-covid-19","title":"Italy Coronavirus Daily Cases Map (COVID-19)","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":3,"starred":false,"owner":{"type":"team","id":"fc7e2d71a30de93f","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":"starter_2024"},"version":2600,"publish_version":2600,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f71a2edaa31e617","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":null}],"members":[{"type":"individual","id":"3f71a2edaa31e617","login":"duyknguyen","name":"Duy Nguyen","avatar_url":"https://avatars-next.observableusercontent.com/f19edf9e1118a419a9c0f4d4db777cc66b8fa72c62af89257261c01f09dff544","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"b929b3b252e35445","slug":"projects","title":"Bite-sized Projects","owner":{"id":"fc7e2d71a30de93f","login":"duyknguyen","name":"Duy Nguyen"}},"type":"notebook","body":{"title":"Tracking COVID-19 Cases in Vietnam","cells":[{"id":820,"value":"md`# Tracking COVID-19 Cases in Vietnam`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2587,"value":"controls = html`\n

${viewof day}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1282,"value":"md`

\n___\n\n## Appendix\n\nTechnical gobbledygook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2284,"value":"cellInspection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1340,"value":"md`### Data\n\nCompiled from source and updated at the end of each day (GMT+7). Click on dataset name to download.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2062,"value":"viewof refresh = button({\n value: \"Reload\",\n description: \"Hit me, baby, one more time.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2339,"value":"md`#### [Confirmed cases](${confirmedUrl})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"// Confirmed_CoH_CUMSUM\nconfirmed = {\n refresh;\n return preprocess(urlHead + \"/\" + confirmedUrl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2379,"value":"md`#### [Confirmed cases (non-cumulative)](${confirmedNonCumUrl})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"// Confirmed_MoH\nconfirmedNonCum = {\n refresh;\n return preprocess(urlHead + \"/\" + confirmedNonCumUrl, { p: false, t: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2390,"value":"md`#### [Recoveries](${recoveredUrl})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"// Recovered_MoH_CUMSUM\nrecovered = {\n refresh;\n return preprocess(urlHead + \"/\" + recoveredUrl, { p: false, t: true });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2402,"value":"md`#### [Deaths](${deceasedUrl})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"// Deceased_CUMSUM\ndeceased = {\n refresh;\n return preprocess(urlHead + \"/\" + deceasedUrl);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2408,"value":"md`#### [Events](${eventsUrl})`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"events = {\n refresh;\n return d3.csv(urlHead + \"/\" + eventsUrl, d => {\n d.date = d3.timeParse(dateFormat)(`${d.date}/2020`);\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"md`
\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2578,"value":"import { cellInspection } from \"@duynguyen1678/helper-gifs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1188,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2059,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1666,"value":"import { legend as heatLegend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1314,"value":"md`
\n### General`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2552,"value":"urlHead = \"https://duynguyen1678-cors.herokuapp.com\" // CORS","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2341,"value":"confirmedUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQGc4onqChCL-IXuwszlZACiBfgTgq5U1yJJ1UXJiIXtu_xz72wmsWHE7yTkjAoFpip1poUH4d-ykq5/pub?gid=1867510796&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2375,"value":"confirmedNonCumUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQGc4onqChCL-IXuwszlZACiBfgTgq5U1yJJ1UXJiIXtu_xz72wmsWHE7yTkjAoFpip1poUH4d-ykq5/pub?gid=1165644559&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2385,"value":"recoveredUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQGc4onqChCL-IXuwszlZACiBfgTgq5U1yJJ1UXJiIXtu_xz72wmsWHE7yTkjAoFpip1poUH4d-ykq5/pub?gid=338699839&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2399,"value":"deceasedUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQGc4onqChCL-IXuwszlZACiBfgTgq5U1yJJ1UXJiIXtu_xz72wmsWHE7yTkjAoFpip1poUH4d-ykq5/pub?gid=531538540&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2409,"value":"eventsUrl = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vQGc4onqChCL-IXuwszlZACiBfgTgq5U1yJJ1UXJiIXtu_xz72wmsWHE7yTkjAoFpip1poUH4d-ykq5/pub?gid=1648175856&single=true&output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"height = 760","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"dateFormat = \"%m/%d/%Y\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"startDate = confirmed.provinces[0][0].date","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"places = [\"Hà Nội\", \"Hồ Chí Minh\", \"Đà Nẵng\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"dates = dateRange(startDate, confirmed.totals[confirmed.totals.length - 1].date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1195,"value":"numFormat = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"function valFormat(n) {\n return `${numFormat(n)} ${n === 1 ? \"case\" : \"cases\"}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2201,"value":"dateStringFormat = date =>\n date.toLocaleString(undefined, {\n month: \"long\",\n day: \"numeric\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"function dateRange(start, end) {\n const duration = 1000 * 60 * 60 * 24;\n const dates = [];\n let ms = start * 1;\n while (ms < end * 1 + duration) {\n dates.push(new Date(ms));\n ms += duration;\n }\n return dates;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"function getMostRecent(data) {\n return data[data.length - 1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":975,"value":"function getMaxCases(data) {\n return d3.max(getMostRecent(data), d => d.value);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"md`
\n### Bubble Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"vietnam = FileAttachment(\"gadm36_VNM_1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"provinces = topojson.feature(vietnam, vietnam.objects.gadm36_VNM_1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"// Center of each province on the map, i.e. where each bubble is drawn\ncentroids = new Map(\n provinces.features.map(p => [p.properties.NAME_1, path.centroid(p)])\n)\n\n// Alternative (use with projection)\n/*new Map(\n provinces.features.map(p => [\n p.properties.NAME_1,\n [\n // Longitude\n p.geometry.type === \"Polygon\"\n ? d3.mean(p.geometry.coordinates.flat(), d => d[0])\n : d3.mean(p.geometry.coordinates.flat(2), d => d[0]),\n // Latitude\n p.geometry.type === \"Polygon\"\n ? d3.mean(p.geometry.coordinates.flat(), d => d[1])\n : d3.mean(p.geometry.coordinates.flat(2), d => d[1])\n ]\n ])\n)*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1623,"value":"archipelagoes = [\"Q.Đ. Hoàng Sa\", \"Q.Đ. Trường Sa\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2017,"value":"archipelagoesEng = new Map([\n [\"Q.Đ. Trường Sa\", \"Spratly Is.\"],\n [\"Q.Đ. Hoàng Sa\", \"Paracel Is.\"]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"viewof day = Scrubber(dates.slice(0, confirmed.provinces.length), {\n delay,\n loop: false,\n format: d =>\n `${d.toLocaleString(undefined, {\n year: \"numeric\",\n month: \"2-digit\",\n day: \"2-digit\"\n })}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"mapOffset = width - 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"maxRadius = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1138,"value":"maxConfirmed = getMaxCases(confirmed.provinces)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"legendRadii = [10, 50, 150, 300]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"delay = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"mutable index = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"dayUpdate = dashboard.update(index)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"indexUpdate = {\n mutable index = dates.indexOf(day);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"projection = d3.geoMercator().fitHeight(height, provinces)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1141,"value":"colorScale = (maxCases, colorRange) =>\n d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range(colorRange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"radius = maxCases =>\n d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"confirmedColorScale = colorScale(maxConfirmed, [\n `hsla(57, 100%, 50%, 0.36)`,\n `hsla(7, 100%, 50%, 0.57)`\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1148,"value":"confirmedRadius = radius(maxConfirmed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1814,"value":"md`
\n### Heatmap`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1856,"value":"heatOffset = 92","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1938,"value":"heatMargin = ({ top: 0, right: 40, bottom: 50, left: 80 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1949,"value":"heatWidth = mapOffset","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1942,"value":"heatHeight = height - heatOffset - heatMargin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1966,"value":"cellWidth = (x.range()[1] - x.range()[0]) / dates.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"cellHeight = y.bandwidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2136,"value":"tHeight = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1947,"value":"x = d3\n .scaleTime()\n .domain(d3.extent(dates))\n .range([heatMargin.left, heatWidth - heatMargin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1958,"value":"y = d3\n .scaleBand()\n .domain(\n [...centroids.keys()]\n .sort((a, b) => centroids.get(a)[1] - centroids.get(b)[1])\n .concat(archipelagoes)\n )\n .range([heatOffset, heatOffset + heatHeight])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1953,"value":"function xAxis(g, x) {\n g.attr(\"transform\", `translate(0,${heatOffset + heatHeight})`)\n .call(d3.axisBottom(x).ticks(d3.timeMonth.every(1)))\n .call(g => g.select(\".domain\").remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"function yAxis(g) {\n g.attr(\"transform\", `translate(${heatMargin.left},0)`)\n .call(d3.axisLeft(y).tickValues(places))\n .call(g => g.select(\".domain\").remove());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"/*function cellColor(n) {\n if (n === 0) return \"#ccc\";\n const color = d3\n .scaleSequential()\n .domain([1, d3.max(confirmedNonCum.totals, d => d.value)])\n .nice()\n .interpolator(d3.interpolateYlOrRd);\n return color(n);\n}*/\n\ncellColor = d3\n .scaleSequential()\n .domain([0, d3.max(confirmedNonCum.totals, d => d.value)])\n .nice()\n .interpolator(d3.interpolateYlOrRd)\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1912,"value":"md`
\n### Scratch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"/*function toMagnitude(n) {\n const order = Math.floor(Math.log(n) / Math.LN10 + 0.000000001);\n return Math.pow(10, order);\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"