Public
Edited
Jan 26
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("https://cdnjs.cloudflare.com/ajax/libs/d3-geo/1.9.1/d3-geo.min.js")
Insert cell
Insert cell
Insert cell
topojson = require("https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js")
Insert cell
Insert cell
Insert cell
THREE = require("https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// To make a map suitable for wrapping around a globe, we specify a
// equirectangular projection which is essentially no projection.
projection = d3.geoEquirectangular().translate([512, 256]).scale(163);
Insert cell
Insert cell
map = {
// Set canvas 2d context to start drawing
const context = DOM.context2d(width, height);
// Creates a new geographic path generator with projection and context
const path = d3.geoPath(projection, context);
const scale = 163;
// Draw canvas background
context.beginPath();
context.rect(0, 0, width, height);
context.fillStyle = "#333";
context.fill();
// Set styling for countries
context.beginPath();
context.strokeStyle = "#333";
context.lineWidth = 0.25;

// Convert to regular GEOJSON data using topojson library
const countries = topojson.feature(data, data.objects.countries);
path(countries);
context.fillStyle = "#fff";
context.fill();
context.stroke();
// Return canvas element
return context.canvas;
}
Insert cell
Insert cell
Insert cell
renderer = {
// Set and return the renderer object
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
return renderer;
}
Insert cell
Insert cell
Insert cell
camera = {
// Set and return camera object
const camera = new THREE.PerspectiveCamera(75, width/height, 1, 6000);
camera.position.z = 500;
return camera;
}
Insert cell
Insert cell
Insert cell
scene = {
// Here we are creating a basic THREE.js scene with just one grey sphere in it.
const scene = new THREE.Scene();
const light = new THREE.HemisphereLight('#fff', '#666', 1.5);
light.position.set(0, 500, 0);
scene.add(light);
const waterMaterial = new THREE.MeshBasicMaterial({color: '#555', transparent: true});
const sphere = new THREE.SphereGeometry(200, 100, 100);
const baseLayer = new THREE.Mesh(sphere, waterMaterial);
// Here we are adding our map as a texture for the sphere
const mapTexture = new THREE.Texture(map);
mapTexture.needsUpdate = true;
const mapMaterial = new THREE.MeshBasicMaterial({ map: mapTexture, transparent: true });
const mapLayer = new THREE.Mesh(sphere, mapMaterial);
var root = new THREE.Object3D(map);
root.add(baseLayer);
root.add(mapLayer);
scene.add(root);
// Make it spin
function render() {
root.rotation.y += 0.02;
requestAnimationFrame(render);
renderer.render(scene, camera);
}

render();

return scene;
}
Insert cell
Insert cell
camera.position.z=500
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