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

次のような色分け地図を作成します。
![corona_library.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/45c6c824-de09-4bdb-261d-c1e622ca2747.png)

こちらのページを改造しました。tochigi.json は同じです。
[d3.v5.js で地図を描画](https://qiita.com/ekzemplaro/items/f5c18885c47ebfcb9134)

フォルダーの構造です。

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

```html: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>
```

```css: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;}
/* -------------------------------------------------------------- */
```

```js: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
}

// ------------------------------------------------------------------------
```

```json: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/"}
}
```