Map with area sales tooltip

資料來源：全國村里界圖 [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;
  stroke-width: 1px;
}

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 150px;                         
  padding: 2px;    
  font-family: Microsoft JhengHei;  
  font: 12px;        
  background: lightsteelblue;   
  border: 1px;      
  border-radius: 5px;           
  pointer-events: none;         
}

</style>
<body>
<div>
<b><h2>Area sales performance <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>

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var commaFormat = d3.format(','); //千位數符號轉換

var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);

/*宣告tip*/
//var tip = d3.tip()
//  .attr('class', 'd3-tip')
//  .offset([-10, 0])
//  .html(  function(d) {
//return "<div id='tooltip'  style='background-color:#F2F6F8;border-style: solid;border-width:0.5px'> <text style='font-family:SimSun;align:center;color:Steelblue;font-size:15px'> "
//  + d.branch_name +
//   "</text> <br><text style='align=center;color:green;font-size:15px'>"
//   + commaFormat(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,10000000]).range(["#6bcdea","#d82e84"]); 
         //var townPopDensity=[];
           
		     d3.csv("taiwan_sales.csv", function(error, data) {
                 if (error) throw error;
                    
					/* csv資料以JSON表示 (使用d3.map)  */
                      var obj = d3.map(data, function(d)
					  {
                          return d.site_id.substring(0, 3); 
                        });
					
                     /*對應每個縣市的資料*/
                      obj.forEach(function(k,v){
                          this[k] = v.daily_sales;  
						  // this[k] = ; 
                        });
						
						   var obj2 = d3.map(data, function(d)
					  {
                          return d.site_id.substring(0, 3); 
                        });
					
                     /*對應每個縣市的資料*/
                      obj2.forEach(function(k,v){
                          this[k] = v.branch_name;  
						  // this[k] = ; 
                        });
					console.log(obj2);
					
                    /*在feature_town的資料集合裡面，新增一"density"欄位，以key:value的方式對應obj內的值*/
                    for(idx=features_county.length - 1; idx>=0; idx--)
                    {
                    features_county[idx].density = obj[features_county[idx].properties.C_Name];
					features_county[idx].branch_name = obj2[features_county[idx].properties.C_Name];
                    }
					//console.log(obj[features_town[1].properties.T_Name]);
         						 
						   
					 /*畫縣界(最後畫避免被fill遮蔽)*/		  
	                  svg.selectAll("path-county")
                      .data(features_county)
	                  .enter().append("path")
                      .attr("d", path)
                      .attr("class", "county-boundary")
					  .attr({
                                 d: path,
                                 fill: function(d) { return d.density== undefined ? '#E0FFFF' : color(d.density) ; }
								      //(question)?(result if true):(result is false)
                               })
					   /*設置滑鼠移動過後的變化*/
	                       .on('mouseover', function(d, i) {
	                     
                                					  
						     d3.select(this)
                             .transition()
                             .style("stroke-width", 2);

div.transition()        
                                .duration(300)      
                                .style("opacity", 0.9); 
								
						  d.density== undefined ? undefined : 
					      div.html( d.branch_name + "<br>" +  commaFormat(d.density) ) 
                               .style("left", (d3.event.pageX) + "px")     
                               .style("top", (d3.event.pageY - 50) + "px");    
						   
	                       d3.select(this).style('fill-opacity', .5);    //控制bar的顏色透明度
						
	                       })
	                       .on('mouseout', function(d, i) { 
	                       //tip.hide                                                         //tip隱藏
						    d3.select(this)
                              .transition()
                              .style("stroke-width", 1); 
                            div.transition()        
                               .duration(300)      
                               .style("opacity", 0);   
	                       d3.select(this).style('fill-opacity', function(d){ return 1});  //控制bar的顏色透明度
	                       })
						   ;
					 	
                          svg.selectAll("path-town")
                          .data(features_town)
                    	  .enter()
						  .append("path")
						   .attr("d", path)
                          .attr("class", "town-boundary")
						  .attr("stroke-dasharray","1,1")
						  .attr("fill","none") ;

});

});
                            
 
});
</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