2d:null 2e:["$","title",null,{"children":"Coronavirus report | Renaud TERTRAIS | Observable"}] 33:Tcb6,{ const renderStat = (color, stat, diff) => `${stat} ${diff}`; const h = (color, value) => `` btn.onclick = () => { mutable state = { ...state, selectedCountries: [] } table.querySelectorAll('input[type="checkbox"]').forEach(elt => { elt.checked = false }) } return html` ${table} ${btn} `; }34:Tb78,{ const isAll = selectedFieldDataViz === 'all' || state.selectedCountries.length === 1; return vl({ data: { values: (state.selectedCountries.length ? Object.values(countries) .filter(row => state.selectedCountries.includes(row.name)) .sort((a,b) => getData(b.data).Confirmed - getData(a.data).Confirmed) : selectedCountries ).flatMap(row => Object.values(row.data)) /*confirmed.filter(row => (!selection.continent || continentsByCountry[row.country] === selection.continent.name) && (selection.country.name === 'All' || row.country === selection.country.name) && (!selection.region || row.region === selection.region.name) )*/ }, vconcat:[{ title: "Selection", width: 750, height: 40, mark: 'area', selection: { brush: {type: "interval", encodings: ["x"]} }, encoding: { x: { field: "date", type: "temporal", }, } }, { width: window.innerWidth -248, height: 400, mark: selectedDataViz === 'Cummulative' ? "area" : { type: 'line', point: true }, transform: [ ...( isAll ? [{fold: ["Deaths", "Recovered", "Active"] }] : []) ], sort: {encoding: "color"}, encoding: { x: { field: "date", type: "temporal", scale: {domain: {selection: "brush"}}, axis: { format: "%b %d" } }, y: { field: isAll ? 'value' : selectedFieldDataViz, type: "quantitative", aggregate: "sum", axis: {tickMinStep: 1}, }, color: isAll ? { field: "key", type: "nominal", scale: { domain: ["Active", "Deaths", "Recovered"], range: ["#6f42c1" ,"#d73a49", "#28a745"] } } : { field: selectedCountryName === 'All' ? "country" : 'region', type: "nominal", } } },{ "width": 750, "mark": "bar", transform: [ ...( isAll ? [{fold: ["Deaths", "Recovered", "Active"] }] : []) ], "encoding": { x: { field: "date", type: "temporal", scale: {domain: {selection: "brush"}}, axis: { format: "%b %d" } }, y: { field: isAll ? 'value' : selectedFieldDataViz, type: "quantitative", aggregate: "sum", }, color: isAll ? { field: "key", type: "nominal", scale: { domain: ["Active", "Deaths", "Recovered"], range: ["#6f42c1" ,"#d73a49", "#28a745"] } } : { field: selectedCountryName === 'All' ? "country" : 'region', type: "nominal", } } }] }) }35:T870,allData = { let total = { name: 'TOTAL', data: {} } let acc = {} let cts = {} if(allDataRaw) { allDataRaw.forEach(row => { const {date} = row; const countryName = row.Country_Region === 'Mainland China' ? 'China' : row.Country_Region; if([undefined, 'Cruise Ship'].includes(countryName)) return; const continentName = continentsByCountry[countryName]; cts[continentName] = cts[continentName] || { name: continentName, countries: {}, data: {} } acc[countryName] = acc[countryName] || { name: countryName, regions: {}, continent: continentsByCountry[countryName], data: {} }; cts[continentName].countries[countryName] = acc[countryName]; if(row.Province_State) { acc[countryName].regions[row.Province_State] = acc[countryName].regions[row.Province_State] || { name: row.Province_State, data: {}, } } const addDatumWith = (dataName, datum) => ({ data }, defaultData = {}) => { data[date] = data[date] || { ...defaultData, date }; data[date][dataName] = data[date][dataName] ? data[date][dataName] + datum : datum } const n = str => Number(str || 0); ['Recovered', 'Deaths', 'Confirmed', 'Active'].forEach(dataName => { const datum = dataName === 'Active' ? n(row.Confirmed) - n(row.Deaths) - n(row.Recovered) : n(row[dataName] || 0); const addDatum = addDatumWith(dataName, datum); addDatum(acc[countryName], { continent: continentName, country: countryName }); addDatum(cts[continentName], { continent: continentName }); addDatum(total); if(row.Province_State) { let dataRegion = acc[countryName].regions[row.Province_State].data; dataRegion[date] = dataRegion[date] || { continent: continentName, country: countryName, region: row.Province_State, date, }; dataRegion[date][dataName] = datum; } }) }) } return {countries: acc, continents: cts, total}; }36:T4de,renderDiff = (current, previous, positive = false) => { const successColor = 'green'; const dangerColor = 'red'; const warningColor = 'orange-light'; const lgUpColor = positive ? successColor : dangerColor; const smUpColor = positive ? successColor : warningColor; const equalColor = positive ? warningColor : successColor; const smDwColor = positive ? dangerColor : successColor; const lgDwColor = positive ? dangerColor : successColor; const render = (color, content) => `${content}` const getValue = pct => { if(selectedRelativeUnit === 'Percentage') { if(current === previous) return '0%' return (pct >= 1 || pct <= -1 ? pct.toFixed(0) : pct.toFixed(2)) + '%' } return current - previous; } if(!current) return ''; if(!previous) return render(lgUpColor, 'NEW'); const pct = ((current - previous)/previous) * 100; const value = getValue(pct); if(pct > 5) return render(lgUpColor, `⬆+${value}`) if(pct > 0) return render(smUpColor, `⬆+${value}`) if(pct < 0) return render(smDwColor, `⬇${value}`) if(pct < -5)return render(lgDwColor, `⬇${value}`) return render(equalColor, `∓${value}`); }37:T95e,ui = { const spreadAttrs = (attrs) => Object .entries(attrs) .map(([key, value]) => `${key}="${value}"`) .join(' ') const formGroup = ({label}, children) => { const wrapper = html`

${label}
${children}` children.id = label; children.addEventListener("change", () => wrapper.dispatchEvent(new CustomEvent("input"))); children.addEventListener('input', e => { wrapper.value = children.value; }) wrapper.value = children.value return wrapper } return { checkbox({ label, onChange }){ const elt = html`` const wrapper = html` ${elt} ${label} ` elt.addEventListener('input', e => { if(typeof onChange === 'function') onChange(e) wrapper.value = elt.checked; }); return wrapper; }, radioGroup({ label, items, defaultValue }){ const id = Math.random(); const form = html` ${items.map(item => { const value = typeof item === 'string' ? item : item.value; return ` ${typeof item === 'string' ? item : item.label} `})} ` form.addEventListener('input', e => { form.value = e.target.value }); form.value = form.radio.value; return label ? formGroup({label}, form) : form; }, select({ label, small, large, dark, block, className, onChange, ...attrs}, children) { const elt = html``\n\n/*ui.select({label: 'Current day' },`${\n dates\n .map(({title}, i) => `