History of WWE title holders

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>WWE Title reigns visualised using d3.js</title>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">

</script>

#logo {
position:absolute;
top:200px;
left:470px;
}

p
{font-family:'tahoma';
position:absolute;
top:10px;
left:10px;
width:200px;
}

</style>

</head>

<body>

];
var series2 = [
[-95,-98.86363636,"Buddy Rogers",235,"code1"],
[-98.86363636,-102.72727273,"Bruno Sammartino",240,"code2"],
[-102.72727273,-106.59090909,"Ivan Koloff",235,"code3"],
[-106.59090909,-110.45454545,"Pedro Morales",235,"code4"],
[-110.45454545,-114.31818182,"Stan Stasiak",235,"code5"],
[-114.31818182,-118.18181818,"Superstar Billy Graham",235,"code6"],
[-118.18181818,-122.04545455,"Bob Backlund",240,"code7"],
[-122.04545455,-125.90909091,"The Iron Sheik",235,"code8"],
[-125.90909091,-129.77272727,"Hulk Hogan",255,"code9"],
[-129.77272727,-133.63636364,"Andre the Giant",235,"code10"],
[-133.63636364,-137.5,"Randy Savage",240,"code11"],
[-137.5,-141.36363636,"Ultimate Warrior",235,"code12"],
[-141.36363636,-145.22727273,"Sgt. Slaughter",235,"code13"],
[-145.22727273,-149.09090909,"Undertaker",250,"code14"],
[-149.09090909,-152.95454545,"Ric Flair",240,"code15"],
[-152.95454545,-156.81818182,"Bret Hart",255,"code16"],
[-156.81818182,-160.68181818,"Yokozuna",240,"code17"],
[-160.68181818,-164.54545455,"Diesel",235,"code18"],
[-164.54545455,-168.40909091,"Shawn Michaels",245,"code19"],
[-168.40909091,-172.27272727,"Sid",240,"code20"],
[-172.27272727,-176.13636364,"Stone Cold",260,"code21"],
[-176.13636364,-180,"Kane",235,"code22"],
[-180,-183.86363636,"The Rock",270,"code23"],
[-183.86363636,-187.72727273,"Mankind",245,"code24"],
[-187.72727273,-191.59090909,"Triple H",270,"code25"],
[-191.59090909,-195.45454545,"Mr. McMahon",235,"code26"],
[-195.45454545,-199.31818182,"Big Show",240,"code27"],
[-199.31818182,-203.18181818,"Kurt Angle",250,"code28"],
[-203.18181818,-207.04545455,"Chris Jericho",235,"code29"],
[-207.04545455,-210.90909091,"Hollywood Hogan",235,"code30"],
[-210.90909091,-214.77272727,"Brock Lesnar",245,"code31"],
[-214.77272727,-218.63636364,"Eddie Guerrero",235,"code32"],
[-218.63636364,-222.5,"JBL",235,"code33"],
[-222.5,-226.36363636,"John Cena",280,"code34"],
[-226.36363636,-230.22727273,"Edge",250,"code35"],
[-230.22727273,-234.09090909,"Rob Van Dam",235,"code36"],
[-234.09090909,-237.95454545,"Randy Orton",260,"code37"],
[-237.95454545,-241.81818182,"Jeff Hardy",235,"code38"],
[-241.81818182,-245.68181818,"Batista",240,"code39"],
[-245.68181818,-249.54545455,"Sheamus",240,"code40"],
[-249.54545455,-253.40909091,"The Miz",235,"code41"],
[-253.40909091,-257.27272727,"CM Punk",240,"code42"],
[-257.27272727,-261.13636364,"Rey Mysterio",235,"code43"],
[-261.13636364,-265,"Alberto Del Rio",240,"code44"]
];

var series3 = [
[-85,-62.15692206,"1960s",300,"#6699FF","xx1"],
[-62.15692206,-28.00918541,"1970s",300,"#B8B8FF","xx2"],
[-28.00918541,6.147901656,"1980s",300,"#6699FF","xx3"],

[6.147901656,40.2956383,"1990s",300,"#B8B8FF","xx4"],
[40.2956383,74.45272537,"2000s",300,"#6699FF","xx5"],
[74.45272537,85,"2010s",300,"#B8B8FF","xx6"]

];

var series4 = [
[-85,-28,"World Wide Wrestling Federation",310,"#B84DFF","xxy1","World Wide Wrestling Federation"],
[-28,15,"Golden Era",310,"gold","xxy2","Golden Era"],
[15,35,"",310,"red","xxy3","New Generation Era"],
[35,50,"",310,"green","xxy4","Attitude Era"],
[50,85,"Modern Era",310,"orange","xxy5","Modern Era"]
];

vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",320)
	
	
	
	vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",280)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)
	
										vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",275)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)
										vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",270)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)
	
										vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",265)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)
	
	
	
	
	
	
									vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",260)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)	
	
	
								vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",255)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)

vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",250)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)	
						vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",245)
	.attr("fill","black")
	.style("stroke","grey")
		.style("stroke-width",0.5)
					vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",240)
	.attr("fill","black")
	.style("stroke","grey")
		.style("stroke-width",0.5)
				vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",235)
	.attr("fill","black")
	.style("stroke","grey")
	.style("stroke-width",0.5)	
	
	var gradient = vis.append("svg:defs")
  .append("svg:radialGradient")
    .attr("id", "gradient")
    .attr("cx", "50%")
    .attr("cy", "50%")
    .attr("r", "50%")
    .attr("fx", "50%")
	.attr("fy", "50%")
    .attr("spreadMethod", "pad");

gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "grey")
    .attr("stop-opacity", 1);

gradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "black")
    .attr("stop-opacity", 1);

vis
	.append("circle")
	.attr("cx",600)
	.attr("cy",330)
	.attr("r",230)
	.attr("fill","url(#gradient)")

vis.selectAll(".line")
.data(series)
.enter()
.append("path")
.attr("class", function(d) { return d[4] + " " +"line"; })
    .attr("d", arc)
    .attr("transform", "translate(600,330)")
    .attr("fill",function(d) { return p(d[2]); })
.transition()
.duration(2000)
.ease("linear")
    .attr("d", arc2)

//now make lower arcs

vis.selectAll(".lline")
.data(series2)
.enter()
.append("path")
.attr("class", "lline")
.attr("id",function(d) { return d[4]; })
    .attr("d", arc)
    .attr("transform", "translate(600,330)")
    .attr("fill",function(d) { return p(d[2]); })
.transition()
.duration(2000)
.ease("linear")
.attr("d", arc2)

//now make decades

vis.selectAll(".decades")
.data(series3)
.enter()
.append("path")
.attr("class", "decades")
.attr("id", function(d){return d[5];})
.attr("d", arc3)
 .attr("transform", "translate(600,330)")
 .attr("fill","none")
.transition()
.delay(function(d,i){return i*250;})
 .attr("fill",function(d) { return d[4]; })
 
 
 		//now make eras

vis.selectAll(".eras")
.data(series4)
.enter()
.append("path")
.attr("class", "eras")
.attr("id", function(d){return d[5];})
.attr("d", arc4)
 .attr("transform", "translate(600,330)")
 .attr("fill","none")
.transition()
.delay(function(d,i){return i*250;})
 .attr("fill",function(d) { return d[4]; })

//add mouse over title to top arcs
	
	vis.selectAll(".line")
        .append("title")
        .text(function(d) {
			   		return d[2];
			   });	
	
	
	vis.selectAll(".lline")
        .append("title")
        .text(function(d) {
			   		return d[2];
			   });	
			   
			   
		vis.selectAll(".eras")
        .append("title")
        .text(function(d) {
			   		return d[6];
			   });

//fade in or out

d3.select("#code1")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code1")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code1")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	  
	
	d3.select("#code2")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code2")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code2")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});

d3.select("#code3")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code3")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code3")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code4")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code4")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code4")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code5")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code5")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code5")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code6")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code6")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code6")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code7")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code7")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code7")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code8")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code8")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code8")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code9")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code9")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code9")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code10")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code10")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code10")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code11")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code11")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code11")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code12")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code12")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code12")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code13")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code13")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code13")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code14")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code14")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code14")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code15")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code15")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code15")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code16")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code16")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code16")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code17")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code17")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code17")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code18")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code18")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code18")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code19")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code19")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code19")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code20")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code20")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code20")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code21")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code21")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code21")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code22")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code22")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code22")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code23")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code23")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code23")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code24")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code24")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code24")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code25")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code25")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code25")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code26")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code26")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code26")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code27")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code27")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code27")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	d3.select("#code28")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code28")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code28")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code29")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code29")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code29")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	d3.select("#code30")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code30")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code30")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
		
	d3.select("#code31")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code31")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code31")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
		
	d3.select("#code32")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code32")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code32")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
	d3.select("#code33")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code33")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code33")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
		
	d3.select("#code34")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code34")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code34")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
		
	d3.select("#code35")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code35")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code35")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
		
	d3.select("#code36")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code36")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code36")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
		
	d3.select("#code37")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code37")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code37")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
		
	d3.select("#code38")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code38")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code38")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		
		
	d3.select("#code39")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code39")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code39")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
		
		
	d3.select("#code40")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code40")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code40")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		d3.select("#code41")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code41")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code41")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		d3.select("#code42")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code42")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code42")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
	
	d3.select("#code43")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code43")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code43")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});	
	
	
		d3.select("#code44")
	.on("mouseover",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",0.1)
	vis.selectAll(".code44")
	.transition()
	.attr("opacity",1)
	});	  
	d3.select("#code44")
	.on("mouseout",function() {
		vis.selectAll(".line")
	.transition()
	.attr("opacity",1)
	});

vis.selectAll(".names")
.data(series3)
.enter()
.append("svg:text")
.attr("class", "names")
.attr("x",20)
.attr("dy",10)
.append("svg:textPath")
.attr("startOffset",function(d) { return 0 })
.attr("xlink:href",function(d) { return "#"+d[5]; })
.text(function(d) { return d[2] })
.style("font-family","calibri")
.style("font-size","11px")
.style("font-weight",100)
.attr("fill","black")

vis.selectAll(".enames")
.data(series4)
.enter()
.append("svg:text")
.attr("class", "enames")
.attr("x",20)
.attr("dy",8.5)
.append("svg:textPath")
.attr("startOffset",function(d) { return 0 })
.attr("xlink:href",function(d) { return "#"+d[5]; })
.text(function(d) { return d[2] })
.style("font-family","calibri")
.style("font-size","11px")
.style("font-weight",100)
.attr("fill","black")
	
	
  
</script>

</body>

</html>

Modified http://code.jquery.com/jquery-1.8.2.min.js to a secure url

Modified http://code.jquery.com/ui/1.9.1/jquery-ui.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-1.8.2.min.js

https://code.jquery.com/ui/1.9.1/jquery-ui.js

https://d3js.org/d3.v3.min.js