-
Notifications
You must be signed in to change notification settings - Fork 305
/
index.html
39 lines (32 loc) · 1.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>