Public
Edited
Dec 22, 2022
Insert cell
Insert cell
Plot.plot({
width: width,
height: width * 0.75,
projection: {
type: "azimuthal-equidistant",
rotate: [-136, 0],
domain: land,
insetLeft: width * 0.1
},
marks: [
Plot.geo({ type: "Sphere" }, { fill: "#add8f7", stroke: "none" }),
Plot.graticule(),
Plot.geo(land, { fill: "white" }),
Plot.geo(topojson.feature(japan, japan.objects.municipalities).features, {
strokeWidth: 0.5,
stroke: "orange",
fill: "none"
}),
Plot.geo(topojson.feature(japan, japan.objects.prefs).features, {
stroke: "steelblue",
fill: "none"
})
]
})
Insert cell
land = topojson.merge(japan, japan.objects.prefs.geometries)
Insert cell
japan = {
const japan = await d3.json(url);

const municipalities = { ...japan.objects["N03-21_210101"] };

municipalities.geometries = municipalities.geometries.map((d) => ({
...d,
properties: { ...d.properties, prefCode: getPrefCode(d) }
}));

japan.objects.municipalities = municipalities;

const prefs = {
type: "GeometryCollection",
geometries: d3.range(1, 48).map((i) => ({
...topojson.mergeArcs(
japan,
japan.objects.municipalities.geometries.filter(
(d) => d.properties.prefCode === i
)
),
properties: { prefCode: i }
}))
};
japan.objects.prefs = prefs;

return japan;
}
Insert cell
getPrefCode = (d) => +d.properties.N03_007?.substring(0, 2) || null
Insert cell
url = `https://raw.githubusercontent.com/smartnews-smri/japan-topography/main/data/municipality/topojson/s0010/N03-21_210101.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