2d:null 2e:["$","title",null,{"children":"COVID19: Tests pro Kalenderwoche | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:T1d77,chartPositivRate = { let height2 = 300, height1 = 220; let y2 = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.anteil_pos)]) .nice() .range([height2 - margin.bottom, margin.top]); let xAxis2 = (g) => g.attr("transform", `translate(0,${height2 - margin.bottom})`).call( d3 .axisBottom(xScale) .tickSizeOuter(0) .tickFormat((x) => x.split("-")[1]) .tickValues( xScale.domain().filter(function (d, i) { return !(i % 5); }) //.map(d => d.split('-')[1]) ) ); let yAxis2 = (g) => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisRight(y2) .tickSize(widthNow - margin.left - margin.right + 10) .tickFormat(d3.format(".1%")) .tickSizeOuter(0) ) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") ) .call((g) => g.selectAll(".tick text").attr("x", 2).attr("dy", -4)) .attr("text-anchor", "end"); let line = d3 .line() .defined((d) => !isNaN(d.anteil_pos)) .x((d) => xScale(d.woche_jahr)) .y((d) => y2(d.anteil_pos)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height1 + height2]) .attr("id", "STATchart1"); const events = svg.append("g"); const chart = svg.append("g").attr("pointer-events", "none"); const axisGr1 = chart.append("g"); const chartGr1 = chart.append("g"); const chart2 = chart .append("g") .attr("transform", "translate(0," + height1 + ")"); const axisGr2 = chart2.append("g"); const chartGr2 = chart2.append("g"); axisGr1 .append("text") .attr("x", -margin.top + 16) .attr("y", 20) .text("Anzahl Tests") .style("fill", "dimgrey") .attr("transform", "rotate(-90)") .style("text-anchor", "end"); axisGr2 .append("text") .attr("x", -margin.top + 16) .attr("y", 20) .text("Anteil positiv") .style("fill", "dimgrey") .attr("transform", "rotate(-90)") .style("text-anchor", "end"); axisGr2 .append("text") .attr("x", widthNow - margin.right) .attr("y", height2 - 10) .text("Kalenderwochen") .style("fill", "dimgrey") .style("text-anchor", "end"); events .selectAll("rect") .data(data) .enter() .append("rect") .attr("x", (d, i) => xScale(d.woche_jahr)) .attr("y", 0) .attr("height", height1 + height2) .attr("width", xScale.bandwidth()) .style("fill", "white") .on("mouseover", function (d) { d3.select(this).style("fill", "WHITESMOKE"); let wocheM = d.woche_jahr; d3.selectAll(".balken_" + wocheM).attr("opacity", 0.7); let mouseGr2 = chartGr2.append("g").attr("id", "mouseGr2"); mouseGr2 .append("circle") .attr("cx", xScale(wocheM) + xScale.bandwidth() / 2) .attr("cy", y2(d.anteil_pos)) .attr("r", 5) .attr("fill", "#b01657"); let delta = {}; if (xScale(d.woche_jahr) < widthNow / 2) { delta.x = -xScale.bandwidth() / 2; delta.anchor = "start"; delta.line = 0; } else { delta.x = xScale.bandwidth() / 2; delta.anchor = "end"; delta.line = xScale.bandwidth(); } mouseGr2 .append("text") .attr("x", xScale(wocheM) + xScale.bandwidth() / 2) .attr("dx", delta.x) .attr("text-anchor", delta.anchor) .attr("y", -height1) .attr("dy", "1em") .style("fill", "#0076bd") .text("negativ: " + d.negativ.toLocaleString("de-CH")); mouseGr2 .append("text") .attr("x", xScale(wocheM) + xScale.bandwidth() / 2) .attr("dx", delta.x) .attr("text-anchor", delta.anchor) .attr("y", -height1) .attr("dy", "2.2em") .style("fill", "#b01657") .text("positiv: " + d.positiv.toLocaleString("de-CH")); mouseGr2 .append("text") .attr("x", xScale(wocheM) + xScale.bandwidth() / 2) .attr("text-anchor", "middle") .attr("y", y2(d.anteil_pos)) .attr("dy", "-1em") .style("fill", "#b01657") .text(d3.format(".1%")(d.anteil_pos)); mouseGr2 .append("text") .attr( "x", d3.min([ xScale(d.woche_jahr) + xScale.bandwidth() / 2, xScale.range()[1] + xScale.bandwidth() / 2 - 100 ]) ) .attr("y", 0) .text( d.von.toLocaleString("de-CH", { day: "numeric", month: "short" }) + " bis " + d.bis.toLocaleString("de-CH", { day: "numeric", month: "short" }) + " " + d.bis.toLocaleString("de-CH", { year: "numeric" }) ) .style("fill", "dimgrey") .style("text-anchor", "middle"); /* mouseGr2.append('line') .attr('x1', xScale(d.woche)+delta.line) .attr('y1', 20) .attr('x2', widthNow/2+xScale.bandwidth()/2-delta.line) .attr('y2', 20) .style('stroke','grey') */ }) .on("mouseout", function (d) { d3.select(this).style("fill", "white"); d3.select("#mouseGr2").remove(); d3.selectAll(".balken_" + d.woche_jahr).attr("opacity", 1); }); axisGr2.append("g").call(xAxis2); axisGr2.append("g").call(yAxis2); axisGr2.selectAll(".domain").attr("stroke", "none"); chartGr2 .append("path") .datum(data) .attr("fill", "none") .attr("stroke", "#b01657") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line) .attr("transform", "translate(" + xScale.bandwidth() / 2 + ",0)"); let y1 = d3 .scaleLinear() .domain([0, d3.max(data, (d) => d.total)]) .nice() .range([height1 - 22, margin.top]); let xAxis1 = (g) => g .attr("transform", `translate(0,${height2 - margin.bottom})`) .call(d3.axisBottom(xScale).tickValues([]).tickSizeOuter(0)); let yAxis1 = (g) => g .attr("transform", `translate(${margin.left - 10},0)`) .call( d3 .axisRight(y1) .tickSize(widthNow - margin.left - margin.right + 10) .tickFormat((d) => d.toLocaleString("de-CH")) //.tickValues([0,3000,6000,9000,12000,15000,18000]) .tickSizeOuter(0) .ticks(5) ) .call((g) => g .selectAll(".tick:not(:first-of-type) line") .attr("stroke-opacity", 0.5) .attr("stroke-dasharray", "2,2") ) .call((g) => g.selectAll(".tick text").attr("x", 2).attr("dy", -4)) .attr("text-anchor", "end"); axisGr1.append("g").call(yAxis1); axisGr1.append("g").call(xAxis1); axisGr1.selectAll(".domain").attr("stroke", "none"); chartGr1 .append("g") .selectAll("g") .data(series) .join("g") .attr("fill", (d) => color(d.key)) .selectAll("rect") .data((d) => d) .join("rect") .attr("x", (d, i) => xScale(d.data.woche_jahr)) .attr("class", (d) => "balken_" + d.data.woche_jahr) .attr("y", (d) => y1(d[1])) .attr("height", (d) => y1(d[0]) - y1(d[1])) .attr("width", xScale.bandwidth()); chartGr2.append("g"); svg.selectAll("text").style("font-size", "calc(0vw + 16px)"); return svg.node(); }34:T1099,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .attr('font-size', 'calc(0vw + 16px)') .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr('font-size', 'calc(0vw + 16px)') .text(title)); return svg.node(); }35:[] 31:{"id":"52798e5e10e2cc80","slug":"covid19-tests-pro-kalenderwoche","title":"COVID19: Tests pro Kalenderwoche","thumbnail":"54f44a8d6ce3cfb60d654ab7f8d49933c4d2d7c3ec5025432806a2d744077f5e","access_level":"public","create_time":"$D2021-12-16T14:08:22.201Z","update_time":"$D2021-12-16T14:14:06.433Z","view_time":null,"first_public_time":"$D2021-12-16T14:14:21.360Z","has_unpublished_edits":null,"fork":{"id":"1d05fc187bb8c5af","slug":"covid19-tests-pro-kalenderwoche/2","title":"COVID19: Tests pro Kalenderwoche","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":1208,"publish_version":1208,"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"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"COVID19: Tests pro Kalenderwoche","cells":[{"id":0,"value":"md`\n# COVID19: Tests pro Kalenderwoche`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"key = legend({color, title: \"Testresultate\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"viewof zeitraum = radio({\n title: \"Bitte wählen Sie den gewünschten Zeitraum\",\n description: \"\",\n options: [\n { label: \"Gesamter Zeitraum\", value: \"2020-01-01\" },\n { label: \"Ab Juni 2020 (Ende erste Welle)\", value: \"2020-05-25\" },\n {\n label: \"Ab Juni 2021 (Eintritt Stabilisierungsphase)\",\n value: \"2021-05-25\"\n }\n ],\n value: \"2020-05-25\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"import { radio } from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`Quelle: [Anteil der positiven SARS-CoV-2 Tests nach Kalenderwoche (github)](https://github.com/openZH/covid_19/tree/master/fallzahlen_kanton_zh)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"md`Nutzungsbedingungen: [Freie Nutzung. Quellenangabe ist Pflicht.](https://opendata.swiss/de/terms-of-use/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`Die Gesundheitsdirektion des Kantons Zürich veröffentlicht ab dem 11.05.2020 einmal wöchentlich den Anteil der positiven SARS-CoV-2 Tests je Kalenderwoche.

\n\n| Spaltenname / Fieldname | Beschreibung (DE) | Description (EN) | Format |\n|---------------------|--------------------------------------------|------------|------|\n| __Woche_von__ | Beginn der Kalenderwoche (Datum) | Start of the calendar week (Date) | YYYY-MM-DD |\n| __Woche_bis__ | Ende der Kalenderwoche (Datum) | End of the calendar week (Date) |YYYY-MM-DD|\n| __Kalenderwoche__ | Kalenderwoche | Abbreviation of the reporting canton | Zahl |\n| __Anzahl_positiv__ | Anzahl positiver Tests | Number of positive tests | Text |\n| __Anzahl_negativ__ |Anzahl negativer Tests | Number of negative tests | Text|\n| __Anteil_positiv__ | Anteil der positiven Tests an allen Tests | Share of positive tests | Zahl | `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"rohdaten = d3\n .csv(\n \"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_zh/COVID19_Anteil_positiver_Test_pro_KW.csv\"\n )\n .then(function (data) {\n data.forEach(function (d) {\n d.positiv = +d.Anzahl_positiv;\n d.negativ = +d.Anzahl_negativ;\n d.total = 1 * d.Anzahl_positiv + 1 * d.Anzahl_negativ;\n d.von = parseTime(d.Woche_von);\n d.bis = parseTime(d.Woche_bis);\n d.woche = d.Kalenderwoche;\n d.jahr = d.Woche_von.split(\"-\")[0];\n d.woche_jahr = d.Woche_von.split(\"-\")[0] + \"-\" + d.Kalenderwoche;\n d.anteil_pos = Math.round(+d.Anteil_positiv * 10) / 1000;\n });\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"data_noFilter = rohdaten.splice(1, rohdaten.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"parseTime(rohdaten[0].Woche_von)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"data = data_noFilter.filter(function (row) {\n return parseTime(row.Woche_von) >= parseTime(zeitraum);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"series = d3.stack()\n .keys(rohdaten.columns.slice(3,5))\n (data).map(d => (d.forEach(v => v.key = d.key), d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"color = d3.scaleOrdinal()\n .domain(series.map(d => d.key))\n .range(['#b01657', '#0076bd'])\n .unknown(\"#ccc\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"xScale = d3\n .scaleBand()\n .domain(weeks)\n .range([margin.left, widthNow - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1129,"value":"zeitraum","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"// List of groups = weeks here = to be shown on the X axis\nweeks = (function() {\n let arrMax = d3.max(data, d => d.woche);\n console.log(arrMax);\n let arr = [];\n if (zeitraum == \"2020-01-01\") {\n for (let i = 10; i < data.length + 23; i++) {\n if (i <= 53) {\n arr.push('2020-' + i.toString());\n } else {\n arr.push('2021-' + (i - 53).toString());\n }\n }\n return arr;\n } else {\n return data.map(d => d.woche_jahr);\n }\n})()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"parseTime = d3.timeParse(\"%Y-%m-%d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"widthNow = d3.min([750, width]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"margin = ({top: 18, right: 50, bottom: 50, left: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"function distincts(array,element) {\n var flags = [], output = [], l = array.length, i;\n \n for( i=0; i\n/* required styles */\n* { font-family: Helvetica, Arial, sans-serif;\n margin: 0;\n}\n\nselect {\n font-size: calc(0vw + 20px);\n}\nselect {\n font-size: calc(0vw + 20px);\n}\n\n