d3.v5.js で地図を描画 #jQuery

次のような地図を作成します。

栃木県　地図

次のページを参考にしました。

D3.jsで地図を描画

フォルダーの構造です。

$ tree 
.
├── index.html -> map_pref.html
├── map_pref.css
├── map_pref.html
├── map_pref.js
└── tochigi.json

map_pref.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<link href="map_pref.css" rel="stylesheet">
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/d3.v5.min.js"></script>
<script src="map_pref.js"></script>
<title>Map Tochigi</title>
</head>
<body>
<h2>Map Tochigi</h2>
<svg id="map"></svg>
<p />
Mar/08/2020<p />
</body>
</html>

map_pref.css

/* -------------------------------------------------------------- */
/*
    map_pref.css

                    Mar/08/2020
*/
/* -------------------------------------------------------------- */
.area {
    fill: silver;
    stroke: white;
}
.popup {
    fill: black;
    font-size: 10pt;
}

/* -------------------------------------------------------------- */

map_pref.js

// ------------------------------------------------------------------------
//  map_pref.js
//
//                      mar/08/2018
// ------------------------------------------------------------------------
const file_json = "tochigi.json"

jQuery.getJSON(file_json,function (data)
    {
    jQuery("#outarea_aa").text ("*** start ***")
    draw_map_proc(data)
    jQuery("#outarea_hh").text ("*** end ***")
    })

// ------------------------------------------------------------------------
function draw_map_proc(data_in)
{
    const WIDTH = 700
    const HEIGHT = 560

    var svg = d3.selectAll("#map")
        .attr("width", WIDTH)
        .attr("height", HEIGHT);

    var gg = svg.append("g");

        var projection = d3.geoMercator()
            .scale(25000)
            .center(d3.geoCentroid(data_in))
            .translate([WIDTH / 2, HEIGHT / 2])

        var path = d3.geoPath()
            .projection(projection)

        gg.selectAll('path')
            .data(data_in.features)
            .enter()
            .append('path')
            .attr('d', path)
            .attr('class', 'area')
}
// ------------------------------------------------------------------------

次から　栃木県の地図情報をダウンロードします。

国土数値情報　行政区域データ

ダウンロードした zip ファイルから、tochigi.json を作成します。

unzip N03-190101_09_GML.zip
ogr2ogr -f GeoJSON tochigi.json N03-19_09_190101.shp