cieloazul310/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    TopoJSON Simple Example

TopoJSONチュートリアル用のサンプル
国土数値情報の行政区域データ（平成28年茨城県）を利用しています。
使用したデータ


国土数値情報


## ibaraki_h28_merge.topojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ibaraki_h28_merge.topojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  path.selected {
    fill: none;
    stroke: orange;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #info {
    position: absolute;
    display: none;
    background: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    padding: 4px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border: thin solid #aaa;
    border-radius: 6px;
    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  }

  #info h3 {
    margin: auto;
  }

  #info p {
    margin: auto;
  }

</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<svg id="chart"></svg>
<div id="info"><p>茨城県</p><h3>水戸市</h3></div>
<script>

  d3.json("./ibaraki_h28_merge.topojson", function(error, json){
    if (error) throw error;

    var svg = d3.select("#chart");
    var size = {width: window.innerWidth, height: Math.min(500, window.innerHeight)};
    var padding = {top: 4, right: 4, bottom: 4, left: 4};

    svg.attr("width", size.width)
        .attr("height", size.height);

    var merged = topojson.merge(json, json.objects.cities.geometries);

    var projection = d3.geoMercator()
                        .fitExtent([[padding.left, padding.top],[size.width - padding.right, size.height - padding.bottom]], merged);

    var path = d3.geoPath()
                .projection(projection);

    var info = d3.select("#info");

    var point = [140.412322, 36.345308];

    var baselayer = svg.append("g");
    var overlay1 = svg.append("g");
    var overlay2 = svg.append("g");

    baselayer.selectAll(".cities")
              .data(topojson.feature(json, json.objects.cities).features)
              .enter()
              .append("path")
              .attr("class", "cities")
              .attr("d", path)
              .attr("fill", "white")
              .on("mouseover", function(d){
                info.select("h3").text(d.properties.N03_004);
                info.select("p").text(d.properties.N03_001);
                info.style("display","inline");
                d3.select(this)
                  .attr("fill", "#fffad7");
                overlay1.append("path")
                        .datum(d)
                        .attr("class", "selected")
                        .attr("d", path);
              })
              .on("mousemove", function(d){
                var mouse = d3.mouse(document.getElementById("chart"));
                var infoWidth = parseFloat(info.style("width").slice(0,-2));
                info.style("left", function(){return (size.width - mouse[0]) > 100 ? (mouse[0] + 35) + "px" : (mouse[0] - infoWidth - 20) + "px";})
                    .style("top", mouse[1] - 5 + "px");
              })
              .on("mouseout", function(d){
                info.style("display","none");
                d3.select(this)
                  .attr("fill", "white");
                overlay1.selectAll(".selected")
                        .remove();
              });

    baselayer.append("path")
        .datum(topojson.mesh(json,json.objects.cities,function(a,b){return a !== b;}))
        .attr("d", path)
        .attr("fill", "none")
        .attr("stroke", "#ddd");

    baselayer.append("path")
        .datum(topojson.mesh(json,json.objects.cities,function(a,b){return a === b;}))
        .attr("d", path)
        .attr("fill", "none")
        .attr("stroke", "black");

    overlay2.append("circle")
        .attr("cx", projection(point)[0])
        .attr("cy", projection(point)[1])
        .attr("r", 4)
        .attr("fill", "red")
        .on("mouseover", function(){
          info.select("h3").text("ケーズデンキスタジアム水戸");
          info.select("p").text("茨城県水戸市");
          info.style("display","inline");
        })
        .on("mouseout", function(){
          info.style("display","none");
        });

  });

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	path.selected {
	fill: none;
	stroke: orange;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	}

	#info {
	position: absolute;
	display: none;
	background: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	padding: 4px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border: thin solid #aaa;
	border-radius: 6px;
	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
	}

	#info h3 {
	margin: auto;
	}

	#info p {
	margin: auto;
	}

	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/topojson@3"></script>
	<svg id="chart"></svg>
	<div id="info"><p>茨城県</p><h3>水戸市</h3></div>
	<script>

	d3.json("./ibaraki_h28_merge.topojson", function(error, json){
	if (error) throw error;

	var svg = d3.select("#chart");
	var size = {width: window.innerWidth, height: Math.min(500, window.innerHeight)};
	var padding = {top: 4, right: 4, bottom: 4, left: 4};

	svg.attr("width", size.width)
	.attr("height", size.height);

	var merged = topojson.merge(json, json.objects.cities.geometries);

	var projection = d3.geoMercator()
	.fitExtent([[padding.left, padding.top],[size.width - padding.right, size.height - padding.bottom]], merged);

	var path = d3.geoPath()
	.projection(projection);

	var info = d3.select("#info");

	var point = [140.412322, 36.345308];

	var baselayer = svg.append("g");
	var overlay1 = svg.append("g");
	var overlay2 = svg.append("g");

	baselayer.selectAll(".cities")
	.data(topojson.feature(json, json.objects.cities).features)
	.enter()
	.append("path")
	.attr("class", "cities")
	.attr("d", path)
	.attr("fill", "white")
	.on("mouseover", function(d){
	info.select("h3").text(d.properties.N03_004);
	info.select("p").text(d.properties.N03_001);
	info.style("display","inline");
	d3.select(this)
	.attr("fill", "#fffad7");
	overlay1.append("path")
	.datum(d)
	.attr("class", "selected")
	.attr("d", path);
	})
	.on("mousemove", function(d){
	var mouse = d3.mouse(document.getElementById("chart"));
	var infoWidth = parseFloat(info.style("width").slice(0,-2));
	info.style("left", function(){return (size.width - mouse[0]) > 100 ? (mouse[0] + 35) + "px" : (mouse[0] - infoWidth - 20) + "px";})
	.style("top", mouse[1] - 5 + "px");
	})
	.on("mouseout", function(d){
	info.style("display","none");
	d3.select(this)
	.attr("fill", "white");
	overlay1.selectAll(".selected")
	.remove();
	});

	baselayer.append("path")
	.datum(topojson.mesh(json,json.objects.cities,function(a,b){return a !== b;}))
	.attr("d", path)
	.attr("fill", "none")
	.attr("stroke", "#ddd");

	baselayer.append("path")
	.datum(topojson.mesh(json,json.objects.cities,function(a,b){return a === b;}))
	.attr("d", path)
	.attr("fill", "none")
	.attr("stroke", "black");

	overlay2.append("circle")
	.attr("cx", projection(point)[0])
	.attr("cy", projection(point)[1])
	.attr("r", 4)
	.attr("fill", "red")
	.on("mouseover", function(){
	info.select("h3").text("ケーズデンキスタジアム水戸");
	info.select("p").text("茨城県水戸市");
	info.style("display","inline");
	})
	.on("mouseout", function(){
	info.style("display","none");
	});

	});

	</script>