2e:null 2f:["$","title",null,{"children":"Altersverteilung der positiv Getesteten im Kanton Zürich | Matthias Mazenauer | Observable"}] 34:T7c2,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, width, height]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,width-margin.right]); let yScale = d3.scaleLinear() .domain([0,0.6]) .range([height-marginBottom,marginTop]); let yAxis = g => g .attr("transform", `translate(${width-margin.right},0)`) .call(d3.axisLeft(yScale).tickSize(width-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:T677,viewof AreaChartAge = { //let height = 550; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 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',margin.left) .attr('y',height) .text('Wochen') .style('fill','dimgrey') 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:T96e,viewof legendeChart = { let rows; if (width<=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, width, height+10]); let widthPer = (width-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*(width-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*(width-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:T152d,alterChartWeek = { let widthNow = d3.min([750, width]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 400]) .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: 120,bottom:40,right:10}; let agesAll = []; for (let i = 0;i d.label)) .range([400-margin.bottom,margin.top]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,widthNow-margin.left-margin.right]); let colorScaleAge = d3 .scaleSequential(d3.interpolateInferno) .domain([0,165]) let scaleTotal = d3.scaleLinear() .domain([0,d3.max(datenAlterGeschlechtTotal, d => +d.value)]) .range([110,20]) let totAxis = chart.append('g'); let widthChart = datenAlterGeschlechtTotal.length*scaleWeek.bandwidth(); var yAxisTot = d3.axisLeft(scaleTotal).tickSizeOuter(0).tickSize(widthChart+30).ticks(3) 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); var gX = axisGr.append("g").call(xAxis).attr('transform','translate(0,'+(400-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',margin.left) .attr('y',395) .text('Woche') .style('fill','dimgrey') 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 (el.Week == now && el.AgeYearCat == ageCat)); let tot = 0; for (let i = 0;i '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) .style('font-size','12px') .attr('visibility','hidden') } return svg.node(); }38:Tc54,alterChart = { let widthNow = d3.min([750, width]); const svg = d3 .create("svg") .attr("viewBox", [0, 0, widthNow, 300]) .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: 0,bottom:40,right:10}; let agesAll = []; for (let i = 0;i d.label)) .range([300-margin.top-margin.bottom,margin.top]); let scaleWeek = d3.scaleBand() .domain(weeks) .range([margin.left,widthNow-margin.left-margin.right]); let colorScaleAge = d3 .scaleSequential(d3.interpolateInferno) .domain([0,165]) var xAxis = d3.axisBottom(scaleWeek).tickSizeOuter(0); var gX = axisGr.append("g").call(xAxis).attr('transform','translate(0,'+(300-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',margin.left) .attr('y',295) .text('Woche') .style('fill','dimgrey') chart.append('text') .attr('x',-margin.top) .attr('y',20) .text('Alterskategorien') .style('fill','dimgrey') .attr('transform','rotate(-90)') .style('text-anchor','end'); for (let age = 0;age (el.Week == now && el.AgeYearCat == ageCat)); let tot = 0; for (let i = 0;i g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, widthL - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", widthL - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, widthL - marginRight)), {range() { return [marginLeft, widthL - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("widthL", widthL - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. 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); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, widthL - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, widthL - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); svg.selectAll('text').attr('font-size', 'calc(0vw + 16px)'); return svg.node(); }3a: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() }3b:[{"id":"1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","href":"https://static.observableusercontent.com/files/1a2e95ea62804b9cfef595b6d55690d274e2ec68f77b6c9754f76555cb5d2f5c095cf0878b26e1d78d40b195aa1362a87bbf177a7e091ae6a2d691d9eac64147","name":"statistisches_amt_kt_zh.png","type":"image/png","lastModified":1595400511238.59,"size":10045}] 32:{"id":"a8b4008e3f68ad25","slug":"altersverteilung-der-positiv-getesteten-im-kanton-zurich","title":"Altersverteilung der positiv Getesteten im Kanton Zürich","thumbnail":"f079ccd7fc7058c81b365e62ec319ea11978b6ec4f697c2ee8873a488527a27b","access_level":"public","create_time":"$D2020-07-22T06:48:31.238Z","update_time":"$D2020-08-18T11:36:33.550Z","view_time":null,"first_public_time":"$D2020-07-22T06:49:29.630Z","has_unpublished_edits":null,"fork":{"id":"4e02a689f8b18026","slug":"tagliche-covid-19-fallzahlen-im-kanton-zurich","title":"Tägliche COVID-19 Fallzahlen im Kanton Zürich: Karten","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":"starter_2024"},"version":3207,"publish_version":3207,"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":"37f1612f224a0555","login":"mmznrstat","name":"Matthias Mazenauer","avatar_url":"https://avatars-next.observableusercontent.com/ef3d946ccf160cca48b7f42bef702f21fe993881f97ef1654f4d43be2e36569d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"70bd090763f7d3d8","slug":"stat_covid19","title":"STAT_covid19","owner":{"id":"a8029a35a2e0d70a","login":"mmznrstat","name":"Matthias Mazenauer"}},"type":"notebook","body":{"title":"Altersverteilung der positiv Getesteten im Kanton Zürich","cells":[{"id":4,"value":"md`\n

${Object.assign(\n await FileAttachment(\"statistisches_amt_kt_zh.png\").image(),\n { alt: 'Girl reading', style: 'width: 100%; max-width: 440px;' }\n)}\n\n# Altersverteilung der positiv Getesteten im Kanton Zürich\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":18,"value":"shareTweet(document.baseURI, {\n buttonText: \"Auf Twitter teilen\",\n text: \"COVID-19 Fallzahlen im Kanton Zürich\",\n hashtags: \"covid19zh\",\n via: \"opendatazh\"\n})","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":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":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":1733,"value":"$38","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":64,"value":"md`**Beschreibung**: ${metadata.result.description.de}\n\n**Author**: ${metadata.result.author}\n\n**Quelle**: https://opendata.swiss/de/dataset/covid_19-fallzahlen-kanton-zuerich`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"html` $\"\"$ `","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;\n d.NewConfCases = +d.NewConfCases;\n d.NewDeaths = +d.NewDeaths;\n for(let i=0;i 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":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 = 530","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"margin = ({ top: 10, right: 40, bottom: 40, left: 60 })","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, width - 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.attr(\"transform\", `translate(${margin.left},${0})`).call(\n d3.axisLeft(yScaleArea)\n \n )","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.axisBottom(xScaleWeek).tickFormat(d =>\n d.toLocaleString(\"de-CH\", {\n day: \"numeric\",\n month: \"long\"\n })\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"metadata = getMetadata(odswissId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function getMetadata(odswissId) {\n let link =\n \"https://cors-anywhere.herokuapp.com/https://opendata.swiss/api/3/action/package_show?id=\" +\n odswissId;\n const metadata = d3.json(link);\n //https://opendata.swiss/api/3/action/package_show?id=\n return metadata;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1771,"value":"d3= require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import { shareTweet } from \"@pierreleripoll/share-on-twitter-button\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2667,"value":"$39","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":"$3a","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":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"