2e:null 2f:["$","title",null,{"children":"Tägliche COVID-19 Fallzahlen im Kanton Bern - stripDown | Matthias Mazenauer | Observable"}] 34:T17c5,dayChart = { let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => d.n_conf/basis)); let yTitle = ''; let kategorie = ''; if (basis==1) { yTitle = 'Anzahl Fälle'; kategorie = '(tägliche Fallzahlen)'; } else { yTitle = "Anzhl Fälle pro 100'000 Einwohner pro Tag"; kategorie = "(tägliche Fallzahlen/100'000 Einw.)"; } let line = d3 .line() .defined(d => !isNaN(d.value)) .x(d => xScale(d.date)) .y(d => (yScale(d.value/basis))); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height]) .attr('id', 'STATchart1'); let yAxis = g => g .attr("transform", `translate(${widthNow - margin.right},0)`) .call( d3.axisLeft(yScale).tickSize(widthNow - margin.left - margin.right) ); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); if (width < 1080) { axisGr.select('#dayAxis').remove(); let xAxisMonth = axisGr .append("g") .attr('id', 'monthAxis') .call(xAxisM); } else { axisGr.select('#monthAxis').remove(); let xAxisDay = axisGr .append("g") .attr('id', 'dayAxis') .call(xAxis); } axisGr.append("g").call(yAxis); axisGr .selectAll('.tick') .selectAll('line') .style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none'); let balkenWidth = (widthNow - margin.left - margin.right) / datenZH.length; const mouseRect = mouseGr .selectAll('rect.STATmouse') .data(datenZH) .enter() .append('rect') .attr('id', d => 'm' + formatTime(d.date)) .attr('class', 'STATmouse') .attr('cursor', 'pointer') .attr("fill", "white") .attr("stroke-width", 0.5) .attr("stroke", "white") .attr("opacity", 0) .attr("x", (d, i) => xScale(d.date)) .attr("y", 0) .attr("width", balkenWidth) .attr("height", height); let balken = chartGr.selectAll('rect').data(datenZH); balken .enter() .append('rect') .attr('id', d => 'a' + formatTime(d.date)) .attr("fill", "DarkGray") .attr("stroke-width", 0.5) .attr("stroke", "white") .attr("opacity", 1) .attr("x", (d, i) => xScale(d.date)) .attr("y", (d, i) => yScale(d.n_conf/basis)) .attr("width", balkenWidth) .attr("height", d => yScale(0) - yScale(d.n_conf/basis)); chartGr .append('g') .attr('transform', 'translate(' + balkenWidth / 2 + ',' + 0 + ')') .append("path") .datum(datenZHTagAvg) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "tomato") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); axisGr .append('text') .attr('x', -margin.top - 10) .attr('y', 10) .text(yTitle) .style('fill', 'dark gray') .attr('transform', 'rotate(-90)') .style('text-anchor', 'end'); addLine('Ausserordentliche Lage: Lockdown',"2020-03-16",chartGr,yScale,xScale); addLine('Ende der ausserordentlichen Lage',"2020-06-19",chartGr,yScale,xScale); let tag, tageswert, mittelwert, week; mouseGr.selectAll('rect').on('mouseover', function(d) { let da = d3.select(this).data()[0]; tageswert = da; tag = d3 .timeParse("%Q")(+da.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); mittelwert = bisect(datenZHTagAvg, d3.timeParse("%Q")(+da.date)); week = d3.timeFormat('%U')(d3.timeParse("%Q")(+da.date)); chartGr.selectAll('rect').attr('fill', 'DarkGray'); chartGr.select('#a' + formatTime(+da.date)).attr('fill', 'dimgrey'); chartGr.select('#thisMouse').remove(); let thisMouse = chartGr.append('g').attr('id', 'thisMouse'); let translateX = d3.min([ widthNow - margin.right - margin.left - 20, d3.max([xScale(da.date) - 40, 0]) ]); let translateY = d3.min([height - 60, yScale(mittelwert.value/basis)]) - 60; let thisGr = thisMouse .append('g') .attr('transform', 'translate(' + translateX + ',' + translateY + ')'); thisGr .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 80) .attr('height', 45) .style('fill', 'white') .style('opacity', 0.6); thisGr .append('text') .attr('dx', 40) .attr('dy', '1em') .style('text-anchor', 'middle') .text(tag); let text1 = ''; if (mittelwert.value >= 0) { text1 = Math.round(mittelwert.value/basis*10)/10; } console.log(mittelwert); thisGr .append('text') .attr('dx', 30) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'tomato') .text(text1); thisGr .append('text') .attr('dx', 72) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'grey') .text('(' + (Math.round(tageswert.n_conf/basis*10)/10) + ')'); }); let element2 = svg .append('g') .attr('transform', 'translate(' + margin.left + ',400)'); element2 .append('line') .attr('x1', 0) .attr('x2', 15) .attr('y1', 8) .attr('y2', 8) .style('stroke', 'tomato') .style('stroke-width', 3); element2 .append('text') .attr('x', 20) .attr('y', 13) .text('gleitendes Mittel (7 Tage)'); let element1 = svg.append('g').attr('transform', 'translate(260,400)'); element1 .append('rect') .attr('x', 0) .attr('y', 0) .attr('height', 15) .attr('width', 15) .style('fill', 'grey'); element1 .append('text') .attr('x', 20) .attr('y', 13) .text(kategorie); svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); axisGr.selectAll('text').attr('font-size', 'calc(0vw + 14px)'); return Object.assign(svg.node(), { value: null, onmousemove: event => { event.currentTarget.value = { tag: tag, mittel: mittelwert.value/basis, neu: tageswert.n_conf, woche: week }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }35:T406,tabLast7DayCases = table(Last7DayCases, { sortable: true, style: 'normal', columns: { Date: { title: "Datum", type: 'string', formatter(val, i) { return val.toLocaleString("de-CH", { year: "numeric", month: "2-digit", day: "2-digit" }); } }, TotalCases: { title: "Positiv Getestet", type: 'string', formatter(val, i) { return val.toLocaleString('de-CH'); } }, NewCases: { title: "Veränderung", type: 'string', formatter(val, i) { if (val >= 0) { return "+" + val.toLocaleString('de-CH'); } else { return "-" + val.toLocaleString('de-CH'); } } }, Average: { title: "7-Tage Mittel", type: 'string', formatter(val, i) { if (val[i] >= 0) { return "+" + (+val[i]).toLocaleString('de-CH'); } else { return "-" + (+val[i]).toLocaleString('de-CH'); } } } } })36:T1755,dayChartDeath = { let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => d.n_deceased)); let yAxis = g => g .attr("transform", `translate(${widthNow - margin.right},0)`) .call( d3.axisLeft(yScale).tickSize(widthNow - margin.left - margin.right) ); let line = d3 .line() .defined(d => !isNaN(d.value)) .x(d => xScale(d.date)) .y(d => yScale(d.value)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height]) .attr('id', 'STATchart1'); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); if (widthNow < 1080) { axisGr.select('#dayAxis').remove(); let xAxisMonth = axisGr .append("g") .attr('id', 'monthAxis') .call(xAxisM); } else { axisGr.select('#monthAxis').remove(); let xAxisMonth = axisGr .append("g") .attr('id', 'dayAxis') .call(xAxis); } axisGr.append("g").call(yAxis); let balkenWidth = (widthNow - margin.left - margin.right) / datenZH.length; axisGr .selectAll('.tick') .selectAll('line') .style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none'); const mouseRect = mouseGr .selectAll('rect.STATmouse') .data(datenZH) .enter() .append('rect') .attr('id', d => 'm' + formatTime(d.date)) .attr('class', 'STATmouse') .attr('cursor', 'pointer') .attr("fill", "white") .attr("stroke-width", 0.5) .attr("stroke", "white") .attr("opacity", 0) .attr("x", (d, i) => xScale(d.date)) .attr("y", 0) .attr("width", balkenWidth) .attr("height", height); let balken = chartGr.selectAll('rect').data(datenZH); balken .enter() .append('rect') .attr('id', d => 'a' + formatTime(d.date)) .attr("fill", "grey") .attr("stroke-width", 0.5) .attr("stroke", "white") .attr("opacity", 0.7) .attr("x", (d, i) => xScale(d.date)) .attr("y", (d, i) => yScale(d.n_deceased)) .attr("width", balkenWidth) .attr("height", d => yScale(0) - yScale(d.n_deceased)); chartGr .append('g') .attr('transform', 'translate(' + balkenWidth / 2 + ',' + 0 + ')') .append("path") .datum(datenZHTagAvgDeceased) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "tomato") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); let tag, tageswert, mittelwert, week; axisGr .append('text') .attr('x', -margin.top) .attr('y', 10) .text('Anzahl Fälle') .style('fill', 'dark gray') .attr('transform', 'rotate(-90)') .style('text-anchor', 'end'); addLine('Ausserordentliche Lage: Lockdown',"2020-03-16",chartGr,yScale,xScale); addLine('Massnahmen ZH',"2020-08-27",chartGr,yScale,xScale); addLine('Beginn Sommerferien',"2020-07-11",chartGr,yScale,xScale); addLine('Ende Sommerferien',"2020-08-16",chartGr,yScale,xScale); addLine('Ende der ausserordentlichen Lage',"2020-06-19",chartGr,yScale,xScale); mouseGr.selectAll('rect').on('mouseover', function(d) { let da = d3.select(this).data()[0]; tageswert = da; tag = d3 .timeParse("%Q")(+da.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); mittelwert = bisect(datenZHTagAvgDeceased, d3.timeParse("%Q")(+da.date)); week = d3.timeFormat('%U')(d3.timeParse("%Q")(+da.date)); chartGr.selectAll('rect').attr('opacity', 0.7); chartGr.select('#a' + formatTime(+da.date)).attr('opacity', 1); chartGr.select('#thisMouse').remove(); let thisMouse = chartGr.append('g').attr('id', 'thisMouse'); let translateX = d3.min([ widthNow - margin.right - margin.left - 20, d3.max([xScale(da.date) - 40, 0]) ]); let translateY = d3.min([height - 60, yScale(mittelwert.value)]) - 60; let thisGr = thisMouse .append('g') .attr('transform', 'translate(' + translateX + ',' + translateY + ')'); thisGr .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 80) .attr('height', 45) .style('fill', 'white') .style('opacity', 0.6); thisGr .append('text') .attr('dx', 40) .attr('dy', '1em') .style('text-anchor', 'middle') .text(tag); let text1 = ''; if (mittelwert.value >= 0) { text1 = Math.round(mittelwert.value); } thisGr .append('text') .attr('dx', 30) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'tomato') .text(text1); thisGr .append('text') .attr('dx', 72) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'grey') .text('(' + tageswert.n_deceased + ')'); }); let element2 = svg .append('g') .attr('transform', 'translate(' + margin.left + ',400)'); element2 .append('line') .attr('x1', 0) .attr('x2', 15) .attr('y1', 8) .attr('y2', 8) .style('stroke', 'tomato') .style('stroke-width', 3); element2 .append('text') .attr('x', 20) .attr('y', 13) .text('gleitendes Mittel (7 Tage)'); let element1 = svg.append('g').attr('transform', 'translate(260,400)'); element1 .append('rect') .attr('x', 0) .attr('y', 0) .attr('height', 15) .attr('width', 15) .style('fill', 'grey'); element1 .append('text') .attr('x', 20) .attr('y', 13) .text('(tägliche Todesfälle)'); svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); axisGr.selectAll('text').attr('font-size', 'calc(0vw + 14px)'); return Object.assign(svg.node(), { value: null, onmousemove: event => { event.currentTarget.value = { tag: tag, mittel: mittelwert.value, neu: tageswert.n_deceased, woche: week }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }37:T1c31,dayChartHosp = { let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => +d.current_hosp)); let yAxis = g => g .attr("transform", `translate(${widthNow - margin.right},0)`) .call( d3.axisLeft(yScale).tickSize(widthNow - margin.left - margin.right) ); let line1 = d3 .line() .defined(d => !isNaN(d.current_hosp)) .x(d => xScale(d.date)) .y(d => yScale(d.current_hosp)); let line2 = d3 .line() .defined(d => !isNaN(d.current_vent)) .x(d => xScale(d.date)) .y(d => yScale(d.current_vent)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, height]) .attr('id', 'STATchart1'); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); if (width < 1080) { axisGr.select('#dayAxis').remove(); let xAxisMonth = axisGr .append("g") .attr('id', 'monthAxis') .call(xAxisM); } else { axisGr.select('#monthAxis').remove(); axisGr .append("g") .attr('id', 'dayAxis') .call(xAxis); } axisGr.append("g").call(yAxis); let balkenWidth = (widthNow - margin.left - margin.right) / datenZH.length; axisGr .selectAll('.tick') .selectAll('line') .style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none'); const mouseRect = mouseGr .selectAll('rect.STATmouse') .data(datenZH) .enter() .append('rect') .attr('id', d => 'm' + formatTime(d.date)) .attr('class', 'STATmouse') .attr('cursor', 'pointer') .attr("fill", "white") .attr("stroke-width", 0.5) .attr("stroke", "white") .attr("opacity", 0) .attr("x", (d, i) => xScale(d.date)) .attr("y", 0) .attr("width", balkenWidth) .attr("height", height); chartGr .append('g') .attr('transform', 'translate(' + balkenWidth / 2 + ',' + 0 + ')') .append("path") .datum(datenZH) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line1); chartGr .append('g') .attr('transform', 'translate(' + balkenWidth / 2 + ',' + 0 + ')') .append("path") .datum(datenZH) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "SkyBlue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line2); let tag, tageswert, hosp, vent, week; axisGr .append('text') .attr('x', -margin.top - 10) .attr('y', 10) .text('Anzahl Fälle') .style('fill', 'dark gray') .attr('transform', 'rotate(-90)') .style('text-anchor', 'end'); 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', '-.2em') .attr('x', -4) .attr('font-size', '12px') .attr('text-anchor', 'end') .attr("fill", "darkorange") .text('Ausserordentliche Lage: Lockdown') .attr( 'transform', 'translate(' + xScale(parseTime("2020-03-16")) + ',' + margin.top + ')rotate(-90)' ) .style('font-family', 'Helvetica, Arial, sans-serif'); chartGr .append('line') .attr('x1', xScale(parseTime('2020-06-19'))) .attr('x2', xScale(parseTime('2020-06-19'))) .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', '-.2em') .attr('x', -4) .attr('font-size', '12px') .attr('text-anchor', 'end') .attr("fill", "darkorange") .text('Ende der ausserordentlichen Lage') .attr( 'transform', 'translate(' + xScale(parseTime("2020-06-19")) + ',' + margin.top + ')rotate(-90)' ) .style('font-family', 'Helvetica, Arial, sans-serif'); mouseGr.selectAll('rect').on('mouseover', function(d) { let da = d3.select(this).data()[0]; tageswert = da; tag = d3 .timeParse("%Q")(+da.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); hosp = tageswert.current_hosp; vent = tageswert.current_vent; week = d3.timeFormat('%U')(d3.timeParse("%Q")(+da.date)); chartGr.selectAll('rect').attr('opacity', 0.7); chartGr.select('#a' + formatTime(+da.date)).attr('opacity', 1); chartGr.select('#thisMouse').remove(); let thisMouse = chartGr.append('g').attr('id', 'thisMouse'); let translateX = d3.min([ widthNow - margin.right - margin.left - 20, d3.max([xScale(da.date) - 40, 0]) ]); let translateY = d3.min([height - 60, yScale(tageswert.current_hosp)]) - 60; let thisGr = thisMouse .append('g') .attr('transform', 'translate(' + translateX + ',' + translateY + ')'); thisGr .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 80) .attr('height', 45) .style('fill', 'white') .style('opacity', 0.6); thisGr .append('text') .attr('dx', 40) .attr('dy', '1em') .style('text-anchor', 'middle') .text(tag); let text1 = ''; let text2 = ''; if (hosp >= 0) { text1 = Math.round(hosp); } if (vent >= 0) { text2 = Math.round(vent); } thisGr .append('text') .attr('dx', 30) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'steelblue') .text(text1); thisGr .append('text') .attr('dx', 72) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill', 'skyblue') .text('/ ' + text2); }); let element2 = svg .append('g') .attr('transform', 'translate(' + margin.left + ',400)'); element2 .append('line') .attr('x1', 0) .attr('x2', 15) .attr('y1', 8) .attr('y2', 8) .style('stroke', 'steelblue') .style('stroke-width', 3); element2 .append('text') .attr('x', 20) .attr('y', 13) .text('Hospitalisierte'); let element1 = svg.append('g').attr('transform', 'translate(220,400)'); element1 .append('line') .attr('x1', 0) .attr('x2', 15) .attr('y1', 8) .attr('y2', 8) .style('stroke', 'SkyBlue') .style('stroke-width', 3); element1 .append('text') .attr('x', 20) .attr('y', 13) .text('Beatmete'); svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); axisGr.selectAll('text').attr('font-size', 'calc(0vw + 14px)'); return Object.assign(svg.node(), { value: null, onmousemove: event => { event.currentTarget.value = { tag: tag, mittel: tageswert.current_hosp, neu: tageswert.n_deceased, woche: week }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }38:T498,tabLast7DayHosp = table(Last7DayHosp, { sortable: true, style: 'normal', columns: { Date: { title: "Datum", type: 'string', formatter(val, i) { return val.toLocaleString("de-CH", { year: "numeric", month: "2-digit", day: "2-digit" }); } }, TotalHosp: { title: "Hospitalisierte", type: 'string', formatter(val, i) { return val.toLocaleString('de-CH'); } }, NewHosp: { title: "Veränderung", type: 'string', formatter(val, i) { if (val[i] >= 0) { return "+" + (+val[i]).toLocaleString('de-CH'); } else { return (+val[i]).toLocaleString('de-CH'); } } }, TotalVent: { title: "Beatmete", type: 'string', formatter(val, i) { return val.toLocaleString('de-CH'); } }, NewVent: { title: "Veränderung", type: 'string', formatter(val, i) { if (val[i] >= 0) { return "+" + (+val[i]).toLocaleString('de-CH'); } else { return (+val[i]).toLocaleString('de-CH'); } } } } })39:T6cf,datenZH = d3 .csv( "https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_total_csv_v2/COVID19_Fallzahlen_Kanton_BE_total.csv" ) .then(function(data) { let oldConf = 0; let oldDeceased = 0; data.forEach(function(d) { d.date = parseTime(d.date); d.ncumul_tested.length > 0 ? (d.ncumul_tested = +d.ncumul_tested) : (d.ncumul_tested = undefined); d.ncumul_conf.length > 0 ? (d.ncumul_conf = +d.ncumul_conf) : (d.ncumul_conf = undefined); d.n_conf = d.ncumul_conf - oldConf; d.n_deceased = d.ncumul_deceased - oldDeceased; d.new_hosp.length > 0 ? (d.new_hosp = +d.new_hosp) : (d.new_hosp = undefined); d.current_hosp.length > 0 ? (d.current_hosp = +d.current_hosp) : (d.current_hosp = undefined); d.current_icu.length > 0 ? (d.current_icu = +d.current_icu) : (d.current_icu = undefined); d.current_vent.length > 0 ? (d.current_vent = +d.current_vent) : (d.current_vent = undefined); d.ncumul_released.length > 0 ? (d.ncumul_released = +d.ncumul_released) : (d.ncumul_released = undefined); d.ncumul_deceased.length > 0 ? (d.ncumul_deceased = +d.ncumul_deceased) : (d.ncumul_deceased = 0); d.current_isolated.length > 0 ? (d.current_isolated = +d.current_isolated) : (d.current_isolated = undefined); d.current_quarantined.length > 0 ? (d.current_quarantined = +d.current_quarantined) : (d.current_quarantined = undefined); oldConf = d.ncumul_conf; oldDeceased = +d.ncumul_deceased; }); return data.filter(el => el.date>=parseTime(zeitraum)); })3a:T2631,html`