31:T50a,excessDeaths = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-miterlimit", 1); svg .append("path") .attr("fill", "grey") .attr("fill-opacity", 0.4) .attr("d", area(contextData)); svg .append("path") .attr("fill", "orange") .attr("fill-opacity", 0.4) .attr("d", area(data)); svg .append('rect') .attr('x', 0) .attr('y', y(0)) .attr('fill', 'white') .attr('width', width) .attr('height', 200); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(yAxisRight); svg.append("g").call(grid); svg .append("path") .attr("fill", "none") .attr('stroke', 'grey') .attr('stroke-width', 1.5) // .attr("fill-opacity", 0.4) .attr("d", line(contextData)); svg .append("path") .attr("fill", "none") .attr('stroke', 'orange') .attr('stroke-width', 1.5) .attr("d", line(data)); svg .append('path') .attr("fill", "grey") .attr("fill-opacity", 0.15) .attr("d", p95area(contextData)); svg .append('path') .attr("fill", "grey") .attr("fill-opacity", 0.15) .attr("d", p95area(data)); return svg.node(); }32:T906,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }33:[{"id":"0bc1b8557ce13e1db9c8e9e2e1c216af30b42067ffc28b36862e60944d84bc061b69b61de85f91f976886e7f38ff20d8cdab3d1bcd70c3e3b59e87d44456940a","href":"https://static.observableusercontent.com/files/0bc1b8557ce13e1db9c8e9e2e1c216af30b42067ffc28b36862e60944d84bc061b69b61de85f91f976886e7f38ff20d8cdab3d1bcd70c3e3b59e87d44456940a","name":"outputs_data_posterior.csv","type":"text/csv","lastModified":1612014338635.87,"size":30324},{"id":"1342d9948c4a2e89de8266b4f6ceee916d972690c4cbc45b81541f3901f6870944e1ce0925a967a3bd52e31183b750c83b773694d9e3e0684c1cf916b9aa0278","href":"https://static.observableusercontent.com/files/1342d9948c4a2e89de8266b4f6ceee916d972690c4cbc45b81541f3901f6870944e1ce0925a967a3bd52e31183b750c83b773694d9e3e0684c1cf916b9aa0278","name":"data_eurostat@1.csv","type":"text/csv","lastModified":1622200224240.87,"size":47236},{"id":"d6142574387050fb29e5c9e3ab310631bffd2619853f16a09d1643ca1653e53a6204ba906b4f08fc04a6c681a296dae2b1ceab4c9bfa4194aa406c721099891a","href":"https://static.observableusercontent.com/files/d6142574387050fb29e5c9e3ab310631bffd2619853f16a09d1643ca1653e53a6204ba906b4f08fc04a6c681a296dae2b1ceab4c9bfa4194aa406c721099891a","name":"data_data_eurostat-2-1-1-3@1.csv","type":"text/csv","lastModified":1643618117053.583,"size":45616},{"id":"85c17f77138813d914fa7300b490ae5e7fed7456d14f7fda0464ec26282f089b80e2192a9b827a52171e8e3da0f7dbb867e6aaa87ec819b44cc3c31b1ac46597","href":"https://static.observableusercontent.com/files/85c17f77138813d914fa7300b490ae5e7fed7456d14f7fda0464ec26282f089b80e2192a9b827a52171e8e3da0f7dbb867e6aaa87ec819b44cc3c31b1ac46597","name":"data_data_eurostat-2-1-1-3.csv","type":"text/csv","lastModified":1639736958970.818,"size":45416}] 2f:{"title":"Excess mortality","cells":[{"id":0,"value":"md`# Excess mortality\n\nI've seen this type of graphic on NYT, wanted to recreate it for Croatia numbers. Grey area is p95 interval, calculated on the period 2000-2019.\n\nData: @dataspekt (https://gitlab.com/dataspekt/hred2020)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"title = {\n return md`# Višak smrtnosti\n\nSiva zona je interval pouzdanosti p95, izračunat na temelju podataka o smrtnosti od 2000. do 2019. Graf prikazuje postotno odstupanje od očekivane vrijednosti za pojedini tjedan\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof d1 = date({\n title: \"Choose start date\",\n min: \"2001-01-01\",\n max: \"2019-12-31\",\n value: \"2018-01-01\",\n description: \"Values need to be in the interval [2001,2019]\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"area = d3\n .area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))\n .curve(d3.curveCardinal)","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"p95area = d3\n .area()\n .x(d => x(d.date))\n .y0(d => y(d.fitted_low))\n .y1(d => y(d.fitted_high))\n .curve(d3.curveCardinal)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"line = d3\n .line()\n .x(d => x(d.date))\n .y(d => y(d.value))\n .curve(d3.curveCardinal)","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"grid = g =>\n g.attr(\"stroke\", \"currentColor\").call(g =>\n g\n .append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right)\n .attr(\"stroke-opacity\", d => {\n if (d == 0) return 0.4;\n else return 0.1;\n })\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"yAxisRight = g =>\n g\n .attr(\"transform\", `translate(${width - margin.right},0)`)\n .call(d3.axisRight(y).ticks(null, \",d\"))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .append(\"tspan\")\n .text(data.metric)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \",d\"))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .append(\"tspan\")\n .text(data.metric)\n )\n .call(g =>\n g\n .append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 15)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"maxValue = d3.max([\n d3.max(data, d => d.value),\n d3.max(data, d => d.fitted_high),\n d3.max(contextData, d => d.value),\n d3.max(contextData, d => d.fitted_high)\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"d3.min(contextData, d => d.fitted_low)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"minValue = d3.min([\n d3.min(data, d => d.value),\n d3.min(data, d => d.fitted_low),\n d3.min(contextData, d => d.value),\n d3.min(contextData, d => d.fitted_low)\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"y = d3\n .scaleLinear()\n .domain([minValue, maxValue])\n .rangeRound([height - margin.bottom, margin.top])\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"x = d3\n .scaleUtc()\n .domain([d3.min(contextData, d => d.date), d3.max(data, d => d.date)])\n .rangeRound([margin.left, width - margin.right])\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"data = {\n let retval = new Array();\n\n for (var i = 0; i < dataEurostat.length; i++) {\n const entry = dataEurostat[i];\n const fittedEntry = dataPosterior.find(d => d.doy == entry.doy);\n retval.push({\n value: ((entry.deaths - fittedEntry.fitted) / fittedEntry.fitted) * 100,\n date: entry.date,\n fitted_low: (fittedEntry['fitted.lb'] / fittedEntry.fitted - 1) * 1000,\n fitted_high: (fittedEntry['fitted.ub'] / fittedEntry.fitted - 1) * 1000\n });\n }\n\n retval.y = \"↑ Postotno odstupanje od prosjeka\";\n retval.metric = \"%\";\n return retval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"contextData = {\n let retval = new Array();\n\n for (var i = 0; i < contextDataEurostat.length; i++) {\n const entry = contextDataEurostat[i];\n const fittedEntry = dataPosterior.find(d => d.doy == entry.doy);\n retval.push({\n value: ((entry.deaths - fittedEntry.fitted) / fittedEntry.fitted) * 100,\n date: entry.date,\n fitted_low: (fittedEntry['fitted.lb'] / fittedEntry.fitted - 1) * 1000,\n fitted_high: (fittedEntry['fitted.ub'] / fittedEntry.fitted - 1) * 1000\n });\n }\n\n retval.y = \"↑ Postotno odstupanje od prosjeka\";\n retval.metric = \"%\";\n return retval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"dataEurostat = {\n let retval = d3.csvParse(\n await FileAttachment(\"data_data_eurostat-2-1-1-3@1.csv\").text(),\n d3.autoType\n );\n\n retval = retval.filter(d => d.date >= new Date(2019, 11, 30));\n\n return retval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"contextDataEurostat = {\n let retval = d3.csvParse(\n await FileAttachment(\"data_eurostat@1.csv\").text(),\n d3.autoType\n );\n\n retval = retval.filter(\n d => d.date >= new Date(d1) && d.date <= new Date(2020, 0, 1)\n );\n\n return retval;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"dataPosterior = Object.assign(\n d3.csvParse(\n await FileAttachment(\"outputs_data_posterior.csv\").text(),\n d3.autoType\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"d3format = require(\"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"import { date } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}