Javascript (C3, D3_地図のお試し)
■D3のいろいろ試し（地図）。
D3での例にUSの地図を使ったものがあったので、日本版の地図情報を探してそれを表示させるところまで。
著作権上問題ない地図情報を持ってきて下のように同フォルダに置く。
japan.topojson
sample013_2.html
htmlのコードが下。Chat GPTとかでコードを調整。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>日本地図（シンプル版）</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
text-align: center;
}
svg {
width: 80%;
height: auto;
border: 1px solid #ccc;
}
</style>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
</head>
<body>
<h2>日本地図（シンプル表示）</h2>
<div id="map"></div>
<script>
(async function () {
const width = 800, height = 1000;
const svg = d3.select("#map")
.append("svg")
.attr("viewBox", [0, 0, width, height]);
const projection = d3.geoMercator()
.center([137.0, 38.2]) // 日本の中心付近
.scale(1500)
.translate([width / 2, height / 2]);
const path = d3.geoPath().projection(projection);
const g = svg.append("g");
// === 日本地図データ（TopoJSON） ===
const japan = await d3.json("japan.topojson");
// === GeoJSONに変換 ===
const prefectures = topojson.feature(japan, japan.objects.japan).features;
// === 地図描画 ===
g.selectAll("path")
.data(prefectures)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "#cccccc")
.attr("stroke", "#333")
.attr("stroke-width", 0.5)
.on("click", function (event, d) {
event.stopPropagation(); // 背景クリックに影響しないようにする
const [[x0, y0], [x1, y1]] = path.bounds(d);
const dx = x1 - x0, dy = y1 - y0;
const x = (x0 + x1) / 2;
const y = (y0 + y1) / 2;
const scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / width, dy / height)));
const translate = [width / 2 - scale * x, height / 2 - scale * y];
g.transition()
.duration(750)
.attr("transform", `translate(${translate}) scale(${scale})`);
});
// === 背景クリックでリセット ===
svg.on("click", () => {
g.transition()
.duration(750)
.attr("transform", null);
});
})();
</script>
</body>
</html>コマンドプロンプトで、ファイルを置いているフォルダへ行き、python -m http.server を実行する。
あとはブラウザで上のhtmlを指定。結果が下。地図は表示された。
いつもはhtmlのファイルを単純にクリックして動作確認していたけど、そうするとCORS policyでブロックされた（CORSはCross-Origin Resource Sharing）。
Access to fetch at '(リンクは省略)/japan.topojson' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
ローカルファイルからローカルファイルへアクセスはダメらしい。
D3の公式ページにあるUSのマップは細部もきれいな感じだけど、なかなかそうならない。使っているデータが原因なのか、何かうまいやり方があるのか。
