2e:null 2f:["$","title",null,{"children":"Coronavirus Stats | Eli Sklar | Observable"}] 34:T149e,generateTable = (filter) => { let table let sortIndex = 'latest' let sortBy = 'confirmed' let orderBy = 'desc' let selectedCountry = '' let perPage = 25 let page = 1 const makeTable = (data) => { const headRow = html`` const headCells = [ {label: '#', width: 70}, {label: `Country`, sortkey: ['country'], width: 120}, {label: `Total`, sortkey: ['confirmed'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedConfirmed', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedConfirmed', 'stats'], align: 'right', width: 130, td: true}, {label: `Total`, sortkey: ['deaths'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedDeaths', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedDeaths', 'stats'], align: 'right', width: 130, td: true}, {label: `Total`, sortkey: ['recovered'], align: 'right', width: 180, td: true}, {label: `24h`, sortkey: ['dayAddedRecovered', 'stats'], align: 'right', width: 130, td: true}, {label: `7d`, sortkey: ['weekAddedRecovered', 'stats'], align: 'right', width: 130, td: true}, ] const thead = html`` const table = html`` const hrow1 = html`` const hrow2 = html`` headCells.map(({label, align, width, sortkey, td}) => { const th = html`<${td ? 'td' : 'th'} align='${align}' width=${width} style="text-align: ${align};">${label}` if (sortkey) { const sortIndicator = sortkey[0] === sortBy ? (orderBy === 'desc' ? Icon('SortAscending', 12) : Icon('SortDescending', 12) ) : Icon('Sort', 12, '#CCC') th.onclick = e => { setSortBy(...sortkey)(e) } th.append(html`${sortIndicator}`) } return th }) .map(e => hrow2.append(e)) const overset = [ {label: 'General', colspan: 2}, {label: 'Confirmed', colspan: 3}, {label: 'Deaths', colspan: 3}, {label: 'Recovered', colspan: 3}, ] overset.map(({label, colspan}) => hrow1.append(html``)) thead.append(hrow1) thead.append(hrow2) table.append(thead) const tbody = html`` const filterRegExp = filter && new RegExp(filter.toLowerCase()) const rows = data.filter((e, i) => i < (page * perPage) && i >= ((page - 1) * perPage) ) .filter((e, i) => { console.log('checking filter', {filter}) const filterRegExp = new RegExp(filter.toLowerCase(), 'ig') const code = e.country const { name } = (worldData[e.country]) || {name: code} const isCode = filterRegExp.exec(code) const isName = filterRegExp.exec(name) console.log('matching:', {isCode, isName, name}) return !filter || isName || isCode }) if (rows && rows.length) { rows.map((e, index) => [e, makeRow({...e, index: index + ((page - 1) * perPage)}, selectedCountry)]) .map(([e, row]) => { row.onclick = () => selectCountry(e.country) tbody.append(row) }) } table.append(tbody) const tfoot = html`` const pages = Math.ceil(data.length / perPage) const actions = html`

` const pagesEl = html`

Total countries on record: ${data.length}Page:${actions}

` const pagesCont = html`

${pagesCont}`) table.append(tfoot) table.append(tableStyle) return table } const container = html`

` const reloadTable = () => { const data = prepareData(dataset, sortIndex, sortBy, orderBy) const table = makeTable(data) if (container.lastChild) container.removeChild(container.lastChild) container.append(table) container.value = [selectedCountry, page] container.dispatchEvent(new CustomEvent("input")); } const setSortBy = (what, index = 'latest') => e => { if (sortBy === what) { orderBy = orderBy === 'desc' ? 'asc' : 'desc' } else { sortBy = what orderBy = 'desc' } index = index === 'stats' ? index : 'latest' sortIndex = index reloadTable() } const selectCountry = country => { selectedCountry = country reloadTable() } const updatePage = newPage => { page = newPage reloadTable() } reloadTable() container.value = [''] return container }35:T871,makeRow = (data, selectedCountry) => { const num = (input) => numbro(input).format({thousandSeparated: true}) const percent = input => numbro(input).format({output: 'percent', mantissa: 2}) return html`

` }36:T70c,makeDataset = ({latest, day, week}) => { const countries = {} // latest Object.entries(latest.result.reduce((acc, e) => ({...acc, ...{...e}}), {})) .map(([country, elm]) => countries[country] = {latest: {...elm, date: latestDate}}) // day Object.entries(day.result) .map(([country, elm], index) => Object.assign(countries[country], {day: elm[0]})) // week Object.entries(week.result) .map(([country, elm], index) => Object.assign(countries[country], {week: elm[0]})) // stats Object.entries(countries) .map(([country, elm]) => { Object.assign(countries[country], { ...elm, country, stats: { dayConfirmed: elm.day.confirmed > 0 ? (elm.latest.confirmed - elm.day.confirmed) / elm.day.confirmed : 0, weekConfirmed: elm.week.confirmed > 0 ? (elm.latest.confirmed - elm.week.confirmed) / elm.week.confirmed : 0, dayDeaths: elm.day.deaths > 0 ? (elm.latest.deaths - elm.day.deaths) / elm.day.deaths : 0, weekDeaths: elm.week.deaths > 0 ? (elm.latest.deaths - elm.week.deaths) / elm.week.deaths: 0, dayRecovered: elm.day.recovered > 0 ? (elm.latest.recovered - elm.day.recovered) / elm.day.recovered : 0, weekRecovered: elm.week.recovered > 0 ? (elm.latest.recovered - elm.week.recovered) / elm.week.recovered : 0, dayAddedConfirmed: elm.latest.confirmed - elm.day.confirmed, weekAddedConfirmed: elm.latest.confirmed - elm.week.confirmed, dayAddedDeaths: elm.latest.deaths - elm.day.deaths, weekAddedDeaths: elm.latest.deaths - elm.week.deaths, dayAddedRecovered: elm.latest.recovered - elm.day.recovered, weekAddedRecovered: elm.latest.recovered - elm.week.recovered } }) }) return countries }37:T675,statistics = { const data = Object.entries(dataset).map(([code, elm]) => { return { code, ...elm } }) const sum = _.flow([ (data, metric) => ({data, metric, output: {}}), // (input) => ({...input, output: {...input.output, total: input.data.reduce((acc, {latest, day, week}) => acc + latest[input.metric], 0)}}), // total // (input) => ({...input, output: {...input.output, day: input.data.reduce((acc, {latest, day, week}) => acc + day[input.metric], 0)}}), // daily // (input) => ({...input, output: {...input.output, week: input.data.reduce((acc, {latest, day, week}) => acc + week[input.metric], 0)}}), // weekly ({output, ...input}) => ({...input, output: {...output, total: input.data.reduce((acc, {latest, day, week}) => acc + latest[input.metric], 0)}}), // total ({output, ...input}) => ({...input, output: {...output, day: output.total - input.data.reduce((acc, {latest, day, week}) => acc + day[input.metric], 0)}}), // day ({output, ...input}) => ({...input, output: {...output, week: output.total - input.data.reduce((acc, {latest, day, week}) => acc + week[input.metric], 0)}}), // week ({output, ...input}) => ({...input, output: {...output, changeDay: (output.day / (output.total - output.day))}}), // change day ({output, ...input}) => ({...input, output: {...output, changeWeek: (output.week / (output.total - output.week))}}), // change week input => input.output ]) const cases = sum(data, 'confirmed') const deaths = sum(data, 'deaths') const recovered = sum(data, 'recovered') return { cases, deaths, recovered } }38:Tf02,getStats = () => html`

${DataLabel('Confirmed cases', statistics.cases.total, v => numbro(v).format({ thousandSeparated: true }), [ DataLabel('24h new cases', statistics.cases.day, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.cases.changeDay, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]), DataLabel('7d new cases', statistics.cases.week, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.cases.changeWeek, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]) ])} ${DataLabel('Deaths', statistics.deaths.total, v => numbro(v).format({ thousandSeparated: true }), [ DataLabel('24h new deaths', statistics.deaths.day, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.deaths.changeDay, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]), DataLabel('7d new deaths', statistics.deaths.week, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.deaths.changeWeek, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]) ])} ${DataLabel('Recovered', statistics.recovered.total, v => numbro(v).format({ thousandSeparated: true }), [ DataLabel('24h new recoveries', statistics.recovered.day, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.recovered.changeDay, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]), DataLabel('7d new recoveries', statistics.recovered.week, v => numbro(v).format({ mantissa: 0, thousandSeparated: true }), [ DataLabel('Change', statistics.recovered.changeWeek, v => numbro(v).format({ output: 'percent', mantissa: v > 10 ? 0 : 2 })) ]) ])}

`39:[] 32:{"id":"2aa044f3904c4c23","slug":"coronavirus-stats","title":"Coronavirus Stats","thumbnail":"56fe43ab5450a70c79970fc1d78190565f636ddff90376a67c7f4e2c6bf826c5","access_level":"public","create_time":"$D2020-03-27T17:37:36.118Z","update_time":"$D2020-04-11T18:38:30.302Z","view_time":null,"first_public_time":"$D2020-03-30T10:42:19.603Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"fbb4864ef287fcdf","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":"starter_2024"},"version":944,"publish_version":944,"role":null,"authored":false,"authors":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null}],"members":[{"type":"individual","id":"476d6f963f3363b3","login":"elisk","name":"Eli Sklar","avatar_url":"https://avatars-next.observableusercontent.com/b003318f84dbe2ec65499058a95a570f97a3e5893e6b2fc98ea9f3520119fbe9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"e7cc41ec60819d92","slug":"coronavirus","title":"Coronavirus","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Coronavirus Stats","cells":[{"id":0,"value":"md`# Coronavirus Stats`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"{\n const dateValue = `${moment(latestDate).format('dddd, MMMM Do YYYY')}`\n\n return html`

Latest entry: ${dateValue}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"getStats()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"viewof searchCountry = text({\n title: 'Filter countries',\n placeholder: 'United Kingdom',\n submit: 'Find'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof query = generateTable(searchCountry)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`# Table Display`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"tableStyle = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`## Data Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"latestDate = covidAPI.latestDate()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"dayBefore = moment(latestDate).subtract(1, 'day').format(TIME_FORMAT)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"weekBefore = moment(latestDate).subtract(1, 'week').format(TIME_FORMAT)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"weekDayBefore = moment(weekBefore).subtract(1, 'day').format(TIME_FORMAT)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"prepareData = (data, sortOn, sortBy, orderBy) => {\n const sortables = 'country, confirmed, deaths, recovered, dayConfirmed, weekConfirmed, dayDeaths, weekDeaths, dayRecovered, weekRecovered, dayAddedConfirmed, weekAddedConfirmed, dayAddedDeaths, weekAddedDeaths, dayAddedRecovered, weekAddedRecovered'.split(', ')\n orderBy = orderBy === 'desc' ? 'desc' : 'asc'\n sortBy = sortables.indexOf(sortBy) >= 0 ? sortBy : 'confirmed'\n return Object.entries(data)\n .map(([country, elm]) => ({country, ...elm}))\n .sort((a, b) => {\n console.log('a, b:', {a, b})\n const A = a[sortOn][sortBy]\n const B = b[sortOn][sortBy]\n if (A === B && A === 0) return -1\n if (orderBy === 'desc') return A < B ? 1 : -1\n return A > B ? 1 : -1\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"dataset = makeDataset(datasets)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"datasets = ({\n latest: await covidAPI.latest(),\n day: await covidAPI.globalTimeseries(dayBefore, latestDate),\n week: await covidAPI.globalTimeseries(weekDayBefore, weekBefore)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"latest = covidAPI.latest()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"dayPrior = covidAPI.globalTimeseries(dayBefore, latestDate)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"weekPrior = covidAPI.globalTimeseries(weekDayBefore, weekBefore)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"DataLabel = (label, value, format, aux) => html`

\n ${label}\n ${format ? format(value) : value}\n

\n ${!!aux ? html`` : ''}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`## World Data\n\nData containing basic world population data.\n\nSource: [Github Datasets — Population](https://github.com/datasets/population)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"worldData = {\n const countries = {}\n world.map(e => {\n Object.assign(countries, {[e['Country Code']]: {\n ...(countries[e['Country Code']] || {}),\n name: e['Country Name'],\n code: e['Country Code'],\n years: {\n ...(countries[e['Country Code']] || {years: {}}).years,\n [e['Year']]: +e.Value\n }\n }})\n countries[e['Country Code']]\n })\n \n const latest = Object.values(countries)\n .map(country => {\n const [[lastYear, lastValue]] = Object.entries(country.years).sort(([, a], [, b]) => (+a) < (+b) ? 1 : -1)\n return {\n ...country,\n population: lastValue,\n year: +lastYear\n }\n })\n .reduce((acc, e) => ({...acc, [e.code]: e}), {})\n return latest\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"world = d3.csv('https://raw.githubusercontent.com/datasets/population/master/data/population.csv')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`## Display Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"Indicator = (formatFn, stat, alt = false, size = 13) => CellValue(\n formatFn(stat),\n { \n size, \n suffix: stat > 0\n ? Icon('ArrowUpBold', size, alt ? '#40D357' : '#eb5231')\n : stat === 0\n ? Icon('RhombusMedium', size)\n : Icon('ArrowDownBold', size, alt ? '#eb5231' :'#40D357')\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"CellValue = (value, options = {}) => {\n const {\n prefix = '',\n suffix = '',\n color = 'currentColor',\n size = 11\n } = options\n const style = `\n font-size: ${size}px;\n color: ${color};\n `.split('\\n').join(' ')\n return html`${prefix}${value}${suffix}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"colors = d3.scaleOrdinal()\n .domain(['recovered','deaths','confirmed','new'])\n .range(['#25c45b', '#c9166a','#ff9500','#808080'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"md`# Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"import { covidAPI, TIME_FORMAT } from '@elisk/covid-data'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"import { Icon } from '@elisk/mdi'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"import {autoSelect, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"numbro = require('numbro')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"moment = require('moment')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"

${label}
` pagesCont.append(pagesEl) const paginators = Array(pages).fill(0).map((_, index) => { const cl = html`${index + 1}` cl.onclick = () => { updatePage(index + 1) } return cl }) paginators.map(e => actions.append(e)) tfoot.append(html`
${data.index + 1}	${(worldData[data.country] \|\| {name: data.country}).name} ${worldData[data.country] && html`Pop: ${numbro(worldData[data.country].population).format({average: true, mantissa: 2})} `}	${num(data.latest.confirmed)} ${worldData[data.country] && html`Pop: ${percent(data.latest.confirmed / worldData[data.country].population)} `}	${Indicator(num, data.stats.dayAddedConfirmed)} ${CellValue(percent(data.stats.dayConfirmed))}	${Indicator(num, data.stats.weekAddedConfirmed)} ${CellValue(percent(data.stats.weekConfirmed))}	${num(data.latest.deaths)} ${worldData[data.country] && html`${percent(data.latest.deaths / data.latest.confirmed)} `}	${Indicator(num, data.stats.dayAddedDeaths)} ${CellValue(percent(data.stats.dayDeaths))}	${Indicator(num, data.stats.weekAddedDeaths)} ${CellValue(percent(data.stats.weekDeaths))}	${num(data.latest.recovered)} ${worldData[data.country] && html`Pop: ${percent(data.latest.recovered / worldData[data.country].population)} `}	${Indicator(num, data.stats.dayAddedRecovered, true)} ${CellValue(percent(data.stats.dayRecovered))}	${Indicator(num, data.stats.weekAddedRecovered, true)} ${CellValue(percent(data.stats.weekRecovered))}