Published
Edited
May 13, 2021
charts={
const c=DOM.context2d(s,s);
const {canvas}=c;
const projection = d3.geoOrthographic().scale(radius).translate([s / 2, s / 2]);
const path = d3.geoPath(projection, c);
projection.rotate(rotate);
c.clearRect(0, 0, s, s);
// Draw the seas
c.lineWidth = 1.5;
c.fillStyle = "aliceblue";
c.beginPath();
c.arc(s / 2, s / 2, radius, 0, 2 * Math.PI)
c.fill();
c.stroke();
c.lineWidth = 0.35;
c.fillStyle = "mintcream";
c.beginPath();
path(worldData);
c.fill();
c.stroke();
return canvas;
}
rotate=[x, 0];
viewof x = slider({min: 0, max: 360, value: 10})
url1 = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";
url2='https://unpkg.com/world-atlas@1/world/110m.json'
geojson = (await fetch(url1)).json()
world=(await fetch(url2)).json();
topojson = require('topojson');
feature= topojson.feature;
s = 300;
radius= s / 2;
worldData = feature(world, world.objects.countries)
import {slider, color} from "@jashkenas/inputs"
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.
