var svgContainer = d3.select("#viz").append("svg")
                                    .attr("width",1024)
                                    .attr("height",210);
 
var div = d3.select("#viz").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 1); 
 
//Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(bang)
                             .enter()
                             .append("rect");

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			                     })    
			        .on("mouseover", function(d) {  		   
                            div.transition() 
                               .delay(300)							
                               .duration(200)      
                               .style("opacity", 1); 
					        div.html("City: " + d.city + "</br>" + "Date and Time: " + "</br>" + d.timestamp)
							   //.style("block");//it is to keep it still on top							
                               .style("left", (d3.event.pageX) + "px") //It would be this one if it was all over the place     
                               .style("top", (d3.event.pageY - 28) + "px");
							   })                  
                    .on("mouseout", function(d) {      
                            div.transition() 
                              .delay(2000)							
                              .duration(1500)      
                              .style("opacity", 0)                             						  							    
                       });
		var text = svgContainer.selectAll("text")
                        .data(label)
                        .enter()
                        .append("text");

        var textLabels = text
                 .attr("x", function(d) { return (d.x); })
                 .attr("y", function(d) { return (d.y); })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");	// text starts on the left side of the margin
				 
function banData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(bang)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });  		   
			   		var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");	
}			   
function bosData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(bos)
                             .transition()
                             .duration(3000);
							

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    	
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");			   
}			
function genData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(gen)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    		   
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");		
}			
function rioData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(rio)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    		  
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");			   
}		
	function sanData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(san)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");		
}	
	function shangData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(shang)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });  
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");					   
}	
function singData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(sing)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    		  
	    var text = svgContainer.selectAll("text")
                        .data(label)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.label; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#FF0000")
				 .attr("text-anchor", "start");					   
}	
function tempData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(temp)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });   
	    var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");				   
}	
function ligData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(lig)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    
var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                             .duration(3000)
							 .delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");					   
}	
function airData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(air)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    		  
var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");					   
}	
function souData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(sou)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   }); 
var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");					   
}	
function humData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(hum)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   });    		   
		var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");		
}	
function dusData() {			   
			  //Rectangles added to the svgContainer
var rectangles = svgContainer.selectAll("rect")
                             .data(dus)
                             .transition()    
                             .duration(3000);

var rectangleAttributes = rectangles
                          .attr("x", function (d) {return d.x-112; })//thickness
                          .attr("y", function (d) { return d.y; })//this is the top of the line
                          .attr("width", 5)//1 so there is no padding 
						  .attr("height", function(d) { return d.height; }) //this is the bottom line
                          .style("fill", function(d) {
					return "rgb(" + d.rt + " , " + d.gt + " , " + d.bt + ")";
			   }); 
        var text = svgContainer.selectAll("text")
                        .data(city)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels = text
                  .attr("x", function(d) { return d.x; })
                 .attr("y", function(d) { return d.y; })
                 .text( function (d) { return d.city; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "15px")
                 .attr("fill", "#4682B4")
				 .attr("text-anchor", "start");					   
}