block by shimizu 7e4e30d732b262fb1034e0ab73267104

渋谷区 町丁目別小売業商店 年間販売額(平成26年)

Full Screen

元データ

過去の調査結果（平成26年商業統計調査） | 渋谷区公式サイト

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
<style>
html, body {
    padding: 0px;
    margin: 0px;
}
    
html, body, #map {
    width: 100%;
    height: 100%;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}

/* svg 以下のpath要素でイベントを取得できるようにする */
.leaflet-overlay-pane svg path{
    pointer-events: auto;
}

.tooltip {
    z-index: 450;
  border: 1px solid black;
  background-color: white;
  padding: 5px 8px 4px 8px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

</style>

</head>

<body>
<div id="map"></div>    
    
    
    
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>    
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
<script>
!(function(){
    "use strict"
    
    var tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("position", "absolute")
        .style("visibility", "hidden")
            
    
    var map //leaflet obj
    
    d3.json("shibuya.geojson",main)
    
    
    function main(data) {
        data.features.forEach(function(d){
            d.properties.shibuya_value = +d.properties.shibuya_value;
            return d;
        })
        
        var values = data.features.filter(function(d){ return !isNaN(d.properties.shibuya_value) })
            .map(function(d){ return d.properties.shibuya_value })
        
        var color = d3.scaleLinear().domain(d3.extent(values)).range(["pink", "red"])
        
        
        addLmaps()
        drawFeatures(data, color)    
    }
    
    function addLmaps() {
    var cities = L.layerGroup();
	var mbAttr = 'Map data &copy; <a href="//openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="//mapbox.com">Mapbox</a>',
		mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2hpbWl6dSIsImEiOiI0cl85c2pNIn0.RefZMaOzNn-IistVe-Zcnw';

	var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
		streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});        
        
        
        //Leaflet初期設定
        map = L.map('map',{
            layers: [streets, cities]
        }).setView([35.671975, 139.697686], 14);
        
        
    
        //Leafletに用意されたsvgを使う 
        L.svg({clickable:true}).addTo(map);	
        
    }
    
    //位置→座標変換
    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }
    
    function drawFeatures(data, color) {
        var svg = d3.select("#map").select("svg")
        .attr("pointer-events", "auto")
        
        var g = svg.select("g")
        
        
        
        var transform = d3.geoTransform({point: projectPoint});
        var path = d3.geoPath().projection(transform)
    
        var featureElement = g.selectAll("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", function(d){
                if(isNaN(d.properties.shibuya_value)) return "none";
                return color(d.properties.shibuya_value)
            })
            .attr("fill-opacity", function(d){
                if(isNaN(d.properties.shibuya_value)) return 0;
                return 0.7;
            })
        .on("mouseout", function(d){
			//tooltip
			//	.style("visibility", "hidden")            
        })
		.on("mouseover", function(d){
			console.log(d.properties)
            if(isNaN(d.properties.shibuya_value)) return null;
			var html = "<center>";
			html += d.properties["S_NAME"];
			html += "<br>";
			html += (d.properties["shibuya_value"] * 1000000)/100000000 + "億円";
			html += "</center>";
			
			tooltip
				.html("")
				.style("left",d3.event.x + "px")
				.style("top", d3.event.y + "px")
				.style("visibility", "visible")
				.html(html)
			
		})    
    
        map.on("moveend", update);
    
        update();
    
        //pathのd属性を更新
        function update() {		
            featureElement.attr("d", path);
        } 
    
    }
    
        
}());
</script>    
</body>
</html>