Built with blockbuilder.org
Created
January 6, 2016 20:40
-
-
Save YasufumiSaito/6f9fe00cf9cccc7209b2 to your computer and use it in GitHub Desktop.
Japanese Population
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment