東京都立大学 システムデザイン学部 インダストリアルアート学科 ネットワークデザインスタジオ 杉本達應研究室
url = `https://raw.githubusercontent.com/smartnews-smri/japan-topography/main/data/municipality/topojson/s0010/N03-21_210101.json`
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: +d.properties.N03_007?.substring(0, 2) || null
}
}));
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;
}
land = topojson.merge(japan, japan.objects.prefs.geometries)
Plot.plot({
width: 400,
height: 400 * 0.75,
projection: {
type: "azimuthal-equidistant",
rotate: [-136, 0],
domain: land,
insetLeft: 400 * 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"
})
]
})
prefPointsUrl = `https://gist.githubusercontent.com/sugi2000/0c768684150e9c565f6f87a98671a337/raw/67f42ae0caf6163e2979fc592dd9b531634da21e/prefs.json`
prefPoints = d3.json(prefPointsUrl)
Plot.plot({
width: 400,
height: 400 * 0.75,
projection: {
type: "azimuthal-equidistant",
rotate: [-136, 0],
domain: land,
insetLeft: 400 * 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"
}),
Plot.geo(prefPoints, {
stroke: "white",
r: 4,
fill: "red",
opacity: 0.7
})
]
})
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.
