30:T5df,plot_dates = ({ country }) => { let DEATHS_OR_CONFIRMED_DATA = DEATHS_OR_CASES ? DATA_CONFIRMED : DATA_DEATHS; let dates = DEATHS_OR_CONFIRMED_DATA.find((x) => x.country === country).dates; let population_data = get_population({ country: country }); let population = SHOW_PERCENTAGE && population_data ? Number(population_data.population) : NaN; let deaths_or_confirmed = DEATHS_OR_CASES ? "confirmed cases" : "deaths"; let values = dates.map((x) => { return { ...x, count: Number.isNaN(population) ? x.count : (x.count / population) * 100 }; }); let relative_values = _.zip(values, [0, ...values.slice(0, -1)]).map( ([x, y]) => { return { ...x, count: x.count - y.count }; } ); console.log(relative_values); return vegalite({ data: { values: RELATIVE_INCREASE ? relative_values : values }, title: `${country} _${deaths_or_confirmed}_`, mark: "line", autosize: "fit", width: width, encoding: { x: { timeUnit: "year-month-date", field: "date", type: "temporal", title: "Year" }, y: { // aggregate: "count", field: "count", type: "quantitative", title: Number.isNaN(population) ? "Cases 1=1" : "% of population (1 = 1%)", scale: Number.isNaN(population) || !FORCE_Y_AXIS ? undefined : { domain: [0, 120] } } } }); }31:T6ca,function toggle(params = {}) { const { value, title, title_off, disabled } = _.defaults(params, { title: '', title_off: params.title_off || params.title || '', value: false }); let title_style = { flex: 1, fontStyle: `italic`, fontWeight: `bold`, paddingRight: 5 }; let off_title_html = html`${title}`; let on_title_html = html`${title_off}`; const root = html`

${off_title_html}

${toggle_svg()}

${on_title_html}

`; root.value = value; let update = () => { let slider = root.querySelector('g.slide'); slider.style.transition = 'transform .5s ease-in-out'; if (root.value) { slider.style.transform = `translate(0, 0)`; console.log('Root value true:', slider.style.transform); off_title_html.style.opacity = 0.3; on_title_html.style.opacity = 1; } else { slider.style.transform = `translate(-32px, 0)`; console.log('Root value false:', slider.style.transform); off_title_html.style.opacity = 1; on_title_html.style.opacity = 0.3; } }; update(); const titlespan = root.querySelector('span.title'); root.querySelector('a').onclick = e => { e.preventDefault(); root.value = !root.value; root.dispatchEvent(new CustomEvent('input')); update(); }; return root; }32:T1381,toggle_svg = () => html``33:[] 2e:{"title":"Corona compare","cells":[{"id":0,"value":"md`# Corona compare`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"md`\nThe y axis is scaled to 1 = 0.01%, so don't be too alarmed (still wash your hands 🙃).\nI am not an academic so I have no idea how graphs work.\n\nAlso\nhttps://google.com/covid19-map/\nis really good as well\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof SELECTED_COUNTRY = autoSelect({\n options: DATA_CONFIRMED.map(x => x.country),\n placeholder: \"Select a region\",\n title: \"Country\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"viewof FORCE_Y_AXIS = toggle({\n title_off: 'Fit y axis to Italy',\n title: 'Fit y axis to data',\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof DEATHS_OR_CASES = toggle({\n title: 'Show death count',\n title_off: 'Show confirmed cases count',\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof SHOW_PERCENTAGE = toggle({\n title_off: 'Show percentage of population',\n title: 'Show absolute count',\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"viewof RELATIVE_INCREASE = toggle({\n title_off: \"Show increase\",\n title: \"Show total recorded\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"selected_country_view = SELECTED_COUNTRY\n ? plot_dates({\n country: SELECTED_COUNTRY\n })\n : html`Select a region above`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"uhh = plot_dates({ country: \"Netherlands\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"plot_dates({\n country: \"Italy\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"md`\n## Download data from github source\n\nI use data from this github repository, that is updated every day.\n[github.com/CSSEGISandData/COVID-19](https://github.com/CSSEGISandData/COVID-19/tree/master/csse_covid_19_data/csse_covid_19_time_series)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"csv_row_to_dates = country => {\n let {\n Lat,\n Long,\n \"Province/State\": province,\n \"Country/Region\": country_name,\n ...dates\n } = country;\n let as_array = Object.entries(dates).map(([key, value]) => {\n return {\n date: new Date(key),\n count: Number(value)\n };\n });\n\n return as_array;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"parse_data_from_CSSEGI = async data => {\n let countries = await data;\n return Object.entries(_.groupBy(countries, x => x[\"Country/Region\"]))\n .map(([country_name, region_datas]) => {\n let list = region_datas.map(region => csv_row_to_dates(region));\n let dates = _.zip(...list).map(array => {\n let date = array[0].date;\n let count = _.sum(array.map(x => x.count));\n return { date, count };\n });\n\n return {\n country: country_name,\n dates: dates\n };\n })\n .filter(x => !Boolean(x.province));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"DATA_DEATHS = parse_data_from_CSSEGI(\n d3.csv(\n 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_deaths_global.csv'\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"DATA_CONFIRMED = parse_data_from_CSSEGI(\n d3.csv(\n 'https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv'\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":559,"value":"DATA_CONFIRMED.filter(x => x.country.startsWith('A'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"DATA_DEATHS.find(x => x.country === \"Netherlands\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"md`### Population data also from github`","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"COUNTRY_BY_POPULATION = (await d3.json(\n 'https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-population.json'\n)).map(x => (x.country === 'United States' ? { ...x, country: 'US' } : x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"get_population = entry => {\n return (\n COUNTRY_BY_POPULATION.find(x => x.country === entry.country) ||\n COUNTRY_BY_POPULATION.find(x => x.country === entry.country2)\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":489,"value":"md`\n| code | Ouput |\n| ----------- | ------------- |\n| get_population = entry => { | |\n| return ( | |\n| COUNTRY_BY_POPULATION.find(x => x.country === entry.country) | een output |\n| COUNTRY_BY_POPULATION.find(x => x.country === entry.country2)| eenoutput |\n| ); | Je hele result |\n| } | fn() |\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"vegalite = require('@observablehq/vega-lite')","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"import { autoSelect, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}