Data sculptor
Public
Edited
Mar 25
globe = {
const globe = new Globe(domEl)
.showAtmosphere(false)
.backgroundColor('white')
.pointLat('lat')
.pointLng('lon')
.pointAltitude(d => Math.sqrt(d.elevation) * 1.5e-3)
.pointRadius(d => Math.sqrt(d.elevation) * 1.5e-3)
.pointColor(d => 'rgba(210,0,0,0.6)')
.pointLabel(getVolcanoDescription)
.polygonAltitude(d => d === worldLand ? 0.004 : d.properties.PlateName ? 0.01 : 0.008)
.polygonCapColor(getPolygonColor)
.polygonSideColor(() => null)
.polygonStrokeColor(d => d === worldLand ? 'rgba(0,0,0,0)' : d.properties.PlateName ? 'rgba(47,79,79,0.5)' : 'rgba(0,0,0,0.3)')
.polygonLabel(({ properties: p }) => p.site ? getVolcanoDescription(p.site) : p.PlateName ? `Plate: ${p.PlateName} (${p.Code})` : '')
.polygonsTransitionDuration(0)
.pathPoints(d => d.geometry.coordinates)
.pathPointLng(c => c[0])
.pathPointLat(c => c[1])
.pathPointAlt(0.012)
.pathColor(d => 'rgba(210,0,0,0.9)');
globe.pointOfView({ altitude: 1.7 }, 4000)
globe.globeMaterial().color.setRGB(0.8,1,1);
globe.lights(globe.lights().filter(light => light.isAmbientLight)); // Leave only ambient light
globe.lights()[0].intensity = 5;
return globe;
}
globe
.width(width)
.height(height)
.pointsData(layers.includes("Volcanoes") ? volcanoes : [])
.polygonsData([
worldLand,
...(layers.includes("Tectonic Plates") ? platesGeoJson.features : []),
...(layers.includes("Voronoi") ? voronoiPolygons : [])
])
.pathsData(layers.includes("Urquhart") ? urquhartLines : [])
.onPolygonHover(feat => globe.polygonCapColor(d => (d === feat && feat !== worldLand) ? (d.properties.PlateName ? 'rgba(47,79,79,0.1)' : 'rgba(255,0,0,0.3)') : getPolygonColor(d)))
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
