Published
Edited
Nov 26, 2020
md`# Large Earthquakes from 1999 IzmitEarhquake in the World`
s=450;
radius=s/2;
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
viewof rotation = DOM.range(0,360);
viewof rotation2 = DOM.range(0,360);
globe={
var c= DOM.context2d(s,s);
var canvas=c.canvas;
var projection =d3.geoOrthographic().scale(radius).translate([s/2,s/2]);
projection.rotate([rotation2,rotation]);
var path =d3.geoPath(projection,c);
//Draw 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();
//Draw land
c.lineWidth=0.35;
c.fillStyle="mintcream";
c.beginPath(),path(world),c.fill(),c.stroke();
//Draw earthquakes
let color= d3.color("red");
color.opacity=0.25;
c.fillStyle=color;
path.pointRadius(quakeRadius);
quakes.features.forEach(quake =>
{c.beginPath(),path(quake),c.fill();});
return canvas;
}
quakeRadius={
const scale = d3.scaleSqrt().domain([0,500]).range([0,6]);
return function(quake){
return scale(Math.exp(quake.properties.mag));
}
}
url = "https://earthquake.usgs.gov/fdsnws/event/1/query.geojson?starttime=1999-08-17%2000:00:00&endtime=2020-11-26%2023:59:59&minmagnitude=7.6&orderby=time"
quakes = (await fetch(url)).json()
exampleQuake=quakes.features[96].properties
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');
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.
