Unlisted
Edited
Apr 1, 2023
1 fork
viewof brush = PlotBrush.plot({
style: {fontSize: 16},
marginTop: 40,
marginBottom: 40,
inset: 10,
width: width,
height: width / 2,
grid: true,
marks: [
PlotBrush.dot(data, {x: x, y: y, fill: 'black', r: 2, }),
PlotBrush.brush(data, {x: x, y: y, selection: selection }),
PlotBrush.frame()
],
})
viewof point = {
const sphere = {type: "Sphere"};
const graticule = d3.geoGraticule10();
const height = width / 2;
const context = DOM.context2d(width, height);
const projection = d3.geoEqualEarth().fitSize([width, height], {type: "Sphere"});
const path = d3.geoPath(projection, context);
let mousedown = false;
context.beginPath(), path(graticule), context.strokeStyle = "#ccc", context.stroke();
context.beginPath(), context.fillStyle="#ccc", path(land), context.fill();
context.beginPath(), path(sphere), context.strokeStyle = "#000", context.stroke();
context.beginPath(), path.pointRadius(.5); path(geojson), context.stroke();
context.lineWidth = 2, context.strokeStyle = "#f00";
const image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
function render(coordinates) {
context.canvas.value = coordinates;
context.clearRect(0, 0, width, height);
context.putImageData(image, 0, 0);
context.beginPath(), path({type: "Point", coordinates}), context.stroke();
}
function render_domain(domain) {
context.clearRect(0, 0, width, height);
context.putImageData(image, 0, 0);
context.beginPath(), path(domain), context.stroke()
}
context.canvas.onmousedown = event => {
mousedown = true;
context.canvas.onmousemove(event);
};
context.canvas.onmousemove = ({layerX, layerY}) => {
if (!mousedown) return;
render(projection.invert([layerX, layerY]));
context.canvas.dispatchEvent(new CustomEvent("input"));
};
context.canvas.onmouseup = event => {
mousedown = false;
};
render([0, 0]);
return Object.assign(context.canvas, {render_domain: render_domain});
}
x = "depth"
y = "mag"
selection = null; // Initial selection for brush [[x0, y0], [x1, y1]] or null
url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson"
geojson = d3.json(url);
filtered_geojson = ({type: "FeatureCollection",
features: geojson.features.filter(d => d3.geoDistance(point, d.geometry.coordinates) < radius * Math.PI / 180)})
data = filtered_geojson.features.map(d => {
const obj = {};
obj.lon = d.geometry.coordinates[0];
obj.lat = d.geometry.coordinates[1];
obj.depth = d.geometry.coordinates[2];
obj.mag = d.properties.mag;
obj.time = new Date(d.properties.time);
obj.type = "Feature";
obj.geometry = JSON.parse(JSON.stringify(d.geometry));
obj.datum = JSON.parse(JSON.stringify(d));
return obj;
})
domain = {
const domain = d3.geoCircle().center(point).radius(radius)();
viewof point.render_domain(domain);
return domain;
}
globe = Plot.marks([Plot.graticule(), Plot.geo(land, {fill: "#ccc", stroke: "#999"}), Plot.sphere()])
// import {land} from "@observablehq/plot-projections"
import {land} from "@observablehq/views"
Plot = require("@observablehq/plot@0.6")
import {Plot as PlotBrush} from "@fil/plot-brush-71"
d3 = require("d3@7.8")
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.
