Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Aug 31, 2019
15 forks
Importers
71 stars
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)
);
}
function wireframe(multilinestring, radius, material) {
const geometry = new THREE.Geometry();
for (const P of multilinestring.coordinates) {
for (let p0, p1 = vertex(P[0], radius), i = 1; i < P.length; ++i) {
geometry.vertices.push(p0 = p1, p1 = vertex(P[i], radius));
}
}
return new THREE.LineSegments(geometry, material);
}
land = {
const response = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json");
const topology = await response.json();
const mesh = topojson.mesh(topology, topology.objects.land);
return wireframe(mesh, radius, new THREE.LineBasicMaterial({color: 0xff0000}));
}
graticule = {
const mesh = graticule10();
return wireframe(mesh, radius, new THREE.LineBasicMaterial({color: 0xaaaaaa}));
}
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
scene.add(graticule);
scene.add(land);
return scene;
}
camera = {
const fov = 70;
const aspect = width / height;
const near = 1;
const far = 1000;
return new THREE.PerspectiveCamera(fov, aspect, near, far);
}
radius = 100
height = width
function graticule10() { // See https://github.com/d3/d3-geo/issues/95
return {
type: "MultiLineString",
coordinates: [].concat(
Array.from(
range(-180, 180, 10),
x => x % 90 ? meridian(x, -80, 80) : meridian(x, -90, 90)
),
Array.from(
range(-80, 80 + 1e-6, 10),
y => parallel(y, -180, 180)
)
)
};
}
function meridian(x, y0, y1, dy = 2.5) {
return Array.from(range(y0, y1 + 1e-6, dy), y => [x, y]);
}
function parallel(y, x0, x1, dx = 2.5) {
return Array.from(range(x0, x1 + 1e-6, dx), x => [x, y]);
}
function* range(start, stop, step) {
for (let i = 0, v = start; v < stop; v = start + (++i * step)) {
yield v;
}
}
topojson = require("topojson-client@3")
THREE = require("three@0.99.0/build/three.min.js")
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.
