Public
Edited
Dec 27, 2021
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
map = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width);

const projection = projections.find((d) => d.label === projectionLabel)
.projection;

const path = d3.geoPath(projection);

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

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

g.append("g")
.attr("fill", "none")
.attr("stroke", "#cce")
.attr("stroke-width", 0.2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.append("path")
.attr("d", path(graticule));

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

// municipal paths
if (drawBorders.includes("市区町村境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(
topojson
.feature(japan, japan.objects["N03-21_210101"])
.features.filter((d) => d.properties.N03_007)
)
.join("path")
.attr("id", (d) => d.properties.N03_007)
.attr("stroke-width", 0.25)
.attr("d", path)
.attr("fill", (d) => color(+d.properties.N03_007))
.append("title")
.text((d) => d.properties.N03_004);
}

// prefectural paths
if (drawBorders.includes("都道府県境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#f00")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.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
)
)
)
);
}
// if (drawBorders.includes("都道府県境")) {
// g.append("g")
// .attr("fill", "none")
// .attr("stroke", "#f00")
// .attr("stroke-width", 0.5)
// .attr("stroke-linejoin", "round")
// .attr("stroke-linecap", "round")
// .append("path")
// .attr(
// "d",
// path(
// topojson.mesh(
// japan,
// japan.objects["N03-21_210101"],
// (a, b) =>
// Math.floor(+a.properties.N03_007 / 1000) !==
// Math.floor(+b.properties.N03_007 / 1000)
// )
// )
// );
// }

// national border
if (drawBorders.includes("国境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.append("path")
.attr(
"d",
path(topojson.merge(japan, japan.objects["N03-21_210101"].geometries))
);
}

// zoom and pan
svg.call(
d3
.zoom()
.extent([
[0, 0],
[width, height]
])
.scaleExtent([1, 16])
.translateExtent([
[0, 0],
[width, height]
])
.on("zoom", zoomed)
);

function zoomed({ transform }) {
g.attr("transform", transform);
}

return svg.node();
}
Insert cell
map2 = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width);

//ランベルト正角円錐図法
// d3
// .geoConicConformal()
// .parallels([34, 38])
// .rotate([-135, 0])
// .scale(width)
// .center([0, 36])
// .translate([width / 2, height / 2])
// .scale(2200)

const projection = projections.find((d) => d.label === projectionLabel)
.projection;

const path = d3.geoPath(projection);

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

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

g.append("g")
.attr("fill", "none")
.attr("stroke", "#cce")
.attr("stroke-width", 0.2)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.append("path")
.attr("d", path(graticule));

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

// municipal paths
if (drawBorders.includes("市区町村境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(
topojson
.feature(japan, japan.objects["N03-21_210101"])
.features.filter((d) => d.properties.N03_007)
)
.join("path")
.attr("id", (d) => d.properties.N03_007)
.attr("stroke-width", 0.25)
.attr("d", path)
.attr("fill", (d) => color(+d.properties.N03_007))
.append("title")
.text((d) => d.properties.N03_004);
}

// prefectural paths
if (drawBorders.includes("都道府県境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#f00")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(d3.range(1, 48))
.join("path")
.attr("d", (d) => {
return path(
topojson.merge(
japan,
japan.objects["N03-21_210101"].geometries.filter(
(g) => Math.floor(+g.properties.N03_007 / 1000) === d
)
)
);
});

g.append("g")
.selectAll("circle")
.data(d3.range(1, 48))
.join("circle")
.attr("fill", "none")
.attr("stroke", "#00f")
.attr("stroke-width", 0.5)
.attr("transform", (d) => `translate(${centeroidOfPref(path, d)})`)
.attr("r", 10);
}
// if (drawBorders.includes("都道府県境")) {
// g.append("g")
// .attr("fill", "none")
// .attr("stroke", "#f00")
// .attr("stroke-width", 0.5)
// .attr("stroke-linejoin", "round")
// .attr("stroke-linecap", "round")
// .append("path")
// .attr(
// "d",
// path(
// topojson.mesh(
// japan,
// japan.objects["N03-21_210101"],
// (a, b) =>
// Math.floor(+a.properties.N03_007 / 1000) !==
// Math.floor(+b.properties.N03_007 / 1000)
// )
// )
// );
// }

// national border
if (drawBorders.includes("国境")) {
g.append("g")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.append("path")
.attr(
"d",
path(topojson.merge(japan, japan.objects["N03-21_210101"].geometries))
);
}

// zoom and pan
svg.call(
d3
.zoom()
.extent([
[0, 0],
[width, height]
])
.scaleExtent([1, 16])
.translateExtent([
[0, 0],
[width, height]
])
.on("zoom", zoomed)
);

function zoomed({ transform }) {
g.attr("transform", transform);
}

return svg.node();
}
Insert cell
topojson.bbox(
japan,
topojson.merge(
japan,
japan.objects["N03-21_210101"].geometries.filter(
(g) => Math.floor(+g.properties.N03_007 / 1000) === 1
)
)
)
Insert cell
centeroidOfPref = (path, i) =>
path.centroid(
topojson.merge(
japan,
japan.objects["N03-21_210101"].geometries.filter(
(g) => Math.floor(+g.properties.N03_007 / 1000) === i
)
)
)
Insert cell
Insert cell
height = width
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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