Public
Edited
Jul 11, 2023
1 star
globe = {
var c = DOM.context2d(s,s);
var canvas = c.canvas;
// Project the map.
var projection = d3.geoOrthographic().scale(radius).translate([s / 2, s / 2]);
var path = d3.geoPath(projection, c);
// Rotate the map's projection.
let {x,y} = rotation;
projection.rotate([x,y]);
// Draw the seas.
c.linewidth = 0;
c.fillStyle = "white";
c.strokeStyle = "dimgray";
c.beginPath(), c.arc(s / 2, s / 2, radius, 0 , 2 * Math.PI), c.fill(), c.stroke();
// Chloropleth each country
//c.fillstyle = d => color(world.get(d.properties.name))
// Draw the land.
c.lineWidth = 0;
c.fillStyle = "dimgray";
c.strokeStyle = "dimgray";
c.beginPath(), path(world), c.fill();
// Stop rotating when drag has finished.
c.canvas.onmouseup = e => onMoveStoped();
// Stop rotating if the mouse leaves the canvas.
c.canvas.onmouseleave = e => onMoveStoped();
// Start rotating when the mouse is clicked, and record the initial position.
c.canvas.onmousedown = e => onMoveStarted(e);
// Update the rotation based on the movement of the mouse.
c.canvas.onmousemove = e => onMove(e);
return canvas
}
mutable mouse = ({x: 0, y: 0})
mutable rotation = ({x: 77, y:-39})
s = 400
radius = 200
function onMoveStoped() {
mutable isRotate = false
}
function onMoveStarted(e){
mutable isRotate = true
mutable mouse = {
x: e.offsetX,
y: e.offsetY
}
}
function onMove(e) {
let {x,y} = rotation
if (!isRotate) return
mutable mouse = {
x: e.offsetX,
y: e.offsetY
}
mutable rotation = {
x: x - 0.125 * (mouse.x - e.offsetX),
y: y + 0.125 * (mouse.y - e.offsetY)
}
}
world = {
var world = await(await fetch("https://unpkg.com/world-atlas@1/world/110m.json")).json()
return topojson.feature(world, world.objects.countries)
}
topojson = require('topojson')
d3 = require('d3@6')
format = d => `${d}%`
color = d3.scaleQuantize([1, 7], d3.schemeBlues[6])
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.
