Public
Edited
Jun 19, 2023
Insert cell
Insert cell
plz_file = FileAttachment("plz_verzeichnis_v2_simplified.json").json()
Insert cell
plz = topojson.feature(plz_file, plz_file.objects.plz_verzeichnis_simplified)
Insert cell
projection = d3
.geoOrthographic()
.rotate(d3.geoCentroid(plz).map((d) => -1 * d))
.fitWidth(width, plz)
Insert cell
path = d3.geoPath(projection)
Insert cell
chart = {
const width = 600;
const height = (width * path.bounds(plz)[1][1]) / path.bounds(plz)[1][0];

const svg = d3
.create("svg")
.attr("viewBox", path.bounds(plz).flat())
.style("background", "lightgrey");

svg
.append("g")
.selectAll("path")
.data(plz.features)
.join("path")
//.attr("fill", d => color(unemployment.get(d.id)))
.attr("d", path)
.attr("stroke", "black")
.attr("fill", "none");

return svg.node();
}
Insert cell
plz
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