25:null 26:["$","title",null,{"children":"Tägliche COVID-19 Fallzahlen im Kanton Zürich | Matthias Mazenauer | Observable"}] 2b:T1260,viewof dayChart = { let widthNow = d3.min([768, width]); let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => d.n_conf)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); 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, width, height]) .attr('id', 'STATchart1'); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); axisGr.append("g").call(xAxis); axisGr.append("g").call(yAxis); let balkenWidth = (width - 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", "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_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); 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('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(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(0,500)'); 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(220,500)'); 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)'); 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")); } }); }2c:T128b,viewof dayChartDeath = { let widthNow = d3.min([768, width]); let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => d.n_deceased)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); 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, width, height]) .attr('id', 'STATchart1'); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); axisGr.append("g").call(xAxis); axisGr.append("g").call(yAxis); let balkenWidth = (width - 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", "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; 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([ width - 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(0,500)'); 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(220,500)'); 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)'); 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")); } }); }2d:T12c8,dayChartHosp = { let widthNow = d3.min([768, width]); let yScale = yScaleF(scaleTyp, d3.extent(datenZH, d => +d.current_hosp)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); 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, width, height]) .attr('id', 'STATchart1'); const axisGr = svg.append('g'); const mouseGr = svg.append('g'); const chartGr = svg.append('g').attr('pointer-events', 'none'); axisGr.append("g").call(xAxis); axisGr.append("g").call(yAxis); let balkenWidth = (width - 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); 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; 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([ 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 (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(0,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('Hospitalisierte'); 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('Beatmete'); 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")); } }); }2e:T9b7,map = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 20 + heightMap + 30]); const chartGr = svg .append('g') .attr('id', 'chartGr') .attr('transform', 'translate(0,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 'steelblue'; } 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 = (width - margin.left - margin.right) / 2 + margin.left; let legScale = d3 .scaleLinear() .range([ margin.left + width / 10, width - margin.left - margin.right - width / 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', (width - 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(); }2f:T144f,mapDiv = { let widthNow = d3.min([width,768]); 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); }30:T1558,mapDivPlz = { let widthNow = d3.min([width,768]); 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(); 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') .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'); // 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); }31: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; })32: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'); }33:T2631,html`