Published
Edited
Oct 5, 2022
1 fork
2 stars
chart
map_filter = {
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 > chart[0].getTime()
&& d.datum.properties.time < chart[1].getTime())
? "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 ${my_data.length} earthquakes are visible on the map.`
}
d3 = require("d3@6")
myquakes = quakes
my_data = quakes.map(d => [d.datum.properties.time, d.datum.properties.mag])
//import {viewof chart} with {my_data as data} from "@pbogden/click-to-recenter-brush-ii"
import {viewof chart} with {my_data as data} from "c3701ebacf0454b1"
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.
