Also listed in…
earthquakes
map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const defs = svg.append("defs");
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));
const g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);
g.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("fill", "#fff");
g.append("path")
.attr("d", path(graticule))
.attr("stroke", "#ddd")
.attr("fill", "none");
g.append("path")
.attr("d", path(land))
.attr("fill", "#ddd");
svg.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("stroke", "#000")
.attr("fill", "none");
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${projection([d.longitude, d.latitude])})`)
.attr("r", 1.5)
.append("title")
.text(d => d.name);
return svg.node();
}
data = {
const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson";
const response = await d3.json(url);
return response.features.map(d => ({
name: d.properties.title,
longitude: d.geometry.coordinates[0],
latitude: d.geometry.coordinates[1]
}));
}
path = d3.geoPath(projection)
projection = d3.geoNaturalEarth1()
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
land = topojson.feature(world, world.objects.land)
world = FileAttachment("land-50m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@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.
