34:["$","title",null,{"children":"☀️Covid admissions in Belgian hospitals - 2020 and 2021 | Antoine Dejonckheere | Observable"}] 3c:T1074,chart = { const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); const data2020 = data.filter((d) => moment(d.date).format("YYYY") === "2020"); const data2021 = data.filter((d) => moment(d.date).format("YYYY") === "2021"); const data2022 = data.filter((d) => moment(d.date).format("YYYY") === "2022"); const data2023 = data.filter((d) => moment(d.date).format("YYYY") === "2023"); // background color svg .append("rect") .attr("transform", `translate(-${width / 2}, -${height / 2})`) .attr("width", width) .attr("height", height) .style("fill", "white"); svg .append("text") .attr("class", "title") .attr("transform", `translate(0, ${margin - height / 2})`) .attr("dy", "1em") .style("fill", "var(--font-color-light-theme)") .text(title); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("path") .attr("class", "line") .attr("fill", "none") .style("stroke-width", 3) .attr("d", line.radius((d) => y(d[valueColumn]))(data2020)) .style("stroke", color2020); svg .append("path") .attr("class", "line") .attr("fill", "none") .style("stroke-width", 3) .attr("d", line.radius((d) => y(d[valueColumn]))(data2021)) .style("stroke", color2021); svg .append("path") .attr("class", "line") .attr("fill", "none") .style("stroke-width", 3) .attr("d", line.radius((d) => y(d[valueColumn]))(data2022)) .style("stroke", color2022); svg .append("path") .attr("class", "line") .attr("fill", "none") .style("stroke-width", 3) .attr("d", line.radius((d) => y(d[valueColumn]))(data2023)) .style("stroke", color2023); svg .append("g") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .call((g) => g.selectAll("g").data(y.ticks().reverse()).join("g").call(yLabels) ); const legend = svg .append("g") .attr("transform", `translate(${width / 2 - 100} ${-height / 2 + 100})`); const legend2021 = legend.append("g"); const legend2022 = legend.append("g"); const legend2023 = legend.append("g"); const legend2020 = legend.append("g"); legend2020 .append("rect") .attr("width", 24) .attr("height", 24) .attr("fill", color2020); legend2020 .append("text") .attr("dy", "18") .attr("transform", "translate(28 0)") .text("2020"); legend2022 .append("rect") .attr("width", 24) .attr("height", 24) .attr("transform", `translate(0 48)`) .attr("fill", color2022); legend2022 .append("text") .attr("dy", "18") .attr("transform", "translate(28 48)") .text("2022"); legend2021 .append("rect") .attr("width", 24) .attr("height", 24) .attr("transform", `translate(0 24)`) .attr("fill", color2021); legend2021 .append("text") .attr("dy", "18") .attr("transform", "translate(28 24)") .text("2021"); legend2023 .append("rect") .attr("width", 24) .attr("height", 24) .attr("transform", "translate(0 72)") .attr("fill", color2023); legend2023 .append("text") .attr("dy", "18") .attr("transform", "translate(28 72)") .text("2023"); const tooltip = svg.append("g").attr("class", "tooltip"); tooltip .append("circle") .attr("class", "tooltip-circle") .attr("x", 800) .attr("y", 800) .attr("r", 4); svg.on("touchmove mousemove", function (event) { const date = bisect(d3.pointer(event, this)).date; const value = bisect(d3.pointer(event, this))[valueColumn]; const rad = x(date); const xTrans = y(value) * Math.cos(rad); const yTrans = y(value) * Math.sin(rad); tooltip .attr( "transform", `rotate(-90) translate(${xTrans},${yTrans}) rotate(90)` ) .call( callout, `${formatValue(value)} ${formatDate(date)}` ); tooltip.select(".tooltip-circle").attr("x", xTrans).attr("y", yTrans); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }3d:T407,callout = (g, value) => { if (!value) return g.style("display", "none"); g.style("display", null) .style("pointer-events", "none") .style("font", "10px sans-serif"); const path = g.selectAll("path") .data([null]) .join("path") .style("fill", "white") .style("opacity", 0.9) .style("stroke", "var(--font-color-light-theme)"); const text = g.selectAll("text") .data([null]) .join("text") .attr("class", "tooltip-text") .style("fill", "var(--font-color-light-theme)") .call(text => text .selectAll("tspan") .data((value + "").split(/\n/)) .join("tspan") .attr("class", "tooltip") .attr("x", 0) .attr("y", (d, i) => `${i * 1.1}em`) .style("font-weight", (_, i) => i ? null : "bold") .text((d) => d)); const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); }3e:T4e4,xAxis = g => g .attr("font-family", "sans-serif") .attr("font-size", 10) .call(g => g.selectAll("g") .data(x.ticks()) .join("g") .each((d, i) => d.id = DOM.uid("month")) .call(g => g.append("path") .attr("stroke", "var(--font-color-light-theme)" ) .attr("stroke-opacity", 0.2) .attr("d", d => ` M${d3.pointRadial(x(d), input2.innerRadius)} L${d3.pointRadial(x(d), input2.outerRadius)} `)) .call(g => g .append("path") .attr("id", d => d.id.id) .datum(d => [d, d3.utcMonth.offset(d, 1)]) .attr("fill", "none") .attr("d", (d, i) => i > 2 && i < 9 ? getFlippedArc(d,i) : getArc(d,i))) .call(g => g.append("text") .attr("class", "x-label") .attr("dy", (d, i) => i > 2 && i < 9 ? ".65em" : 0) .style("fill", "var(--font-color-light-theme)") .append("textPath") .attr("startOffset", "50%") .attr("xlink:href", d => d.id.href) .text((d,i) => { return moment(d).format("MMMM") } )) .call(xTicks) )3f:T5be,function getDefsForSVG(svg){ /* const defs = svg.append("defs"); // 1) radial gradient const rg = defs .append("radialGradient") .attr("gradientUnits", "userSpaceOnUse") .attr("id", "my-gradient") .attr("cx", 0) .attr("cy", 0) .attr("fr", input.innerRadius) .attr("r", input.outerRadius); rg.append("stop") .attr("offset", input.offset1) .attr("stop-color", input.color1); rg.append("stop") .attr("offset", input.offset2) .attr("stop-color", input.color2); rg.append("stop") .attr("offset", input.offset3) .attr("stop-color", input.color3); // 2) #glow filter const filter1 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("x", -width/ 2) .attr("y", -height/2) .attr("id","glow"); // glow filter as proposed by Nadieh Bremer filter1.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","14.5") .attr("result","coloredBlur"); const feMerge = filter1.append("feMerge"); feMerge.append("feMergeNode") .attr("in","coloredBlur"); feMerge.append("feMergeNode") .attr("in","SourceGraphic"); // 3) #glow2 simple alternative glow filter const filter2 = defs.append("filter") .attr("filterUnits", "userSpaceOnUse") .attr("x", -width/ 2) .attr("y", -height/2) .attr("id","glow2"); filter2.append("feGaussianBlur") .attr("class", "blur") .attr("stdDeviation","4.5"); return svg;*/ }40:[] 38:{"id":"27d26f0cfd432235","slug":"covid-admissions-in-belgian-hospitals-2020-and-2021","title":"☀️Covid admissions in Belgian hospitals - 2020 and 2021","thumbnail":"1b0a935d7c85e8ffa0bda7e52ef247bc9b613e68e02b5e179c8a5de7450b2415","access_level":"public","create_time":"$D2021-03-12T16:37:09.502Z","update_time":"$D2023-03-13T14:06:32.629Z","view_time":null,"first_public_time":"$D2021-03-12T16:38:02.442Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"fa72288832f83617","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":"starter_2024","bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false},"version":2233,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"bio":"software developer | data scientist | IT Ninja | Physics engineer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"73f8559e29a9409c","login":"antoinedejonckheere","name":"Antoine Dejonckheere","avatar_url":"https://avatars-next.observableusercontent.com/dd760212f09e049ca5106ce0ac099d575f4c966e71c93d4e47e052bcfd6097d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b30753c840f7695a","slug":"covid-19","title":"Covid 19 🇧🇪","owner":{"id":"fa72288832f83617","login":"antoinedejonckheere","name":"Antoine Dejonckheere"}},"type":"notebook","body":{"titling":"auto","title":"☀️Covid admissions in Belgian hospitals - 2020 and 2021","cells":[{"id":1,"value":"md`# ☀️Covid admissions in Belgian hospitals - 2020 and 2021 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"title = \"Daily new admissions for covid 19 in Belgium\" // update your title here","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"viewof input2 = inputsGroup(\n [\n [\n slider({ min: 0, max: width / 2 - margin - 100, step: 1, value: width / 9, title: \"radius of y min\", }),\n slider({ min: 0, max: width / 2 - margin - 100, step: 1, value: width / 2 - margin - 100, title: \"radius of y max\",}),\n ],\n [\n slider({ min: min < 0 ? min : 0, max: max, step: 1, value: min, title: \"y min\", }),\n slider({ min: min < 0 ? min : 0, max: Math.ceil(max/10)*10, step: 1, value: max, title: \"y max\", }),\n ],\n [\n select({ title: \"y axis scale\", options: [\"Linear\", \"Pow\", \"Sqrt\", \"Log\", \"Radial\"], value: \"Linear\", }) \n ],\n ], \n [\n ['innerRadius','outerRadius',],\n ['yMin', 'yMax'],\n ['scale', 'yLabels'], \n ]\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"md`
\n### Additional configurations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1812,"value":"locale = \"en\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1649,"value":"function formatDate(date) {\n return date.toLocaleString(locale, {\n month: \"long\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"function formatValue(value) {\n return value.toLocaleString(locale, \n // add optional formatting options here, see\n // https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString\n // e.g.: { style: \"currency\", currency: \"USD\" } \n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1103,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2072,"value":"color2020 = \"#263f9c\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2077,"value":"color2021 = \"#ff0011\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2216,"value":"color2022 = \"#00ff00\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"color2023 = \"#00ffff\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"md`## Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"md`\nAs always, this would not be possible without some of the amazing stuff which people put out there!\n\n🙏 [Mike Bostock](https://observablehq.com/@mbostock) for the [radial area chart](https://observablehq.com/@d3/radial-area-chart), [file input](https://observablehq.com/@mbostock/file-input-with-initial-value) and the [tooltip](https://observablehq.com/@d3/line-chart-with-tooltip)
\n🙏 [David Bumbeishvili](https://observablehq.com/@bumbeishvili) for the [inputs groups](https://observablehq.com/@bumbeishvili/input-groups)
\n🙏 [Nadieh Bremer](https://observablehq.com/@nbremer) for the [placing text on arcs](https://www.visualcinnamon.com/2015/09/placing-text-on-arcs), [her reference and explanation](https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization) of [Drew Noakes' glow effect solution](https://stackoverflow.com/questions/9630008/how-can-i-create-a-glow-around-a-rectangle-with-svg)` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1251,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1355,"value":"md`#### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1622,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return xy => {\n const date = x.invert(Math.PI - Math.atan2(xy[0],xy[1]));\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"yAxis = g => g\n .attr(\"text-anchor\", \"middle\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .call(g => g.selectAll(\"g\")\n .data(y.ticks().reverse())\n .join(\"g\")\n .attr(\"class\", \"y-axis\")\n .attr(\"fill\", \"none\")\n .call(g => g.append(\"circle\")\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"stroke\",'#333')\n .attr(\"r\", y)) \n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1558,"value":"yLabels = g => g.append(\"text\")\n .attr(\"y\", d => -y(d))\n .attr(\"dy\", \"0.35em\")\n .attr(\"stroke\", \"#fff\")\n .style(\"stroke-width\", 5)\n .style(\"opacity\", 1)\n .text((x, i) => `${formatValue(x.toFixed(0))}${i ? \"\" : \"\"}`)\n .clone(true)\n .attr(\"y\", d => y(d))\n .style(\"opacity\", 0)\n .selectAll(function() { return [this, this.previousSibling]; })\n .clone(true)\n .attr(\"fill\", \"currentColor\")\n .attr(\"stroke\", \"none\")\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"xTicks = g => g.selectAll(\".group-tick\")\n .data(d => groupTicks(d, 0)) // Controls the number of ticks: one tick each xTicksSpread\n .join(\"g\")\n .attr(\"transform\", d => \"rotate(\" + (d.angle * 180 / Math.PI - 90) + \") translate(\" + radius + \",0)\") \n .call(g => g.append(\"line\") // ticks\n .style(\"stroke\", \"var(--font-color-light-theme)\")\n .attr(\"x2\", 6))\n .call(g => g.append(\"text\") // ticks labels\n .attr(\"class\", \"x-tick\")\n .attr(\"transform\", d => d.month < 6 ? \"translate(8,0)\" : \"rotate(180)translate(-8,0)\")\n .style(\"text-anchor\", d => d.month < 6 ? \"start\" : \"end\")\n .style(\"fill\", \"var(--font-color-light-theme)\")\n .attr(\"dy\", \"0.35em\")\n .text(d => {\n return d.value\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"function groupTicks(d, step) {\n const lastDay = Date.UTC(year, d.getUTCMonth() + 1, 0);\n const numberDays = new Date(lastDay).getDate();\n const endAngle = x(lastDay);\n const startAngle = x(d);\n const k = (endAngle - startAngle) / (numberDays - 1);\n return d3.range(1, numberDays + 1, step).map(function(value) {\n return {value: value, angle: (value - 1) * k + startAngle, month: d.getUTCMonth()};\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1450,"value":"getArc = ([a, b]) => {\n const radiusL = radius + 30; \n return `\n M${d3.pointRadial(x(a), radiusL)}\n A${radiusL},${radiusL} 0,0,1 ${d3.pointRadial(x(b), radiusL)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1458,"value":"getFlippedArc = ([a, b]) => {\n const radiusL = radius + 30; \n return `\n M${d3.pointRadial(x(b), radiusL)}\n A${radiusL},${radiusL} 0,0,0 ${d3.pointRadial(x(a), radiusL)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x = {\n return d3.scaleUtc()\n .domain([new moment().subtract(1, \"years\").startOf(\"day\").valueOf(), new moment().startOf(\"day\").valueOf()])\n .range([0, 2 * Math.PI])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2012,"value":"new moment().subtract(1, 'years').startOf(\"day\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"moment = require(\"moment\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1031,"value":"y = input2.scale === \"Linear\" ? d3.scaleLinear()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) : \n input2.scale === \"Log\" ? d3.scaleLog()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Pow\" ? d3.scalePow().exponent(2)\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Sqrt\" ? d3.scalePow().exponent(0.5)\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) :\n input2.scale === \"Radial\" ? d3.scaleRadial()\n .domain([input2.yMin, input2.yMax])\n .range([input2.innerRadius, input2.outerRadius]) : 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"line = d3.lineRadial()\n .curve(d3.curveLinear)\n .angle(d => x(d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"area = d3.areaRadial()\n .curve(d3.curveLinearClosed)\n .angle(d => x(d.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"md`#### Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"valueColumn = \"newIn\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1495,"value":"valueUnit = \" \" + (defaultData ? \"°F\" : Object.keys(data[0])[1]); // choose your value unit which will be shown for the outmost tick","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1898,"value":"months = {\n const format = new Intl.DateTimeFormat(locale, { month: 'long' })\n let months = []\n for (let month = 0; month < 12; month++) {\n const testDate = new Date(Date.UTC(2000, month, 1, 0, 0, 0));\n months.push(format.format(testDate))\n }\n return months;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"margin = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"min = d3.min(data, d => d[valueColumn])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"max = d3.max(data, d => d[valueColumn])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"year = +d3.timeFormat(\"%Y\")(data[0].date)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"radius = Math.max(input2.outerRadius, input2.innerRadius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"md`#### Data processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"data = !defaultData ? rawdata : \n Array.from(d3.rollup(\n rawdata, \n v => ({\n date: new Date(Date.UTC(2000, v[0].DATE.getUTCMonth(), v[0].DATE.getUTCDate())),\n savg: d3.mean(v, d => d.TAVG || NaN),\n value: d3.mean(v, d => d.TAVG || NaN),\n min: d3.mean(v, d => d.TMIN || NaN),\n max: d3.mean(v, d => d.TMAX || NaN),\n minmin: d3.min(v, d => d.TMIN || NaN),\n maxmax: d3.max(v, d => d.TMAX || NaN)\n }), \n d => `${d.DATE.getUTCMonth()}-${d.DATE.getUTCDate()}`\n).values())\n .sort((a, b) => d3.ascending(a.date, b.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"rawdata = initData // d3.csvParse(await Files.text(file), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1981,"value":"import { dataWithMovingAverageAndIncrease } from \"@antoinedejonckheere/first-wave-vs-second-wave-hospital-admission-dynamics\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1983,"value":"initData = dataWithMovingAverageAndIncrease.map(d => ({\n date: new Date(d.date),\n newIn: d.newIn,\n newIn7MVA: d.newIn7MVA\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2221,"value":"dataWithMovingAverageAndIncrease","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"defaultData = (rawdata[0].TAVG === 49) // hack to check if new data is loaded","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1238,"value":"md`#### Libraries and imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import { radio, select, slider, color, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"import {inputsGroup} from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"import {fileInput} from \"@mbostock/file-input-with-initial-value\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 33:null