2e:null 2f:["$","title",null,{"children":"Altersverteilung der positiv Getesteten im Kanton Zürich | Office for Statistics and Data of the Canton of Zurich | Observable"}] 34:T7d2,ageCatPer = { let height = 1, marginBottom = 20, marginTop = 30, data; if (AreaChartAge !== null && AreaChartAge.data !== undefined) { console.log(AreaChartAge) height = 170; data = ageSeriesAnteil.filter(el => el.key == AreaChartAge.data.key)[0]; } else { height = 170; } const svg = d3.create("svg") .attr("viewBox", [0, 0, widthNow , height]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,widthNow -margin.right]); let yScale = d3.scaleLinear() .domain([0,0.6]) .range([height-marginBottom,marginTop]); let yAxis = g => g .attr("transform", `translate(${widthNow -margin.right},0)`) .call(d3.axisLeft(yScale).tickSize(widthNow -margin.left-margin.right+5).ticks(5).tickSizeOuter(0).tickFormat(d3.format(".0%"))); let yAxisGr = svg.append("g").call(yAxis); yAxisGr.selectAll('.tick').selectAll('line').style('stroke', 'lightgrey'); yAxisGr.selectAll('path').style('stroke', 'none') if (AreaChartAge !== null && AreaChartAge.data !== undefined) { let balken = svg.selectAll('rect.balken') .data(data); balken.enter() .append('rect') .attr('class','balken') .attr('x', d => scaleWeek(d.data.week)) .attr('y', d => yScale(d[1]-d[0])) .attr('height', d => yScale(0)-yScale(d[1]-d[0])) .attr('width', scaleWeek.bandwidth()) .style('fill', d => d3.rgb(AreaChartAge.color).darker()) balken.transition() .attr('x', d => scaleWeek(d.data.week)) .attr('y', d => yScale(d[1]-d[0])) .attr('height', d => yScale(0)-yScale(d[1]-d[0])) .attr('width', scaleWeek.bandwidth()) .style('fill', d => d3.rgb(AreaChartAge.color).darker()) svg.append('text') .attr('x',margin.left) .attr('y', 22) .text('Anteil in Alterskategorie: '+data.key) } svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); return svg.node(); }35:T69c,viewof AreaChartAge = { //let height = 550; const svg = d3.create("svg").attr("viewBox", [0, 0, widthNow, height]); let thisData, thisColor, thisKey; svg .append("g") .selectAll("path.area") .data(ageSeries) .join("path") .attr("fill", ({ key }) => color(key)) .attr('class', 'area') .attr("d", area) .on('mouseover', function(d, { key }) { console.log('mouse'); console.log(d); thisData = d; thisColor = d3.select(this).attr("fill"); thisKey = key; d3.selectAll('.area').style('opacity', 0.8); d3.select(this) .style('opacity', 1) .attr('fill', d3.color(thisColor).darker()); }) .on('mouseout', function() { d3.selectAll('.area').style('opacity', 1); d3.select(this) .style('opacity', 1) .attr('fill', d3.color(d3.select(this).attr("fill")).brighter()); }); svg .append('text') .attr('x', -margin.top) .attr('y', 12) .text('Anzahl Fälle') .style('fill', 'dimgrey') .attr('transform', 'rotate(-90)') .style('text-anchor', 'end'); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append('text') .attr('x', widthNow - margin.right) .attr('y', height - 5) .text('Kalenderwochen') .style('fill', 'dimgrey') .style('text-anchor', 'end'); svg.selectAll('text').style('font-size', 'calc(0vw + 16px)'); return Object.assign(svg.node(), { value: null, onmousemove: event => { event.currentTarget.value = { data: thisData, color: thisColor, key: thisKey }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }36:T97d,viewof legendeChart = { let rows; if (widthNow<=600) { rows = 1; } else { rows = 0; } let padding = 10, title = 'Alterskategorien', heightPer = 15, filterA = [], height = (heightPer+2*25)*(rows+1); const svg = d3.create("svg") .attr("viewBox", [0, -10, widthNow, height+10]); let widthPer = (widthNow-margin.left-margin.right)/(ages.length)*(rows+1); svg.append('text') .attr('x', margin.left+padding/2) .attr('y', 13) .text(title) .style('font-weight', 'bold'); let count = ages.length; let getRow = function(index) { Math.round(index/count)*rows; } console.log(ages) const rects = svg.selectAll('rect') .data(ages).enter() .append('rect') .attr('x', (d,i) => padding/2+margin.left+i*widthPer-(Math.round(i/count)*rows*(widthNow-margin.left-margin.right))) //.attr('dx',(d,i) => ) .attr('class', 'selected') .attr('y', (d,i) => 22+46*Math.round(i/count)*rows) .attr('width', widthPer-padding) .attr('height', heightPer) .style('fill', d => color(d)) .style('stroke-width', 1.5) .style('stroke', d => color(d)) .style('cursor', 'pointer'); svg.selectAll('text.legende') .data(ages) .enter() .append('text') .attr('class', 'legende') .attr('x', (d,i) => margin.left+i*widthPer+widthPer/2-(Math.round(i/count)*rows*(widthNow-margin.left-margin.right))) .attr('y', '3.5em') .attr('dy', (d,i)=> 46*Math.round(i/count)*rows) .attr('text-anchor', 'middle') .text(d => d) .style('pointer-events', 'none'); let selected = ages; rects.on('click', function(d) { selected = ages; if (d3.select(this).attr('class') == 'selected') { d3.select(this).attr('class', 'not') .attr('fill-opacity', 0.2); filterA.push(d); } else { d3.select(this).attr('class', 'selected') .attr('fill-opacity', 1); filterA.splice(filterA.indexOf(d),1); } console.log(filterA) selected = ages.filter( function(e) { return this.indexOf(e) < 0; },filterA ); }) svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); return Object.assign(svg.node(), { value: {selected}, onclick: event => { event.currentTarget.value = { selected: selected }; event.currentTarget.dispatchEvent(new CustomEvent("input")); } }); }37:T2084,alterChartWeek = { let widthNow = d3.min([750, width]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 500]) .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: 140, bottom: 40, right: 10 }; let agesAll = []; for (let i = 0; i < ages.length; i++) { let obj = {}; if (ages[i] != "unbekannt") { obj.age = +ages[i].replace("+", "-").split("-")[0]; obj.label = ages[i]; agesAll.push(obj); } } console.log(agesAll); let scaleAge = d3 .scaleBand() .domain(agesAll.map((d) => d.label)) .range([420 - margin.bottom, margin.top]); let scaleWeek = d3 .scaleBand() .domain(weeks) .range([margin.left, widthNow - margin.right]); let max = 0; for (let week = 0; week < weeks.length; week++) { let totalWeek = 0; let now = weeks[week]; for (let age = 0; age < agesAll.length; age++) { let ageCat = agesAll[age].label; let now = weeks[week]; let thisDate = datenAlterGeschlecht.filter( (el) => el.Week == now && el.AgeYearCat == ageCat ); let tot = 0; for (let i = 0; i < thisDate.length; i++) { tot += thisDate[i].NewConfCases; } if (tot >= max) { max = tot; } } } let colorScaleAge = d3.scaleSequential(d3.interpolatePlasma).domain([0, max]); let scaleTotal = d3 .scaleLinear() .domain([0, d3.max(datenAlterGeschlechtTotal, (d) => +d.value)]) .range([130, 20]) .nice(); let totAxis = chart.append("g"); let widthChart = datenAlterGeschlechtTotal.length * scaleWeek.bandwidth(); var yAxisTot = d3 .axisLeft(scaleTotal) .tickSizeOuter(0) .tickSize(widthChart + 30) .tickFormat((d) => d.toLocaleString("de-CH")) .ticks(5); 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) .tickValues( scaleWeek.domain().filter(function (d, i) { return !(i % 5); }) ) .tickFormat((d) => d - Math.floor(d / 53) * 53); var gX = axisGr .append("g") .call(xAxis) .attr("transform", "translate(0," + (420 - 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", widthNow - margin.right) .attr("y", 415) .text("Kalenderwochen") .style("fill", "dimgrey") .style("text-anchor", "end"); 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 < weeks.length; week++) { let totalWeek = 0; let now = weeks[week]; for (let age = 0; age < agesAll.length; age++) { let ageCat = agesAll[age].label; let now = weeks[week]; let thisDate = datenAlterGeschlecht.filter( (el) => el.Week == now && el.AgeYearCat == ageCat ); let tot = 0; for (let i = 0; i < thisDate.length; i++) { tot += thisDate[i].NewConfCases; } totalWeek += tot; chart .append("rect") .attr("x", scaleWeek(+now)) .attr("y", scaleAge(ageCat)) .attr("width", scaleWeek.bandwidth()) .attr("height", scaleAge.bandwidth()) .attr("fill", colorScaleAge(tot)) .on("mouseover", function () { let mouseGr = chart .append("g") .attr("id", "mouseGr") .attr("pointer-events", "none"); let deltaX = 0; if (scaleWeek(+now) >= widthNow / 2) { deltaX = -105; } else { deltaX = 5 + scaleWeek.bandwidth(); } mouseGr .append("rect") .attr("x", scaleWeek(+now) + deltaX) .attr("y", scaleAge(ageCat) - 2) .attr("width", "100") .attr("height", scaleAge.bandwidth() + 4) .attr("fill", "white") .attr("fill-opacity", "0.9"); mouseGr .append("text") .attr("x", scaleWeek(+now) + deltaX + 3) .attr("y", scaleAge(ageCat) + 16) .text(ageCat + ": " + tot.toLocaleString("de-CH")); chart.select("#balken_" + now).style("fill", "grey"); chart.select("#text_" + now).attr("visibility", "visible"); }) .on("mouseout", function () { d3.select("#mouseGr").remove(); chart.select("#balken_" + now).style("fill", "silver"); chart.select("#text_" + now).attr("visibility", "hidden"); }); } let totalBalken = chart .selectAll("rect.total") .data(datenAlterGeschlechtTotal) .enter() .append("rect") .attr("id", (d) => "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.toLocaleString("de-CH")) .style("font-size", "12px") .attr("visibility", "hidden"); } let x = Object.assign( colorScaleAge .copy() .interpolator(d3.interpolateRound(margin.left, widthNow - margin.right)), { range() { return [margin.left, widthNow - margin.right]; } } ); svg .append("image") .attr("x", margin.left) .attr("y", 440) .attr("width", widthNow - margin.left - margin.right) .attr("height", 20) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(colorScaleAge.interpolator()).toDataURL()); let ticks = width / 188, tickFormat, tickValues, tickSize = 6; let tickAdjust = (g) => g.selectAll(".tick line").attr("y1", margin.top + margin.bottom - 180); if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3 .range(n) .map((i) => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } chart .append("g") .attr("transform", "translate(0,460)") .call( d3 .axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat((d) => d.toLocaleString("de-CH")) .tickSize(6) .tickValues(tickValues) ) .call(tickAdjust) .call((g) => g.select(".domain").remove()) .call((g) => g .append("text") .attr("x", margin.left) .attr("y", -30) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .style("font-size", "12px") .text("Anzahl Fälle") .style("fill", "dimgrey") ); return svg.node(); }38:Te96,slider_snap = function(min, max) { var range = [min, max] // set width and height of svg var w = 600 var h = 80 var margin = {top: 0, bottom: 20, left: 10, right: 10} // dimensions of slider bar var width = w - margin.left - margin.right; var height = h - margin.top - margin.bottom; // create x scale var x = d3.scaleLinear() .domain(range) // data space .range([0, width]); // display space // create svg and translated g var svg = d3.select(DOM.svg(w,h)) const g = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`) // draw background lines g.append('g').selectAll('line') .data(d3.range(range[0], range[1]+1)) .enter() .append('line') .attr('x1', d => x(d)).attr('x2', d => x(d)) .attr('y1', 0).attr('y2', height) .style('stroke', '#ccc') // labels var labelL = g.append('text') .attr('id', 'labelleft') .attr('x', 0) .attr('y', height + 5) .text(range[0]) var labelR = g.append('text') .attr('id', 'labelright') .attr('x', 0) .attr('y', height + 5) .text(range[1]) // define brush var brush = d3.brushX() .extent([[0,0], [width, height]]) .on('brush', function() { var s = d3.event.selection; // update and move labels labelL.attr('x', s[0]) .text(Math.round(x.invert(s[0]))) labelR.attr('x', s[1]) .text(Math.round(x.invert(s[1])) - 1) // move brush handles handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + [ s[i], - height / 4] + ")"; }); // update view // if the view should only be updated after brushing is over, // move these two lines into the on('end') part below svg.node().value = s.map(d => Math.round(x.invert(d))); svg.node().dispatchEvent(new CustomEvent("input")); }) .on('end', function() { if (!d3.event.sourceEvent) return; var d0 = d3.event.selection.map(x.invert); var d1 = d0.map(Math.round) d3.select(this).transition().call(d3.event.target.move, d1.map(x)) }) // append brush to g var gBrush = g.append("g") .attr("class", "brush") .call(brush) // add brush handles (from https://bl.ocks.org/Fil/2d43867ba1f36a05459c7113c7f6f98a) var brushResizePath = function(d) { var e = +(d.type == "e"), x = e ? 1 : -1, y = height / 2; return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8); } var handle = gBrush.selectAll(".handle--custom") .data([{type: "w"}, {type: "e"}]) .enter().append("path") .attr("class", "handle--custom") .attr("stroke", "#000") .attr("fill", '#eee') .attr("cursor", "ew-resize") .attr("d", brushResizePath); // override default behaviour - clicking outside of the selected area // will select a small piece there rather than deselecting everything // https://bl.ocks.org/mbostock/6498000 gBrush.selectAll(".overlay") .each(function(d) { d.type = "selection"; }) .on("mousedown touchstart", brushcentered) function brushcentered() { var dx = x(1) - x(0), // Use a fixed width when recentering. cx = d3.mouse(this)[0], x0 = cx - dx / 2, x1 = cx + dx / 2; d3.select(this.parentNode).call(brush.move, x1 > width ? [width - dx, width] : x0 < 0 ? [0, dx] : [x0, x1]); } // select entire range gBrush.call(brush.move, range.map(x)) return svg.node() }39:[{"id":"1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","href":"https://static.observableusercontent.com/files/1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","name":"statistisches_amt_kt_zh.png","type":"image/png","lastModified":1597750750431.464,"size":10045}] 32:{"id":"a39855dca1dbca09","slug":"altersverteilung-der-positiv-getesteten-im-kanton-zurich","title":"Altersverteilung der positiv Getesteten im Kanton Zürich","thumbnail":"eace05d2c807b5ed94025e7579fa1343a7a5ee0edec64d5a0cea172f8fad6d94","access_level":"public","create_time":"$D2020-08-18T11:39:10.431Z","update_time":"$D2022-03-16T15:14:59.829Z","view_time":null,"first_public_time":"$D2020-08-18T13:31:58.641Z","has_unpublished_edits":null,"fork":{"id":"a8b4008e3f68ad25","slug":"altersverteilung-der-positiv-getesteten-im-kanton-zurich","title":"Altersverteilung der positiv Getesteten im Kanton Zürich","owner":{"id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":3448,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null}],"members":[{"type":"individual","id":"32d8f5276b0e4535","login":"cgrb","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a7d9a10b8456291ccefbc9c7c7b9ecdc5d5f31095c0a77bdea09bd75590057bc","tier":null,"role":"editor"},{"type":"individual","id":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"81f9fa676fc4c7d1","slug":"covid19","title":"covid19","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Altersverteilung der positiv Getesteten im Kanton Zürich","cells":[{"id":4,"value":"md`\n# Altersverteilung der positiv Getesteten im Kanton Zürich\n\n### [Fach- und Koordinationsstelle OGD](https://open.zh.ch/content/internet/justiz_inneres/ogd/de/home.html)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3363,"value":"viewof zeitraum = radio({\n title: \"Bitte wählen Sie den gewünschten Zeitraum\",\n description: \"\",\n options: [\n { label: \"Gesamter Zeitraum\", value: \"2020-01-01\" },\n { label: \"Ab Juni 2020 (Ende erste Welle)\", value: \"2020-05-25\" },\n {\n label: \"Ab Juni 2021 (Eintritt Stabilisierungsphase)\",\n value: \"2021-05-25\"\n }\n ],\n value: \"2020-05-25\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2908,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2364,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2737,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2558,"value":"offset = \"d3.stackOffsetZero\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3366,"value":"import { radio } from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"md`## Altersverteilung`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2243,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3368,"value":"fromWeek = +d3.timeFormat(\"%W\")(d3.timeParse(\"%Y-%m-%d\")(zeitraum))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3378,"value":"fromYear = +d3.timeFormat(\"%Y\")(d3.timeParse(\"%Y-%m-%d\")(zeitraum))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## Daten`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2621,"value":"viewof curve = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"ages = distincts(datenAlterGeschlecht,\"AgeYearCat\").filter(el => el!='unbekannt')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"odswissId = \"covid_19-fallzahlen-kanton-zuerich\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"datenAlterGeschlecht = d3\n .csv(\n \"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_alter_geschlecht_csv/COVID19_Fallzahlen_Kanton_ZH_altersklassen_geschlecht.csv\"\n //\"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_alter_geschlecht_csv/COVID19_Fallzahlen_Kanton_ZH_alter_geschlecht.csv\"\n )\n .then(function (data) {\n data.forEach(function (d) {\n d.Week = +d.Week + (d.Year - 2020) * 53;\n d.NewConfCases = +d.NewConfCases;\n d.NewDeaths = +d.NewDeaths;\n for (let i = 0; i < datenAlterGeschlechtBasis.length; i++) {\n if (\n datenAlterGeschlechtBasis[i].AgeYearCat == d.AgeYearCat &&\n datenAlterGeschlechtBasis[i].Gender == d.Gender\n ) {\n d.NewConfCasesAnt =\n +d.NewConfCases / datenAlterGeschlechtBasis[i].Inhabitants;\n }\n }\n });\n let dataF = data.filter(function (row) {\n return row.Week >= fromWeek + (fromYear - 2020) * 53;\n });\n return dataF;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"datenAlterGeschlechtTotal = d3.nest()\n .key(d => d.Week)\n .rollup(function(leaves) { return d3.sum(leaves, function(d) {return +(d.NewConfCases);})})\n .entries(datenAlterGeschlecht)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"datenAlterGeschlechtBasis = d3\n .csv(\n \"https://raw.githubusercontent.com/openZH/covid_19/master/fallzahlen_kanton_alter_geschlecht_csv/COVID19_Einwohner_Kanton_ZH_altersklassen_geschlecht.csv\"\n ) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2605,"value":"color.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2602,"value":"color = d3.scaleOrdinal()\n .domain(ages)\n .range(d3.schemeRdBu[11].reverse());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3107,"value":"color(\"100+\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"datenAlterGeschlechtWoche = datenAlterGeschlecht.filter(\n el => el.Week == d3.max(datenAlterGeschlecht, d => +d.Week)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2340,"value":"datenAlterWide = function () {\n let nest = d3.nest()\n .key(d => d.Week)\n .key(d => d.AgeYearCat)\n .rollup(function(leaves) { return d3.sum(leaves, function(d) {return +(d.NewConfCases);})})\n .entries(datenAlterGeschlecht)\n let data = [];\n for (let i = 0;i xScaleWeek(d.data.week))\n .y0(d => yScaleArea(d[0]))\n .y1(d => yScaleArea(d[1]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"weeks = distincts(datenAlterGeschlecht,\"Week\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"function distincts(array,element) {\n var flags = [], output = [], l = array.length, i;\n \n for( i=0; i +d)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1846,"value":"colorScaleAge = d3\n .scaleSequential(d3.interpolateGreys)\n .domain([d3.max(datenAlterGeschlecht, d => +d.NewConfCases),0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Libraries, parameters and functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3295,"value":"widthNow = d3.min([750, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"ch_DE = d3.timeFormatDefaultLocale({\n \"decimal\": \".\",\n \"thousands\": \"'\",\n\t\"grouping\": [3],\n\t\"currency\": [\"CHF\", \" \"],\n\t\"dateTime\": \"%a %b %e %X %Y\",\n\t\"date\": \"%d.%m.%Y\",\n\t\"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\"],\n\t\"shortDays\": [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n\t\"months\": [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"],\n\t\"shortMonths\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"height = 430","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"margin = ({ top: 10, right: 40, bottom: 45, left: 65 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2360,"value":"xScaleWeek = d3\n .scaleLinear()\n .domain(d3.extent(weeks))\n .range([margin.left, widthNow - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2362,"value":"yScaleArea = d3.scaleLinear()\n .domain([0, d3.max(ageSeries, d => d3.max(d, d => d[1]))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2813,"value":"function() {\n if (offset == 'd3.stackOffsetExpand') {\n yScaleArea.domain([0,1])\n }\n}()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2809,"value":"yScaleArea.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2488,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},${0})`)\n .call(d3.axisLeft(yScaleArea).tickFormat(d => d.toLocaleString(\"de-CH\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${height - margin.bottom})`).call(\n d3\n .axisBottom(xScaleWeek)\n .tickSizeOuter(0)\n\n .tickFormat(d => d - Math.floor(d / 53) * 53)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"d3= require('d3@v5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2671,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2670,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2629,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"