2e:null 2f:["$","title",null,{"children":"Zeitverlauf zu den Daten aus dem Contact Tracing zu SARS-COV-2 des Kantons Zürich | Matthias Mazenauer | Observable"}] 34:T6b0,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(dataStack) .join("path") .attr("fill", ({key}) => colorArea(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) .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")); } }); }35:T53c,function hover(svg, path) { if ("ontouchstart" in document) svg .style("-webkit-tap-highlight-color", "transparent") .on("touchmove", moved) .on("touchstart", entered) .on("touchend", left) else svg .on("mousemove", moved) .on("mouseenter", entered) .on("mouseleave", left); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved(event) { event.preventDefault(); const pointer = d3.pointer(event, this); const xm = x.invert(pointer[0]); const ym = y.invert(pointer[1]); const i = d3.bisectCenter(dataLine.dates, xm); const s = d3.least(dataLine.series, d => Math.abs(d.values[i] - ym)); path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise(); dot.attr("transform", `translate(${x(dataLine.dates[i])},${y(s.values[i])})`); dot.select("text").text(s.name); } function entered() { path.style("mix-blend-mode", null).attr("stroke", "#ddd"); dot.attr("display", null); } function left() { path.style("mix-blend-mode", "multiply").attr("stroke", null); dot.attr("display", "none"); } }36:[] 32:{"id":"3c52434a972b5da1","slug":"zeitverlauf-zu-den-daten-aus-dem-contact-tracing-zu-sars-cov","title":"Zeitverlauf zu den Daten aus dem Contact Tracing zu SARS-COV-2 des Kantons Zürich","thumbnail":"ae6abc4734009755c33b081567037520f0808916bcdea4a035e511104d440406","access_level":"public","create_time":"$D2020-09-14T10:57:27.742Z","update_time":"$D2020-09-14T14:51:02.171Z","view_time":null,"first_public_time":"$D2020-09-14T13:54:28.911Z","has_unpublished_edits":null,"fork":true,"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":1202,"publish_version":1202,"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":1,"collection":null,"type":"notebook","body":{"title":"Zeitverlauf zu den Daten aus dem Contact Tracing zu SARS-COV-2 des Kantons Zürich","cells":[{"id":0,"value":"md`\n# Zeitverlauf zu den Daten aus dem Contact Tracing zu SARS-COV-2 des Kantons 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":449,"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":916,"value":"viewof offset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"viewof curve = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1175,"value":"md`Anteil der Ansteckungskontexte über die Zeit`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1190,"value":"viewof linie = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"overflow\", \"visible\");\n\n svg.append(\"g\")\n .call(xAxisL);\n\n svg.append(\"g\")\n .call(yAxisL);\n\n const path = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .selectAll(\"path\")\n .data(dataLine.series)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"d\", d => line(d.values));\n\n svg.call(hover, path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1072,"value":"line = d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(dataLine.dates[i]))\n .y(d => y(d))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Daten`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"yScale.domain().map(function(item) { return item.replace(\"Bekannte infizierende Person, aber ohne Angabe des Kontexts\",\"Ohne Angabe\"); })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"kategorien = distincts(dataEind, \"context_cat\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"dataOrg = d3.csv(\"https://raw.githubusercontent.com/openZH/covid_19_contact_tracing_ZH/master/data/Ansteckungswege.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":884,"value":"datesSelect = distincts(dataOrg, \"from\").sort(d3.ascending).filter((x, i) => i % 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"dataOrgDistinct = dataEind.filter(\n function(e) {\n return this.indexOf(e.from) > 0;\n },\n datesSelect\n).sort((a,b) => parseTime(a.from) - parseTime(b.from));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"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: \"short\"\n })\n )\n .tickValues(datesSelect.forEach(d =>parseTime(d)))\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"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":1025,"value":"dataContextWide = function () {\n \n let nest = d3O.nest()\n .key(d => d.from)\n .key(d => d.context_cat)\n .rollup(function(leaves) { return d3.sum(leaves, function(d) {return +(d.n_conf);})})\n .entries(dataOrgDistinct)\n\n \n console.log(nest)\n //console.log(nest)\n let data = [];\n for (let i = 0;i parseTime(a.week) - parseTime(b.week));\n }()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"dataLine = function() {\n const data = dataOrgDistinct;\n const columns = datesSelect;\n let dataNew = {};\n \n dataNew.dates = columns.map(parseTime).filter(el => el > parseTime(\"2020-06-01\"));\n dataNew.y = \"Anzahl Nennungen\";\n dataNew.series = [];\n for (let i = 0;i0) {\n let serie = {};\n serie.name = kategorienTot[i];\n serie.values = [];\n for (let j = 0;j d3.max(d.values))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"yAxisL = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1160,"value":"x = d3.scaleTime()\n .domain(d3.extent(dataLine.dates))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1166,"value":"xAxisL = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickValues(datesSelect))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"dataStack = d3.stack()\n .keys(kategorienTot)\n //.offset(d3.stackOffsetExpand)\n //.offset(d3.stackOffsetSilhouette)\n .offset(eval(offset))\n .order(d3.stackOrderDescending)\n (dataContextWide).filter(el => el.key.length>0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"area = d3.area()\n .curve(eval(curve))\n .x(d => xScaleWeek(parseTime(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":935,"value":"yScaleArea = d3.scaleLinear()\n .domain([0, d3.max(dataStack, 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":1001,"value":"d3.max(dataStack, d => d3.max(d, d => d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":945,"value":"colorArea = d3.scaleOrdinal()\n .domain(kategorienTot)\n .range(d3.schemeRdBu[11].reverse());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"xScaleWeek = d3\n .scaleTime()\n .domain([parseTime(d3.extent(datesSelect)[0]),parseTime(d3.extent(datesSelect)[1])])\n .range([margin.left, widthNow - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"fromMax = d3.max(dataOrg, d => d.from)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"fromMin = d3.min(dataOrg, d => d.from)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"untilMax = d3.max(dataOrg, d => d.until)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"extent = [parseTime(fromMin), parseTime(untilMax)];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"data = dataOrg.filter(function(el) {\n return el.from == fromMax && el.until == untilMax && +el.n_conf>0\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"dataEindNoSort = dataOrg.filter(el => el.context_bool == \"Eindeutig\").sort(function(a, b) {\n return d3.descending(+a.n_conf, +b.n_conf)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"dataEind = dataEindNoSort.filter(el => el.context_cat !== \"Ohne Angabe\" && el.context_cat !== \"Sonstige\").concat(dataEindNoSort.filter(el => el.context_cat == \"Sonstige\" || el.context_cat == \"Ohne Angabe\").sort(function(a, b) {\n return d3.descending(a.context_cat,b.context_cat)\n}));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"md`### Daten für den gesamten Zeitraum`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"dataTot = d3.csv(\"https://raw.githubusercontent.com/openZH/covid_19_contact_tracing_ZH/master/data/Ansteckungswege_total.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"kategorienTot = distincts(dataEindTot, \"context_cat\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"dataEindNoSortTot = dataTot.filter(el => el.context_bool == \"Eindeutig\").sort(function(a, b) {\n return d3.descending(+a.n_conf, +b.n_conf)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"dataEindTot = dataOrg.filter(el => el.context_cat !== \"Ohne Angabe\" && el.context_cat !== \"Sonstige\").concat(dataEindNoSortTot.filter(el => el.context_cat == \"Sonstige\" || el.context_cat == \"Ohne Angabe\").sort(function(a, b) {\n return d3.descending(a.context_cat,b.context_cat)\n}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"drag = {\n\n function dragstarted(d) {\n d3.select('#sliderGr').select('text').attr(\"fill\", \"white\");\n }\n\n function dragged(d) {\n let xPos = xScaleExtent( d3.timeDay.offset(d3.timeWeek.round(xScaleExtent.invert(d3.event.x)), -3));\n let xMinMax = d3.min([d3.max([xPos, xScaleExtent.range()[0]]),xScaleExtent(d3.timeDay.offset(d3.timeWeek.offset(xScaleExtent.domain()[1],-2)),1)]);\n d3.select('#sliderGr').attr('transform','translate('+xMinMax+','+15+')').attr('cursor', 'grabbing')\n d3.select('#sliderGr').select('polygon').attr('fill','grey');\n }\n\n function dragended(d) {\n d3.select('#sliderGr').select('polygon').attr('fill','lightgrey')\n d3.select('#sliderGr').attr('cursor', 'grab');\n d3.select('#sliderGr').select('text').attr(\"fill\", \"grey\");\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"d3.timeWeek.offset(xScaleExtent.domain()[1],-2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"d3.timeDay.round(xScaleExtent.invert(150))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"\nfunction getDates(extent) {\n var dateArray = new Array();\n var currentDate = extent[0];\n while (currentDate <= extent[1]) {\n dateArray.push(new Date (currentDate));\n currentDate = currentDate.addDays(7);\n }\n return dateArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"Date.prototype.addDays = function(days) {\n var date = new Date(this.valueOf());\n date.setDate(date.getDate() + days);\n return date;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function getMetadata(odswissId) {\n let link =\n \"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":6,"value":"color = d3.scaleOrdinal()\n .range(d3.schemePuOr[3])\n .domain([\"Eindeutig\",\"\",\"Nicht eindeutig\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"xScale = d3\n .scaleLinear()\n .domain([0, d3.max(dataEind, d=> +d.n_conf)])\n .range([margin.left, widthNow-margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"xScaleTot = d3\n .scaleLinear()\n .domain([0, d3.max(dataEindTot, d=> +d.n_conf)])\n .range([margin.left, widthNow-margin.right]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"xScaleExtent = d3\n .scaleTime()\n .domain(extent)\n .range([180, widthNow -80])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"yScale = d3\n .scaleBand()\n .domain(kategorien)\n .range([margin.top,heightBar - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"yScaleTot = d3\n .scaleBand()\n .domain(kategorienTot)\n .range([margin.top,heightBar - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"function distincts(array,element) {\n var flags = [], output = [], l = array.length, i;\n \n for( i=0; i\n/* required styles */\n* { font-family: Helvetica, Arial, sans-serif;\n margin: 0;\n}\n\nselect {\n font-size: 14px;\n}\n\n