2e:null 2f:["$","title",null,{"children":"Tägliche COVID-19 Fallzahlen im Kanton Zürich: Karten | Matthias Mazenauer | Observable"}] 34:T12f2,mapDivPlzOL = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 20 + heightMap + 80]); 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 da = d3.select(this).data()[0]; let thisId = da.properties.PLZ; 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(da.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('(' + da.properties.Ortschaftsname + ')') .style('font-family', 'Helvetica'); console.log(thisData); if (thisData !== undefined) { 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++) { if (+datenPlzTag[i].PLZ > 0) { 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; const half = Math.ceil(legenden.length / 2); let legendenA = []; legendenA.push(legenden.splice(0, half)); legendenA.push(legenden.splice(-half)); for (let j = 0; j < legendenA.length; j++) { let legende = legendenA[j]; for (let i = 0; i < legende.length; i++) { chartGr .append('rect') .attr('fill', colorScalePlz(legende[i])) .attr('stroke', 'none') .attr('x', width / 2 - (legende.length - 1) * 15 + i * 32) .attr('y', heightMap + j * 32) .attr('width', 20) .attr('height', 13); chartGr .append('text') .attr('x', width / 2 - (legende.length - 1) * 15 + i * 32 + 10) .attr('y', heightMap + 27 + j * 32) .text(legende[i]) .style('font-size', 12 + 'px') .style('text-anchor', 'middle'); } } return svg.node(); }35:T2631,html`