Public
Edited
Apr 3
Importers
// From https://github.com/d3/d3-geo/issues/113
function unstitch(a) {
a = JSON.parse(JSON.stringify(a));
a = d3.geoProject(
a,
d3
.geoEquirectangular()
.scale(180 / Math.PI)
.translate([0, 0])
);
for (const f of a.features) {
if (f.geometry.type === "Polygon")
f.geometry.coordinates.forEach((ring) =>
ring.forEach((point) => (point[1] *= -1))
);
else if (f.geometry.type === "MultiPolygon")
f.geometry.coordinates.forEach((poly) =>
poly.forEach((ring) => ring.forEach((point) => (point[1] *= -1)))
);
}
return rewind(a);
}
import { rewind } from '@fil/rewind';
h3 = FileAttachment("H3-HEXAGON.geojson").json()
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(h3).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
data = unstitch(h3)
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
const layer = L.geoJSON(data).addTo(map);
map.fitBounds(layer.getBounds(), {maxZoom: 9});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
d3 = require.alias({
"d3": "d3@7.1.1/dist/d3.min.js",
"d3-geo-projection": "d3-geo-projection@4/dist/d3-geo-projection.min.js"
})("d3", "d3-geo-projection")
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.
