Japanese Population

<!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="https://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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js

https://d3js.org/d3.v3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.7.0/d3-legend.min.js