Alaska quakesEarthquakes with projectionEarthquakes with styleInduced seismicityEarthquake animationEarthquakes on LeafletMapLibre earthquake sliderEarthquake dashboardEarthquakes on Mapbox GLClick to Recenter Brush IIBrushable earthquakesBrushable earthquakes IIWorld EarthquakesClick to Recenter Brush IVEarthquakes with PlotMapLibre filtered quakesHello, Leaflet quakes!
Click to Recenter Brush III
Also listed in…
reusable
viewof chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const brush = d3.brush()
.extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])
.on("start brush end", brushed);
const circle = svg.append("g")
.attr("fill-opacity", 0.2)
.selectAll("circle")
.data(data)
.join("circle")
.attr("transform", d => `translate(${x(d[0])},${y(d[1])})`)
.attr("r", 3.5);
svg.append("g")
.classed("y-axis", true)
.call(yAxis)
svg.append("g")
.classed("x-axis", true)
.call(xAxis)
// For hints: https://observablehq.com/@d3/styled-axes
svg.append("text")
.classed("axis-title", true)
.attr("text-anchor", "start")
.attr("font-family", "sans-serif")
.attr("font-size", "1em")
.attr("x", margin.left)
.attr("y", margin.top)
.attr("dx", ".5em")
.attr("dy", "-.4em")
.text(title)
const dx = (x.range()[1] - x.range()[0]) / 10; // Fixed width for recentering
const x0 = (d3.mean(x.range())); // Intialize brush on midpoint
const [y0, y1] = y.range(); // Full height when recentering
svg.append("g")
.call(brush)
.call(brush.move, [[x0 - dx / 2, y1], [x0 + dx / 2, y0]]) // Initialize brush
.call(g => g.select(".overlay")
.datum({type: "selection"})
.on("mousedown touchstart", beforebrushstarted));
function beforebrushstarted(event) {
const [[cx, cy]] = d3.pointers(event);
const [x0, x1] = [cx - dx / 2, cx + dx / 2];
const [X0, X1] = x.range();
d3.select(this.parentNode)
.call(brush.move, x1 > X1 ? [[X1 - dx, y0], [X1, y1]]
: x0 < X0 ? [[X0, y0], [X0 + dx, y1]]
: [[x0, y1], [x1, y0]]);
}
function brushed(event) {
const selection = event.selection;
if (selection === null) {
circle.attr("stroke", null);
} else {
const [[a0, b0], [a1, b1]] = selection;
const [x0, x1] = [a0, a1].map(x.invert);
const [y0, y1] = [b0, b1].map(y.invert);
circle.attr("stroke", d => x0 <= d[0] && d[0] <= x1 && d[1] <= y0 && y1 <= d[1] ? "red" : null);
svg.node().value = [[x0, y0], [x1, y1]];
svg.node().dispatchEvent(new CustomEvent("input"));
}
}
return svg.node();
}
geojson = d3.json("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson")
data = geojson.features.map(d => [d.properties.time, d.properties.mag, d])
title = "magnitude"
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(6))
yAxis = g => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).ticks(3))
x = d3.scaleTime(d3.extent(data, d => d[0]), [margin.left, width - margin.right])
y = d3.scaleLinear(d3.extent(data, d => d[1]), [height - margin.bottom, margin.top])
margin = ({top: 20, right: 20, bottom: 20, left: 20})
height = width / 4
d3 = require("d3@6")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.