Also listed in…
earthquakes
mymap = map
mychart = viewof chart
myinitialize = initialize
map_filter = {
const [t0, t1] = [chart[0][0].getTime(), chart[1][0].getTime()];
const [m1, m0] = [chart[0][1], chart[1][1]];
d3.select(map).selectAll("circle")
.attr("r", d => d.datum.properties.mag)
.attr("fill-opacity", 0.5)
.attr("stroke", "#f00")
.attr("visibility", d => (d.datum.properties.time > t0 && d.datum.properties.time < t1
&& d.datum.properties.mag > m0 && d.datum.properties.mag < m1)
? "visible" : "hidden");
// Count the visible earthquakes on the map
const n = d3.select(map).selectAll("circle")
.filter(function() { return d3.select(this).attr("visibility") == "visible" })
.nodes().length;
return md`${n} out of ${data.length} earthquakes are visible on the map.`
}
d3 = require("d3@6")
import {map, quakes} from "@pbogden/earthquakes"
myquakes = quakes // Expose "myquakes" for observable-jupyter users
data = quakes.map(d => [d.datum.properties.time, d.datum.properties.mag, d.datum])
// import {viewof chart} with {data as data} from "@pbogden/click-to-recenter-brush-iii"
import {viewof chart, initialize} with {data as data} from "5ecef56b3c75b0e6"
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.
