Old school D3 from simpler times

All examples By author By category About

shimizu

Full window Github gist

高崎市AED分布

d3-contour プラグインを用いての2Dカーネル密度推定のテスト。

データ元群馬県オープンデータサイト　AED設置場所情報

Built with blockbuilder.org

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js