shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    高崎市にあるヤマダ電機から、車で5分以内、10分以内、20分以内に到達可能なエリア(到達圏)を算出し、統計局の「小地域（町丁・字等別）男女別人口総数及び世帯総数」と組み合わせて、到達圏ごとの男女年代別人口を計算。
このあたりの計算はすべてQGISを計算し、計算結果をGeoJSONとして出力してleaflet.jsを用いて表示している。

  
## index.html
<!DOCTYPE html>
<html lang='jp'>

<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
    integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
    crossorigin="" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
    integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
    crossorigin=""></script>
<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>


<style>
html,
body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#stage {
    width: 960px;
    height: 500px;
    overflow: auto;
   border:1px solid gray;
}


#flexbox {
   display: flex;
}

#mapid {
    width: 800px;
    height: 500px;
}
#info {
    padding:10px;
    font-size: 12px;
}
#table ,#table tbody {
    width: 100%;
}
#table tr:nth-child(even){
    background:#F2F2F2;
}
#table td:nth-child(even){
    width: 45px;
    text-align: right;
}
#table thead, #table tbody
{
    display: block;
}
#table tbody {
    overflow-y: auto;
}

#stats {
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    font-size:12px;
}

#stats, select {
    font-size:12px;
}
#stats td:nth-child(even){
    text-align: right;
}

</style>

</head>

<body>
<div id="stage">
    <div id="flexbox">
        <div id="mapid"></div>
        <div id="info"></div>
    </div>
</div>


<script>
var defaultType = "男２０～２４歳";
var info = document.getElementById("info");
var format = d3.format(",")

var label = {
    "T000849026": "男２０～２４歳",
    "T000849027": "男２５～２９歳",
    "T000849028": "男３０～３４歳",
    "T000849029": "男３５～３９歳",
    "T000849030": "男４０～４４歳",
    "T000849031": "男４５～４９歳",
    "T000849032": "男５０～５４歳",
    "T000849033": "男５５～５９歳",
    "T000849034": "男６０～６４歳",
    "T000849035": "男６５～６９歳",
    "T000849036": "男７０～７４歳",
    "T000849046": "女２０～２４歳",
    "T000849047": "女２５～２９歳",
    "T000849048": "女３０～３４歳",
    "T000849049": "女３５～３９歳",
    "T000849050": "女４０～４４歳",
    "T000849051": "女４５～４９歳",
    "T000849052": "女５０～５４歳",
    "T000849053": "女５５～５９歳",
    "T000849054": "女６０～６４歳",
    "T000849055": "女６５～６９歳",
    "T000849056": "女７０～７４歳",
}

var idLable = {
    1: "5分以内の到達圏(赤)",
    2: "10分以内の到達圏(緑)",
    3: "20分以内の到達圏(青)",
}

var mymap = L.map('mapid').setView([36.3229373, 139.0125926], 11);
L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=K7gU5zPWuSFKb6p1zwsh', {
    tileSize: 512,
    zoomOffset: -1,
    maxZoom: 14,
    attribution: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
    crossOrigin: true
}).addTo(mymap);


var p1 = d3.json('shouken.geojson');

Promise.all([p1]).then(function (data) {
    var poligon = data[0];


    var marker = L.marker([36.3229373, 139.0125926,]).addTo(mymap);
    var newpopup = L.popup({
        closeOnClick: false,
        autoClose: false
    }).setContent("ヤマダ電機");
    marker.bindPopup(newpopup).openPopup();


    var whenClicked = function(e){
        var p = e.target.feature.properties;

        var tr = Object.keys(p).map(function(key){
            if(key.indexOf("T0008")) return ;
            var keyname = label[key];
            if(!keyname) return ;
            return "<tr><td>"+ keyname+"</td><td>"+ p[key] + "人</td></tr>"
        });

        info.innerHTML = '<table id="table">'+ tr.join("\n") +"</table>";
    }


    var onEachFeature = function (feature, layer) {
        if (feature.properties) {
                var p = feature.properties;
            layer.bindPopup(p.CITY_NAME + p.S_NAME);
            layer.on({
                click: whenClicked
            });

        }
    }


    L.geoJSON(poligon, {
        style: function (feature) {
            fillColor = "#0000"
            switch (feature.properties.ID) {
                case "1": fillColor = "red"; break;
                case "2": fillColor = "lime"; break;
                case "3": fillColor = "skyblue"; break;
            }
            return  {
                "weight": 0.5,
                color:"black",
                fillColor: fillColor,
                fillOpacity: 0.5
                }
        },
        onEachFeature: onEachFeature
    }).addTo(mymap);


    var nested = d3.nest()
        .rollup(function (d) {
            var values = d.map(function (p) {
                var p = p.properties;
                var tmp = {};
                Object.keys(p).forEach(function (key) {
                    if (key.indexOf("T0008")) return;
                    tmp[key] = +p[key]
                });
                return tmp
            });
            var sums = {}

            Object.keys(label).forEach(function (key) {
                sums[label[key]] = d3.sum(values, function (d) { return d[key] })
            });

            return sums;
        })
        .key(function (d) { return d.properties.ID })
        .map(poligon.features)


    var renderStats = function (table, type) {
        var result = nested.entries().map(function (d) {
            return { id: idLable[d.key], value: d.value[type] }
        })
        table.selectAll("tr").remove();

        table
            .selectAll("tr")
            .data(result)
            .enter()
            .append("tr")
            .selectAll("td")
            .data(function (d) { return [d.id, format(d.value) + "人"] })
            .enter()
            .append("td")
            .text(function (d) { return d })

    }


    L.Control.Watermark = L.Control.extend({
        onAdd: function (map) {
            var div = L.DomUtil.create('div');
            var d3div = d3.select(div).attr("id", "stats");

            d3div.append("p")
                .text("到達圏(車)で集計")

            d3div.append("select")

            var table = d3div.append("table")

            var typeSelector = d3div.select("select")

            typeSelector.selectAll("option")
                .data(Object.keys(label))
                .enter()
                .append("option")
                .attr("value", function (key) { return label[key] })
                .text(function (key) { return label[key] })

            typeSelector.on("change", function () {
                renderStats(table, this.value)
            });

            renderStats(table, defaultType);

            return div;
        }
    });

    L.control.watermark = function (opts) {
        return new L.Control.Watermark(opts);
    }

    L.control.watermark({ position: 'bottomleft' }).addTo(mymap);


});


</script>
</body>

</html>

## preview.jpg

      
    Raw
  

              preview.jpg
            
          
## shouken.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              shouken.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang='jp'>

	<head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
	integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
	crossorigin="" />
	<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
	integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
	crossorigin=""></script>
	<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>


	<style>
	html,
	body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	}

	#stage {
	width: 960px;
	height: 500px;
	overflow: auto;
	border:1px solid gray;
	}


	#flexbox {
	display: flex;
	}

	#mapid {
	width: 800px;
	height: 500px;
	}
	#info {
	padding:10px;
	font-size: 12px;
	}
	#table ,#table tbody {
	width: 100%;
	}
	#table tr:nth-child(even){
	background:#F2F2F2;
	}
	#table td:nth-child(even){
	width: 45px;
	text-align: right;
	}
	#table thead, #table tbody
	{
	display: block;
	}
	#table tbody {
	overflow-y: auto;
	}

	#stats {
	background-color: white;
	padding: 5px;
	border-radius: 4px;
	font-size:12px;
	}

	#stats, select {
	font-size:12px;
	}
	#stats td:nth-child(even){
	text-align: right;
	}

	</style>

	</head>

	<body>
	<div id="stage">
	<div id="flexbox">
	<div id="mapid"></div>
	<div id="info"></div>
	</div>
	</div>


	<script>
	var defaultType = "男２０～２４歳";
	var info = document.getElementById("info");
	var format = d3.format(",")

	var label = {
	"T000849026": "男２０～２４歳",
	"T000849027": "男２５～２９歳",
	"T000849028": "男３０～３４歳",
	"T000849029": "男３５～３９歳",
	"T000849030": "男４０～４４歳",
	"T000849031": "男４５～４９歳",
	"T000849032": "男５０～５４歳",
	"T000849033": "男５５～５９歳",
	"T000849034": "男６０～６４歳",
	"T000849035": "男６５～６９歳",
	"T000849036": "男７０～７４歳",
	"T000849046": "女２０～２４歳",
	"T000849047": "女２５～２９歳",
	"T000849048": "女３０～３４歳",
	"T000849049": "女３５～３９歳",
	"T000849050": "女４０～４４歳",
	"T000849051": "女４５～４９歳",
	"T000849052": "女５０～５４歳",
	"T000849053": "女５５～５９歳",
	"T000849054": "女６０～６４歳",
	"T000849055": "女６５～６９歳",
	"T000849056": "女７０～７４歳",
	}

	var idLable = {
	1: "5分以内の到達圏(赤)",
	2: "10分以内の到達圏(緑)",
	3: "20分以内の到達圏(青)",
	}

	var mymap = L.map('mapid').setView([36.3229373, 139.0125926], 11);
	L.tileLayer('https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=K7gU5zPWuSFKb6p1zwsh', {
	tileSize: 512,
	zoomOffset: -1,
	maxZoom: 14,
	attribution: '<a href="https://maptiler.jp/" target="_blank">© MIERUNE</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
	crossOrigin: true
	}).addTo(mymap);


	var p1 = d3.json('shouken.geojson');

	Promise.all([p1]).then(function (data) {
	var poligon = data[0];


	var marker = L.marker([36.3229373, 139.0125926,]).addTo(mymap);
	var newpopup = L.popup({
	closeOnClick: false,
	autoClose: false
	}).setContent("ヤマダ電機");
	marker.bindPopup(newpopup).openPopup();


	var whenClicked = function(e){
	var p = e.target.feature.properties;

	var tr = Object.keys(p).map(function(key){
	if(key.indexOf("T0008")) return ;
	var keyname = label[key];
	if(!keyname) return ;
	return "<tr><td>"+ keyname+"</td><td>"+ p[key] + "人</td></tr>"
	});

	info.innerHTML = '<table id="table">'+ tr.join("\n") +"</table>";
	}


	var onEachFeature = function (feature, layer) {
	if (feature.properties) {
	var p = feature.properties;
	layer.bindPopup(p.CITY_NAME + p.S_NAME);
	layer.on({
	click: whenClicked
	});

	}
	}


	L.geoJSON(poligon, {
	style: function (feature) {
	fillColor = "#0000"
	switch (feature.properties.ID) {
	case "1": fillColor = "red"; break;
	case "2": fillColor = "lime"; break;
	case "3": fillColor = "skyblue"; break;
	}
	return {
	"weight": 0.5,
	color:"black",
	fillColor: fillColor,
	fillOpacity: 0.5
	}
	},
	onEachFeature: onEachFeature
	}).addTo(mymap);


	var nested = d3.nest()
	.rollup(function (d) {
	var values = d.map(function (p) {
	var p = p.properties;
	var tmp = {};
	Object.keys(p).forEach(function (key) {
	if (key.indexOf("T0008")) return;
	tmp[key] = +p[key]
	});
	return tmp
	});
	var sums = {}

	Object.keys(label).forEach(function (key) {
	sums[label[key]] = d3.sum(values, function (d) { return d[key] })
	});

	return sums;
	})
	.key(function (d) { return d.properties.ID })
	.map(poligon.features)



	var renderStats = function (table, type) {
	var result = nested.entries().map(function (d) {
	return { id: idLable[d.key], value: d.value[type] }
	})
	table.selectAll("tr").remove();

	table
	.selectAll("tr")
	.data(result)
	.enter()
	.append("tr")
	.selectAll("td")
	.data(function (d) { return [d.id, format(d.value) + "人"] })
	.enter()
	.append("td")
	.text(function (d) { return d })

	}


	L.Control.Watermark = L.Control.extend({
	onAdd: function (map) {
	var div = L.DomUtil.create('div');
	var d3div = d3.select(div).attr("id", "stats");

	d3div.append("p")
	.text("到達圏(車)で集計")

	d3div.append("select")

	var table = d3div.append("table")

	var typeSelector = d3div.select("select")

	typeSelector.selectAll("option")
	.data(Object.keys(label))
	.enter()
	.append("option")
	.attr("value", function (key) { return label[key] })
	.text(function (key) { return label[key] })

	typeSelector.on("change", function () {
	renderStats(table, this.value)
	});

	renderStats(table, defaultType);

	return div;
	}
	});

	L.control.watermark = function (opts) {
	return new L.Control.Watermark(opts);
	}

	L.control.watermark({ position: 'bottomleft' }).addTo(mymap);


	});






	</script>
	</body>

	</html>