Interested in data visualization and tools for thought.
topology = topoMerged
{
const width = 640;
const height = 400;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
// 背景（四角形）
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "#005773");
// TopoJSONをGeoJSONへ変換
const geometry = topojson.feature(topology, topology.objects["hokkaido"]);
// 投影法 - メルカトル
// geojsonデータが収まるよう縮尺と範囲を設定
const projection = d3.geoMercator().fitExtent(
[
[0, 0],
[width, height]
],
geometry
);
// SVGパスを生成するための関数
const path = d3.geoPath().projection(projection);
const g = svg
.append("g")
.selectAll("path")
.data(geometry.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "0.5px")
.attr("fill", (d) => {
// 各データアイテムの要素をみて、属性値を変化させる
if (d.properties.name === "札幌市") {
return "red";
} else {
return "white";
}
})
.on("mouseover", function () {
// マウスカーソルが乗ったら、属性値を変える（塗り色を変える）
d3.select(this).attr("fill", "yellow");
})
.on("mouseout", function (d) {
// マウスカーソルが外れたら、属性値を変える（塗り色を変える）
d3.select(this).attr("fill", "green");
});
// ズームと移動
function zoomed(event) {
const { transform } = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
svg.call(d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed));
return svg.node();
}
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.
