var tooltipdiv = d3.select("#venn").append("div")
                .attr("class", "tooltip")
	            .style("opacity", 1);

					
//Make an SVG Container
var svgContainer = d3.select("#venn").append("svg")
                                    .attr("width", 800)
                                    .attr("height", 600);

//Rectangles added
var rectangles = svgContainer.selectAll("rect")
                             .data(ninetyfour)
							 .enter()
							 .append("rect");							 
					 
var rectAttributes = rectangles	
                        .attr("rx", function (d) {return d.cx * 0.8;})
                        .attr("ry", function (d) {return d.cy * 0.8;})						
                        .attr("x", function (d) {return d.x * 4.3 * 0.8; })
                        .attr("y", function (d) {return d.y * 4.3 * 0.8; })
					    .attr("width", function (d) { return d.width * 4.3 * 0.8 ; })
						.attr("height", function (d) { return d.height * 4.3 * 0.8 ; })
                        .style("fill", function (d) { return d.color; })
					    .style("fill-opacity", "0.3")	
						
						    .on("mouseover", function (d) {
							        d3.select(this)
									  .style("fill-opacity", "0.5")
									  .style("stroke", "white")    // set the line colour
									  .style("stroke-width", 5)    // set the stroke width
									  //move front
									//    var sel = d3.select(this);
                                    //             sel.moveToFront();

                                    tooltipdiv.html( '<b>' + d.title + '</b>' + ":" + "</br>" + '<font color="black">' + "&quot;" + d.meaning +  "&quot;" + '</font>')		
									//'<b>'+d.sdfsadf+'</b>' to make part of tooltip bold
									
                                    tooltipdiv.transition()
                                           .delay(300)							
                                           .duration(200)      
                                           .style("opacity", 1); 
						        })           
							   
							.on("mouseout", function (d) {
							        d3.select(this)
									    .style("fill-opacity", "0.3")
								    	.style("stroke", "none")    // set the line colour
										.style("stroke-width", "none")    // set the stroke width
										
                                    tooltipdiv.transition() 
                                        .delay(2000)							
                                        .duration(1500)      
                                        .style("opacity", 0)  
										
                                });
 
								
var text = svgContainer.selectAll("text")
                             .data(ninetyfour)
							 .enter()
							 .append("text");

var textLabels = text
                 .attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)* 4.3 ) * 0.8; })
                 .attr("y", function(d) { return ((d.y * 4.3) + (d.height/2.5)* 4.3 ) *0.8; })
                 .text( function (d) { return d.title; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "18px")
                 .attr("fill", "black")
				 //.attr("stroke", "white")
				 .attr("text-anchor", "middle");

				 
function twoData() {

//Rectangles added
var rectangles = svgContainer.selectAll("rect")
                             .data(thousandfive)
							 .transition()    
                             .duration(3000)
							 .delay(1000);

							 
		//move to the front					 
/*	d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};						 
*/							 
var rectAttributes = rectangles	
                        .attr("rx", function (d) {return d.cx * 0.8; })
                        .attr("ry", function (d) {return d.cy * 0.8; })						
                        .attr("x", function (d) {return d.x * 4.3 * 0.8; })
                        .attr("y", function (d) {return d.y * 4.3 * 0.8; })
					    .attr("width", function (d) { return d.width * 4.3 * 0.8; })
						.attr("height", function (d) { return d.height * 4.3 * 0.8; })
                        .style("fill", function (d) { return d.color; })
					    .style("fill-opacity", "0.3")	

								
var text = svgContainer.selectAll("text")
                             .data(thousandfive)
							 .transition()    
                             .duration(3000)
							 .delay(1000);

var textLabels = text
                 .attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)*4.3) * 0.8 ; })
                 .attr("y", function(d) { return ((d.y * 4.3) + (d.height/1.8)*4.3) * 0.8 ; })
                 .text( function (d) { return d.title; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "18px")
                 .attr("fill", "black")
				 //.attr("stroke", "white")
				 .attr("text-anchor", "middle");
 }

function nineData() {

//Rectangles added
var rectangles = svgContainer.selectAll("rect")
                             .data(ninetyfour)
							 .transition()    
                             .duration(3000)
							 .delay(1000);
							 
		//move to the front					 
/*	d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};						 
*/							 
var rectAttributes = rectangles	
                        .attr("rx", function (d) {return d.cx * 0.8;})
                        .attr("ry", function (d) {return d.cy * 0.8;})						
                        .attr("x", function (d) {return d.x * 4.3 * 0.8; })
                        .attr("y", function (d) {return d.y * 4.3 * 0.8; })
					    .attr("width", function (d) { return d.width * 4.3  * 0.8; })
						.attr("height", function (d) { return d.height * 4.3 * 0.8; })
                        .style("fill", function (d) { return d.color; })
					    .style("fill-opacity", "0.3")	

								
var text = svgContainer.selectAll("text")
                             .data(ninetyfour)
							 .transition()    
                             .duration(3000)
							 .delay(1000);

var textLabels = text
                 .attr("x", function(d) { return ((d.x * 4.3) + (d.width/2)*4.3) * 0.8; })
                 .attr("y", function(d) { return ((d.y * 4.3) + (d.height/2.5)*4.3) * 0.8; })
                 .text( function (d) { return d.title; })
                 .attr("font-family", "sans-serif")
                 .style("font-size", "18px")
                 .attr("fill", "black")
				 //.attr("stroke", "white")
				 .attr("text-anchor", "middle");
 }