Public
Edited
May 8, 2023
1 star
Insert cell
Insert cell
topojson.feature(belgium, belgium.objects.provinces)
Insert cell
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, width * 0.7]);

svg
.append("path")
.datum(
topojson.mesh(belgium, belgium.objects.municipalities, (a, b) => a !== b)
)
.attr("fill", "none")
.attr("stroke", "#eeeeee")
.attr("stroke-linejoin", "round")
.attr("d", path);

svg
.append("path")
.datum(topojson.feature(belgium, belgium.objects.provinces))
.attr("stroke", "#cccccc")
.attr("fill-opacity", 0)
.attr("stroke-width", 1)
.attr("stroke-opacity", 1)
.attr("d", path);

svg
.append("g")
.selectAll("path")
.data(rail.features)
.join("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("fill-opacity", 0)
.attr("stroke-width", 1)
.attr("stroke-opacity", 0.8)
.attr("d", path);

return svg.node();
}
Insert cell
path = d3.geoPath(projection)
Insert cell
projection = d3
.geoMercator()
.fitSize(
[width, width * 0.7],
topojson.feature(belgium, belgium.objects.provinces)
)
Insert cell
belgium = FileAttachment("belgie.topojson").json()
Insert cell
rail = FileAttachment("spoor-belgie.json").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