31:T506,encoding_options = [ { label: 'Alter', value: 'age_groups', format: '.0%', suffix: '', right: 'höherer Anteil an älteren Einwohnern' }, { label: 'Bevölkerung', value: 'EWZ', format: '.0s', suffix: 'Einwohner', right: 'mehr Menschen' }, { label: 'Fläche', value: 'KFL', format: '.0s', suffix: 'Fläche in km2', right: 'mehr Fläche' }, { label: 'Bevölkerungsdichte', value: 'bev_dichte', format: '.0s', suffix: 'Einwohner je km2', right: 'dichter besiedelt' }, { label: 'Anzahl der infizierten Personen', value: 'cases', format: ',d', suffix: 'infizierte Personen', right: 'mehr Infizierte' }, { label: 'infizierte Personen (relativ)', value: 'cases_per_100k', format: 'd', suffix: 'infizierte Personen je 100.000 Einwohner', right: 'höherer Anteil Infizierter Personen' }, { label: 'neuinfizierte Personen (relativ)', value: 'cases7_per_100k', format: 'd', suffix: 'neuinfizierte Personen je 100.000 Einwohner', right: 'höherer Anteil neuinfizierter Personen' }, { label: 'verstorbene Personen', value: 'deaths', format: ',d', suffix: 'verstorbene Personen', right: 'mehr Todesfälle' }, { label: 'verstorbene Personen (relativ)', value: 'death_rate', format: '.1%', suffix: 'verstorbene Personen je 100.000 Einwohner', right: 'höherer Anteil Todesfälle' }, ]32:T247b,graphic = { const svg = d3.select(DOM.svg(width, height)); const chart = svg.append('g') .attr('transform', `translate(${chart_margin.left}, ${chart_margin.top})`); const axes = chart.append('g').attr('class', 'axes'); let lastXFormat = '.0%'; let lastYFormat = '.0%'; let xAxis = axes.append('g').call(x_axis(lastXFormat)); let yAxis = axes.append('g').call(y_axis(lastYFormat)); const xLabel = chart.append('text') .attr('class', 'direction-label direction-label-x') .attr('x', chart_width / 2) .attr('y', chart_height + 5); const yLabel = chart.append('text') .attr('class', 'direction-label direction-label-y') .attr('x', -chart_height / 2) .attr('y', 6) .attr('dy', '-2em') .attr('transform', 'rotate(-90)'); const cells = chart .append('g') .attr('class', 'cells') .selectAll('g') .data(voronoi(data).polygons(), d => d && d.data && d.data.zipcode) .join('g') .attr('class', 'cell'); console.log("Start"); console.log(voronoi(data).polygons()); const circles = cells.append('circle'); const labels = cells .append('text') .attr('class', 'label') .text(d => d && d.data && d.data.wiki.Landkreis) // .text(d => d.data.wiki.Landkreis) /* .style("text-anchor", (d,i) => { // if (!d) { console.log("i undefined: "+ i); if (i === 28) { let str = "x(" + encoding.x + "): " + x(data[i][encoding.x]) + " y(" + encoding.y + "): " + y(data[i][encoding.y]); console.log(str); }; return x(d.data[encoding.x]) < 200 ? "start" : "end"}); */ // .text((d, i) => { console.log(i + ":"); console.log(d); return d && d.data & d.data.wiki.Landkreis;}) //.style("text-anchor", d => d && d.data && x(d.data[encoding.x]) < 200 ? "start" : "end"); const line = chart.append('line') .attr('class', 'regression') .datum(linear_regression(data)); const map = svg.append('g') .attr('transform', `translate(${(width * 0.18) - map_margin.right}, ${map_margin.top})`); const tracts = map .selectAll('g') .data(geojson2.features) .join('g') .attr('class', 'tract'); const geoPath = d3.geoPath(projection); const polygons = tracts .append('path') .attr('class', 'polygon') .attr('fill', d => color(d.properties[encoding_defaults.color])) .attr('d', geoPath); tracts .append('text') .attr('class', 'label') // .text(d => d.properties.zipcode) .text(d => d.properties.wiki.Landkreis) .style("text-anchor", d => d.properties.zipcode === "09272" ? "end" : "middle") .attr('x', d => geoPath.centroid(d)[0]) .attr('y', d => geoPath.bounds(d)[0][1] - 3); let mouseoutTimeout; [[cells, d => d.data], [tracts, d => d.properties]] .forEach(([els, accessor]) => { els .on('mouseover', (data) => { const zip = accessor(data); // old: if (zip.population) { // if (zip.tested) { clearTimeout(mouseoutTimeout); mutable active_zip = zip; // } }) .on('mouseout', () => { mouseoutTimeout = setTimeout(() => { mutable active_zip = undefined; }, 100); }); }); return { svg, rendered: false, update(encoding, duration = 300) { const t = svg.transition().duration(this.rendered ? duration : 0); x.domain(d3.extent(data, d => d[encoding.x])); y.domain(d3.extent(data, d => d[encoding.y])); color.domain(d3.extent(data, d => d[encoding.c])); size.domain(d3.extent(data, d => d[encoding.s])); voronoi.x(d => x(d[encoding.x])).y(d => y(d[encoding.y])); linear_regression.x(d => d[encoding.x]).y(d => d[encoding.y]); const regression = linear_regression(data); const agi = (Object.values(encoding).find(k => /^ge_/.test(k)) || '').replace('ge_A', ''); const [ [xFormat, xDesc, xLabelText], [yFormat, yDesc, yLabelText], [cFormat, cDesc], [sFormat, sDesc], ] = ['x', 'y', 'c', 's'].map((k) => { const def = encoding_options.find(o => o.value === encoding[k]) || {}; return [ def.format || '.0%', def.suffix || `sind ${agi} Jahre oder älter`, def.right || 'höherer Anteil an älteren Einwohnern', ]; }); const colorFormat = (d, i, e) => d3.format(cFormat)(d) + (i === e.length - 1 ? ` ${cDesc}` : ''); const sizeFormat = (d, i, e) => d3.format(sFormat)(d) + (i === e.length - 1 ? ` ${sDesc}` : ''); const appendDesc = (axis, selection, desc) => { axis.select('.axis-desc').remove(); return axis.select(selection) .append('text') .attr('class', 'axis-desc') .attr('fill', 'currentColor') .text(desc); }; // const appendXDesc = () => appendDesc(xAxis, '.tick:first-of-type', xDesc) const appendXDesc = () => appendDesc(xAxis, '.tick:last-of-type', xDesc) .attr('y', '2.3em'); const appendYDesc = () => appendDesc(yAxis, '.tick:last-of-type', yDesc) .attr('x', '-3') .attr('y', '1.7em'); // Cross-fade axis if format changes, otherwise slide if (xFormat === lastXFormat) { xAxis.select('.axis-desc').text(xDesc); xAxis.transition(t).call(x_axis(xFormat)).on('end', () => setTimeout(appendXDesc, 0)); } else { xAxis.transition(t).attr('opacity', 0).remove(); xAxis = axes.append('g').attr('opacity', 0).call(x_axis(xFormat)); appendXDesc(); xAxis.transition(t).attr('opacity', 1); } if (yFormat === lastYFormat) { yAxis.select('.axis-desc').text(yDesc); yAxis.transition(t).call(y_axis(yFormat)).on('end', () => setTimeout(appendYDesc, 0)); } else { yAxis.transition(t).attr('opacity', 0).remove(); yAxis = axes.append('g').attr('opacity', 0).call(y_axis(yFormat)); appendYDesc(); yAxis.transition(t).attr('opacity', 1); } lastXFormat = xFormat; lastYFormat = yFormat; xLabel.text(`${xLabelText} ⟶`); yLabel.text(`${yLabelText} ⟶`); // console.log("update:"); // console.log(voronoi(data).polygons()); let res; if (encoding.x === "deaths" && encoding.y === "deaths") { // voronoi cells don't exist res = data.map(d => d.data = d); } else { res = voronoi(data).polygons(); } cells .data(res, d => d && d.data && d.data.zipcode) // .data(voronoi(data).polygons(), d => d && d.data && d.data.zipcode) // .data(data.map(d => d.data = d)) .join('g'); cells.selectAll('path').remove(); cells .append('path') // .attr('stroke', 'red') .attr('d', d => d && d.join && `M${d.join('L')}Z`); labels // .style("text-anchor", d => d && d.data && x(d.data[encoding.x]) < 200 ? "start" : "end"); .style("text-anchor", d => x(d.data[encoding.x]) < 200 ? "start" : "end") .transition(t) .attr('x', d => d && d.data && x(d.data[encoding.x])) .attr('y', d => d && d.data && y(d.data[encoding.y])); circles .transition(t) .attr('cx', d => d && d.data && x(d.data[encoding.x])) .attr('cy', d => d && d.data && y(d.data[encoding.y])) .attr('r', d => d && d.data && size(d.data[encoding.s])) .attr('color', d => d && d.data && color(d.data[encoding.c])); line .datum(regression) .transition(t) .attr('x1', d => x(d[0][0])) .attr('x2', d => x(d[1][0])) .attr('y1', d => y(d[0][1])) .attr('y2', d => y(d[1][1])); polygons .transition(t) .attr('fill', d => color(d.properties[encoding.c])); mutable legend_bar = html`

${legend({ color, tickFormat: colorFormat, width: 280 })}

${d3.select(DOM.svg(290, 40)) .attr('class', 'legend-circle') .append('g') .call(legendCircle() .tickValues(d3.extent(data, d => d[encoding.s])) .tickSize(20) .tickFormat(sizeFormat) .scale(size)).node().parentNode }

`; console.log("a: " + regression.a); mutable regression_desc = md`Die in der linken Visualisierung grau eingezeichnete Regressionsline hat die Gleichung: ${tex`y = ${regression.a.toFixed(3)}x ${regression.b > 0 ? '+' : '-'} ${Math.abs(regression.b.toFixed(3))}`} mit ${tex`R^2 = ${regression.rSquared.toFixed(3)}`}`; this.rendered = true; }, select(datum) { tracts.attr('class', 'tract'); cells.attr('class', 'cell'); if (datum) { [[cells, 'cell', x => x.data.zipcode], [tracts, 'tract', x => x.properties.zipcode]] .forEach(([els, className, accessor]) => els .filter(d => accessor(d) === datum.zipcode) .attr('class', `${className} active`) .raise() .filter((_, i) => !i) .attr('class', `${className} active active-label`)); } set_infobox(datum); }, }; }33:T50e,set_infobox = (data) => { const infobox = document.getElementById('graphic-infobox'); if (!infobox) return; if (data) infobox.innerHTML = `

${data.wiki.Landkreis}

Einwohnerzahl	${format_int(data.EWZ)} (${format_int(data.bev_dichte)} Einwohner je km²)
Neuinfizierte Personen	${format_int(data.cases7)} (${format_int(data.cases7_per_100k)} neuinfizierte Personen je 100.000 Einwohner)
Infizierte Personen	${format_int(data.cases)} (${format_int(data.cases_per_100k)} infizierte Personen je 100.000 Einwohner)
Todesfälle	${format_int(data.deaths)} (${format_percent(data.death_rate)} der infizierten Personen)
Altersverteilung	${[5, 15, 35, 60, 80] .map(agi => [`${agi}`, format_percent(data[`ge_A${agi}`])]) .map(([key, value]) => ` ${value} sind älter als ${key} Jahre `) .join('')}

`; else infobox.innerHTML = ''; }34:Tcea,style = html``35:[] 2f:{"title":"Entwicklung des Coronavirus in Bayern (Teil 4)","cells":[{"id":0,"value":"md`# Entwicklung des Coronavirus in Bayern (Teil 4)\n\nDas ist die Fortsetzung von [diesem Artikel (Teil 1)](https://observablehq.com/@ee2dev/coronavirus-in-bayern/2), [Teil 2](https://observablehq.com/@ee2dev/coronavirus-in-bayern-teil-2) und [Teil 3](https://observablehq.com/@ee2dev/coronavirus-in-bayern-teil-3). Die bisherigen Darstellungen basieren auf den publizierten Daten des Bayerischen Landesamtes für Gesundheit und Lebensmittelsicherheit (LGL). Leider sind aus den veröffentlichten Daten etliche Größen nicht ableitbar, so wird bei der Anzahl der neuinfizierten Personen nicht die Differenz der veröffentlichten Anzahl der infizierten Personen der letzten Tage verwendet. Stattdessen wird auf statistische Verfahren zurückgegriffen, um z.B. die zeitliche Zuordnung zum Erkrankungsbeginn zu modellieren.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`## Visualisierung der Daten des Robert-Koch-Institutes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`\nFür die folgende Visualisierung wurde der Code von [Nick Bosman](https://observablehq.com/@autopaideia/covid-19-in-nyc-by-zip-code-income) auf die bayrischen Landkreise angepasst. Täglich aktualisierte Daten zum Coronavirus stammen vom [Robert Koch-Institut (RKI)](https://www.rki.de/DE/Content/InfAZ/N/Neuartiges_Coronavirus/Fallzahlen.html) (Datenstand: ${rki_api.features[0].attributes.last_update.split(\",\")[0]}, RKI, [dl-de/by-2-0](https://www.govdata.de/dl-de/by-2-0)) und werden durch demografische Daten vom [Bayerischen Landesamt für Statistik](https://www.statistik.bayern.de/statistik/index.html) ergänzt:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`- Alter *(Prozentsatz der Bevölkerung, die in dem gewählten Altersbereich sind)*\n- Bevölkerung *(Anzahl der Einwohner)*\n- Fläche *(Fläche in Quadratkilometer)*\n- Bevölkerungsdichte *(Anzahl der Einwohner je Quadratkilometer)*\n- Anzahl der infizierten Personen *(kumulierte Anzahl der bis dato Infizierten)*\n- infizierte Personen (relativ) *(infizierte Personen je 100.000 Einwohner)*\n- neuinfizierte Personen (relativ) *(neuinfizierte Personen der letzten 7 Tage je 100.000 Einwohner)*\n- verstorbene Personen *(an oder mit SARS-CoV-2 verstorbene Personen)*\n- verstorbene Personen (relativ) *(an oder mit SARS-CoV-2 verstorbene Personen je 100.000 Einwohner)*\n\n👉 **Wählen Sie die Merkmale für X, Y, Farbe, Größe und gegebenfalls das Intervall für die Alterseinschränkung aus:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"mutable regression_desc = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof options = {\n const encodings = Object.keys(encoding_defaults).map(k => [\n k.charAt(0).toUpperCase() + k.slice(1),\n encoding_defaults[k].match(/^ge_A/) ? 'age_groups' : encoding_defaults[k],\n ]);\n const agOptions = [5, 15, 35, 60, 80];\n // const fields = encodings.map(([title, value]) => select({ title, value, options: encoding_options }));\n const fields = encodings.map(([title, value]) => {\n title = (title === \"Color\") ? \"Farbe\" : (title === \"Size\") ? \"Größe\" : title;\n return select({ title, value, options: encoding_options })\n });\n const keys = encodings.map(([title]) => title.toLowerCase()[0]);\n\n fields.push(slider({\n title: 'Alterseinschränkung',\n min: 0,\n max: agOptions.length - 1,\n step: 1,\n value: 4,\n format: i => `${i} Jahre oder älter`,\n getValue: i => agOptions[i.value],\n }));\n\n keys.push('ag');\n return inputsGroup([fields], [keys]);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"mutable legend_bar = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"myMap = html`

\n ${graphic.svg.node()}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"md`Viele Dinge fliessen in das Design einer Visualisierung ein, ein ganz wesentlicher Aspekt ist die Entscheidung welches Merkmal mit Farben dargestellt wird und die konkrete Farbwahl.
\nVielleicht können Sie die Visualisierung noch verbessern? 😃`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof colorSelection = select({\n title: \"👉 Wählen Sie hier eine andere Farbabbildung aus: \",\n options: \"Blues-Greens-Greys-Oranges-Purples-Reds-Turbo-Viridis-Inferno-Magma-Plasma-Cividis-Warm-Cool-CubehelixDefault-BuPu-GnBu-OrRd-PuBuGn-PuBu-PuRd-RdPu-YlGnBu-YlOrBr-YlOrRd-Rainbow-Sinebow\".split(\"-\"), \n value: 'OrRd',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`

\n# 🙋‍♂️\nDieser Artikel wurde erstellt durch die 👩‍💻 👨‍💻[Data Visualization in Munich Meetup](https://www.meetup.com/Data-Visualization-Meetup-Munich/) Gruppe. Wenn Ihnen der Artikel gefallen hat, schauen Sie in nächster Zeit mal wieder hier vorbei - wir planen die Seiten zu aktualisieren und zu erweitern.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Quellen\nBei der Erstellung dieses Artikels wurden verschiedene Open Source Tools und Daten verwendet, u.a.:\n\n👍 Bayerisches Landesamt für Gesundheit und Lebensmittelsicherheit
\n👍 Robert Koch Institut
\n👍 observablehq.com
\n👍 OpenDataLab
\n👍 wikipedia
\n👍 leaflet.js
\n👍 vega lite
\n👍 Destatis
\n👍 d3.js
\n\nDie konsolidierten Daten sind [hier](https://github.com/EE2dev/dataViz_meetup/tree/master/covid-19) abgelegt.

Ein ganz großes Dankeschön an die open source community (insbesondere Mike Bostock) für die fantastische Unterstützung! 👍👍👍👍👍👍👍\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"md`

\n## Anhang`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`#### Funktionen und Variablen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"height = Math.round(width / 1.618)","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"chart_width = Math.round(width * 0.58)","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"chart_height = Math.round(chart_width / 1.618)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"chart_margin = ({ top: 20, right: 0, bottom: 0, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"map_margin = ({ top: 14, right: 0, bottom: 2, left: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"encoding_defaults = ({\n /*\n x: 'EWZ',\n y: 'cases7_per_100k',\n color: 'cases7_per_100k',\n size: 'EWZ',\n */\n x: 'cases_per_100k',\n y: 'death_rate',\n color: 'cases7_per_100k',\n size: \"ge_A80\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"encoding = ['x', 'y', 'c', 's']\n .map(key => [key, options[key] === 'age_groups' ? `ge_A${options.ag}` : options[key]])\n .reduce((acc, [k, v]) => Object.assign(acc, { [k]: v }), {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"x = d3.scaleLinear()\n .range([0, chart_width - chart_margin.left - chart_margin.right])\n .domain(d3.extent(data, d => d[encoding_defaults.x]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"y = d3.scaleLinear()\n .range([chart_height - chart_margin.top - chart_margin.bottom, 0])\n .domain(d3.extent(data, d => d[encoding_defaults.y]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"// color = d3.scaleSequential(d3.interpolateOrRd)\n color = d3.scaleSequential(d3[\"interpolate\" + colorSelection])\n .domain(d3.extent(data, d => d[encoding_defaults.color]))\n .unknown('#eee')","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"size = d3.scaleSqrt()\n .range([chart_width * 0.008, chart_width * 0.02])\n .domain(d3.extent(data, d => d[encoding_defaults.size]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"linear_regression = d3.regressionLinear()\n .x(d => d[encoding_defaults.x])\n .y(d => d[encoding_defaults.y])","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"voronoi = d3.voronoi()\n .extent([\n [-chart_margin.left, -chart_margin.top],\n [chart_width + chart_margin.right, chart_height + chart_margin.bottom],\n ])\n /*\n .x(d => x(d[encoding.x]))\n .y(d => y(d[encoding.y]))\n */\n .x(d => x(d[encoding_defaults.x]))\n .y(d => y(d[encoding_defaults.y]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"x_axis = format => g => g\n .attr('transform', `translate(0, ${chart_height - chart_margin.top - chart_margin.bottom})`)\n .attr('class', 'axis x')\n .call(d3.axisBottom(x).ticks(5, format).tickSize(-chart_height))","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"y_axis = format => g => g\n .attr('class', 'axis y')\n .call(d3.axisLeft(y).ticks(5, format).tickSize(-chart_width))","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"format_percent = d3.format('.2%')","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"format_int = d3.format(',d')","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"/*\nprojection = d3.geoIdentity()\n .reflectY(true)\n .fitSize([width, height - map_margin.top - map_margin.bottom], geojson3)\n*/\n\nprojection = d3.geoMercator()\n .fitSize([width + 220, height - map_margin.top - map_margin.bottom - 200], geojson3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"mutable active_zip = undefined","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"graphic.update(encoding)","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"graphic.select(active_zip)","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`#### Daten`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"rki_api = {\n // BL_ID = 9, return geometry: false\n \nlet endpoint = \"https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=BL_ID+%3D+9&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=*&returnGeometry=false&returnCentroid=false&featureEncoding=esriDefault&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnUniqueIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnQueryGeometry=false&returnDistinctValues=false&cacheHint=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=pjson&token=\";\n \n return fetch(endpoint).then(response => response.json());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"geojson2 = d3.json(\"https://cdn.jsdelivr.net/gh/EE2dev/dataViz_meetup/covid-19/data/landkreise_simplify200.geojson?b=\" + Date.now()); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"geojson3 = {\n let rki_original = rki_api.features.map(d => d.attributes);\n let newFeatures = geojson2.features.map(d => d.properties); \n \n for (let landkreis of newFeatures) {\n let obj = {};\n // 1: add age groups\n let total = landkreis.destatis.population;\n let cummulative = 0;\n for (const ag of ageGroup_SortedDesc) {\n cummulative += landkreis.destatis.population_agegroup[ag.data];\n obj[ag.cummulative] = cummulative / total; \n }\n obj.A_total = total;\n // 2: add rki data\n obj = Object.assign(obj, rki_original.filter(d => d.RS === landkreis.RS)[0]);\n obj.cases7 = Math.round(obj.cases7_per_100k * obj.EWZ / 100000);\n obj.death_rate = obj.death_rate / 100;\n obj.bev_dichte = obj.EWZ / obj.KFL;\n // 3: add zipcode as key\n obj.zipcode = landkreis.RS; \n landkreis = Object.assign(landkreis, obj);\n };\n return geojson2;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"data = d3.groups(geojson3.features, d => d.properties.zipcode)\n .map(([, [{ properties }]]) => properties) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"ageGroup_SortedDesc = {\n let ar = [];\n ar.push({data: \"A80+\", cummulative: \"ge_A80\"});\n ar.push({data: \"A60-A79\", cummulative: \"ge_A60\"});\n ar.push({data: \"A35-A59\", cummulative: \"ge_A35\"});\n ar.push({data: \"A15-A34\", cummulative: \"ge_A15\"});\n ar.push({data: \"A05-A14\", cummulative: \"ge_A5\"});\n ar.push({data: \"A00-A04\", cummulative: \"ge_A0\"});\n return ar;\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`#### Libraries und imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"d3 = require('d3@5', 'd3-array@2', 'd3-regression@1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { select, slider, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"import { legend } from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"import { legendCircle } from '@harrystevens/circle-legend';","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}