26:null 27:["$","title",null,{"children":"Tägliche COVID-19 Fallzahlen im Kanton Zürich | Office for Statistics and Data of the Canton of Zurich | Observable"}] 2c:Tc55,alterChart2 = { let widthNow = d3.min([750, width]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 300]) .attr('id', 'alterChart') //.attr('transform','translate('+(width-widthNow)/2+',0)') .style('margin','0 auto'); let axisGr = svg.append('g') let chart = svg.append('g') let margin = {left:70,top: 0,bottom:40,right:10}; let agesAll = []; for (let i = 0;i d.label)) .range([300-margin.top-margin.bottom,margin.top]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,widthNow-margin.left-margin.right]); let colorScaleAge = d3 .scaleSequential(d3.interpolateInferno) .domain([0,165]) var xAxis = d3.axisBottom(scaleWeek).tickSizeOuter(0); var gX = axisGr.append("g").call(xAxis).attr('transform','translate(0,'+(300-margin.bottom)+')'); var yAxis = d3.axisLeft(scaleAge).tickSizeOuter(0).tickValues(agesAll.map(d => d.label)); var gY = axisGr.append("g").call(yAxis).attr('transform','translate('+margin.left+',0)'); axisGr.selectAll('.tick').selectAll('line').style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none') chart.append('text') .attr('x',margin.left) .attr('y',295) .text('Woche') .style('fill','dimgrey') chart.append('text') .attr('x',-margin.top) .attr('y',20) .text('Alterskategorien') .style('fill','dimgrey') .attr('transform','rotate(-90)') .style('text-anchor','end'); for (let age = 0;age (el.Week == now && el.AgeYearCat == ageCat)); let tot = 0; for (let i = 0;i d.label)) .range([400-margin.bottom,margin.top]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,widthNow-margin.left-margin.right]); let colorScaleAge = d3 .scaleSequential(d3.interpolateInferno) .domain([0,165]) let scaleTotal = d3.scaleLinear() .domain([0,d3.max(datenAlterGeschlechtTotal, d => +d.value)]) .range([110,20]) let totAxis = chart.append('g'); let widthChart = datenAlterGeschlechtTotal.length*scaleWeek.bandwidth(); var yAxisTot = d3.axisLeft(scaleTotal).tickSizeOuter(0).tickSize(widthChart+30).ticks(3) var gY = totAxis.append("g").call(yAxisTot).attr('transform','translate('+(widthChart+margin.left)+',0)'); totAxis.selectAll("text") .attr("y", '-0.5em') .attr("x", -widthChart-30) .style("text-anchor", "start") .attr('pointer-events','none'); totAxis.selectAll('.tick').selectAll('line').style('stroke', 'lightgrey'); totAxis.selectAll('path').style('stroke', 'none'); var xAxis = d3.axisBottom(scaleWeek).tickSizeOuter(0); var gX = axisGr.append("g").call(xAxis).attr('transform','translate(0,'+(400-margin.bottom)+')'); var yAxis = d3.axisLeft(scaleAge).tickSizeOuter(0).tickValues(agesAll.map(d => d.label)); var gY = axisGr.append("g").call(yAxis).attr('transform','translate('+margin.left+',0)'); axisGr.selectAll('.tick').selectAll('line').style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none') chart.append('text') .attr('x',margin.left) .attr('y',395) .text('Woche') .style('fill','dimgrey') chart.append('text') .attr('x',-margin.top) .attr('y',20) .text('Alterskategorien') .style('fill','dimgrey') .attr('transform','rotate(-90)') .style('text-anchor','end'); chart.append('text') .attr('x',-10) .attr('y',20) .text('Total Fälle') .style('fill','dimgrey') .attr('transform','rotate(-90)') .style('text-anchor','end'); for(let week = 0;week (el.Week == now && el.AgeYearCat == ageCat)); let tot = 0; for (let i = 0;i 'balken_'+d.key) .attr('class', 'total') .attr('x', d => scaleWeek(d.key)) .attr('y', d => scaleTotal(+d.value)) .attr('height', d => scaleTotal(0)-scaleTotal(+d.value)) .attr('width', scaleWeek.bandwidth()) .style('fill', 'silver') let totalTect = chart.selectAll('text.total') .data(datenAlterGeschlechtTotal) .enter().append('text') .attr('id', d => 'text_'+d.key) .attr('class', 'total') .attr('x', d => scaleWeek(d.key)) .attr('y', d => scaleTotal(+d.value)) .attr('text-anchor', 'middle') .attr('dx', scaleWeek.bandwidth()/2) .attr('dy', -2) .text(d => d.value) .style('font-size','12px') .attr('visibility','hidden') } return svg.node(); }2e:T1bb9,viewof dayChart = { let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => d.n_conf)); let line = d3 .line() .defined(d => !isNaN(d.value)) .x(d => xScale(d.date)) .y(d => (console.log(d), yScale(d.value))); 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)) .attr("width", balkenWidth) .attr("height", d => yScale(0) - yScale(d.n_conf)); 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); 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'); 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-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'); let tag, tageswert, mittelwert, week; mouseGr.selectAll('rect').on('mouseover', function(d) { tageswert = d; tag = d3 .timeParse("%Q")(+d.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); mittelwert = bisect(datenZHTagAvg, d3.timeParse("%Q")(+d.date)); week = d3.timeFormat('%U')(d3.timeParse("%Q")(+d.date)); chartGr.selectAll('rect').attr('fill', 'DarkGray'); chartGr.select('#a' + formatTime(+d.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(d.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_conf + ')'); }); 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 Fallzahlen)'); 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_conf, woche: week }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }2f:T1bbe,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'); 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) { tageswert = d; tag = d3 .timeParse("%Q")(+d.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); mittelwert = bisect(datenZHTagAvgDeceased, d3.timeParse("%Q")(+d.date)); week = d3.timeFormat('%U')(d3.timeParse("%Q")(+d.date)); chartGr.selectAll('rect').attr('opacity', 0.7); chartGr.select('#a' + formatTime(+d.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(d.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")); } }); }30:T1c04,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) { tageswert = d; tag = d3 .timeParse("%Q")(+d.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); hosp = tageswert.current_hosp; vent = tageswert.current_vent; week = d3.timeFormat('%U')(d3.timeParse("%Q")(+d.date)); chartGr.selectAll('rect').attr('opacity', 0.7); chartGr.select('#a' + formatTime(+d.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(d.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")); } }); }31:T1a24,dayChartIsolated = { //let widthNow = d3.min([768, width]); let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => +d.current_quarantined)); let yAxis = g => g .attr("transform", `translate(${width-margin.right},0)`) .call(d3.axisLeft(yScale).tickSize(width-margin.left-margin.right)); let line1 = d3 .line() .defined(d => !isNaN(d.current_isolated)) .x(d => xScale(d.date)) .y(d => yScale(d.current_isolated)); let line2 = d3 .line() .defined(d => !isNaN(d.current_quarantined)) .x(d => xScale(d.date)) .y(d => yScale(d.current_quarantined)); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 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 = (width - 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, isolated, quarantined, week; 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) { tageswert = d; tag = d3 .timeParse("%Q")(+d.date) .toLocaleString("de-CH", { day: "numeric", month: "long" }); isolated = tageswert.current_isolated; quarantined = tageswert.current_quarantined; week = d3.timeFormat('%U')(d3.timeParse("%Q")(+d.date)); chartGr.selectAll('rect').attr('opacity', 0.7); chartGr.select('#a' + formatTime(+d.date)).attr('opacity', 1); chartGr.select('#thisMouse').remove(); let thisMouse = chartGr.append('g').attr('id', 'thisMouse'); let translateX = d3.min([ width - margin.right - margin.left - 20, d3.max([xScale(d.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 (isolated >= 0) { text1 = Math.round(isolated); } if (quarantined >= 0) { text2 = Math.round(quarantined); } 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+',500)'); 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('Isolierte'); let element1 = svg.append('g').attr('transform', 'translate(220,500)'); 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('In Quarantäne'); svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); axisGr.selectAll('text').attr('font-size', 'calc(0vw + 14px)'); return svg.node() }32:Ta08,map = { let widthNow = d3.min([width,768]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 20 + heightMap + 30]); const chartGr = svg .append('g') .attr('id', 'chartGr') .attr('transform', 'translate('+(widthNow-width)/2+',20)'); var paths = chartGr .append('g') .attr('id', 'Gemeinden') .selectAll(".gemeinde") .data(mapDataRegions.features) .enter() .append("path") .attr('class', 'gemeinde') .attr('id', d => 'bez_' + d.properties.BEZ_ID) .attr("d", path) .style("cursor", "pointer") .attr('pointer-events', function(d) { if (d.properties.BEZ_N == 'See') { return 'none'; } }) .style('fill', function(d) { if (d.properties.BEZ_N == 'See') { return 'skyblue'; } else { return 'grey'; } }) .style('stroke-width', 0.5) .style('fill-opacity', function(d) { return 1; }) .style('stroke', function(d) { return 'grey'; }) .on('mouseover', function(d) { let thisId = d.properties.BEZ_ID; let thisData = datenRegionWoche.filter( el => el.DistrictId == d.properties.BEZ_ID )[0]; let that = d3.select('#bez_' + thisId); let bbox = this.getBBox(); let mouseGr = chartGr.append('g').attr('id', 'mouseGr'); d3.mouse(this)[0]; mouseOver(d, that, bbox, '#mouseGr', thisData, path); }) .on('mouseout', function() { mouseOut(); }); for (let i = 0; i < datenRegionWoche.length; i++) { chartGr .select('#bez_' + datenRegionWoche[i].DistrictId) .style('fill', colorScale(+datenRegionWoche[i].NewConfCases)); } let legenden = [0, 5, 10, 50, datenRegionNeuMax]; let middle = (widthNow - margin.left - margin.right) / 2 + margin.left; let legScale = d3 .scaleLinear() .range([ margin.left + widthNow / 10, widthNow - margin.left - margin.right - widthNow / 10 ]) .domain(d3.extent(legenden)); for (let i = 0; i <= datenRegionNeuMax; i++) { svg .append('rect') .attr('fill', colorScale([i])) .attr('stroke', 'none') .attr('x', legScale([i])) .attr('y', heightMap + 22.5) .attr('width', (widthNow - margin.left - margin.right) / datenRegionNeuMax) .attr('height', 10); } for (let i = 0; i < legenden.length; i++) { svg .append('text') .attr('x', legScale(legenden[i])) .attr('y', heightMap + 50) .text(legenden[i]) .attr('text-anchor', 'middle'); } return svg.node(); }33:Tf8f,bezirkeSM = { let heightPer = 130; let widthAll = width; const padding = 20; let grid = {}; let scale = 1; const margin = {left: 20,top:20,bottom:20,right:10}; if (width<470) { grid.x = 1; grid.y = 12; scale = 1; } else if (width<780) { grid.x = 2; grid.y = 6; scale = 1.1; } else { grid.x = 3; grid.y = 4; scale = 1.3; } let heightAll = grid.y*heightPer+margin.top+margin.bottom+(grid.y-1)*padding; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, heightAll]) .attr('id', 'STATchart1'); let widthPer = width/grid.x-(grid.x-1)*padding-margin.right; let xScale = d3 .scaleBand() .domain(weeksRegionen) .range([0, widthPer]); let xAxis = g => g .attr("transform", `translate(0,${heightPer - margin.bottom})`) .call(d3.axisBottom(xScale).tickSize('5').tickSizeOuter(0)); let max = d3.max(datenRegion, d => d.NewConfCases); let yScale = d3 .scaleLinear() .domain([0,max]) .range([heightPer,0]); let yAxis = g => g .attr("transform", `translate(${widthPer},0)`) .call(d3.axisLeft(yScale).tickSize(widthPer).ticks(5).tickSizeOuter(0)); let counter = 101; for (let y = 0;y el.DistrictId == counter); console.log(thisData) var thisChart = svg.append('g') .attr('id','grid_'+counter) .attr('transform', 'translate('+(margin.left+x*widthPer+(x-1)*padding)+','+(margin.top+y*heightPer+(y-1)*padding)+')'); let axisGr = thisChart.append('g'); let mouseGr = thisChart.append('g'); let chartGr = thisChart.append('g').attr('pointer-events', 'none'); let balkenM = axisGr.selectAll('rect.maus') .data(thisData); balkenM.enter() .append('rect') .attr('class','maus') .attr('x',d => xScale(d.yearWeek)) .attr('y',0) .attr('height',heightPer) .attr('width', xScale.bandwidth()) .attr('pointer-events','all') .attr('fill','white') .on('mouseover', function(d) { d3.selectAll('rect.maus').style('fill', 'white') d3.select(this).style('fill', 'lightgrey') d3.select('#mouseText').remove(); d3.select('#grid_'+d.DistrictId).append('text') .attr('x',widthPer) .attr('id', 'mouseText') .attr('y',0) .attr('dy', '2.2em') .style('text-anchor', 'end') .style('fill','dimgrey') .text('Woche '+d.Week+': '+d.NewConfCases) .attr('pointer-events','none').attr('font-size', 'calc(0vw + 16px)'); }) let balken = chartGr.selectAll('rect.data') .data(thisData); balken.enter() .append('rect') .attr('class','data') .attr('x',d => xScale(d.yearWeek)) .attr('y',d => yScale(d.NewConfCases)) .attr('height',d => yScale(0)-yScale(d.NewConfCases)) .attr('width', xScale.bandwidth()) .attr('pointer-events','none'); //let xAxisGr = axisGr.append("g").attr('id','monthAxis').call(xAxis); let yAxisGr = axisGr.append("g").attr('id','monthAxis'+counter).call(yAxis); axisGr.selectAll("text") .attr("y", '-0.5em') .attr("x", -widthPer) .style("text-anchor", "start") .attr('pointer-events','none'); axisGr.selectAll('.tick').selectAll('line').style('stroke', 'lightgrey'); axisGr.selectAll('path').style('stroke', 'none'); chartGr.append('text') .attr('x',widthPer) .attr('y',0) .attr('dy', '1em') .style('text-anchor', 'end') .text(thisData[0].District) .attr('pointer-events','none'); counter+=1; } } svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); return svg.node() }34:T142a,mapDiv = { let container = DOM.element('div', { style: `width:${widthNow}px;height:${height + 90}px;margin: 0 auto;` }); yield container; let zoomOrg = 9.5; let map = L.map(container, { zoomControl: false }).setView( [latOrg, lngOrg], zoomOrg ); map.touchZoom.disable(); map.doubleClickZoom.disable(); map.scrollWheelZoom.disable(); map.boxZoom.disable(); map.keyboard.disable(); L.tileLayer .wms('https://wms.zh.ch/ZHWEB', { maxZoom: 14, layers: 'Geometrie' //,Beschriftungen' }) .addTo(map); L.svg().addTo(map); const overlay = d3 .select(map.getPanes().overlayPane) .attr('pointer-events', 'auto'); const svgMap = overlay.select('svg').attr('pointer-events', 'auto'); const g = svgMap .append('g') .attr('class', 'leaflet-zoom-hide') .attr('id', 'g'); //map.addControl(new customControl1()); const projectPoint = function(x, y) { const point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); }; const transform = d3.geoTransform({ point: projectPoint }); const path = d3.geoPath().projection(transform); const featureElement = g .selectAll('path') .data(mapDataRegions4326.features) .enter() .append('path') .style('fill', d => (d.properties.BEZ_N == "See" ? "none" : "tomato")) .attr('id', d => 'bez_' + d.properties.BEZ_ID) .attr('class', 'bezirke') .style('fill-opacity', 0.85) .style('stroke', 'grey') .on('mouseover', function(d) { let thisId = d.properties.BEZ_ID; console.log(thisId); let thisData = datenRegionWoche.filter(el => el.DistrictId == thisId)[0]; console.log(thisData); let that = d3.select('#bez_' + thisId); let bbox = this.getBBox(); let mouseGr = g.append('g').attr('id', 'mouseGr'); //var thisBfs = thisData.properties.BEZ_ID; var mouseOverRW = 217, mouseOverRH = 48; //Position Tooltip var xPos = bbox.x + bbox.width / 2, yPos = bbox.y + bbox.height / 2; //Korrektur, damit tooltip nicht über den Rand hinaus geht: if (xPos > widthNow / 2) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = d3 .select('#g') .append('g') .attr('id', 'mouseOverL') .attr('pointer-events', 'none'); var mouseOverP = mouseOverL.append('g').attr('id', 'mouseOverP'); var mouseOverT = mouseOverL .append('g') .attr('id', 'mouseOverT') .attr('transform', 'translate(' + xPos + ',' + yPos + ')'); g.selectAll('path.bezirke') .style('stroke-width', 0.1) .style('fill-opacity', 0.4); d3.select(this) .style('stroke', 'black') .style('stroke-width', 2) .style('fill-opacity', 0.85); mouseOverT .append('rect') .attr('x', -5) .attr('y', 0) .attr('width', mouseOverRW) .attr('height', mouseOverRH) .style('fill', 'white') .attr('fill-opacity', 0.8) .style('stroke', 'dimgrey'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .style('font-size', 14 + 'px') .style('font-weight', 'bold') .text(thisData.District) .style('font-family', 'Helvetica'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '1.4em') .style('font-size', 14 + 'px') .text('Neuansteckungen: ' + thisData.NewConfCases) .style('font-family', 'Helvetica'); }) .on('mouseout', function() { g.selectAll('path') .style('stroke-width', 0.5) .style('fill-opacity', 0.85); d3.select(this).style('stroke', 'grey'); mouseOut(); }); for (let i = 0; i < datenRegionWoche.length; i++) { g.select('#bez_' + datenRegionWoche[i].DistrictId).style( 'fill', colorScale(+datenRegionWoche[i].NewConfCases) ); } let legenden = [0, 5, 10, 50, datenRegionNeuMax]; let middle = (widthNow - margin.left - margin.right) / 2 + margin.left; let legScale = d3 .scaleLinear() .range([ margin.left + widthNow / 10, widthNow - margin.left - margin.right - width / 10 ]) .domain(d3.extent(legenden)); for (let i = 0; i <= datenRegionNeuMax; i++) { g.append('rect') .attr('fill', colorScale([i])) .attr('stroke', 'none') .attr('x', legScale([i])) .attr('y', heightMap + 90) .attr('width', (widthNow - margin.left - margin.right) / datenRegionNeuMax) .attr('height', 10); } for (let i = 0; i < legenden.length; i++) { g.append('text') .attr('x', legScale(legenden[i])) .attr('y', heightMap + 116) .text(legenden[i]) .style('font-size', 14 + 'px') .style('text-anchor', 'middle'); } // Function to place svg based on zoom const onZoom = () => featureElement.attr('d', path); // initialize positioning onZoom(); // reset whenever map is moved map.on('zoomend', onZoom); }35:T1111,mapDivPlzOL = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 20 + heightMap + 30]); const chartGr = svg .append('g') .attr('id', 'chartGr') .attr('transform', 'translate('+(widthNow-width)/2+',20)'); const featureElement = chartGr .selectAll('path') .data(mapPlz2056.features) .enter() .append('path') .style('fill', d => (d.properties.PLZ>0 ? "grey" : "skyblue")) .attr('id', (d,i) => (d.properties.PLZ>0 ? ('plz_' + d.properties.PLZ) : ('plz_' + i))) .attr('class', 'plz') .style('fill-opacity', 0.85) .style('stroke', 'grey') .attr("d", pathPlz) .style('cursor', 'pointer') .attr('pointer-events', (d,i) => (d.properties.PLZ>0 ? 'all' : 'none')) .on('mouseover', function(d) { let thisId = d.properties.PLZ; console.log(thisId); let thisData = datenPlzTag.filter(el => el.PLZ == thisId)[0]; let that = d3.select('#plz' + thisId); let bbox = this.getBBox(); let mouseGr = chartGr.append('g').attr('id', 'mouseGr'); var mouseOverRW = 190, mouseOverRH = 58; //Position Tooltip var xPos = bbox.x + bbox.width / 2, yPos = bbox.y + bbox.height / 2; //Korrektur, damit tooltip nicht über den Rand hinaus geht: if (xPos > widthNow / 2) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = mouseGr .append('g') .attr('id', 'mouseOverL') .attr('pointer-events', 'none'); var mouseOverP = mouseOverL.append('g').attr('id', 'mouseOverP'); var mouseOverT = mouseOverL .append('g') .attr('id', 'mouseOverT') .attr('transform', 'translate(' + xPos + ',' + yPos + ')'); chartGr.selectAll('path.plz') .style('stroke-width', 0.1) .style('fill-opacity', 0.4); d3.select(this) .style('stroke', 'black') .style('stroke-width', 2) .style('fill-opacity', 0.85); var mouseRect = mouseOverT .append('rect') .attr('x', -5) .attr('y', 0) .attr('width', mouseOverRW) .attr('height', mouseOverRH) .style('fill', 'white') .attr('fill-opacity', 0.8) .style('stroke', 'dimgrey'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .style('font-size', 14 + 'px') .style('font-weight', 'bold') .text(d.properties.PLZ) .style('font-family', 'Helvetica'); let mouseName = mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '1.2em') .style('font-size', 12 + 'px') .text('(' + d.properties.Ortschaftsname + ')') .style('font-family', 'Helvetica'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '2.2em') .style('font-size', 14 + 'px') .text('Neuansteckungen: ' + thisData.NewConfCases_7days) .style('font-family', 'Helvetica'); mouseOverRW = d3.max([mouseOverRW, mouseName.node().getBBox().width + 8]); mouseRect.attr('width', mouseOverRW); }) .on('mouseout', function() { d3.select('#mouseGr').remove(); chartGr.selectAll('path') .style('stroke-width', 0.5) .style('fill-opacity', 0.85); d3.select(this).style('stroke', 'grey'); mouseOut(); }); for (let i = 0; i < datenPlzTag.length; i++) { chartGr.select('#plz_' + datenPlzTag[i].PLZ).style( 'fill', colorScalePlz(datenPlzTag[i].NewConfCases_7days) ); } let legenden = colorScalePlz.domain(); let middle = (width - margin.left - margin.right) / 2 + margin.left; for (let i = 0; i < legenden.length - 1; i++) { chartGr.append('rect') .attr('fill', colorScalePlz(legenden[i])) .attr('stroke', 'none') .attr('x', width / 2 - (legenden.length - 1) * 20 + i * 42) .attr('y', heightMap) .attr('width', 20) .attr('height', 13); chartGr.append('text') .attr('x', width / 2 - (legenden.length - 1) * 20 + i * 42 + 10) .attr('y', heightMap+30) .text(legenden[i]) .style('font-size', 14 + 'px') .style('text-anchor', 'middle'); } return svg.node(); }36:T15bc,mapDivPlz = { let container = DOM.element('div', { style: `width:${widthNow}px;height:${height + 90}px;margin: 0 auto;` }); yield container; let zoomOrg = 9.5; let mapStat = L.map(container, { zoomControl: false }).setView( [latOrg, lngOrg], zoomOrg ); mapStat.touchZoom.disable(); mapStat.doubleClickZoom.disable(); mapStat.scrollWheelZoom.disable(); mapStat.boxZoom.disable(); mapStat.keyboard.disable(); mapStat.dragging.disable(); L.tileLayer .wms('https://wms.zh.ch/ZHWEB', { maxZoom: 14, layers: 'Geometrie' //,Beschriftungen' }) .addTo(mapStat); L.svg().addTo(mapStat); const overlay = d3 .select(mapStat.getPanes().overlayPane) .attr('pointer-events', 'all'); const svgMap = overlay.select('svg') .attr('pointer-events', 'all'); const g = svgMap .append('g') .attr('class', 'leaflet-zoom-hide') .attr('id', 'g'); //map.addControl(new customControl1()); const projectPoint = function(x, y) { const point = mapStat.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); }; const transform = d3.geoTransform({ point: projectPoint }); const path = d3.geoPath().projection(transform); const featureElement = g .selectAll('path') .data(mapPlz.features) .enter() .append('path') .style('fill', d => (d.properties.PLZ == "See" ? "none" : "grey")) .attr('id', d => 'plz_' + d.properties.PLZ) .attr('class', 'bezirke') .style('fill-opacity', 0.85) .style('stroke', 'grey') .style('cursor', 'pointer') .attr('pointer-events','all') .on('mouseover', function(d) { let thisId = d.properties.PLZ; console.log(thisId); let thisData = datenPlzTag.filter(el => el.PLZ == thisId)[0]; let that = d3.select('#plz' + thisId); let bbox = this.getBBox(); let mouseGr = g.append('g').attr('id', 'mouseGr'); var mouseOverRW = 190, mouseOverRH = 58; //Position Tooltip var xPos = bbox.x + bbox.width / 2, yPos = bbox.y + bbox.height / 2; //Korrektur, damit tooltip nicht über den Rand hinaus geht: if (xPos > widthNow / 2) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = mouseGr .append('g') .attr('id', 'mouseOverL') .attr('pointer-events', 'none'); var mouseOverP = mouseOverL.append('g').attr('id', 'mouseOverP'); var mouseOverT = mouseOverL .append('g') .attr('id', 'mouseOverT') .attr('transform', 'translate(' + xPos + ',' + yPos + ')'); g.selectAll('path.bezirke') .style('stroke-width', 0.1) .style('fill-opacity', 0.4); d3.select(this) .style('stroke', 'black') .style('stroke-width', 2) .style('fill-opacity', 0.85); var mouseRect = mouseOverT .append('rect') .attr('x', -5) .attr('y', 0) .attr('width', mouseOverRW) .attr('height', mouseOverRH) .style('fill', 'white') .attr('fill-opacity', 0.8) .style('stroke', 'dimgrey'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .style('font-size', 14 + 'px') .style('font-weight', 'bold') .text(d.properties.PLZ) .style('font-family', 'Helvetica'); let mouseName = mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '1.2em') .style('font-size', 12 + 'px') .text('(' + d.properties.Ortschaftsname + ')') .style('font-family', 'Helvetica'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '2.2em') .style('font-size', 14 + 'px') .text('Neuansteckungen: ' + thisData.NewConfCases_7days) .style('font-family', 'Helvetica'); mouseOverRW = d3.max([mouseOverRW, mouseName.node().getBBox().width + 8]); mouseRect.attr('width', mouseOverRW); }) .on('mouseout', function() { d3.select('#mouseGr').remove(); g.selectAll('path') .style('stroke-width', 0.5) .style('fill-opacity', 0.85); d3.select(this).style('stroke', 'grey'); mouseOut(); }); for (let i = 0; i < datenPlzTag.length; i++) { g.select('#plz_' + datenPlzTag[i].PLZ).style( 'fill', colorScalePlz(datenPlzTag[i].NewConfCases_7days) ); } let legenden = colorScalePlz.domain(); console.log(legenden); let middle = (widthNow - margin.left - margin.right) / 2 + margin.left; for (let i = 0; i < legenden.length - 1; i++) { g.append('rect') .attr('fill', colorScalePlz(legenden[i])) .attr('stroke', 'none') .attr('x', widthNow / 2 - (legenden.length - 1) * 20 + i * 42) .attr('y', heightMap + 90) .attr('width', 20) .attr('height', 13); g.append('text') .attr('x', widthNow / 2 - (legenden.length - 1) * 20 + i * 42 + 10) .attr('y', heightMap + 118) .text(legenden[i]) .style('font-size', 14 + 'px') .style('text-anchor', 'middle'); } d3.selectAll('.leaflet-pane').style('pointer-events', 'none'); d3.selectAll('.leaflet-map-pane').style('pointer-events', 'all'); // Function to place svg based on zoom const onZoom = () => featureElement.attr('d', path); // initialize positioning onZoom(); // reset whenever map is moved mapStat.on('zoomend', onZoom); }37:T6a4,datenZH = d3 .csv( "https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_total_csv_v2/COVID19_Fallzahlen_Kanton_ZH_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; })38:T748,mouseOver = function(thisData, that, bbox, map, data, pfad) { var thisBfs = thisData.properties.BEZ_ID; var mouseOverRW = 217, mouseOverRH = 48; //Position Tooltip var xPos = bbox.x + bbox.width / 2, yPos = bbox.y + bbox.height / 2; //Korrektur, damit tooltip nicht über den Rand hinaus geht: if (xPos > width / 2) { xPos = bbox.x + bbox.width / 2 - mouseOverRW; } if (yPos > 80) { yPos = bbox.y + bbox.height / 2 - mouseOverRH; } var mouseOverL = d3 .select(map) .append('g') .attr('id', 'mouseOverL') .attr('pointer-events', 'none'); var mouseOverP = mouseOverL.append('g').attr('id', 'mouseOverP'); var mouseOverT = mouseOverL .append('g') .attr('id', 'mouseOverT') .attr('transform', 'translate(' + xPos + ',' + yPos + ')'); mouseOverP .append('path') .attr("class", 'mouse') .attr("d", that.attr('d')) .style('fill', 'none') .style('stroke', 'dimgrey') .style('stroke-width', 2) .attr('d', path); mouseOverT .append('rect') .attr('x', -5) .attr('y', 0) .attr('width', mouseOverRW) .attr('height', mouseOverRH) .style('fill', 'white') .attr('fill-opacity', 0.8) .style('stroke', 'dimgrey'); mouseOverT .append('path') .attr("class", 'mouse') .attr("d", that.attr('d')) .style('fill', 'whitesmoke') .attr('transform', 'translate(' + -xPos + ',' + -yPos + ')'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .style('font-size', 14 + 'px') .style('font-weight', 'bold') .text(thisData.properties.BEZ_N) .style('font-family', 'Helvetica'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '1.4em') .style('font-size', 14 + 'px') .text('Neuansteckungen: ' + data.NewConfCases) .style('font-family', 'Helvetica'); }39:T2631,html`