shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    元データ
過去の調査結果（平成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="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://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>

## shibuya.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              shibuya.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>
	<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 © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
	'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
	'Imagery © <a href="http://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>