cartogram-chart
Version:
Cartogram web component for visualizing geographical data by distorting a TopoJson topology
40 lines (33 loc) • 1.17 kB
HTML
<head>
<script src="//cdn.jsdelivr.net/npm/cartogram-chart"></script>
<!-- <script src="../../dist/cartogram-chart.js"></script>-->
</head>
<body>
<div id="world"></div>
<script type="module">
import * as d3 from 'https://esm.sh/d3';
fetch('./ne_110m_admin_0_countries.json')
.then(r => r.json())
.then(world => {
// exclude antarctica
world.objects.countries.geometries.splice(
world.objects.countries.geometries.findIndex(d => d.properties.ISO_A2 === 'AQ'),
1
);
const colorScale = d3.scaleSequential(d3.interpolatePlasma)
.domain([0, Math.max(...world.objects.countries.geometries.map(getGDPPerCapita))]);
new Cartogram(document.getElementById('world'))
.topoJson(world)
.topoObjectName('countries')
.value(getGDPPerCapita)
.color(f => colorScale(getGDPPerCapita(f)))
.label(({ properties: p }) => `GDP of ${p.NAME} (${p.ISO_A2})`)
.units(' per capita')
.valFormatter(d3.format('$,.0f'));
});
//
function getGDPPerCapita({ properties: p }) {
return p.GDP_MD_EST * 1e6 / p.POP_EST;
}
</script>
</body>