The avatar for @rodroadl
rodroadl
Public
Edited
Oct 18, 2022
Fork of Earthquakes
•
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
selection
Insert cell
[selection[0][1],typeof(selection[1][1]), typeof(selection[0][0]), selection[1][0]]
Insert cell
world
Insert cell
world.value
Insert cell
{
var filters = ["all", ['>=', ['get', 'mag'], selection[0][1]], ['<', ['get', 'mag'], selection[1][1]], ['>=', ['get', 'time'], selection[0][0]], ['<', ['get', 'time'], selection[1][0]]];
world.value.setFilter('quakes-circles', filters);
}
Insert cell
Insert cell
data = d3.json("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson")
Insert cell
quakes = data.features.map(d => ({
name: d.properties.title,
longitude: d.geometry.coordinates[0],
latitude: d.geometry.coordinates[1],
time: d.properties.time,
mag: d.properties.mag,
datum: d // Save a copy of the entire earthquake datum for other data-driven features
}))
Insert cell
colormap = d3.scaleSequential([5, 0], d3.interpolateViridis)
Insert cell
import {Legend} from "@d3/color-legend"
Insert cell
maplibregl = require("maplibre-gl@2.1.9")
Insert cell
<link href="https://unpkg.com/maplibre-gl@2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
Insert cell
# Brush
Insert cell
height = 600
Insert cell
margin = ({top: 20, right: 30, bottom: 30, left: 40})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
# Connecting between Map and Brush
Insert cell

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.
Learn more