Published
Edited
Jan 8, 2022
2 forks
1 star
Insert cell
Insert cell
Insert cell
map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const g = svg.append("g");

g.append("g")
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#eef");

// アルベルス正積円錐図法
const projection = d3
.geoConicConformal()
.parallels([33, 44]) // 標準緯線 北緯33°及び北緯44°
.rotate([-135, 0]) // 中央子午線 東経135°
.scale(width)
.center([0, 35]) //d3.mean([20.4252771422034, 45.5572214594577])]) // 20.4252771422034 45.5572214594577 最南端20°25′31″ 最北端45°33′26″
.translate([width / 2, height / 2])
.scale(2200);

const path = d3.geoPath(projection);

// land
g.append("g")
.attr("fill", "#fff")
.append("path")
.attr(
"d",
path(topojson.merge(japan, japan.objects["N03-21_210101"].geometries))
);

// municipal
g.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.selectAll("path")
.data(topojson.feature(japan, japan.objects["N03-21_210101"]).features)
.join("path")
.attr("d", path);

// prefecture
g.append("g")
.attr("fill", "none")
.attr("stroke", "#f00")
.attr("stroke-width", 0.5)
.selectAll("path")
.data(d3.range(1, 48))
.join("path")
.attr("d", (d) =>
path(
topojson.merge(
japan,
japan.objects["N03-21_210101"].geometries.filter(
(g) => Math.floor(+g.properties.N03_007 / 1000) === d
)
)
)
);

return svg.node();
}
Insert cell
Insert cell
japan = d3.json(url)
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