D3 contours and Plot spatial interpolatorsPie chart with radialGradientCoahuilagraph (user support)Derive and filter in arqueroSUM(ROUND()) doesn't like NaNParquet files directly from GitHubAggregating dataProject and clipDuckDB and bigintAdd a class to an observable inputA button to download a FileAttachmentCreate an average line in PlotA centered title
Catches sites
showTile(tileID)
showTile = (i) =>
createMap({
type: "FeatureCollection",
features: [
tiles.features[i],
...sites
.filter((d) => findTile(d) === i)
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]
})
// Add an ID property to all the tiles, for leaflet popups
tiles = ({
type: "FeatureCollection",
features: Array.from(tiles0.features, (t, i) => ({
...t,
properties: { ID: `tile ${i}` }
}))
})
findTile = {
const corners = tiles.features.map((d, i) => [
...d.geometry.coordinates[0][2],
i
]);
const x = d3.sort(d3.group(corners, (d) => +d[0]).keys());
const y = d3.sort(d3.group(corners, (d) => +d[1]).keys());
const I = d3.rollup(
corners,
(v) => v[0][2],
(d) => +d[0],
(d) => +d[1]
);
return ({ Long, Lat }) => {
const x0 = x[d3.bisect(x, +Long)];
const y0 = y[d3.bisect(y, +Lat)];
const i = I.get(x0)?.get(y0);
// Here we could return i, but it's safer to double-check that the polygon
// we've reached does indeed contain the point. We use d3.polygonContains
// because the grid is planar not spherical.
return i !== undefined
? d3.polygonContains(tiles.features[i].geometry.coordinates[0], [
+Long,
+Lat
])
? i
: undefined
: undefined;
};
}
createMap({
type: "FeatureCollection",
features: [
...tiles.features,
...sites
.filter((d) => findTile(d) === undefined)
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]
})
function* createMap(geojson) {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
ext: "png"
}
).addTo(map);
if (geojson) {
const layer = L.geoJson(geojson, {
weight: 1,
color: "#432",
onEachFeature: (feature, layer) =>
layer.bindPopup(
`${Object.entries(feature.properties)
.map(([, v]) => v)
.join("<br>\n")}`
)
}).addTo(map);
map.fitBounds(layer.getBounds());
}
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(
(L._style = html`<link href=${href} rel=stylesheet>`)
);
}
return L;
}
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.
