31: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?}`32: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` ); }); } }); }33:T5a8,{ const c = `rgb(255, 255, 255, 0.5)`; return html` `; }34: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; })35:[{"id":"85ccb7e28d1f2eeeb994823356e54753be3987abd9a0e9a7f3972842d3a82ffd3ba0b736974675376b75033399c5fb8397a086a58885211057d21d6e80ec2e49","href":"https://static.observableusercontent.com/files/85ccb7e28d1f2eeeb994823356e54753be3987abd9a0e9a7f3972842d3a82ffd3ba0b736974675376b75033399c5fb8397a086a58885211057d21d6e80ec2e49","name":"gadm36_VNM_1.json","type":"application/json","lastModified":1586471907466.614,"size":605313}] 2f:{"title":"Tracking COVID-19 Cases in Vietnam","cells":[{"id":820,"value":"md`# Tracking COVID-19 Cases in Vietnam`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1151,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"controls = html`\n

${viewof day}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1282,"value":"md`

\n___\n\n## Appendix\n\nTechnical gobbledygook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2284,"value":"cellInspection","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2062,"value":"viewof refresh = button({\n value: \"Reload\",\n description: \"Hit me, baby, one more time.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2339,"value":"md`#### [Confirmed cases](${confirmedUrl})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"// Confirmed_CoH_CUMSUM\nconfirmed = {\n refresh;\n return preprocess(urlHead + \"/\" + confirmedUrl);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2379,"value":"md`#### [Confirmed cases (non-cumulative)](${confirmedNonCumUrl})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1566,"value":"// Confirmed_MoH\nconfirmedNonCum = {\n refresh;\n return preprocess(urlHead + \"/\" + confirmedNonCumUrl, { p: false, t: true });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2390,"value":"md`#### [Recoveries](${recoveredUrl})`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2402,"value":"md`#### [Deaths](${deceasedUrl})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"// Deceased_CUMSUM\ndeceased = {\n refresh;\n return preprocess(urlHead + \"/\" + deceasedUrl);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2408,"value":"md`#### [Events](${eventsUrl})`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1287,"value":"md`
\n### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2578,"value":"import { cellInspection } from \"@duynguyen1678/helper-gifs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"import { callout } from \"@d3/line-chart-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2059,"value":"import { button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"import { radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"import { legend as heatLegend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"md`
\n### General`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2552,"value":"urlHead = \"https://duynguyen1678-cors.herokuapp.com\" // CORS","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":929,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":877,"value":"height = 760","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"dateFormat = \"%m/%d/%Y\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":918,"value":"startDate = confirmed.provinces[0][0].date","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"places = [\"Hà Nội\", \"Hồ Chí Minh\", \"Đà Nẵng\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"dates = dateRange(startDate, confirmed.totals[confirmed.totals.length - 1].date)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"numFormat = d3.format(\",\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1744,"value":"function valFormat(n) {\n return `${numFormat(n)} ${n === 1 ? \"case\" : \"cases\"}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2201,"value":"dateStringFormat = date =>\n date.toLocaleString(undefined, {\n month: \"long\",\n day: \"numeric\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":972,"value":"function getMostRecent(data) {\n return data[data.length - 1];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":975,"value":"function getMaxCases(data) {\n return d3.max(getMostRecent(data), d => d.value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1292,"value":"md`
\n### Bubble Map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"vietnam = FileAttachment(\"gadm36_VNM_1.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"provinces = topojson.feature(vietnam, vietnam.objects.gadm36_VNM_1)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1623,"value":"archipelagoes = [\"Q.Đ. Hoàng Sa\", \"Q.Đ. Trường Sa\"]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1247,"value":"mapOffset = width - 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"maxRadius = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"maxConfirmed = getMaxCases(confirmed.provinces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":962,"value":"legendRadii = [10, 50, 150, 300]","pinned":false,"hidden":false,"mode":"ojs"},{"id":915,"value":"delay = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"mutable index = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"dayUpdate = dashboard.update(index)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1094,"value":"indexUpdate = {\n mutable index = dates.indexOf(day);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"projection = d3.geoMercator().fitHeight(height, provinces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"colorScale = (maxCases, colorRange) =>\n d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range(colorRange)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"radius = maxCases =>\n d3\n .scaleSqrt()\n .domain([0, maxCases])\n .range([0, maxRadius])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":1148,"value":"confirmedRadius = radius(maxConfirmed)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1814,"value":"md`
\n### Heatmap`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1856,"value":"heatOffset = 92","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"heatMargin = ({ top: 0, right: 40, bottom: 50, left: 80 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1949,"value":"heatWidth = mapOffset","pinned":false,"hidden":false,"mode":"ojs"},{"id":1942,"value":"heatHeight = height - heatOffset - heatMargin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":1966,"value":"cellWidth = (x.range()[1] - x.range()[0]) / dates.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1970,"value":"cellHeight = y.bandwidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"tHeight = 12","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1912,"value":"md`
\n### Scratch`","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W35","stdlib":"1","titling":"auto"}