globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
39 lines (32 loc) • 1.29 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/d3"></script>
<script src="//unpkg.com/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const weightColor = d3.scaleLinear()
.domain([0, 60])
.range(['lightblue', 'darkred'])
.clamp(true);
const myGlobe = Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.hexBinPointLat(d => d.geometry.coordinates[1])
.hexBinPointLng(d => d.geometry.coordinates[0])
.hexBinPointWeight(d => d.properties.mag)
.hexAltitude(({ sumWeight }) => sumWeight * 0.0025)
.hexTopColor(d => weightColor(d.sumWeight))
.hexSideColor(d => weightColor(d.sumWeight))
.hexLabel(d => `
<b>${d.points.length}</b> earthquakes in the past month:<ul><li>
${d.points.slice().sort((a, b) => b.properties.mag - a.properties.mag).map(d => d.properties.title).join('</li><li>')}
</li></ul>
`)
(document.getElementById('globeViz'));
fetch('//earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson').then(res => res.json()).then(equakes => {
myGlobe.hexBinPointsData(equakes.features);
});
</script>
</body>