2015 Population Density of Taiwan

資料來源：
各鄉鎮市區人口密度人口密度 [TownPopulation104.csv] (http://data.gov.tw/node/8410)
全國村里界圖 [town.json] (http://data.gov.tw/node/7440)
縣(市)行政區界線 [county.json] (http://data.gov.tw/node/7442)
Built with blockbuilder.org

<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
  stroke: #000;
  stroke-width: .5px;
}

.town-boundary {
 stroke: black;
 stroke-width: 0.5px;
}

.county-boundary {
  stroke: black;
  fill: none;
  stroke-width: 1px;
}

</style>
<body>
<div>
<b><h2>2015 Population Density of Taiwan<h2/></b>
 </div >
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js"></script>
<script>
//var data2 = d3_dsv.csvParse("TownPopulation104.csv");

var width = 1000,
    height = 1000;
/*宣告投影方式*/	
var projection =  d3.geo.mercator().center([121.5,24.2]).scale(8000);
/*宣告畫地理圖的方法，並把投影方式帶入*/
var path = d3.geo.path().projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
	
/*宣告tip*/
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(  function(d) {
   return "<div  style='background-color:#F2F6F8;border-style: solid;border-width:0.5px'> <text style='align:center;color:Steelblue;font-size:15px'> "
   + d.properties.T_Name +
   "</text> <br><text style='align=center;color:green;font-size:15px'>"
   +d.density+
   "</text> </div>";
 });
 
 /*呼叫tip*/
svg.call(tip);

/*準備畫縣界的資料*/
d3.json("county.json", function(error, topology) {
  if (error) throw error;
  /*topojson解析資料*/
  var features_county = topojson.feature(topology, topology.objects["county"]).features;
     
	     /*準備畫鄉鎮村里的資料*/
         d3.json("town.json", function(error, topology) {
         if (error) throw error;
		 
		 /*topojson解析資料*/
         var features_town = topojson.feature(topology, topology.objects["town"]).features;
		 
		 /*色階變化的range  參考https://www.color-hex.com/ */
         var color = d3.scale.linear().domain([0,3000]).range(["#66cccc","#ff4040"]); 
         //var townPopDensity=[];
           
		     d3.csv("TownPopulation104.csvTownPopulation104.csv", function(error, data) {
                 if (error) throw error;
                    
					/* csv資料以JSON表示 (使用d3.map)  */
                      var obj = d3.map(data, function(d)
					  {
                          return d.site_id.substring(3, 8); 
                        });
					
                     /*對應每個縣市的資料*/
                      obj.forEach(function(k,v){
                          this[k] = v.population_density;  
                        });
					
                    /*在feature_town的資料集合裡面，新增一"density"欄位，以key:value的方式對應obj內的值*/
                    for(idx=features_town.length - 1; idx>=0; idx--)
                    {
                    features_town[idx].density = obj[features_town[idx].properties.T_Name];
                    }
					//console.log(obj[features_town[1].properties.T_Name]);
                    /*畫鄉鎮村里界*/
                      svg.selectAll("path-town")
                          .data(features_town)
                    	  .enter()
						  .append("path")
                          .attr("class", "town-boundary")
						  .attr({
                                 d: path,
                                 fill: function(d) { return color(d.density); }
                               })
                    	  .attr("stroke-dasharray","1,1")
						   .attr("fill-opacity",function(d){ return 1})
						   
						   /*設置滑鼠移動過後的變化*/
	                       .on('mouseover', function(d, i) {
	                       tip.show(d, i);                                //tip顯示
	                       d3.select(this).style('fill-opacity', .5);    //控制bar的顏色透明度
	                       })
	                       .on('mouseout', function(d, i) { 
	                       tip.hide                                                         //tip隱藏
	                       d3.select(this).style('fill-opacity', function(d){ return 1});  //控制bar的顏色透明度
	                       })
						   ;

});

});
                            
 
});
</script>

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

https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.16/d3.geo.projection.min.js

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

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.js