glmap={Globe_map
.polygonsData(FeatureData)
.polygonAltitude(0.03)
//.polygonCapColor(feat => colorScale(getFeatureVal(feat)))
.polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
.polygonStrokeColor(() => '#111')
.polygonLabel(({ FeatureData, id })=> {
const capIt = str => str.charAt(0).toUpperCase() + str.slice(1);
const relToPop = v => `${d3.format('.2')(v / FeatureData.population * 100)}%`;
const popRatio = v => d3.format('.3~s')(FeatureData.population / v);
const relToCases = v => `${d3.format('.2')(v / FeatureData.cases * 100)}%`;
const formatVal = prop => `<b>${FeatureData[prop]}</b> ${prop === 'cases' ? `(1 in every ${popRatio(FeatureData[prop])} ppl)` : FeatureData[prop] ? `(${relToCases(FeatureData[prop])} of cases)` : ''}${FeatureData[prop] && FeatureData.hasOwnProperty(`today${capIt(prop)}`) ? ` | new today: ${FeatureData[`today${capIt(prop)}`]}` : ''}`;
return`
<b>${FeatureData ? FeatureData.countrys_id : name} (${id.ISO_A2}):</b> <br />
${(!FeatureData
? [['Cases', 0]]
: [
['Cases', formatVal('cases')],
['Deaths', formatVal('deaths')],
['Recovered', formatVal('recovered')],
['Critical', formatVal('critical')],
['Population', d3.format(".3s")(FeatureData.population)]
]
).map(([label, val]) => `${label}: <i>${val}</i>`)
.join('<br />')
}
` })
}
FeatureData = {
const dataByCountry = indexBy(production, d => d.id.toLowerCase(), false);
const databycountry_2 = indexBy(countrys_id,d=>d.id.toLowerCase(),false);
const databycountry_3 = indexBy(consumption ,d=>d.id.toLowerC)
return geo_boder.features
.filter(d => d.id)
.map(d => ({
...d,
production: dataByCountry[d.id],
countrys_id: databycountry_2[d.id]
}));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
