Published
Edited
Feb 14, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function vertex([longitude, latitude], radius) {
const lambda = longitude * Math.PI / 180;
const phi = latitude * Math.PI / 180;
return new THREE.Vector3(
radius * Math.cos(phi) * Math.cos(-lambda),
radius * Math.sin(phi),
radius * Math.cos(phi) * Math.sin(-lambda)
);
}
Insert cell
Insert cell
function wireframe(multilinestring, material) {
const geometry = new THREE.Geometry();
multilinestring.coordinates.forEach(line => {
d3.pairs(line.map(p => vertex(p, radius)), (a, b) => {
return geometry.vertices.push(a, b);
});
});
return new THREE.LineSegments(geometry, material);
}
Insert cell
Insert cell
land = {
const topology = await d3.json(resolve("world-atlas@1.1.4/world/50m.json"));
const mesh = topojson.mesh(topology, topology.objects.land);
return wireframe(mesh, new THREE.LineBasicMaterial({color: 0xff0000}));
}
Insert cell
graticule = {
const mesh = graticule10();
return wireframe(mesh, new THREE.LineBasicMaterial({color: 0xaaaaaa}));
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more