2d:null 2e:["$","title",null,{"children":"Monitoring COVID19 Effekte | Matthias Mazenauer | Observable"}] 33:T14c8,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const axisrGr = svg.append('g').attr('transform', 'translate(-1.5,-0.5)'); const chartGr = svg.append("g"); const tooltip = svg.append("g"); let weeks = d3.timeWeek .every(2) .range(xScale.domain()[0], xScale.domain()[1]); axisrGr .selectAll('rect.weeks') .data(weeks) .enter() .append('rect') .attr('x', d => xScale(d)) .attr('class', 'weeks') .attr('y', yScale.range()[1]) .attr('height', yScale.range()[0] - yScale.range()[1]) .attr('width', (xScale(weeks[1]) - xScale(weeks[0])) / 2) .attr('fill', 'whitesmoke'); let xAxisDay = axisrGr.append("g").call(xAxis); let xAxisMonth = axisrGr.append("g").call(xAxisM); xAxisDay.selectAll("path").attr('stroke', 'none'); xAxisDay.selectAll("line").attr('stroke', 'none'); xAxisDay .selectAll("text") .attr('text-anchor', 'middle') .attr('transform', 'translate(0,5)'); xAxisMonth.selectAll("path").attr('stroke', 'none'); xAxisMonth .selectAll("text") .attr('text-anchor', 'start') .attr('transform', 'translate(5,-15)'); chartGr .append('line') .attr('x1', xScale.range()[0]) .attr('x2', xScale.range()[1]) .attr('y1', yScale(0)) .attr('y2', yScale(0)) .attr("stroke", "black") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); let yAxisGr = axisrGr .append("g") .call(yAxis) .attr('transform', 'translate(' + (width - margin.right) + ',0)'); yAxisGr .selectAll('line') .attr('stroke-width', 0.5) .attr('stroke', 'lightgrey'); chartGr .append('line') .attr('x1', xScale(parseTime('2020-03-13'))) .attr('x2', xScale(parseTime('2020-03-13'))) .attr('y1', yScale.range()[0]) .attr('y2', yScale.range()[1]) .attr("stroke", "darkorange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); chartGr .append('text') .attr('y', '-0.5em') .attr('x', -4) .attr('font-size', '12px') .attr('text-anchor', 'end') .attr("fill", "darkorange") .text('1. Phase: Schullschliessungen etc.') .attr( 'transform', 'translate(' + xScale(parseTime("2020-03-13")) + ',' + margin.top + ')rotate(-90)' ) .style('font-family', 'Helvetica, Arial, sans-serif'); chartGr .append('line') .attr('x1', xScale(parseTime('2020-03-16'))) .attr('x2', xScale(parseTime('2020-03-16'))) .attr('y1', yScale.range()[0]) .attr('y2', yScale.range()[1]) .attr("stroke", "darkorange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); chartGr .append('text') .attr('y', '-0.5em') .attr('x', -4) .attr('font-size', '12px') .attr('text-anchor', 'end') .attr("fill", "darkorange") .text('Erste Lockerungsmassnahmen') .attr( 'transform', 'translate(' + xScale(parseTime("2020-04-27")) + ',' + margin.top + ')rotate(-90)' ) .style('font-family', 'Helvetica, Arial, sans-serif'); chartGr .append('line') .attr('x1', xScale(parseTime('2020-04-27'))) .attr('x2', xScale(parseTime('2020-04-27'))) .attr('y1', yScale.range()[0]) .attr('y2', yScale.range()[1]) .attr("stroke", "darkorange") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); chartGr .append('text') .attr('y', '-0.5em') .attr('x', -4) .attr('font-size', '12px') .attr('text-anchor', 'end') .attr("fill", "darkorange") .text('1. Phase: Schullschliessungen etc.') .attr( 'transform', 'translate(' + xScale(parseTime("2020-03-13")) + ',' + margin.top + ')rotate(-90)' ) .style('font-family', 'Helvetica, Arial, sans-serif'); chartGr .append("path") .datum(dataInd) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); chartGr .append('text') .attr('y', 0) //height-20) .attr('dy', '1.2em') .attr('x', width - margin.right) .text('Quelle: ' + dataInd[0].source) .attr('font-size', '14px') .attr('text-anchor', 'end') .style('font-family', 'Helvetica, Arial, sans-serif'); chartGr .append('text') .attr('y', 0) //height-20) .attr('dy', '1.2em') .attr('x', margin.left) .text('Einheit: ' + dataInd[0].unit) .attr('font-size', '14px') .attr('text-anchor', 'start') .style('font-family', 'Helvetica, Arial, sans-serif'); svg.on("touchmove mousemove", function() { const { date, value } = bisect(d3.mouse(this)[0]); tooltip .attr( "transform", `translate(${xScale(parseTime(date))},${yScale(+value)})` ) .call( callout, `${(+value).toLocaleString(undefined, { style: "decimal" })} ${parseTime(date).toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric" })}` ); }); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }34:[{"id":"1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","href":"https://static.observableusercontent.com/files/1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","name":"statistisches_amt_kt_zh.png","type":"image/png","lastModified":1587708171211.567,"size":10045}] 31:{"id":"443f9355c686f7b3","slug":"monitoring-covid19-effekte","title":"Monitoring COVID19 Effekte","thumbnail":"e1ca2cbf325d4ba2e89ab3b318f102584cb4326793bf27217c41a8c490b33a60","access_level":"public","create_time":"$D2020-04-24T06:02:51.211Z","update_time":"$D2020-04-29T12:17:33.539Z","view_time":null,"first_public_time":"$D2020-04-29T12:17:39.109Z","has_unpublished_edits":null,"fork":{"id":"990fcc14e7e17780","slug":"monitoring-covid19-effekte","title":"","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":"starter_2024"},"version":574,"publish_version":574,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Monitoring COVID19 Effekte","cells":[{"id":0,"value":"md`\n

${Object.assign(await FileAttachment(\"statistisches_amt_kt_zh.png\").image(), { alt: 'Girl reading', style: 'width: 100%; max-width: 440px;' })}\n\n# Monitoring COVID19 Effekte\n### Statistisches Amt Kanton Zürich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"indikator = \"Bildung, Nutzung der Lernplattform ILIAS, durchschnittliche parallele Sessions, ZH\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"md`Quelle: ${dataInd[0].source}, Aktualisierung: ${dataInd[0].update}, Einheit: ${dataInd[0].unit}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"md`## Weitere Informationen:\nDas Monitoring bündelt tagesaktuelle Datenreihen, welche die Entwicklungen beleuchten sollen, die durch die Corona-Krise in allen Lebensbereichen ausgelöst werden.
\n
\n### Wissenschaftlich–fachliche Aspekte\nDr. Peter Moser
\nStv. Amtschef Statistisches Amt des Kantons Zürich
\nLeiter Analysen & Studien
\n043 259 75 35
\n
\n### Technische Aspekte\nKatharina Kälin
\nwissenschaftliche Mitarbeiterin
\nStatistisches Amt des Kantons Zürich
\n043 259 75 08
\n
\n[Github Seite zum Projekt](https://statistikzh.github.io/covid19monitoring/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"md`[Download der Daten](https://raw.githubusercontent.com/statistikZH/covid19monitoring/master/covid19socialmonitoring.csv)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`## Daten`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"dataAll = d3.csv(\"https://raw.githubusercontent.com/bildungsmonitoringZH/covid19_edu_phzh/master/Bildung_IliasNutzung.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"metadata = d3.csv(\"https://raw.githubusercontent.com/statistikZH/covid19monitoring/master/Metadata.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"metadata.sort((a,b) => (+a.sort > +b.sort) ? 1 : ((+b.sort > +a.sort) ? -1 : 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"indicators = metadata.map(a => a.topic+\", \"+a.variable_long+\", \"+a.location);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"filterData = function(indicator) {\n let dataF = dataAll.filter(function(el) {\n return el.topic+', '+el.variable_long+', '+el.location == indicator;\n });\n return dataF;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"dataInd = filterData(indikator).sort(sortAscD)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## Funktionen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":462,"value":"bisect = {\n const bisect = d3.bisector(d => parseTime(d.date)).left;\n return mx => {\n const date = d3.timeDay.offset(xScale.invert(mx),1);\n const index = bisect(dataInd, date, 1);\n const a = dataInd[index - 1];\n const b = dataInd[index];\n return date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"sortAscD = function(a, b) {\n return parseTime(a.date) - parseTime(b.date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"sortAscA = function(a, b) {\n return a - b;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"line = d3.line()\n .defined(d => !isNaN(d.value))\n .x(d => xScale(parseTime(d.date)))\n .y(d => yScale(+d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"xScale = d3.scaleUtc()\n .domain(d3.extent(dataInd, d => parseTime(d.date)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale).ticks(width / 100).tickSizeOuter(0).tickFormat(multiFormat))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"xAxisM = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom+30})`)\n .call(d3.axisBottom(xScale).tickSize('15').ticks(d3.timeMonth).tickSizeOuter(0)\n .tickFormat(multiFormat))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"xAxisW = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom+30})`)\n .call(d3.axisTop(xScale).tickSize('15').ticks(d3.timeWeek).tickSize(height).tickSizeOuter(0)\n .tickFormat(multiFormat))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"rangeDiv = (d3.extent(dataInd, d => +d.value)[1]-d3.extent(dataInd, d => +d.value)[0])*0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"yScale = d3.scaleLinear()\n .domain([(d3.extent(dataInd, d => +d.value)[0]-rangeDiv),(d3.extent(dataInd, d => +d.value)[1]+rangeDiv)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale).tickSize(width-margin.right-margin.left))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(dataInd.date))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`## Parameter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"ch_DE = d3.timeFormatLocale({\n \"decimal\": \".\",\n \"thousands\": \"'\",\n\t\"grouping\": [3],\n\t\"currency\": [\"CHF\", \" \"],\n\t\"dateTime\": \"%a %b %e %X %Y\",\n\t\"date\": \"%d.%m.%Y\",\n\t\"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\"],\n\t\"shortDays\": [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n\t\"months\": [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"],\n\t\"shortMonths\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"chFormat = d3.formatLocale(ch_DE);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"d3.formatDefaultLocale(ch_DE);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"formatDay = ch_DE.format(\"%a %d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"formatMonth = ch_DE.format(\"%B\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"formatYear = ch_DE.format(\"%Y\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"formatWeek = ch_DE.format(\"%b %d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"function multiFormat(date) {\n return (d3.timeMonth(date) < date ? (d3.timeWeek(date) < date ? formatDay : formatWeek)\n : d3.timeYear(date) < date ? formatMonth\n : formatYear)(date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"margin = ({top: 30, right: 30, bottom: 60, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`