globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
43 lines (36 loc) • 1.47 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/d3-scale"></script>
<script src="//unpkg.com/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const colorScale = d3.scaleOrdinal(['orangered', 'mediumblue', 'darkgreen', 'yellow']);
const labelsTopOrientation = new Set(['Apollo 12', 'Luna 2', 'Luna 20', 'Luna 21', 'Luna 24', 'LCROSS Probe']); // avoid label collisions
const elem = document.getElementById('globeViz');
const moon = Globe()
.globeImageUrl('./lunar_surface.jpg')
.bumpImageUrl('./lunar_bumpmap.jpg')
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
.showGraticules(true)
.showAtmosphere(false) // moon has no atmosphere
.labelText('label')
.labelSize(1.7)
.labelDotRadius(0.4)
.labelDotOrientation(d => labelsTopOrientation.has(d.label) ? 'top' : 'bottom')
.labelColor(d => colorScale(d.agency))
.labelLabel(d => `
<div><b>${d.label}</b></div>
<div>${d.agency} - ${d.program} Program</div>
<div>Landing on <i>${new Date(d.date).toLocaleDateString()}</i></div>
`)
.onLabelHover(label => elem.style.cursor = label ? 'pointer' : null)
.onLabelClick(d => window.open(d.url, '_blank'))
(elem);
fetch('./moon_landings.json').then(r => r.json()).then(landingSites => {
moon.labelsData(landingSites);
});
</script>
</body>