Slippy Map TileSweet, Sweet FantasyOSM Tile MathGeotoolbox playgroundAzure Tile MathSQLite Geospatial - buffers!SQLite Geospatial - intersections!TurfJS split linePIPUpdate marker without refreshing map?Bars/Pub DensityAggregating Points by H3 HexagonsFR Temp DataFR Precip DataPizza PopularityH3 Coverage CalculationH3 coverage - France climate model data
North pole on the move!
Plot.plot({
width: 640,
height: 640,
projection: {
type: "azimuthal-equidistant",
rotate: [0, -90],
domain: d3
.geoCircle()
.center([0, 90])
.radius(90 - d3.min(noaa_data.map((d) => d.lat)))(),
inset: 20
},
color: {
type: "linear",
label: "year",
tickFormat: (d) => d + "",
ticks: 10,
width: 400,
domain: noaa_data.map((d) => d.year),
legend: true
},
marks: [
Plot.geo(land, { fill: "lightgray" }),
Plot.graticule(),
Plot.line(noaa_data, {
x: "lng",
y: "lat",
curve: "catmull-rom",
stroke: "darkgrey",
z: null
}),
Plot.line(filtered, {
x: "lng",
y: "lat",
curve: "catmull-rom",
stroke: (d) => d.year,
z: null
}),
Plot.dot(filtered, {
x: "lng",
y: "lat",
r: 2,
stroke: null,
fill: (d) => d.year
}),
Plot.frame()
]
})
filtered = noaa_data.filter((d) => d.year <= year)
noaa_data = (
await fetch("https://www.ngdc.noaa.gov/geomag/data/poles/NP.xy").then(
(response) => response.text()
)
)
.split("\n")
.map((row) => {
const [lng, lat, year] = row.split(" ");
return { lat: +lat, lng: ((+lng + 180) % 360) - 180, year: +year };
})
.filter((d) => d.year)
import { Scrubber } from "@mbostock/scrubber"
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.
