-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
46 lines (37 loc) · 1.37 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
40
41
42
43
44
45
46
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/aframe"></script>
<script src="//unpkg.com/@ar-js-org/ar.js"></script>
<script src="//unpkg.com/globe-ar"></script>
<!--<script src="../../dist/globe-ar.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script type="module">
import { scaleOrdinal } from 'https://esm.sh/d3-scale';
import { schemeCategory10 } from 'https://esm.sh/d3-scale-chromatic';
import { transparentize } from 'https://esm.sh/polished';
const catColor = scaleOrdinal(schemeCategory10.map(col => transparentize(0.2, col)));
const getAlt = d => d.elevation * 5e-5;
const myGlobe = new GlobeAR(document.getElementById('globeViz'))
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.pointLat('lat')
.pointLng('lon')
.pointAltitude(getAlt)
.pointRadius(0.12)
.pointColor(d => catColor(d.type))
.labelLat('lat')
.labelLng('lon')
.labelAltitude(d => getAlt(d) + 1e-6)
.labelDotRadius(0.12)
.labelDotOrientation(() => 'bottom')
.labelColor(d => catColor(d.type))
.labelText('name')
.labelSize(0.15)
.labelResolution(1);
fetch('../datasets/world_volcanoes.json').then(res => res.json()).then(volcanoes => {
myGlobe.pointsData(volcanoes)
.labelsData(volcanoes);
});
</script>
</body>