2e:null 2f:["$","title",null,{"children":"Tägliche COVID-19 Fallzahlen im Kanton Zürich: Karten | Office for Statistics and Data of the Canton of Zurich | Observable"}] 34:Te1f,map = { let widthNow = d3.min([width, 768]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 20 + heightMap + 40]); const chartGr = svg .append("g") .attr("id", "chartGr") .attr("transform", "translate(" + (widthNow - width) / 2 + ",20)"); chartGr .append("text") .attr("x", margin.left + 150) .attr("y", 0) .text("Kalenderwoche " + (week_extent[1] - anzJahre * 52)); 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 da = d3.select(this).data()[0]; let thisId = da.properties.BEZ_ID; let thisData = datenRegionWoche.filter( (el) => el.DistrictId == da.properties.BEZ_ID )[0]; let that = d3.select("#bez_" + thisId); let bbox = this.getBBox(); let mouseGr = chartGr.append("g").attr("id", "mouseGr"); mouseOver(da, 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 / +datenRegionWoche[i].Population) * 10000 ) ); } 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)); let x = Object.assign( colorScale .copy() .interpolator( d3.interpolateRound(margin.left + 50, widthNow - margin.right - 50) ), { range() { return [margin.left + 50, widthNow - margin.right - 50]; } } ); let ticks = 5, tickFormat, tickValues = [0, 1, 2, 3, 4, 5, 6, 7, 8], tickSize = 6; svg .append("g") .attr("transform", "translate(0," + (heightMap + 40) + ")") .call( d3.axisBottom(x).tickFormat(d3.format(".0f")).tickSize(6) //.tickValues(tickValues) ) //.call(tickAdjust) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", margin.left + 50) .attr("y", -30) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .style("font-size", "12px") .text("Anzahl Fälle auf 10'000 Einw. pro Kalenderwoche") .style("fill", "dimgrey") ); svg .append("image") .attr("x", margin.left + 50) .attr("y", heightMap + 22.5) .attr("width", widthNow - margin.left - margin.right - 100) .attr("height", 20) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(colorScale.interpolator()).toDataURL()); return svg.node(); }35:T10eb,bezirkeSM = { let heightPer = 130; let widthAll = width; const padding = 20; let grid = {}; let scale = 1; const margin = { left: 20, top: 30, 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 - 5, 0]); let yAxis = g => g.attr("transform", `translate(${widthPer},0)`).call( d3 .axisLeft(yScale) .tickSize(widthPer) .ticks(5) .tickSizeOuter(0) .tickFormat(d => d.toLocaleString("de-CH")) ); let counter = 101; for (let y = 0; y < grid.y; y++) { for (let x = 0; x < grid.x; x++) { let thisData = datenRegion.filter(el => 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(event, 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('Kalenderwoche ' + 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(); }36:T146c,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 widthRamp = widthNow - margin.left - margin.right - 100; svg .append('text') .attr('x', margin.left + 50) .attr('y', heightMap + 65) .text(catPlz[0]) .style('text-anchor', 'middle'); svg .append('text') .attr('x', margin.left + 50 + widthRamp) .attr('y', heightMap + 65) .text(catPlz[catPlz.length - 1]) .style('text-anchor', 'middle'); svg .append('text') .attr('x', margin.left + 50 + widthRamp / 4) .attr('y', heightMap + 65) .text(catPlz[Math.round((catPlz.length - 1) / 4)]) .style('text-anchor', 'middle'); svg .append('text') .attr('x', margin.left + 50 + (3 * widthRamp) / 4) .attr('y', heightMap + 65) .text(catPlz[Math.round((3 * (catPlz.length - 1)) / 4)]) .style('text-anchor', 'middle'); svg .append('text') .attr('x', margin.left + 50 + widthRamp / 2) .attr('y', heightMap + 65) .text(catPlz[Math.round((catPlz.length - 1) / 2)]) .style('text-anchor', 'middle'); svg .append("image") .attr("x", margin.left + 50) .attr("y", heightMap + 22.5) .attr("width", widthNow - margin.left - margin.right - 100) .attr("height", 20) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(d3.interpolateGreens).toDataURL()); return svg.node(); }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:T851,mouseOver = function(thisData, that, bbox, map, data, pfad) { var thisBfs = thisData.properties.BEZ_ID; var mouseOverRW = 217, mouseOverRH = 68; //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'); mouseOverT .append('text') .attr('x', 2) .attr('y', 16) .attr('dy', '2.8em') .style('font-size', 14 + 'px') .text("pro 10'000 Einw.: " + Math.round(data.NewConfCases/+data.Population*10000*10)/10) .style('font-family', 'Helvetica'); }39:T2631,html`