{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
const path = d3.geoPath();
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", colors.ocean);
const g = svg.append("g").attr("transform", `translate(${translateX}, 0)`);
g.append("path")
.attr("fill", colors.land)
.attr("stroke", colors.country)
.attr("stroke-width", 0.5)
.attr("d", path(topojson.feature(japan, "country")));
const prefecturalBorders = topojson.mesh(
japan,
japan.objects.prefectures,
(a, b) => a !== b
);
g.append("path")
.datum(prefecturalBorders)
.attr("fill", "none")
.attr("stroke", colors.prefecture)
.attr("stroke-width", 1.2)
.attr("d", path);
const municipalBorders = topojson.mesh(
japan,
japan.objects.municipalities,
(a, b) => {
return a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0);
}
);
g.append("path")
.datum(municipalBorders)
.attr("fill", "none")
.attr("stroke", colors.municipality)
.attr("stroke-width", 0.5)
.attr("d", path);
return svg.node();
}