31:T71f,{ // globe configuration // set color domain colorScale.domain([0, Math.max(...covidFeatureData.map(getFeatureVal))]); covidGlobe .polygonsData(covidFeatureData) .polygonAltitude(0.03) .polygonCapColor(feat => colorScale(getFeatureVal(feat))) .polygonSideColor(() => 'rgba(0, 100, 0, 0.15)') .polygonStrokeColor(() => '#111') .polygonLabel(({ covidData, properties }) => { const capIt = str => str.charAt(0).toUpperCase() + str.slice(1); const relToPop = v => `${d3.format('.2')(v / covidData.population * 100)}%`; const popRatio = v => d3.format('.3~s')(covidData.population / v); const relToCases = v => `${d3.format('.2')(v / covidData.cases * 100)}%`; const formatVal = prop => `${covidData[prop]} ${prop === 'cases' ? `(1 in every ${popRatio(covidData[prop])} ppl)` : covidData[prop] ? `(${relToCases(covidData[prop])} of cases)` : ''}${covidData[prop] && covidData.hasOwnProperty(`today${capIt(prop)}`) ? ` | new today: ${covidData[`today${capIt(prop)}`]}` : ''}`; return` ${covidData ? covidData.country : properties.NAME} (${properties.ISO_A2}):
${(!covidData ? [['Cases', 0]] : [ ['Cases', formatVal('cases')], ['Deaths', formatVal('deaths')], ['Recovered', formatVal('recovered')], ['Critical', formatVal('critical')], ['Population', d3.format(".3s")(covidData.population)] ] ).map(([label, val]) => `${label}: ${val}`) .join('
') } ` }) .onPolygonHover(hoverD => covidGlobe .polygonAltitude(d => d === hoverD ? 0.1 : 0.03) .polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getFeatureVal(d))) ) .polygonsTransitionDuration(300); }32:[{"id":"61f477377c4aabc49e40014f77f8758e9de4a58e1e1d46bc2303ef6933b5dfb4f92575f5579996306be447936e9fb2bc140e72d8b712b77f8c6cc2472d784b21","href":"https://static.observableusercontent.com/files/61f477377c4aabc49e40014f77f8758e9de4a58e1e1d46bc2303ef6933b5dfb4f92575f5579996306be447936e9fb2bc140e72d8b712b77f8c6cc2472d784b21","name":"covidData-cached@2.json","type":"application/json","lastModified":1586641194822.931,"size":82450}] 2f:{"title":"Coronavirus (COVID-19) Globe","cells":[{"id":0,"value":"md`# Coronavirus (COVID-19) Globe`","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`\nLatest data regarding Corona Virus cases, provided by the [World Health Organization](https://www.who.int/). Available in API form via [https://github.com/NovelCOVID/API](https://github.com/NovelCOVID/API).\n\nPlotted using [globe.gl](https://globe.gl/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof valMode = radio({\n title: 'Color by',\n options: [\n { label: 'Cases', value: 'cases' },\n { label: 'Cases Today', value: 'todayCases' },\n { label: 'Deaths', value: 'deaths' },\n { label: 'Deaths Today', value: 'todayDeaths' },\n { label: 'Recovered', value: 'recovered' },\n { label: 'Critical', value: 'critical' }\n ],\n value: 'cases'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof popRel = checkbox({\n options: [\n { value: \"true\", label: \"Relative to population\" }\n ],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"{\n const domEl = document.createElement('div');\n covidGlobe(domEl);\n covidGlobe.pointOfView({ lat: 32, altitude: 1.8 }, 2000); // tilt globe slightly north\n \n return domEl;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":369,"value":"md`${covidData === cachedCovidData ? '(*using cached data*)' : ''}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"covidGlobe = Globe()\n .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')\n // .backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"getFeatureVal = feat => (feat.covidData? feat.covidData[valMode] : 0) / (popRel ? feat.properties.POP_EST : 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`**Style**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"{ \n const height = 640;\n covidGlobe.width(width).height(height);\n return { width, height };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"md`**Settings**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"colorScale = d3.scaleSequentialPow(d3.interpolateYlOrRd)\n .exponent(1/4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`**Data**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"covidData = fetch(\n 'https://disease.sh/v3/covid-19/countries', \n { headers: { 'x-requested-with': 'observablehq.com' }}\n)\n .then(r => r.json())\n .catch(() => cachedCovidData) // use cached data if api is unavailable","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"cachedCovidData = FileAttachment(\"covidData-cached@2.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"countryNameMapper = ({\n 'bosnia and herzegovina': 'bosnia and herz.',\n drc: 'dem. rep. congo',\n 'dominican republic': 'dominican rep.',\n 'ivory coast': 'Côte d\\'Ivoire',\n 's. korea': 'south korea',\n taiwan: 'Taiwan, Province of China',\n uae: 'United Arab Emirates',\n uk: 'United Kingdom',\n usa: 'United States of America'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"covidFeatureData = {\n const dataByCountry = indexBy(covidData, d => (countryNameMapper[d.country.toLowerCase()] || d.country).toLowerCase(), false);\n \n return countries110m.features\n .filter(d => d.properties && d.properties.NAME)\n .map(d => ({\n ...d,\n covidData: dataByCountry[d.properties.NAME.toLowerCase()]\n })); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"countries110m = fetch('//unpkg.com/globe.gl/example/datasets/ne_110m_admin_0_countries.geojson').then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"md`**Logs**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"countriesMissingGeoJson = {\n const dataByCountry = indexBy(covidData, d => (countryNameMapper[d.country.toLowerCase()] || d.country).toLowerCase(), false);\n const geoJsonCountries = new Set(countries110m.features.map(d => d.properties.NAME.toLowerCase()));\n \n return Object.keys(dataByCountry).filter(country => !geoJsonCountries.has(country)).sort();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"countriesMissingData = {\n const dataByCountry = indexBy(covidData, d => (countryNameMapper[d.country.toLowerCase()] || d.country).toLowerCase(), false);\n const geoJsonCountries = new Set(countries110m.features.map(d => d.properties.NAME.toLowerCase()));\n \n return [...geoJsonCountries].filter(country => !dataByCountry.hasOwnProperty(country)).sort();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`**Dependencies**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"Globe = require('globe.gl')","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"indexBy = require('index-array-by')","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"import {radio, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}