Five-star hotels annual income in Taipei

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path,
.axis line {
  fill: none;
  stroke: grey;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

tick {
font-family:  Agency FB Solid;
font: 10px; 
fill: Steel    
}

.tpecityarea {
  stroke: black;
  fill:  #ddc;
  stroke: white;
  stroke-width: 1px;
  text-shadow:2px 2px 3px #c0cfbc;
}

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 160px;                         
  padding: 2px;    
  font-family:  "Agency FB" Solid;  
  font: 16px  "Agency FB" Solid;        
  background: white;   
  border: 1px;      
  border-radius: 5px;           
  pointer-events: none;  
  font: 12px  Agency FB Solid;  
}

div.years_buttons div {
        background-color: #ddc;
		font-family: Microsoft JhengHei;  
        padding: 3px;
		text-align: center;
		width: 90px;  
        margin: 1px;
        float: left;
        font-size: .8em;
      }

form {
	position: absolute;
	right: 10px;
	top: 0px;
}
	  
.title.text	{
font-family:  Agency FB Solid;
font: 16px  Agency FB Solid; 
fill: black;    
}

text {
font-family: Agency FB Solid;
font: 9px; 
fill: #074e67;
text-shadow:2px 2px 3px #c0cfbc;    
}

text.area-label
{
font-family:  Agency FB Solid;
font: 10px; 
fill: black;
text-shadow:2px 2px 3px #69675b;
}

text.bar-label
{
font-family:  Calibri;
font: 22px; 
fill: white;
text-shadow:2px 2px 3px #69675b; 
}
header {
    background-color:#83B8DC;
    color:white;
    text-align:left;
    padding:5px;
   font-size: 20px;	
}
.header img {
  float: left;
  width: 100px;
  height: 50px;
  background: #83B8DC;
}
section {
    width:1000px;
    float:left;
    padding:10px;	 	 
}

footer {
    background-color:#83B8DC;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
</style>

<body>
<head>
	<title>Hotels Revenue</title>
	<link rel="stylesheet" href="style.css">
</head>

var margin = {top: 40, right: 10, bottom: 40, left: 10},
    width = 1140 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color_table =

{"遠東國際大飯店"      : "rgb(31 , 119, 180)",
  "台北君品大酒店"       : "rgb(174, 199, 232)",
  "台北君悅酒店"         : "rgb(255, 127, 14 )",
  "台北威斯汀六福皇宮"   : "rgb(255, 187, 120)",
  "台北寒舍喜來登大飯店" : "rgb(44 , 160, 44 )",
  "台北寒舍艾美酒店"     : "rgb(152, 223, 138)",
  "寒舍艾麗酒店"         : "rgb(214, 39 , 40 )",
  "晶華酒店"             : "rgb(255, 152, 150)",
  "西華大飯店"           : "rgb(148, 103, 189)",
  "台北W飯店"            : "rgb(197, 176, 213)"}	
	
/*地圖tooltip*/	   
var div = d3.select("body").append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);

/*projection類型*/	
var projection_tpe_area =  d3.geo.mercator().center([121.620,25.04]).scale(210000);

/*宣告畫地理圖的方法，並把投影方式帶入*/	
var path = d3.geo.path().projection(projection_tpe_area);

/*千位數符號轉換*/	
var commaFormat = d3.format(',');
/*畫布*/
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
	
var x = d3.scale.ordinal()
    .rangeRoundBands([1100, 500], .2);

var y = d3.scale.linear()
    .range([350, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
      .scale(y)
	  .ticks(20)
	 .orient("right")
    ;

//劃格線用Y
  var axisYGrid = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(10)
    .tickFormat("")
    .tickSize(500,0);
	
//劃格線Y
    svg.append('g')
     .call(axisYGrid)
	 .attr("transform", "translate(" + 390 + " ,100)")
     .style("stroke", "rgba(0,0,0,.1)")
     .style("fill","none");	 
 
	 
	 	
/*準備畫區界的資料*/
d3.json("tpe_area.json", function(error, topology) {
  if (error) throw error;

/*topojson解析資料*/
  var features_area= topojson.feature(topology, topology.objects["tpe_area_test"]).features;
	/*畫台北市區界*/ 
  var tpe_area=svg.selectAll("path-area")
     .data(features_area)
	 .enter().append("path")
     .attr("d", path)
     .attr("class", "tpecityarea");
	/*區界文字標籤*/  
   svg.selectAll("path-area").data(features_area).enter()
     .append("text")
	 .attr("class", "area-label")
	 .attr("transform", function(d) { return "translate(" +path.centroid(d)+ ")"; })	
     .attr("dy", ".35em")
     .attr("text-anchor","middle")
     .attr("font-size","9pt")
	 .text(function(d){
        return d.properties.PTNAME.substring(3, 8);;
    });
	
	   /*準備畫旅館總營收資料*/
       d3.csv("hotel_income.csv", function(error, data) {
                 if (error) throw error;
	 
    /*bar chart的X、Y坐標軸設定*/
     x.domain(data.map(function(d) { return d.hotel; }));
     y.domain([0, d3.max(data, function(d) { return +d["y2014"]/1000000; })]);
     
    /*以hotel為key，整理csv資料成object型態*/ 
     var hotel_dataset = d3.nest().key(function(d){return d.hotel;}).map(data)
	 
	
    /*畫X軸、並設定偏移至svg右下*/
	  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(-120," + 380 + ")")
      .style("font-size", "8px")
	  .call(xAxis)
	  .selectAll("text")  
      .attr("transform", "rotate(15)" )
	  ;
	  
    /*畫Y軸、並設定偏移至svg右下*/
     svg.append("g")
      .attr("class", "y axis")
	  .style("font-size", "6px")
	  .attr("transform", "translate(" + 970 + " ,20)")	
      .call(yAxis)
      .append("text")
      .attr("y", 6)
      .attr("dy", "2.71em")
      .style("text-anchor", "end")
	  .text("百萬元");
    /*畫bar chart，綁group與餵資料*/   	
    var draw_bar = svg.append("g").attr("class", "bar").selectAll("bar").data(data);
	var draw_bar_label = svg.append("g").attr("class", "bar.label").selectAll("text").data(data);

/*畫bar chart */   		
    draw_bar
	  .enter()
	  .append("rect")
	  .attr("class", ".bar")
	  .attr("transform", "translate(" + -120 + " ,15)")	
      .attr("x", function(d) { return x(d.hotel); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(+d["y2008"]/1000000); })
      .attr("height", function(d) { return 350- y(+d["y2008"]/1000000); })
	  //若為"遠東國際大飯店"，標成紅色
     //.attr("fill", function(d,i) { return d.hotel=="遠東國際大飯店" ? "red":"steelblue" }  )
	  .attr("fill", function(d,i) { return color_table[d.hotel] }  )
	  .attr('fill-opacity', 1);
	 
	/*畫bar的數字標籤*/   
	draw_bar_label
	  .enter()
	  .append("text")
	  .attr("class", "bar-label")
	  .attr("transform", "translate(" + -110+ " ,25)")
 	  .transition()
	  .delay(500)
	  .duration(1000)
	  //設置標籤文字捕間動畫
      .tween("number", function(d) {
        var i = d3.interpolateRound(0, +d["y2008"]/1000000);
        return function(t) {
          i(t)==0 ? this.textContent = "" :this.textContent =commaFormat(i(t));
        };
       })
	  .attr("y", function(d) { return y(+d["y2008"]/1000000); })
	  .attr("x", function(d){ return x(d.hotel); } )
      .attr("dx", -5)
      .attr("dy", ".36em")
      .attr("text-anchor", "right");

/*初始化資料，不畫營收圓圈大小*/
	var draw_0000 =	  
		  draw_circle
	
		  .attr("r", function(d,i) {
		
				 return d.y2008== 0 ? '2.5' : d.y2008/50000000;
				  } )
		  //.attr("fill", function(d,i) {return  d.properties.landmarkad=="6300003" ? 'red' : "steelblue" })
		  .attr("stroke",function(d,i){  return d.hotel=="遠東國際大飯店" ? "red":" white"})
		  .attr("stroke-width",function(d,i){  return d.hotel=="遠東國際大飯店" ? "2":" 1"})
		  .attr("fill", function(d,i) { return color_table[d.hotel] }  )  
		  .attr('fill-opacity', .75);
		  
	 draw_circle
      .on('mouseover', function(d, i) {
	                       //tip顯示
						     d3.select(this)
                             .transition()
                             .style("stroke-width",3);  
							 
						     div.transition()        
                                .duration(300)      
                                .style("opacity", 0.9); 
								
							
						    div.html(  d.hotel+"<br>" +  commaFormat(Math.round(d.y2008/1000000))+" 百萬元" ) 
						
                               .style("left", (d3.event.pageX) + "px")     
                               .style("top",  (d3.event.pageY - 50) + "px");   
						   
	                       d3.select(this).style('fill-opacity', .3);    //控制bar的顏色透明度
	                       })
	 .on('mouseout', function(d, i) { 
	                     //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 0.5});  //控制bar的顏色透明度
	                       });
	      
//偵測radio的變化，並呼叫change()
	d3.selectAll("input").on("change", change);
	
///////////////////////////
//用draw_graphic畫各年度//
//////////////////////////
  function draw_graphic(para_year) {

svg.selectAll("rect")
	  .data(data)
	  .transition()
      .duration(1000)			
	  .attr("transform", "translate(" + -120 + " ,15)")	
      .attr("x", function(d) { return x(d.hotel); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(+d[para_year]/1000000); })
      .attr("height", function(d) { return 350 - y(+d[para_year]/1000000); })
	  .attr("fill", function(d,i) { return color_table[d.hotel] }  )  
	  .attr('fill-opacity', 1);

draw_bar_label
 	  .transition()
	  .duration(1000)
	  .tween("number", function(d) {
        var i = d3.interpolateRound(0, +d[para_year]/1000000);
        return function(t) {
          i(t)==0 ? this.textContent = "" :this.textContent =commaFormat(i(t));
        };
       })
	  //.text(function(d) {
      //                     return +d["y2008"]==0?"":commaFormat(+d["y2008"]);
      //                  })
	  .attr("y", function(d) { return y(+d[para_year]/1000000); })
	  .attr("x", function(d){ return x(d.hotel); } )
      .attr("dx", -5)
      .attr("dy", ".36em")
      .attr("text-anchor", "right")
      .attr("transform", "translate(" + -110+ " ,25)")
	  ;	  
	  
  draw_circle
      .transition()
      .duration(1000)
	  .attr("r", function(d,i) {
		
				 return +d[para_year]== 0 ? '2' : +d[para_year]/50000000;
				  } )
	  //.attr("fill", function(d,i) {return  d.properties.landmarkad=="6300003" ? 'red' : "steelblue" })
	  .attr("stroke",function(d,i){  return d.hotel=="遠東國際大飯店" ? "red":" white"})
	  .attr("stroke-width",function(d,i){  return d.hotel=="遠東國際大飯店" ? "2":" 1"})
	  .attr("fill", function(d,i) { return color_table[d.hotel] }  )  
	  .attr('fill-opacity', .75);
		  
   draw_circle
      .on('mouseover', function(d, i) {
	                       //tip顯示
						     d3.select(this)
                             .transition()
                             .style("stroke-width", 3);  
							 
						     div.transition()        
                                .duration(300)      
                                .style("opacity", 0.9); 
								
							
						    div.html(  d.hotel+"<br>" +  commaFormat(Math.round(+d[para_year]/1000000))+" 百萬元" ) 
						
                               .style("left", (d3.event.pageX) + "px")     
                               .style("top",  (d3.event.pageY - 50) + "px");   
						   
	                       d3.select(this).style('fill-opacity', .3);    //控制bar的顏色透明度
	                       })
	 .on('mouseout', function(d, i) { 
	                     //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 0.5});  //控制bar的顏色透明度
	                       });
  
  }	
	
	
            function change() {
            	  years = this.value; 
            	  if (years == "2008") {draw_graphic("y2008");}
            	  if (years == "2009") {draw_graphic("y2009");} 
                  if (years == "2010") {draw_graphic("y2010");}  
            	  if (years == "2011") {draw_graphic("y2011");}  
            	  if (years == "2012") {draw_graphic("y2012");}  
            	  if (years == "2013") {draw_graphic("y2013");}  
            	  if (years == "2014") {draw_graphic("y2014");}
            	  if (years == "2015") {draw_graphic("y2015");}  
            
              	}

});
                        
    });
	
</script>
  </section>

</body>
</html>

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