Public
Edited
Sep 4, 2024
Fork of D3 U.S. map
Insert cell
Insert cell
map = htl.html`<svg viewBox="0 0 ${width} ${height}">
<g fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round">
<path stroke="#aaa" stroke-width="0.5" d="${path(municipalities)}"></path>
</g>
</svg>`
Insert cell
height = 500
Insert cell
path = d3.geoPath().projection(MercatorFWB([width, height]))
Insert cell
MercatorFWB = function (size) {
const proj = d3.geoProjection(function (x, y) {
const deg2rad = (x) => (Math.PI * x) / 180;

const bxl_scale = 3.5;
const bxl = {
min_x: deg2rad(4.236603),
min_y: deg2rad(50.761871),
max_x: deg2rad(4.505768),
max_y: deg2rad(50.918835),
x: deg2rad(4.371357),
y: deg2rad(50.840311)
};
if (x > bxl.min_x && x < bxl.max_x && y > bxl.min_y && y < bxl.max_y) {
x = (x - bxl.x) * bxl_scale + bxl.x - 0.013;
y = (y - bxl.y) * bxl_scale + bxl.y - 0.018;
}
return [x, Math.log(Math.tan(Math.PI / 4 + y / 2))];
});

if (size) {
return proj.fitSize(size, {
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[2.76, 49.48],
[6.44, 50.81]
]
}
});
}

return proj;
}
Insert cell
provinces = FileAttachment("provinces.geojson").json()
Insert cell
municipalities = FileAttachment("municipalities_fwb.geojson").json()
Insert cell

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.
Learn more