/////////////////////this is the legend////////////////////
var svgContainer2 = d3.select("#legend").append("svg")//check the #
                                    .attr("width",300)
                                    .attr("height",30);
 
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(legtemp)
                             .enter()
                             .append("rect");

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(legtemp)
                        .enter()
                        .append("text");

        var textLabels2 = text2
                  .attr("x", function (d, i) {return i * 30 + 8; })//thickness
                  .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.temp + "C"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "10px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 
 
 function legtempData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(legtemp)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text = svgContainer2.selectAll("text")
                        .data(legtemp)
                        .transition()    
                        .duration(3000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30 + 8; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.temp + "C"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "10px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }
 function legligData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(leglig)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(leglig)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30 ; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.light + "Lux"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "8px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }
  function legairData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(legair)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(legair)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30 ; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.airq + "Mv"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "10px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }
   function legsouData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(legsou)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30 + 1; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(legsou)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.sound + "mV"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "8px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }
    function leghumData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(leghum)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30 + 1; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(leghum)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30 + 2; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.humidity + "%"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "10px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }
     function legdusData() {	
//Rectangles added to the svgContainer
var rectangles2 = svgContainer2.selectAll("rect")
                             .data(legdus)
                             .transition()    
                             .duration(3000);

var rectangleAttributes2 = rectangles2
                          .attr("x", function (d, i) {return i * 30 + 1; })//thickness
                          .attr("y", 0)//this is the top of the line
                          .attr("width", 30)//1 so there is no padding 
						  .attr("height", 30) //this is the bottom line
                          .style("fill", function(d) {
					             return "rgb(" + d.r + " , " + d.g + " , " + d.b + ")";
			                     });    
			    
		var text2 = svgContainer2.selectAll("text")
                        .data(legdus)
                        .transition()    
                        .duration(3000)
						.delay(1000);

        var textLabels2 = text2
                 .attr("x", function (d, i) {return i * 30 + 1; })//thickness
                 .attr("y", 25)//this is the top of the line
                 .text( function (d) { return d.dust + "*"; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "10px")
                 .attr("fill", "#FFFFFF")
				 .attr("text-anchor", "start");	
 }