Published
Edited
Apr 17, 2020
md`# Earthquakes`
s=500
radius = s/2
globe = {
var c= DOM.context2d(s,s);
var canvas = c.canvas;
var projection = d3.geoOrthographic().scale(radius).translate([s/2, s/2]);
projection.rotate([rotation, 0]);
var path = d3.geoPath(projection, c);
c.lineWidth = 1.5;
c.fillStyle = "#fff";
c.beginPath(), c.arc(s / 2, s / 2, radius, 0, 2 * Math.PI), c.fill(), c.stroke();
// Draw the land
c.lineWidth = 1.0;
// c.fillStyle= "green";
// c.strokeStyle = "#000";
c.beginPath(), path(graticule), c.strokeStyle = "black", c.stroke();
c.beginPath(), path(world), c.fillStyle = "#006994", c.fill();
//Draw the 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;
}
viewof rotation = DOM.range(0, 360, 1);
graticule = d3.geoGraticule10();
quakeRadius = {
const scale = d3.scaleSqrt().domain([0,100]).range([0,6]);
return function (quake){
return scale(Math.exp(quake.properties.mag));
}
}
url="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson"
quakes = (await fetch(url)).json()
exampleQuake = quakes.features[30].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.
