Published
Edited
Aug 24, 2022
1 fork
3 stars
Points
{
const containerWidth = width;
const containerHeight = 500;
const container = html`<div style="height:500px"></div>`;
yield container;
const weightColor = d3
.scaleSequentialSqrt(d3.interpolateYlOrRd)
.domain([0, 200]);
var world = Globe()
.globeImageUrl(
"//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg"
)
.pointsData(sensors)
.pointAltitude("sensor_count")
.pointAltitude((d) => d.sensor_count * 6e-4)
.pointColor((d) => weightColor(d.sensor_count))
.width(containerWidth)
.height(containerHeight)(container);
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.6;
yield container;
}
sensors = FileAttachment("sensors.csv").csv({ typed: true })
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;
}
Globe = require("globe.gl")
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.
