D3 Examples - 2015 Population Density of Taiwan

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