32:T6a7,viewof play = (() => { const playText = 'Play'; const pauseText = 'Pause'; let form = this; let initial; if (!form) { form = html` `; } form.value = form.value || dates.indexOf(selectedDate); const setTime = (index, clear) => { form.value = index; mutable selectedRawDate = dates[index]; if (clear) { form.output.value = ''; } else { form.output.value = dates[index].toLocaleDateString(locale); } }; const isAtEnd = (index) => index >= dates.length; const pause = () => { if (form.interval) { clearInterval(form.interval); delete form.interval; } form.button.value = playText; form.output.value = ''; }; const play = async () => { form.value = dates.indexOf(selectedDate); form.button.value = pauseText; if (isAtEnd(form.value + 1)) { setTime(0); } form.interval = setInterval(() => { const nextDateIndex = form.value + 1; if (isAtEnd(nextDateIndex)) { pause(); } else { setTime(nextDateIndex); } }, playSpeed); }; form.button.onclick = event => { if (form.interval) return pause(); event.preventDefault(); // Don’t submit the form. form.dispatchEvent(new CustomEvent('input', {bubbles: true})); play(); }; return form; })()33:T4bf,scales = { const createColorScale = (domain, range) => d3 .scaleSequential() .interpolator(d3.interpolateHsl) .clamp(true) .range(range.map(d => d.toString())) .domain(domain); const colorScales = [ createColorScale([0, .001], [d3.rgb('#fef39c'), d3.rgb('#fee394')]), createColorScale([.001, .05], [d3.rgb('#fee394'), d3.rgb('#f2625d')]), createColorScale([.05, .2], [d3.rgb('#f2625d'), d3.rgb('#9b0444')]), createColorScale([.2, 1], [d3.rgb('#9b0444'), d3.rgb('#000000')]), ]; return { value: d3.scaleLinear() .range([0, 1]) .domain([0, 1 / (comparisonNumber / scaleMax)]) .clamp(true), date: d3.scaleUtc() .range([chartConfig.margin.left, width - chartConfig.margin.right]) .domain(d3.extent(dates)) .clamp(true), color: (value) => { if (value === 0) { return '#f9f9f9'; } let scale = colorScales[colorScales.length - 1]; for (let i = 0; i < colorScales.length; i++) { const domain = colorScales[i].domain(); if (value >= domain[0] && value < domain[1]) { scale = colorScales[i]; break; } } return scale(value); } }; }34:T888,legend = function() { const vMargin = 5; const hMargin = 20; const w = Math.min(Math.floor(width * .75 + (2 * hMargin)), 600 + (2 * hMargin)); const steps = 600; const sizeWidth = w - (hMargin * 2); const itemActualWidth = sizeWidth / steps; const itemWidth = Math.floor(itemActualWidth) || 1; const itemHeight = 5; const padding = 3; const fontsize = 12; const sizeHeight = itemHeight + (2 * vMargin) + padding + fontsize; const c = DOM.svg(w, sizeHeight); const svg = d3.select(c); const hasLabel = value => value === 0 || value === scaleMax || value === 10 || value === 50 || value % 100 === 0; const formatLabel = value => (value * scaleMax) .toLocaleString(locale, { maximumFractionDigits: 0 }); svg .attr('id', 'legend') .attr('width', '100%') .attr('preserveAspectRatio', 'xMinYMin'); const lgnd = svg.append('g') .classed('legend', true); lgnd.attr('transform', `translate(${(width - w) / 2 },0)`); const legendItems = lgnd .selectAll('g.legend-item') .data( new Array(steps).fill(0).map((_, i) => { const value = (i + 1) / steps / 2; return { value: value, color: scales.color(value) }; }) ) .enter() .append('g') .classed('legend-item', true) .attr('transform', (d, i) => `translate(${hMargin + (i * itemActualWidth)},${vMargin})`) const item = legendItems .append('g'); item .append('text') .attr('y', itemHeight + vMargin + padding + fontsize) .attr('x', itemWidth) .append('tspan') .attr('font-size', fontsize) .attr('text-anchor', 'middle') // .attr('alignment-baseline', 'hanging') .text((d, i) => hasLabel(d.value * scaleMax) ? `${formatLabel(d.value)}` : ''); item .append('rect') .attr('fill', (d, i) => hasLabel(d.value * scaleMax) ? '#ddd' : 'transparent') .attr('y', - padding) .attr('height', itemHeight + (2 * padding)) .attr('width', 1) .attr('x', itemWidth - 1); legendItems .append('rect') .attr('width', itemWidth) .attr('height', itemHeight) .attr('fill', d => d.color); return c; }35:T891,verbalData = ({ title, population, data, rankingPerCapita, rankingChangePerCapita, header='', trailer='' }) => { const strDate = selectedDate.toLocaleDateString(locale); if (data && typeof data[paramIndex.perCapita] === 'number' && !isNaN(data[paramIndex.perCapita])) { let change = ''; if (typeof data[paramIndex.relativeChange] === 'number') { change = ` **(${ data[paramIndex.relativeChange] >= 0 ? '+' : '' }${ data[paramIndex.relativeChange].toLocaleString(locale, { style: 'percent', maximumFractionDigits: 2 }) })**`; } let absoluteChange = ''; if (typeof data[paramIndex.change] === 'number') { absoluteChange = ` (${ data[paramIndex.change] >= 0 ? '+' : '' }${ data[paramIndex.change].toLocaleString(locale, { maximumFractionDigits: 2 }) })`; } const per1k = data[paramIndex.perCapita] * comparisonNumber; const strPer1k = per1k.toLocaleString(locale, { maximumFractionDigits: 2 }); const str1k = comparisonNumber.toLocaleString(locale); const confirmed = `**${ strPer1k }** ${ parameterVerbal[1] } per ${ str1k } people ${ change }`; let inAPopulationOf = ''; if (typeof data[paramIndex.value] === 'number') { inAPopulationOf = `${ data[paramIndex.value].toLocaleString(locale) } ${ parameterVerbal[data[paramIndex.value] === 1 ? 0 : 1] } in a population of ${ population.toLocaleString(locale)}${absoluteChange }`; } let ranking = ''; if (rankingPerCapita) { ranking += `#${ rankingPerCapita } in ${ parameterVerbal[1] } per capita. `; } if (rankingChangePerCapita) { ranking += `#${ rankingChangePerCapita } in new ${ parameterVerbal[1] } per capita. `; } if (rankingPerCapita || rankingChangePerCapita) { ranking = `\n${ranking}\n`; } return md`## ${title} (${strDate}) ${header}${confirmed}\n *${inAPopulationOf}*${ranking}${trailer}`; } return md`## ${title} (${strDate}) Unknown`; }36:T452,html` `37:T42d,parseSeries = (series, hideIfEmpty) => { series = series.filter(d => !!d); const x = scales.date; const y = d3[scaleType]() .range([chartConfig.height - chartConfig.margin.bottom, chartConfig.margin.top]) .domain([ scaleType === 'scaleLog' ? 1e-10 : 0, Math.max( ...series.flatMap(({ values }) => values) .filter(d => !!d) .flatMap(item => typeof item[paramIndex.perCapita] === 'number' ? item[paramIndex.perCapita] : null) ) ]) .clamp(true); const path = d3.line() .x((_, i) => x(dateArr[i])) .y((item) => y(item[paramIndex.perCapita])) .defined((item) => item && typeof item[paramIndex.perCapita] === 'number' && !isNaN(item[paramIndex.perCapita]) ); let style = ''; if (hideIfEmpty && !series.length) { style = 'display: none'; } return { axisConfig: { x: { ...chartConfig.axisConfig.x }, y: { ...chartConfig.axisConfig.y } }, series, style, path: ({ values }) => path(values), scale: { x, y } }; };38:T76e,bindSeries = { bindBarChartProps(top10Chart, { title: `Top 25 countries in ${ parameterVerbal[1] } per capita`, getStyle({ id }) { return getStyles(countriesAndRegions, { id }, {}) }, data: top10, width, animationDuration: playSpeed, scale: { y: barChartConfig.scale.y.domain(d3.range(top10.length)), x: barChartConfig.scale.x .domain([0, d3.max(top10, d => d.value)]) .range([barChartConfig.margin.left, width - barChartConfig.margin.right]) } }), bindChart(countryChart, selected === undefined ? { title: 'Loading…', ...parseSeries([]) } : { title: selectedTimeSeries ? `${ selectedTimeSeries.name } compared to the world (total number of ${ parameterVerbal[1] } per ${ (comparisonNumber).toLocaleString(locale) } people)` : `World total (total number of ${ parameterVerbal[1] } per ${ (comparisonNumber).toLocaleString(locale) } people on a ${ scaleTypes.find(({value}) => value === scaleType).label.toLowerCase() } scale)`, ...parseSeries([ worldTimeSeries ? worldTimeSeries : undefined, selectedTimeSeries ? {...selectedTimeSeries, actual: true } : undefined ]) }); bindChart(regionChart, { title: selectedRegionTimeSeries ? `${ selectedRegionTimeSeries.name } compared to ${ selectedTimeSeries.name } (total number of ${ parameterVerbal[1] } per ${ (comparisonNumber).toLocaleString(locale) } people on a ${ scaleTypes.find(({value}) => value === scaleType).label.toLowerCase() } scale)` : '', ...parseSeries([ selectedRegionTimeSeries ? selectedTimeSeries : undefined, selectedRegionTimeSeries ? {...selectedRegionTimeSeries, actual: true } : undefined ], true) }); return true; }39:[] 30:{"title":"Covid-19 (corona virus) deaths per 1,000,000 people","cells":[{"id":0,"value":"md`# Covid-19 (corona virus) ${parameterVerbal[1]} per ${(comparisonNumber).toLocaleString(locale)} people\n\nConfirmed coronavirus ([COVID-19](https://en.wikipedia.org/wiki/Coronavirus_disease_2019)) ${parameterVerbal[1]} *per ${writtenNumber(comparisonNumber)} people* visualised on a map. Visualisation shows accumulated *confirmed* number of ${parameterVerbal[1]} compared to the population size on a given area. As the number of tests taken vary wildly regionally, the data does not *accurately* represent current situation of the [pandemic](https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic) nor the spread of the [SARS-CoV-2 virus](https://en.wikipedia.org/wiki/Severe_acute_respiratory_syndrome_coronavirus_2).\n\nVisualised on a map with a linear scale from 0 (yellow) to >${scales.value.domain()[1] * comparisonNumber} (black). *Data updated daily${nextUpdate.verbal}*.\n\nOlder version of this page can be [found here](https://observablehq.com/@lounjukk/covid-19-per-capita-visualisation-test).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"viewof legendView = legend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1928,"value":"worldMap = createMap('world-map', {\n ...worldMapData,\n height: 150,\n containerClass: 'selectable',\n getStyles: function() {\n return getStyles.apply(null, [countriesAndRegions, ...arguments]);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2957,"value":"countryChart = createChart(\n 'country-chart',\n {\n title: '',\n ...chartConfig,\n ...parseSeries([])\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4674,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2488,"value":"{\n if (!selectedTimeSeries) {\n return md``;\n }\n const { id, title, population, hasRegions } = selectedTimeSeries;\n \n let restrictions = '';\n /*\n if (selectedRestrictions && selectedRestrictions.RESTRICTION_TEXT) {\n restrictions += `\n### Restrictions\n${selectedRestrictions.RESTRICTION_TEXT}\n`; \n }\n if (selectedRestrictions && selectedRestrictions.QUARANTINE_TEXT) {\n restrictions += `\n### Quarantine\n${selectedRestrictions.QUARANTINE_TEXT}\n`; \n }\n */\n const clickRegionsText = `See regional data by clicking an area on the map below.`\n\n return verbalData({\n title,\n population,\n data: getDataByDateAndId(countriesAndRegions, id, selectedDateStr),\n rankingPerCapita: countryOrderBy.perCapita[id],\n rankingChangePerCapita: countryOrderBy.changePerCapita[id],\n trailer: hasRegions ? [restrictions, clickRegionsText].join(`\\n\\n`) : restrictions\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2487,"value":"viewof legendView2 = selectedTimeSeries ? legend() : html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2486,"value":"countryMap = createMap('detail-map', {\n getStyles() {},\n containerClass: 'selectable'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2485,"value":"{\n if (!selectedRegion || !selectedRegionTimeSeries) {\n return md``;\n }\n let { id, title, population } = selectedRegionTimeSeries; \n\n return verbalData({\n title,\n population,\n data: getDataByDateAndId(selectedSourceData || countriesAndRegions, id, selectedDateStr)\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3018,"value":"regionChart = createChart(\n 'region-chart',\n {\n title: '',\n ...chartConfig,\n ...parseSeries([])\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5373,"value":"top10Chart = createBarChart('race-chart', barChartConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4624,"value":"md`## Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4469,"value":"viewof parameter = select({\n title: 'Data',\n description: 'Choose which data to show',\n options: [\n { label: 'Deaths, cumulative', value: 'deceased' },\n { label: 'Confirmed cases, cumulative', value: 'cases' },\n { label: 'Recovered patients, cumulative', value: 'recovered' },\n { label: 'Deaths (last two weeks)', value: 'deceased14Days' },\n { label: 'Confirmed cases (last two weeks)', value: 'cases14Days' },\n { label: 'Recovered patients (last two weeks)', value: 'recovered14Days' }\n ],\n value: 'cases14Days'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4630,"value":"viewof scaleType = select({\n title: 'Scale',\n description: 'Choose which kind of scale to use on charts',\n options: scaleTypes,\n value: 'scaleLinear'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4721,"value":"viewof playSpeed = slider({\n title: 'Play speed',\n min: 0, \n max: 1000, \n step: 62.5,\n value: 312.5,\n format: d => `${(d / 1000).toLocaleString(locale, { maximumFractionDigits: 4 })}`,\n description: 'Choose play speed (seconds per day)'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4914,"value":"viewof options = checkbox({\n title: 'Other options',\n options: [{ label: 'Show latest data', value: 'showLatest' }],\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1579,"value":"md`## Data sources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5009,"value":"dataSources","pinned":false,"hidden":false,"mode":"ojs"},{"id":2417,"value":"mapDataSources","pinned":false,"hidden":false,"mode":"ojs"},{"id":2890,"value":"worldPopulationEstimate = 7750000000","pinned":false,"hidden":false,"mode":"ojs"},{"id":2414,"value":"import { countryCodes, population as populationData, sources as mapDataSources } from '@lounjukk/map-data@3507'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1587,"value":"md`## Data mangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"countriesAndRegions = initialBeforeResolved(new Map(), async () => {\n const [map, br, us] = await Promise\n .all([\n countries(),\n regions.BR(),\n regions.US()\n ]);\n \n return {\n ...map,\n ...Object.keys(br).reduce((o, key) => ({ ...o, [`BR/${key}`] : br[key] }), {}),\n ...Object.keys(us).reduce((o, key) => ({ ...o, [`US/${key}`] : us[key] }), {})\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5325,"value":"countryOrderBy = {\n const arr = Object.keys(countriesAndRegions)\n .filter(key => !key.match(/^[A-Z]*\\//))\n .map(key => ({\n id: countriesAndRegions[key].id,\n population: countriesAndRegions[key].population,\n values: getDataByDateAndId(countriesAndRegions, key, selectedDateStr)\n }))\n .filter(({ values, population }) => values && population);\n \n const sortAndFilter = (arr, key) => arr\n .map(({ id, values, population }) => ({ id, value: values[key] ? values[key] / population : undefined }))\n .filter(({ value }) => !!value)\n .sort((a, b) => b.value - a.value)\n .reduce((obj, { id }, index) => ({\n ...obj,\n [id]: index + 1\n }), {})\n \n return {\n perCapita: sortAndFilter(arr, paramIndex.value),\n changePerCapita: sortAndFilter(arr, paramIndex.change),\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5425,"value":"top10 = {\n const limit = 25;\n return Object.keys(countryOrderBy.perCapita).reduce((arr, id) => {\n const index = countryOrderBy.perCapita[id] - 1;\n if (index < limit) {\n arr[index] = {\n id,\n title: countriesAndRegions[id].name,\n value: getDataByDateAndId(countriesAndRegions, id, selectedDateStr)[paramIndex.perCapita] * comparisonNumber\n };\n }\n return arr;\n }, new Array(limit).fill(0).map((_, i) => ({ id: `id-${i}`, value: 0, title: '' })))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3023,"value":"worldTimeSeries = world()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1594,"value":"md`## Map and legend`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4968,"value":"fullscreen(worldMap) && (selected && countryMap ? fullscreen(countryMap) : true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4276,"value":"worldMapData = mapData.worldWithProvinces;","pinned":false,"hidden":false,"mode":"ojs"},{"id":2421,"value":"bindWorldMap = {\n bindMap(worldMap, {\n width,\n height: countriesAndRegions ? null : 150,\n selected,\n onClick: async function(area) {\n mutable selected = undefined;\n mutable selectedRegion = null;\n await Promises.delay(1);\n if (area) {\n mutable selected = area.id;\n if (area.props.sovereignt) {\n mutable selectedRegion = area.id;\n }\n } else {\n mutable selected = null;\n }\n }\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2475,"value":"bindCountryMap = {\n \n let props = {\n width,\n selected: selectedRegion,\n getStyles() {},\n containerClass: selected ? '' : 'hidden'\n };\n \n if (selectedSourceData) {\n props.getStyles = function() {\n return getStyles.apply(null, [selectedSourceData, ...arguments]);\n };\n }\n \n if (selected === undefined || !selectedMap) {\n props = {\n ...props,\n bbox: [0, 0, 1000, 150],\n data: [],\n height: width / 5 * 3,\n selected: null,\n onClick() {}\n };\n } else {\n const selectable = selectedMap.data.length > 1;\n props = {\n ...props,\n ...selectedMap,\n height: width / 16 * 9,\n containerClass: [props.containerClass, selectable ? 'selectable' : ''].join(' '),\n onClick: selectable ? (area) => {\n mutable selectedRegion = area ? area.id : undefined;\n } : () => {}\n };\n }\n \n return bindMap(countryMap, props);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4889,"value":"nextUpdate = {\n const showLatest = options && options.indexOf('showLatest') >= 0;\n\n const now = new Date();\n const timezone = 12;\n\n if (showLatest) {\n return {\n verbal: ''\n }\n } else {\n const date = parseDate(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), timezone));\n return {\n date,\n verbal: `\\\n at midnight UTC${-timezone} (${\n date.toLocaleTimeString(locale, { hour12: false, hour: '2-digit', minute: '2-digit' })\n} local time)`\n };\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"dates = {\n // Let's make sure we don't show too recent, uncomplete data\n const today = new Date();\n const minDate = dateRange[0];\n let maxDate = today;\n if (nextUpdate.date) {\n const timeToNextUpdate = nextUpdate.date.getTime() - today.getTime();\n const readyToUpdate = timeToNextUpdate < 0;\n maxDate = parseDate(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate() - (readyToUpdate ? 1 : 2)));\n }\n const days = date => Math.floor(date.getTime() / 1000 / 60 / 60 / 24);\n const length = days(maxDate) - days(minDate) + 1;\n return new Array(length)\n .fill()\n .map((_, n) => {\n const date = new Date(minDate.getTime() + 1000 * 60 * 60 * 24 * n);\n return parseDate(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2743,"value":"comparisonNumber = {\n switch (parameter) {\n case 'cases': return 1e5;\n case 'deceased': return 1e6;\n case 'cases14Days': return 1e5;\n case 'deceased14Days': return 1e6;\n default: return 1e6;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2779,"value":"scaleMax = {\n switch (parameter) {\n case 'cases14Days': return 2e3;\n case 'deceased14Days': return 2e2;\n default: return 2e3;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4640,"value":"scaleTypes = [\n { label: 'Linear', value: 'scaleLinear' },\n { label: 'Logarithmic', value: 'scaleLog' },\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4454,"value":"parameterVerbal = {\n switch (parameter) {\n case 'cases':\n return ['case', 'cases'];\n case 'deceased':\n return ['death', 'deaths'];\n case 'recovered':\n return ['recovered patient', 'recovered patients'];\n case 'cases14Days':\n return ['case (last two weeks)', 'cases (last two weeks)'];\n case 'deceased14Days':\n return ['death (last two weeks)', 'deaths (last two weeks)'];\n case 'deceased14Days':\n return ['recovered patient (last two weeks)', 'recovered patients (last two weeks)'];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4049,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2478,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2802,"value":"md`## Charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2814,"value":"chartConfig = ({\n date: dates[dates.length - 1],\n width,\n height: 150,\n path: () => '',\n scale: null,\n margin: { top: 5, right: 35, bottom: 30, left: 35 },\n axisConfig: {\n x: {\n tickFormat: date => date\n .toLocaleDateString(\n locale,\n { month: 'short', day: 'numeric' }\n ),\n },\n y: {\n ticks: 2,\n tickFormat: value => value * comparisonNumber,\n }\n },\n getStyle: ({ actual }, i) => `stroke: ${actual ? 'steelblue' : '#ccc'}; strokeWidth: 2; fill: none;`,\n getTooltip: date => date ? date.toLocaleDateString(locale) : ''\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5390,"value":"barChartConfig = {\n const height = 475;\n const margin = { top: 10, right: 35, bottom: 30, left: 150 };\n return {\n height,\n margin,\n scale: {\n y: d3.scaleBand()\n .rangeRound([margin.top, height - margin.bottom])\n .padding(0.1),\n x: d3.scaleLinear()\n .nice()\n }\n };\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":5208,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":5203,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":5180,"value":"bindDates = {\n\n bindChart(countryChart, {\n date: selectedDate,\n setDate(date) { mutable selectedRawDate = date; }\n });\n \n bindChart(regionChart, {\n date: selectedDate,\n setDate(date) { mutable selectedRawDate = date; }\n });\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2472,"value":"md`## Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2469,"value":"//mutable selected = mapData.worldWithProvinces.data.find(({ props }) => props.id === defaultID)\nmutable selected = Object.keys(populationData).find(id => id === defaultID)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4875,"value":"selectedSovereignt = {\n if (!selected) {\n return undefined;\n }\n const sovereignt = getMainCountry(selected);\n return sovereignt ? sovereignt.id : selected;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2468,"value":"selectedSourceData = {\n if (!countriesAndRegions) {\n return {};\n }\n await Promises.delay(1);\n if (!selected) {\n return {};\n }\n try {\n if (selected && regions[selected]) {\n await Promises.delay(1);\n return await regions[selected]();\n }\n } catch (err) {}\n return await countriesAndRegions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3975,"value":"selectedMap = {\n if (!countriesAndRegions) {\n return {\n bbox: [0, 0, 1000, 150]\n };\n }\n await Promises.delay(1);\n let map;\n let key = selected;\n const mainCountry = getMainCountry(selected);\n if (mainCountry) {\n key = mainCountry.id;\n }\n if (key === 'FI' && parameter === 'deceased') {\n key = 'FI_by_catchment_area';\n }\n if (mapDataStore.get(key)) {\n return await mapDataStore.get(key);\n } else if (mapData[key]) {\n return await mapData[key]();\n } else {\n return createMapData({\n type: 'FeatureCollection',\n features: areas.features\n .filter(({ properties }) => !!properties.id.match(new RegExp(`^${key}`)))\n .map(d => ({...d}))\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4869,"value":"selectedRestrictions = undefined\n/*\nselectedRestrictions = await sourceData.restrictions\n .then(restrictions => restrictions\n .find(({ ISO3166_1 }) => ISO3166_1 === selectedSovereignt)\n );\n*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":3028,"value":"selectedTimeSeries = {\n if (!countriesAndRegions) {\n return undefined;\n }\n await Promises.delay(1);\n if (!selected) {\n return undefined;\n }\n let { props: { sovereigntName, name }} = mapData.worldWithProvinces.data\n .find(({ props }) => props.id === selected);\n let population = populationData.areas[selected];\n let key = selected;\n const mainCountry = getMainCountry(selected);\n if (mainCountry) {\n key = mainCountry.id;\n population = mainCountry.population;\n }\n \n const hasRegions = !!mainCountry || !!(regions[selected] && mapData[selected]);\n const title = mainCountry ? sovereigntName : name;\n \n const item = {\n id: key,\n country: mainCountry ? mainCountry.id : selected,\n title,\n hasRegions,\n population,\n name: title\n };\n const dataSet = countriesAndRegions[key];\n if (!dataSet) {\n return {...item, values: [] };\n }\n \n return {\n ...dataSet,\n ...item\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2467,"value":"mutable selectedRegion = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":3047,"value":"selectedRegionTimeSeries = {\n if (!selectedRegion || !selectedMap) {\n return undefined;\n }\n let id = selectedRegion;\n let key = selected;\n const mainCountry = getMainCountry(selectedRegion);\n if (mainCountry) {\n key = mainCountry.id;\n }\n let name, country;\n try {\n let { props } = selectedMap.data.find(({ props }) => props.id === id);\n name = props.name;\n country = props.country;\n } catch(err) {\n return undefined;\n }\n const population = populationData[selected] ? populationData[selected][selectedRegion] : populationData.areas[selectedRegion];\n const dataSet = (selectedSourceData || countriesAndRegions)[selectedRegion];\n if (!dataSet) {\n return undefined;\n }\n return {\n ...dataSet,\n id: selectedRegion,\n name,\n title: name\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2968,"value":"mutable selectedRawDate = dates[dates.length - 1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2914,"value":"selectedDate = {\n const newD = selectedRawDate.getTime();\n return dates.reduce((prevDate, currDate) => {\n const prev = prevDate.getTime();\n const curr = currDate.getTime();\n return Math.abs(curr - newD) < Math.abs(prev - newD) ? currDate : prevDate;\n }, dates[0]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2426,"value":"selectedDateStr = toDateString(selectedDate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5059,"value":"paramIndex = {\n const paramText = parameter;\n \n let reducedCumulation = parameter.match(/[0-9][0-9]?Days/, '');\n reducedCumulation = reducedCumulation && reducedCumulation.length ? reducedCumulation[0] : '';\n const value = parameter.replace(/[0-9][0-9]?Days/, '');\n \n if (reducedCumulation) {\n return {\n value: keyIndexMapper[`${value}${reducedCumulation}`][0],\n perCapita: keyIndexMapper[`${value}${reducedCumulation}PerCapita`][0],\n }\n }\n const perCapita = `${value}PerCapita`;\n const change = `${value}Change`;\n const relativeChange = `${value}RelativeChange`;\n return {\n value: keyIndexMapper[value][0],\n perCapita: keyIndexMapper[perCapita][0],\n change: keyIndexMapper[change][0],\n relativeChange: keyIndexMapper[relativeChange][0],\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2465,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2471,"value":"mutable defaultID = window.location.hash ? window.location.hash.replace(/^#/, '').toUpperCase() : 'IT'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2470,"value":"(window.onhashchange = () => {\n if (window.location.hash) {\n mutable selected = null\n mutable selectedRegion = null\n mutable defaultID = window.location.hash.replace(/^#/, '').toUpperCase();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2666,"value":"locale = {\n if (window.navigator.languages) {\n return window.navigator.languages[0];\n } else {\n return window.navigator.userLanguage || window.navigator.language;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3605,"value":"reduceValues = arr => arr\n .reduce((obj, { id, date, population, name, abbr, ...d }) => ({\n id,\n date: parseDate(date),\n name,\n abbr,\n population,\n ...obj,\n ...Object.keys(d).reduce((t, key) => ({\n ...t,\n [key]:\n typeof obj[key] === 'number' || typeof d[key] === 'number' ?\n (obj[key] || 0) + (d[key] || 0) :\n undefined\n }), {})\n }), {});","pinned":false,"hidden":false,"mode":"ojs"},{"id":2464,"value":"getMainCountry = (id) => {\n try {\n const key = id.match(/^([a-zA-Z]*)\\//)[1];\n if (populationData.areas[key]) {\n return {\n id: key,\n population: populationData.areas[key]\n }\n }\n return {\n id: key,\n ...Object.keys(populationData.areas)\n .filter(itemId => itemId.match(new RegExp(`^${key}\\/`)))\n .reduce((obj, itemId) => {\n const population = populationData.areas[itemId];\n return { ...obj, population: obj.population + population }\n }, { population: 0 })\n };\n } catch(err){\n return undefined;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2463,"value":"getStyles = (data, { id }, { highlighted, selected }) => {\n const item = getDataByDateAndId(data, id, selectedDate);\n if (item && item[paramIndex.perCapita]) {\n return `fill: ${\n scales.color(scales.value(item[paramIndex.perCapita]))\n }`;\n }\n return 'fill: #f9f9f9;'\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2462,"value":"getDataByDateAndId = (data, id, date) => {\n const reduce = (t) => t[dateStrArr.indexOf(selectedDateStr)] || undefined;\n const d = data[id];\n if (d && d.values) {\n return reduce(d.values);\n }\n return undefined;\n};","pinned":false,"hidden":false,"mode":"ojs"},{"id":4208,"value":"initialBeforeResolved = async function*(defaultValue, fn, delay=0) {\n const promises = [Promise.resolve(defaultValue), Promises.delay(delay).then(fn)];\n const map = new Map(promises.map((p, i) => [i, p.then(res => [i, res])]));\n while (map.size) {\n const [key, result] = await Promise.race(map.values());\n yield result;\n map.delete(key);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2461,"value":"toDateString = d => {\n d.setUTCHours(0, 0, 0, 0);\n return d.toISOString().substring(0,10);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4141,"value":"parseDate = (...args) => {\n const date = new Date(...args);\n return new Date(Date.UTC(\n date.getUTCFullYear(),\n date.getUTCMonth(),\n date.getUTCDate(),\n date.getUTCHours(),\n date.getUTCMinutes(),\n date.getUTCSeconds()\n ));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4959,"value":"nameToKey = s => s\n .toUpperCase()\n .replace(/_/g, '/')\n .replace(/ /g, '_')\n .normalize('NFD').replace(/[\\u0300-\\u036f]/g, '')\n .replace(/'/g, '');","pinned":false,"hidden":false,"mode":"ojs"},{"id":1582,"value":"md`## Notes, credits and imports\n* More map projections can be found [here](https://observablehq.com/@fil/d3-projections).\n* Inputs by [@jashkenas](https://observablehq.com/@jashkenas)\n* Fullscreen mode by [@fil](https://observablehq.com/@fil)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4963,"value":"import {fullscreen} from \"@fil/fullscreen\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"import {slider, select, autoSelect, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5000,"value":"import { sources as dataSources, world, countries, regions, keyIndex, keyIndexMapper, dateRange, dateArr, dateStrArr } from '@lounjukk/covid-19-data-scraping@578';","pinned":false,"hidden":false,"mode":"ojs"},{"id":2798,"value":"import { create as createChart, bindProps as bindChart } from '@lounjukk/date-slider-chart@710'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5366,"value":"import {\n create as createBarChart,\n bindProps as bindBarChartProps\n} from \"@lounjukk/svelte-horizontal-bar-chart@908\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":2412,"value":"import { create as createMap, bindProps as bindMap } from '@lounjukk/map-component@3108';","pinned":false,"hidden":false,"mode":"ojs"},{"id":3396,"value":"import { mapData, createMapData, areas, created as mapDataStore } from '@lounjukk/map-data@3507'","pinned":false,"hidden":false,"mode":"ojs"},{"id":791,"value":"topojson = require('topojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2751,"value":"writtenNumber = {\n let wn = n => n.toString();\n try {\n wn = await require('https://packd.now.sh/written-number@0.8.1');\n } catch(err) {\n wn = await require('https://bundle.run/written-number@0.8.1');\n }\n wn.defaults.lang = 'en';\n return wn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3-scale@^3.2\", \"d3-shape@^1.3\", \"d3-color@^1.4\", \"d3-selection@^1.4\", \"d3-fetch@^1.1\", \"d3-array@^2.2\", \"d3-scale-chromatic@^1.5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}