scene = {
const scene = new THREE.Scene()
scene.background = new THREE.Color('#fff')
// add cube outline
const box = new THREE.BoxGeometry(x, y, z)
var geo = new THREE.EdgesGeometry( box );
var mat = new THREE.LineBasicMaterial( { color: 0xdddddd, linewidth: 1 } );
var wireframe = new THREE.LineSegments( geo, mat );
scene.add( wireframe );
// add map
scene.add(map);
// add plot
for (var i = 0; i < data.length; i++) {
var coord = project3D([data[i].lon, data[i].lat], data[i].date)
var geo = new THREE.SphereGeometry( 0.15, 8, 8 );
var mat = new THREE.MeshBasicMaterial({color: d3.interpolateRdYlBu(Math.random())})
var cube = new THREE.Mesh(geo, mat)
cube.position.x = coord.x
cube.position.y = coord.y
cube.position.z = coord.z
scene.add(cube)
}
return scene
}
map = {
const mesh = topojson.mesh(world, world.objects.countries);
const material = new THREE.LineBasicMaterial({ color: 0xbbbbbb, linewidth: 1 });
const geometry = new THREE.BufferGeometry();
const vertices = [];
for (const P of mesh.coordinates) {
for (let p0, p1 = project3D(P[0]), i = 1; i < P.length; ++i) {
vertices.push(p0 = p1, p1 = project3D(P[i]));
}
}
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
return new THREE.LineSegments(geometry, material);
}
map;
function project3D(coord, t = minDate) {
const proj = projection(coord);
const time = timeScale(t)
return new THREE.Vector3(
proj[1],
time,
-proj[0]
);
}
viewof controls = (() => {
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.minDistance = 3;
orbitControls.maxDistance = 50;
const redraw = () => renderer.render(scene, camera);
orbitControls.addEventListener("change", redraw);
invalidation.then(() => {
orbitControls.removeEventListener("change", redraw);
orbitControls.dispose();
});
return orbitControls;
})();
data = {
var d = []
for (var i = 0; i < 200; i++) {
d.push({
lat: (Math.random() * 170 - 85),
lon: (Math.random() * 360 - 180),
date: (new Date(Math.random() * (maxDate.getTime() - minDate.getTime()) + minDate.getTime())),
value: Math.random()
})
}
return 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.
