globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
33 lines (27 loc) • 969 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>
// Gen random data
const N = 10;
const gData = [...Array(N).keys()].map(() => ({
lat: (Math.random() - 0.5) * 180,
lng: (Math.random() - 0.5) * 360,
maxR: Math.random() * 20 + 3,
propagationSpeed: (Math.random() - 0.5) * 20 + 1,
repeatPeriod: Math.random() * 2000 + 200
}));
const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;
const globe = new Globe(document.getElementById('globeViz'))
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.ringsData(gData)
.ringColor(() => colorInterpolator)
.ringMaxRadius('maxR')
.ringPropagationSpeed('propagationSpeed')
.ringRepeatPeriod('repeatPeriod');
</script>
</body>