Public
Edited
Oct 15, 2022
1 fork
Insert cell
Insert cell
map
Insert cell
d3.select(map).selectAll("circle")
.style("visibility", d => d.datum.properties.time < chart[0] ? "hidden" : "visible")
Insert cell
viewof chart
Insert cell
chart
Insert cell
Insert cell
import {viewof chart} with {quakes as data} from "630fe324f2c009ae"
Insert cell
Insert cell
extent = d3.extent(quakes.map(d => d.datum.properties.time))
Insert cell
Insert cell
import {map} with {quakes as data} from "@d3/world-airports"
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
data = d3.json('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson')
Insert cell
quakes = data.features.map(d => ({
name: d.properties.title,
longitude: d.geometry.coordinates[0],
latitude: d.geometry.coordinates[1],
datum: d, // Save a copy of the entire earthquake datum for other data-driven features
}))
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