Alaska quakesEarthquakes with projectionEarthquakes with styleInduced seismicityEarthquake animationEarthquakes on LeafletMapLibre earthquake sliderEarthquakes on Mapbox GLClick to Recenter Brush IIBrushable earthquakesBrushable earthquakes IIWorld EarthquakesClick to Recenter Brush IVClick to Recenter Brush IIIEarthquakes with PlotMapLibre filtered quakesHello, Leaflet quakes!
Earthquake dashboard
grid = html`<div style="
background: #fff;
display: grid;
height: ${screen.height / screen.width * 100}vw;
grid-template-areas:
'a a'
'a a'
'b b';
grid-gap: 10px;
">
<div name="a" style="grid-area:a;border:solid 1px #ccc;"></div>
<div name="b" style="grid-area:b;border:solid 1px #ccc;"></div>
</div>`
class Cell {
constructor(element) {
this.element = element;
element.style.position = "relative";
}
get width() {
return resizer(this.element, "clientWidth");
}
get height() {
return resizer(this.element, "clientHeight");
}
embed(content) {
content.style.position = "absolute";
content.style.width = "100%";
content.style.height = "100%";
if (this.element.firstChild) this.element.replaceChild(content, this.element.firstChild);
else this.element.appendChild(content);
}
}
function resizer(element, dimension = "clientWidth") {
return Generators.observe(notify => {
let width = notify(element[dimension]);
const resized = () => {
let w = element[dimension];
if (w !== width) notify(width = w);
};
window.addEventListener("resize", resized);
return () => window.removeEventListener("resize", resized);
});
}
cellA = new Cell(grid.querySelector("[name=a]"))
cellB = new Cell(grid.querySelector("[name=b]"))
widthA = cellA.width
widthB = cellB.width
heightA = cellA.height
heightB = cellB.height
import {map as chartA, viewof chart as chartB} from "@pbogden/brushable-earthquakes-ii"
cellA.embed(chartA)
cellB.embed(viewof chartB)
filter_map = {
const [t0, t1] = [chartB[0][0].getTime(), chartB[1][0].getTime()];
const [m1, m0] = [chartB[0][1], chartB[1][1]];
d3.select(chartA).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(chartA).selectAll("circle")
.filter(function() { return d3.select(this).attr("visibility") == "visible" })
.nodes().length;
return md`${n} earthquakes are visible on the map.`
}
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.
