Globe = require("globe.gl")
d3 = require('d3')
THREE = {
const THREE = window.THREE = await require("three@0.99.0/build/three.min.js");
await require("three@0.99.0/examples/js/controls/OrbitControls.js").catch(() => {});
return window.THREE;
}
indexBy = require('index-array-by')
globe = {
const containerWidth = width;
const containerHeight = 500;
const container = html`<div style="height:500px"></div>`;
yield container;
fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_populated_places_simple.geojson').then(res => res.json()).then(places => {
Globe()
.width(containerWidth)
.height(containerHeight)
(container)
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.labelsData(places.features)
.labelLat(d => d.properties.latitude)
.labelLng(d => d.properties.longitude)
.labelText(d => d.properties.name)
.labelSize(d => Math.sqrt(d.properties.pop_max) * 4e-4)
.labelDotRadius(d => Math.sqrt(d.properties.pop_max) * 4e-4)
.labelColor(() => 'rgba(255, 165, 0, 0.75)')
.labelResolution(2)
(document.getElementById('globeViz'))
});
yield container;
}
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.
