globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
36 lines (30 loc) • 1.14 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const world = Globe()
(document.getElementById('globeViz'))
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
.pointOfView({ altitude: 4 }, 5000)
.polygonCapColor(feat => 'rgba(200, 0, 0, 0.6)')
.polygonSideColor(() => 'rgba(0, 100, 0, 0.05)')
.polygonLabel(({ properties: d }) => `
<b>${d.ADMIN} (${d.ISO_A2})</b> <br />
Population: <i>${Math.round(+d.POP_EST / 1e4) / 1e2}M</i>
`);
// Auto-rotate
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.3;
fetch('../datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries => {
world.polygonsData(countries.features);
setTimeout(() => world
.polygonsTransitionDuration(4000)
.polygonAltitude(feat => Math.max(0.1, Math.sqrt(+feat.properties.POP_EST) * 7e-5))
, 3000);
});
</script>
</body>