YasufumiSaito/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<head>
	<title>MapBoxGL+D3 Practice</title>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css' rel='stylesheet' />
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
<style>
  html, body { width:100%; height:100%; margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%;}
  svg {position:absolute; width:100%; height:100%;}
  .hidden {
  	display: none;
  	transition: .1s;
  }
  .legendLinear {
	font-family: "Lato";
	fill:#c2b59b;
  }

  .legendTitle {
	font-size: 1em;
  }
  #tooltip {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			margin: 0;
			padding: 10px;
			width: 200px;
			height: 70px;
			color: white;
			font-family: sans-serif;
			font-size: 1.2em;
			font-weight: bold;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.55);
			opacity: 0;
			pointer-events: none;
			border-radius:5px;
			transition: .2s;
		}
</style>
</head>
<body>
	<div id="map">
		<div id="tooltip">
		</div>
	</div>
<script>
d3.json("japan.topojson", function(error, data) {
	mapDraw(data);
});

function mapDraw(data) {
	//Mapbox
	mapboxgl.accessToken = 'pk.eyJ1IjoieWFzdWZ1bWkiLCJhIjoiY2lqMGJ3a2ZrMDA3aXVhbHpjcnFxeXd5bCJ9.k8ogNDcxfwOLcRLibL1Ngw';
	var map = new mapboxgl.Map({
				container: "map",
				style: "mapbox://styles/yasufumi/cij0dvw4h00pk8ulxw22mwdsr",
				center: [137, 39],
				zoom: 5
	});
	//Creditつける
	// var credit =

	//Overlaying D3 on the map
	var canvas = map.getCanvasContainer();
	var svg = d3.select(canvas).append("svg");

	var transform = d3.geo.transform({point:projectPoint});
	var path = d3.geo.path().projection(transform);

	var japan = topojson.feature(data, data.objects.japan).features;
	// console.log(japan[0].properties.pop);

	var min = d3.min(japan, function(d,i){
		if ((d.properties.pop !== -99999999) && (d.properties.pop !== -89999999)){
			return d.properties.pop;
		}
	})
	var max = d3.max(japan, function(d,i){
		return d.properties.pop;
	})

	var color = d3.scale.linear()
						.domain([min, 5000, 50000, 100000, 200000, 500000, 1000000, 3000000, max])
						.range(['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']);

	var layer = svg.selectAll("path")
					.data(japan)
					.enter()
					.append("path")
					.attr("stroke", "#ccc")
					.attr("stroke-width", .7)
					.attr("fill", function(d,i){
						return color(d.properties.pop);
					})
					.attr("fill-opacity", .7)
					.on("mouseover", function(d){
						//Show the tooltip
						var x = d3.event.pageX;
						var y = d3.event.pageY - 40;

						d3.select("#tooltip")
							.style("left", x + "px")
							.style("top", y + "px")
							.style("opacity", 1)
							.html(d.properties.laa + "<p>人口: </p>" + d.properties.pop);
					})
					.on("mouseout", function(){
						//Hide the tooltip
						d3.select("#tooltip")
							.style("opacity", 0);
					});

	d3.select("svg").append("g")
					.attr("class", "legendLinear")
					.attr("transform", "translate(100,100)");

	var legendLinear = d3.legend.color()
						.title("Population")
						.shapeHeight(20)
						.shapeWidth(20)
						.shapeRadius(10)
						.cells([min, 5000, 50000, 100000, 200000, 500000, 1000000, 3000000, max])
						.orient("vertical")
						.labelAlign("start")
						.scale(color);

	svg.select(".legendLinear")
			.call(legendLinear);

	function update() {
		layer.attr("d", path);
	}

	map.on("viewreset", update)
	map.on("movestart", function(){
		svg.classed("hidden", true);
	});
	map.on("rotate", function(){
		svg.classed("hidden", true);
	});
	map.on("moveend", function(){
		update();
		svg.classed("hidden",false);
	});

	update();

	function projectPoint(lon, lat) {
		var point = map.project(new mapboxgl.LngLat(lon, lat));
		this.stream.point(point.x, point.y);
	}
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="utf-8">
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<head>
	<title>MapBoxGL+D3 Practice</title>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css' rel='stylesheet' />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js"></script>
	<style>
	html, body { width:100%; height:100%; margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%;}
	svg {position:absolute; width:100%; height:100%;}
	.hidden {
	display: none;
	transition: .1s;
	}
	.legendLinear {
	font-family: "Lato";
	fill:#c2b59b;
	}

	.legendTitle {
	font-size: 1em;
	}
	#tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	margin: 0;
	padding: 10px;
	width: 200px;
	height: 70px;
	color: white;
	font-family: sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	border-radius:5px;
	transition: .2s;
	}
	</style>
	</head>
	<body>
	<div id="map">
	<div id="tooltip">
	</div>
	</div>
	<script>
	d3.json("japan.topojson", function(error, data) {
	mapDraw(data);
	});

	function mapDraw(data) {
	//Mapbox
	mapboxgl.accessToken = 'pk.eyJ1IjoieWFzdWZ1bWkiLCJhIjoiY2lqMGJ3a2ZrMDA3aXVhbHpjcnFxeXd5bCJ9.k8ogNDcxfwOLcRLibL1Ngw';
	var map = new mapboxgl.Map({
	container: "map",
	style: "mapbox://styles/yasufumi/cij0dvw4h00pk8ulxw22mwdsr",
	center: [137, 39],
	zoom: 5
	});
	//Creditつける
	// var credit =

	//Overlaying D3 on the map
	var canvas = map.getCanvasContainer();
	var svg = d3.select(canvas).append("svg");

	var transform = d3.geo.transform({point:projectPoint});
	var path = d3.geo.path().projection(transform);

	var japan = topojson.feature(data, data.objects.japan).features;
	// console.log(japan[0].properties.pop);

	var min = d3.min(japan, function(d,i){
	if ((d.properties.pop !== -99999999) && (d.properties.pop !== -89999999)){
	return d.properties.pop;
	}
	})
	var max = d3.max(japan, function(d,i){
	return d.properties.pop;
	})

	var color = d3.scale.linear()
	.domain([min, 5000, 50000, 100000, 200000, 500000, 1000000, 3000000, max])
	.range(['#ffffd9','#edf8b1','#c7e9b4','#7fcdbb','#41b6c4','#1d91c0','#225ea8','#253494','#081d58']);

	var layer = svg.selectAll("path")
	.data(japan)
	.enter()
	.append("path")
	.attr("stroke", "#ccc")
	.attr("stroke-width", .7)
	.attr("fill", function(d,i){
	return color(d.properties.pop);
	})
	.attr("fill-opacity", .7)
	.on("mouseover", function(d){
	//Show the tooltip
	var x = d3.event.pageX;
	var y = d3.event.pageY - 40;

	d3.select("#tooltip")
	.style("left", x + "px")
	.style("top", y + "px")
	.style("opacity", 1)
	.html(d.properties.laa + "<p>人口: </p>" + d.properties.pop);
	})
	.on("mouseout", function(){
	//Hide the tooltip
	d3.select("#tooltip")
	.style("opacity", 0);
	});

	d3.select("svg").append("g")
	.attr("class", "legendLinear")
	.attr("transform", "translate(100,100)");

	var legendLinear = d3.legend.color()
	.title("Population")
	.shapeHeight(20)
	.shapeWidth(20)
	.shapeRadius(10)
	.cells([min, 5000, 50000, 100000, 200000, 500000, 1000000, 3000000, max])
	.orient("vertical")
	.labelAlign("start")
	.scale(color);

	svg.select(".legendLinear")
	.call(legendLinear);

	function update() {
	layer.attr("d", path);
	}

	map.on("viewreset", update)
	map.on("movestart", function(){
	svg.classed("hidden", true);
	});
	map.on("rotate", function(){
	svg.classed("hidden", true);
	});
	map.on("moveend", function(){
	update();
	svg.classed("hidden",false);
	});

	update();

	function projectPoint(lon, lat) {
	var point = map.project(new mapboxgl.LngLat(lon, lat));
	this.stream.point(point.x, point.y);
	}
	}
	</script>

	</body>
	</html>