2d:null 2e:["$","title",null,{"children":"COVID-19 Fallzahlen im Kanton Zürich | Matthias Mazenauer | Observable"}] 33:T50e,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const axisGr = svg.append('g'); const chartGr = svg.append('g'); axisGr.append("g").call(xAxis); axisGr.append("g").call(yAxis); chartGr .append("path") .datum(datenZH) .attr("fill", "none") .attr("stroke", "grey") .attr("stroke-width", 0.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); chartGr .append("path") .datum(datenZHFilterDate) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); if (thisDate[0][value] !== undefined) { chartGr .append('text') .attr('x', d3.min([d3.max([xScale(days), 70]), width - 70])) .attr('y', yScale(thisDate[0][value]) - 5) .attr('text-anchor', "middle") .text( days.toLocaleString("de-CH", { day: "numeric", month: "long" }) + ": " + thisDate[0][value] ); chartGr .append('circle') .attr('cx', xScale(days)) .attr('cy', yScale(thisDate[0][value])) .attr('r', 3) .style('fill', 'steelblue'); } return svg.node(); }34:T428,chart3 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const axisGr = svg.append('g'); const chartGr = svg.append('g'); //axisGr.append("g").call(xAxis); axisGr.append("g").call(yAxis); chartGr .append("path") .datum(datenZHFilterDate) .attr("fill", "none") .attr("stroke-width", 2) .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); if (thisDate[0][value] !== undefined) { chartGr .append('text') .attr('x', d3.min([d3.max([xScale(days), 70]), width - 70])) .attr('y', yScale(thisDate[0][value]) - 5) .attr('text-anchor', "middle") .text( days.toLocaleString("de-CH", { day: "numeric", month: "long" }) + ": " + thisDate[0][value] ); chartGr .append('circle') .attr('cx', xScale(days)) .attr('cy', yScale(thisDate[0][value])) .attr('r', 3) .style('fill', 'steelblue'); } return svg.node(); }35:T6c6,chart2 = { let container = DOM.element('div', { id: 'map', style: `width:${width}px;height:${width / 1.6}px` }); yield container; const map = L.map('map').addControl(new customControl1()); console.log('mapsetview'); map.setView([latOrg, lngOrg], zoomOrg); var svgLayer = L.svg(); svgLayer.addTo(map); var svg = d3 .select("#map") .select("svg") .style('pointer-events', 'auto'); var g = d3 .select("#map") .select("svg") .select('g'); g.attr("class", ' leaflet-zoom-hide'); //OpenStreetMap_BlackAndWhite L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© OpenStreetMap' }).addTo(map); function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } var transform = d3.geoTransform({ point: projectPoint }); var path = d3.geoPath().projection(transform); let featureElement = g .selectAll('path.gemeinde') .data(mapData) .enter() .append("path") .attr("d", path) .attr('class', 'gemeinde') .attr('cursor', 'pointer') .style('stroke-width', 1) .style('stroke', 'black') .style('fill-opacity', 0.8) .style('fill', d => colorScale(+d.properties.value)); function update() { console.log('update'); featureElement.attr('d', path); } map.on('zoom', update); //update() map.on("zoomend", function() { let zoomLev = map.getZoom(); }); function resetZoom() { map.setView([latOrg, lngOrg], zoomOrg); d3.selectAll('.image').remove(); //d3.selectAll('.gemeinde').style('fill-opacity', 0.3); } }36:T5d7,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) { 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.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 = undefined); 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); }); return data; })37:T2631,html`