25:null 26:["$","title",null,{"children":"Gesellschaftsmonitoring COVID 19 | cgrb | Observable"}] 2b:Tf8a,chart2 = { 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("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" })}` ); }); addLine( 'Besondere Lage: Verbot Grossveranstaltungen', "2020-02-28", chartGr, yScale, xScale ); addLine('Schulen geschlossen', "2020-03-11", chartGr, yScale, xScale); addLine( 'Ausserordentliche Lage: Lockdown', "2020-03-16", chartGr, yScale, xScale ); addLine( 'Erste Lockerungen: Coiffeure, Gartencenter etc.', "2020-04-25", chartGr, yScale, xScale ); addLine('Ende Lockdown', "2020-05-11", chartGr, yScale, xScale); addLine( 'Öffnung Tourismus & Freizeiteinrichtungen', "2020-06-06", chartGr, yScale, xScale ); addLine('Maskenpflicht ÖV', "2020-06-07", chartGr, yScale, xScale, 1); addLine('ZH: Maskenpflicht Läden', "2020-08-28", chartGr, yScale, xScale); addLine('Home-Office empfohlen', "2020-10-19", chartGr, yScale, xScale); addLine( 'Sperrstunde, erweiterte Maskenpflicht etc.', "2020-10-29", chartGr, yScale, xScale ); svg.on("touchend mouseleave", () => tooltip.call(callout, null)); return svg.node(); }2c:[{"id":"1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","href":"https://static.observableusercontent.com/files/1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","name":"statistisches_amt_kt_zh.png","type":"image/png","lastModified":1604648398259.347,"size":10045}] 29:{"id":"f1822953e27e8f0b","slug":"gesellschaftsmonitoring-covid-19/2","title":"Gesellschaftsmonitoring COVID 19","thumbnail":"eb8e96294f2a0b2f425149e5d79b67828ac268032465510f1c1c25759d6e5f59","access_level":"public","create_time":"$D2020-11-06T07:39:58.259Z","update_time":"$D2020-11-11T08:59:18.988Z","view_time":null,"first_public_time":"$D2020-11-11T08:56:03.862Z","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":"c365a64096212d04","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/9c462d01fa9cdefc59de658728a5180d59049d26d0bf92c2d5b62b3b0753d40d","tier":"starter_2024"},"version":799,"publish_version":799,"role":null,"authored":false,"authors":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Gesellschaftsmonitoring COVID 19","cells":[{"id":0,"value":"md`\n

${Object.assign(\n await FileAttachment(\"statistisches_amt_kt_zh.png\").image(),\n { alt: 'Girl reading', style: 'width: 100%; max-width: 440px;' }\n)}\n\n# Gesellschaftsmonitoring COVID 19\n### Statistisches Amt Kanton Zürich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof indikator = DOM.select(industries)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$2b","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/statistikZH/covid19monitoring/master/covid19socialmonitoring.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":788,"value":"industries = [\n ...Array.from(\n new Set(\n metadata.map(d => d.topic + \", \" + d.variable_long + \", \" + d.location)\n )\n ).sort()\n]","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"xScale = d3\n .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 =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(xScale)\n .ticks(width / 100)\n .tickSizeOuter(0)\n .tickFormat(multiFormat)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"xAxisM = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom + 30})`).call(\n d3\n .axisBottom(xScale)\n .tickSize('15')\n .ticks(d3.timeMonth)\n .tickSizeOuter(0)\n .tickFormat(multiFormat)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"xAxisW = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom + 30})`).call(\n d3\n .axisTop(xScale)\n .tickSize('15')\n .ticks(d3.timeWeek)\n .tickSize(height)\n .tickSizeOuter(0)\n .tickFormat(multiFormat)\n )","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\n .scaleLinear()\n .domain([\n d3.extent(dataInd, d => +d.value)[0] - rangeDiv,\n d3.extent(dataInd, d => +d.value)[1] + rangeDiv\n ])\n .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 =>\n 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 =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(dataInd.date)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"addLine = function(text, date, container, yScale, xScale, delta) {\n container\n .append('text')\n .attr('y', delta - 0.2 + 'em')\n .attr('x', -4)\n .attr('font-size', '12px')\n .attr('text-anchor', 'end')\n .attr(\"fill\", \"darkorange\")\n .text(text)\n .attr(\n 'transform',\n 'translate(' + xScale(parseTime(date)) + ',' + margin.top + ')rotate(-90)'\n )\n .style('font-family', 'Helvetica, Arial, sans-serif');\n\n container\n .append('line')\n .attr('x1', xScale(parseTime(date)))\n .attr('x2', xScale(parseTime(date)))\n .attr('y1', yScale.range()[0])\n .attr('y2', yScale.range()[1])\n .attr(\"stroke\", \"darkorange\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\");\n}","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":631,"value":"formatDayRead = ch_DE.format(\"%x\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"formatTime = d3.timeFormat(\"%Y-%m-%d\")","pinned":true,"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: 60, bottom: 60, left: 60 })","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":770,"value":"import { rangeSlider } from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`