31:T85c,{ // from https://observablehq.com/@autopaideia/covid-19-curves-u-s vl.vega.timeFormatLocale(locale); // show dates in German const line = vl.markLine({ interpolate: 'monotone' }) .encode( vl.x() .fieldT('date') .timeUnit('utcyearmonthdate') .axis({ tickCount: 'month', format: '%b', grid: false, tickSize: 6, labelColor: '#929292' }) .title(null), vl.y() .fieldQ('mean') .axis(null) .scale({ nice: false }) .title(null), // vl.color({ value: 'red' }), vl.color({ value: vlColors.fill }), ); const text = vl.markText({ align: 'right', dx: -13, dy: -4, baseline: 'top', fontSize: 9 }) .encode( vl.text() .fieldQ('argmax.mean_ceil') .format(',d'), vl.x() .fieldT('argmax.date') .timeUnit('yearmonthdate') .title(null), vl.y() .fieldQ('argmax.mean') .axis(null) .title(null), ) .transform( vl.calculate().as('mean_ceil').calculate('ceil(datum.mean)'), vl.aggregate({ op: 'argmax', field: 'mean', as: 'argmax' }), ); const tick = text.markTick({ size: 10, xOffset: -5, align: 'right', fill: '#000' }); // const plot = vl.layer(line.markArea({ opacity: 0.2 }), line, text, tick) const plot = vl.layer(line.markArea({ opacity: vlColors.opacity }), line, text, tick) .width(165) .height(100) .facet(vl.facet().fieldN('state').title(null)) .columns(4) .transform( vl.window({ op: 'mean', field: type, as: 'mean' }) .groupby('state') .frame([-3, 3]), ) .resolve({ axis: { x: 'independent' }, scale: { y: state_scale_type } }) .config({ style: { cell: { stroke: 'transparent' } }, header: { labelFontSize: 14, labelPadding: 0 }, }) //.data(state_data // .filter(d => d.total) // .map(d => d.map(v => Object.assign({ state: d.state }, v))) // .flat()) .data(corona_data2); // .render(); return plot.render(); // return html`

${JSON.stringify(plot.toJSON(), 0, 2)}

`; // format JSON data }32:T70e,make_chart = (data, width, domain) => { // embed.vega.timeFormatLocale(locale); // show dates in German vl.vega.timeFormatLocale(locale); // show dates in German const bars = vl.markBar({ opacity: 0.2 }) .encode( vl.x() .fieldT('date2') .timeUnit('utcyearmonthdate') .scale({ domain: date_extent.map(d3.utcFormat('%Y-%m-%d'))}) .axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 }) .title(null), vl.y() //.fieldQ(type) .fieldQ("deaths") .scale({ domain, nice: false }) .axis({ tickCount: 4, domain: false, ticks: false, labelAlign: 'left', labelBaseline: 'bottom' }) .title(null), vl.color({ value: 'red' }), ); // Push the line/area layers to the right edge of the bars (1 bandwidth) //const xOffset = width / d3.timeDay.count(new Date(date_extent[0]), new Date(date_extent[1])); const xOffset = width / d3.timeDay.count(...date_extent); const line = bars.markLine({ interpolate: 'monotone', xOffset }) .encode(vl.y().fieldQ('mean')); const area = line.markArea({ opacity: 0.2, xOffset }); console.log(data); return vl.layer(bars, area, line) .data(data) .transform( // vl.window({ op: 'mean', field: type, as: 'mean' }).frame([-3, 3]), vl.window({ op: 'mean', field: "deaths", as: 'mean' }).frame([frame_neg, frame_pos]), ) .width(width-1) .height(width / 5) .autosize({ type: 'fit-x', contains: 'padding' }) .config({ style: { cell: { stroke: 'transparent' } }, axis: { labelColor: '#929292', gridColor: '#ececec' }, padding: { top: 5, right: 0, bottom: 5, left: 0 }, }) .render(); // return html`

${JSON.stringify(plot.toJSON(), 0, 2)}

`; // format JSON data }33:[] 2f:{"title":"Entwicklung des Coronavirus in Bayern (Teil 3)","cells":[{"id":0,"value":"md`# Entwicklung des Coronavirus in Bayern (Teil 3)\n\nDas ist die Fortsetzung von [diesem Artikel (Teil 1)](https://observablehq.com/@ee2dev/coronavirus-in-bayern/2) und [Teil 2](https://observablehq.com/@ee2dev/coronavirus-in-bayern-teil-2). Hier werden die Anzahl der Todesfälle und eine aktuelle Übersicht aller Landkreise/ kreisfreien Städte in Bayern dargestellt. Die nachfolgenden Darstellungen sind von [Nick Bosman](https://observablehq.com/@autopaideia/covid-19-curves-u-s) übernommen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Entwicklung der Todesfälle in Bayern`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`In der nachfolgenden Grafik wird die kumulierte Anzahl der mit dem Coronavirus verbundenen Todesfälle in einem Landkreis/ kreisfreien Stadt dargestellt.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof lkr = select({\n title: \"👉 Wählen Sie hier Ihren Landkreis/ kreisfreie Stadt aus:\",\n options: wiki_data.map(l => l.Landkreis).sort(),\n value: wiki_data.map(l => l.Landkreis)[1],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"md`Anstatt nur die täglichen Werte als Balkenhöhe anzuzeigen, wird hier zusätzlich die Entwicklung mit einer Linie dargestellt. Wenn die Linie durch alle gemeldeten Werte geht, werden Effekte, die durch die Erfassung bedingt sind überbetont. Stattdessen können wir die Linie durch den Mittelwert aus einem festgelegten umliegenden Zeitintervall zeichnen. Dadurch wird die Linie nicht so geprägt durch Verzögerungen/ Korrekturen der gemeldeten Werte. Der grundsätzliche Verlauf des Trends bleibt aber erhalten und wird besser sichtbar. Zu beachten ist, daß dadurch im allgemeinen der tatsächlich maximale/ minimale Wert nicht mehr abzulesen ist!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof frame_neg = slider({\n min: -7, \n max: 0, \n step: 1, \n value: 0, \n title: \"👉 Bestimmen Sie selbst, wieviele Tage zurück für die Mittelwertbildung gegangen werden soll: \", \n description: \"Die Bedeutung für 0: keine vergangenen Tage, -7: die vergangene Woche\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof frame_pos = slider({\n min: 0, \n max: 7, \n step: 1, \n value: 0, \n title: \"👉 Bestimmen Sie selbst, wieviele Tage nach vorne für die Mittelwertbildung gegangen werden soll: \", \n description: \"Die Bedeutung für 0: keine zukünftigen Tage, 7: die kommende Woche\",\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"{\n const coronaData = corona_data2.filter(d => d.name === lkr);\n coronaData.state = lkr;\n coronaData.total = coronaData[coronaData.length-1].deaths;\n let ar = coronaData.filter((ele, i) => i >= coronaData.length - 7);\n coronaData.past_week = ar[ar.length-1].deaths - ar[0].deaths; \n \n return make_figure(coronaData.state, coronaData, width); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## Auf einen Blick - alle 96 Landkreise/ kreisfreien Städte`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`Im folgenden können Sie die aktuelle Entwicklung für alle Landkreise/ kreisfreie Städte auf einmal anschauen.
Für die folgenden Liniengrafiken wurde das Zeitintervall [-3 Tage, +3 Tage] für die Mittelwertbildungen festgelegt. Sie können eines von folgenden Merkmalen auswählen:\n\n- **Infizierte Personen**: Summe aller gemeldeten Personen mit nachgewiesener Infektion\n- **Neuinfizierte Personen**: Anzahl der gemeldeten Personen mit nachgewiesener Infektion des letzten Tages\n- **Todesfälle**: Summe aller gemeldeten mit dem Coronavirus verbundenen Todesfälle\n- **Neue Todesfälle**: Anzahl der mit dem Coronavirus verbundenen Todesfälle des letzten Tages\n\nZudem können Sie noch die Skalierung anpassen.

\n👉 Treffen Sie hier Ihre Wahl:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof type = radio({\n title: 'Auf der Y-Achse aufgetragenes Merkmal:',\n options: [\n { label: 'Infizierte Personen', value: 'infected' },\n { label: 'Neuinfizierte Personen', value: 'infected_new' },\n { label: 'Todesfälle', value: 'deaths' },\n { label: 'Neue Todesfälle', value: 'deaths_new' },\n ],\n value: 'infected',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"viewof state_scale_type = radio({\n title: 'Skalierung',\n options: [\n { label: 'unabhängig', value: 'independent' },\n { label: 'einheitlich', value: 'shared' },\n ],\n value: 'independent',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"md`\n
\n
\nBisher wurden Daten vom Bayerischen Landesamt für Gesundheit und Lebensmittelsicherheit visualisiert. Wollen Sie nun noch Daten vom Robert-Koch-Institut sehen? \n\n👉 [Dann geht's hier weiter.](https://observablehq.com/@ee2dev/entwicklung-des-coronavirus-in-bayern-teil-4)\n# 🤓`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`

\n## Anhang`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"md`#### Funktionen und Variablen`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"vlColors = {\n return (type === \"deaths\" || type === \"deaths_new\") ? {fill: \"red\", opacity: 0.2} : {fill: \"steelblue\", opacity: 0.7};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"locale = {\n return {\n \"decimal\": \",\",\n \"thousands\": \".\",\n \"grouping\": [3],\n \"currency\": [\"€\", \"\"],\n \"dateTime\": \"%a %b %e %X %Y\",\n \"date\": \"%d.%m.%Y\",\n \"time\": \"%H:%M:%S\",\n \"periods\": [\"AM\", \"PM\"],\n \"days\": [\"Sonntag\", \"Montag\", \"Dienstag\", \"Mittwoch\", \"Donnerstag\", \"Freitag\", \"Samstag\"],\n \"shortDays\": [\"So\", \"Mo\", \"Di\", \"Mi\", \"Do\", \"Fr\", \"Sa\"],\n \"months\": [\"Januar\", \"Februar\", \"März\", \"April\", \"Mai\", \"Juni\", \"Juli\", \"August\", \"September\", \"Oktober\", \"November\", \"Dezember\"],\n \"shortMonths\": [\"Jan\", \"Feb\", \"Mär\", \"Apr\", \"Mai\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Okt\", \"Nov\", \"Dez\"]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"date_extent = {\n const extent = d3.extent(corona_data_new, d => d.date)\n .map(d => new Date(d));\n extent[0].setDate(extent[0].getDate() - 1);\n extent[1].setDate(extent[1].getDate() + 1);\n\n return extent;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"make_figure = async (title, data, width, domain) => html`

${title}

\n \n ${getString(data.past_week, \" TODESFALL IN DER LETZTEN WOCHE\",\" TODESFÄLLE IN DER LETZTEN WOCHE\")}
\n ${getString(data.total, \" TODESFALL GESAMT\", \" TODESFÄLLE GESAMT\")}\n

\n ${await make_chart(data, width, domain)}\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"function getString(value, singular, plural) {\n return value === 1 ? \"1 \" + singular : value.toLocaleString('de') + \" \" + plural;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`#### Daten`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"corona_data2 = corona_data_new.map(d => Object.assign({ state: (d.name === \"Neustadt a.d. Aisch-Bad Windsheim\") ? \"Neustadt a.d. Aisch\" : d.name}, d)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`#### Libraries und imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {vl_data as feature_data, vl_data1 as wiki_data, rbc_data2 as corona_data, bdf_data3 as corona_data_new, verdopplungszeit, xTageInzidenz, getStatsObject} from \"@ee2dev/coronavirus-in-bayern/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import { radio, select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}