D3 Examples - 高崎市AED分布

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin:  0px;
}
#map {
    width: 960px;
    height: 960px;    
}
​
​
.land:hover {
    fill:red;
}
​
</style>
</head>
​
<body>
<svg id="map"></svg>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
<script src="d3-contour.v1.min.js"></script>
<script src="kodama.js"></script>
​
​
​
<script>    
!(function(){
    "use strict";
    var w = 1500;
    var h = 1500;
        
    var format = d3.format(".4f");
    
    var svg = d3.select("#map")
        .attr("viewBox", "0 0 1500 1500")
        ;
        
    var g = svg.append("g")
    
    var zoomed = function() {
      g.attr("transform", d3.event.transform);
    }
    svg.call(d3.zoom()
        .scaleExtent([1 / 2, 12])
        .on("zoom", zoomed));
        
    
    var aedLayer = g.append("g");
    var landLayer = g.append("g");
        
        
     
    var tooltipFormat = function(d, i){
        return {
            title:d.properties.MOJI
        };
    };  
        
        
     d3.queue()
        .defer(d3.json, 'takasaki.geojson')
        .defer(d3.json, 'aed.geojson')
        .await(function(error, land, aed){
        
        
            var projection = d3.geoMercator()
                .fitExtent([[0,0], [w, h]], land);
    
            aed.features.forEach(function(d){
                d.geometry.coordinates[0] = +format(d.geometry.coordinates[0]);
                d.geometry.coordinates[1] = +format(d.geometry.coordinates[1]);
                
                var xy = projection(d.geometry.coordinates);
                
                d._x = +format(xy[0]);
                d._y = +format(xy[1]);
            });
        
        
            var geoPath = d3.geoPath().projection(projection);
            
            var land = landLayer.selectAll(".land")
                .data(land.features)
                .enter()
                .append("path")
                .attr("d", geoPath)
                .attr("class", "land")
                .attr("fill-opacity", 0.2)
                .attr("stroke", "black")
                .call(d3.kodama.tooltip().format(tooltipFormat))
                ;   
            
        
            var contours = d3.contourDensity()
                .thresholds(20)
                .cellSize(1)
                .bandwidth(10)
                .size([w,h])
                .x(function(d){ return d._x ;})
                .y(function(d){ return d._y ;})
                ;
    
        
        
            var aedContours = aedLayer.append("g")
                .selectAll(".contours")
                .data(contours(aed.features))
                .enter()
                .append("path")
                .attr("d", d3.geoPath())
                .attr("fill", function(d){ return "blue" ;})
                .attr("fill-opacity", 0.2)
                .attr("stroke", "none")
                ;   
    
            var point = aedLayer.append("g")
                .selectAll(".point")
                .data(aed.features)
                .enter()
                .append("circle")
                .attr("cx", function(d){ return d._x ;})
                .attr("cy", function(d){ return d._y ;})
                .attr("r", 1)
                ;
        
        });
    
​
}());
​
     
    
</script>    
</body>
</html>
​
    