globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
27 lines (24 loc) • 913 B
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<!-- <script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
fetch('../datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
{
const world = new Globe(document.getElementById('globeViz'))
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-dark.jpg')
.hexPolygonsData(countries.features)
.hexPolygonResolution(3)
.hexPolygonMargin(0.3)
.hexPolygonUseDots(true)
.hexPolygonColor(() => `#${Math.round(Math.random() * Math.pow(2, 24)).toString(16).padStart(6, '0')}`)
.hexPolygonLabel(({ properties: d }) => `
<b>${d.ADMIN} (${d.ISO_A2})</b> <br />
Population: <i>${d.POP_EST}</i>
`);
});
</script>
</body>