Published
Edited
Jul 20, 2019
2 forks
Importers
30 stars
data = fetchTile({z: 13, x: 7262, y: 3232})
imshow(data, 1, d3.interpolateGnBu)
wireframe = (name, size, shape) => {
// Geometry
const wireframeGeometry = new THREE.PlaneGeometry(
size.width, size.height, // width, height
shape[0], shape[1] // Segments
);
// Material
const wireframeMaterial = new THREE.MeshBasicMaterial({
color: 0x2260ff,
wireframe: true,
transparent: true,
depthWrite: false,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending
});
// Mesh
const wireframe = new THREE.Mesh(wireframeGeometry, wireframeMaterial);
wireframe.name = name;
return wireframe;
}
{
const mesh = scene.getObjectByName("terrain");
const heightArray = [].concat.apply([], data).map(heightScale);
// Update
mesh.geometry.vertices.forEach((v, i) => {
v.setZ(heightArray[i]);
});
mesh.geometry.verticesNeedUpdate = true;
mesh.geometry.computeFaceNormals();
}
heightScale = elev => ((elev-350)/4000);
scene = {
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x333333);
// calabiYau(exponent, projection).forEach(m => scene.add(m));
scene.add(wireframe("terrain", {width: 1, height: 1}, [255, 255]));
return scene;
}
camera = {
const fov = 45;
const aspect = width / height;
const near = 0.1;
const far = 1000;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.set(0, -1, 0.5);
camera.up.set(0, 0, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
return camera;
}
height = 500
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.
