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

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

こちらのページを改造しました。tochigi.json は同じです。
d3.v5.js で地図を描画

フォルダーの構造です。

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

map_library.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_library.js"></script>
<title>Libraries in Tochigi</title>
</head>
<body>
<h2>栃木県内の図書館の開館状況</h2>
<blockquote>
<br />
<span class="red">赤</span>は、コロナウイルス関連で閉館の市町村<br />
<span class="green">緑</span>は開館の市町村&nbsp;（時間短縮を含む）<br />
</blockquote>
<svg id="map"></svg>
<p />
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Mar/10/2020<p />
</body>
</html>

map_pref.css

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

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

.green {color: green;}
.red {color: red;}
/* -------------------------------------------------------------- */

map_library.js

// ------------------------------------------------------------------------
//  map_library.js
//
//                      mar/10/2018
// ------------------------------------------------------------------------
const file_json = "tochigi.json"
const file_library = "library.json"

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

// ------------------------------------------------------------------------
function draw_map_proc(data_in,library_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')
        .attr('name', function(d) {
            const pp = d.properties;
                this.style.fill = add_color_proc(pp,library_in)
            return pp.N03_004;
            })
        .attr('key', function(d) {
            const pp = d.properties;
            return pp.N03_007
            })
/*
        .on('mouseover', function() {
                this.style.fill = 'red';
            })
            .on('mouseout', function() {
                this.style.fill = 'silver';
        })
*/
            .on('click', function() {
                this.style.fill = 'blue';
        const key = this.getAttribute('key')
        const name = this.getAttribute('name')
        const url = library_in[key].url
        var str_out = key + "<br />"
        str_out += name + "<br />"
        str_out += url + "<br />"
        jQuery("#outarea_cc").html (str_out)
            })

}

// ------------------------------------------------------------------------
function add_color_proc(pp,library_in)
{
    var color = 'silver'

    const key = pp.N03_007

    if (key in library_in)
        {
        const status = library_in[key].status

        if (status == 1)
            color = 'green'
        else if (status == -1)
            color = 'red'
        }

    return  color
}

// ------------------------------------------------------------------------

library.json

{
    "09201": {"status" : -1,"url": "https://www.lib-utsunomiya.jp/"},
    "09202": {"status" : 1,"url": "https://www.city.ashikaga.tochigi.jp/site/ashikaga-lib/"},
    "09203": {"status" : -1,"url": "http://www.library.tochigi.tochigi.jp/"},
    "09204": {"status" : -1,"url": "http://www.library.sano.tochigi.jp/"},
    "09205": {"status" : 1,"url": "https://www.lib-kanuma.jp/"},
    "09206": {"status" : 1,"url": "https://opac.city.nikko.lg.jp/"},
    "09208": {"status" : -1,"url": "https://library.city.oyama.tochigi.jp/"},
    "09209": {"status" : -1,"url": "https://www.moka-lib.jp/"},
    "09210": {"status" : -1,"url": "http://www.lib-ohtawara.jp/"},
    "09211": {"status" : 1,"url": "https://www.yaita-city-tosyokan.jp/"},
    "09213": {"status" : 1,"url": "https://www.nasushiobara-library.jp/"},
    "09214": {"status" : 1,"url": "http://www.library.sakura.tochigi.jp/"},
    "09215": {"status" : -1,"url": "https://lib-nasukarasuyama.jp/"},
    "09216": {"status" : 1,"url": "http://www.library.shimotsuke.tochigi.jp/"},
    "09301": {"status" : 1,"url": "http://www.dango.ne.jp/kmnlib/"},
    "09342": {"status" : 1,"url": "http://www.town.mashiko.tochigi.jp/page/page000173.html"},
    "09343": {"status" : -1,"url": "https://fuminomori.jp/"},
    "09344": {"status" : -1,"url": "http://www.library.ichikai.tochigi.jp/"},
    "09345": {"status" : 1,"url": "https://www.town.tochigi-haga.lg.jp/menu/kurashi/sports/shogai/johokan/index.html"},
    "09361": {"status" : -1,"url": "http://www.library.mibu.tochigi.jp/"},
    "09364": {"status" : 1,"url": "http://www.nogilib.jp/"},
    "09384": {"status" : -1,"url": "https://www.town.shioya.tochigi.jp/forms/menutop/menutop.aspx?menu_id=1748"},
    "09386": {"status" : -1,"url": "https://www.library.takanezawa.tochigi.jp/"},
    "09407": {"status" : 1,"url": "http://www.library.nasu.tochigi.jp/"},
    "09411": {"status" : 1,"url": "http://www.lib-nakagawa.jp/"}
}