Skip to content

Instantly share code, notes, and snippets.

@danharr

danharr/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danharr/9831933 to your computer and use it in GitHub Desktop.
Save danharr/9831933 to your computer and use it in GitHub Desktop.
Download ZIP
History of WWE title holders
Raw
index.html
<!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="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
</script>
<style type="text/css">
.twitter-share-button {
position:absolute;
left:280px;
top:15px;
}
#p1 {
position:absolute;
top:310px;
left:10px;
height:150px;
width:120px;
}
#logo {
position:absolute;
top:200px;
left:470px;
}
p
{font-family:'tahoma';
position:absolute;
top:10px;
left:10px;
width:200px;
}
</style>
</head>
<body>
<script>
var vis = d3.select("body").append("svg").attr("width",1000).attr("height",700)
var pi = Math.PI;
var p=d3.scale.category10();
var series = [
[-85,-84.79429074,"Buddy Rogers",235,"code1"],
[-84.79429074,-58.58506132,"Bruno Sammartino",235,"code2"],
[-58.58506132,-58.38870248,"Ivan Koloff",235,"code3"],
[-58.38870248,-48.78582035,"Pedro Morales",235,"code4"],
[-48.78582035,-48.70166656,"Stan Stasiak",235,"code5"],
[-48.70166656,-37.13519607,"Bruno Sammartino",240,"code2"],
[-37.13519607,-34.36747152,"Superstar Billy Graham",235,"code6"],
[-34.36747152,-14.40432318,"Bob Backlund",235,"code7"],
[-14.40432318,-14.1425114,"The Iron Sheik",235,"code8"],
[-14.1425114,-0.359991189999995,"Hulk Hogan",235,"code9"],
[-0.359991189999995,0.116880270000005,"Andre the Giant",235,"code10"],
[0.116880270000005,3.58588638,"Randy Savage",235,"code11"],
[3.58588638,6.98943954,"Hulk Hogan",240,"code9"],
[6.98943954,9.72911283000001,"Ultimate Warrior",235,"code12"],
[9.72911283000001,10.32753976,"Sgt. Slaughter",235,"code13"],
[10.32753976,12.64644411,"Hulk Hogan",245,"code9"],
[12.64644411,12.70254663,"Undertaker",235,"code14"],
[12.70254663,13.14201641,"Hulk Hogan",250,"code9"],
[13.14201641,13.86199881,"Ric Flair",235,"code15"],
[13.86199881,15.2552115,"Randy Savage",240,"code11"],
[15.2552115,15.63857875,"Ric Flair",240,"code15"],
[15.63857875,17.26555196,"Bret Hart",235,"code16"],
[17.26555196,17.26555196,"Yokozuna",235,"code17"],
[17.26555196,17.92008141,"Hulk Hogan",255,"code9"],
[17.92008141,20.53819923,"Yokozuna",240,"code17"],
[20.53819923,22.85710358,"Bret Hart",240,"code16"],
[22.85710358,22.88515484,"Bob Backlund",240,"code7"],
[22.88515484,26.23260548,"Diesel",235,"code18"],
[26.23260548,27.47621144,"Bret Hart",245,"code16"],
[27.47621144,29.63615864,"Shawn Michaels",235,"code19"],
[29.63615864,30.22523515,"Sid",235,"code20"],
[30.22523515,30.48704693,"Shawn Michaels",240,"code19"],
[30.48704693,30.49639735,"Bret Hart",250,"code16"],
[30.49639735,30.81431166,"Sid",240,"code20"],
[30.81431166,32.05791762,"Undertaker",240,"code14"],
[32.05791762,32.97425886,"Bret Hart",255,"code16"],
[32.97425886,34.28331777,"Shawn Michaels",245,"code19"],
[34.28331777,35.13420606,"Stone Cold",235,"code21"],
[35.13420606,35.14355648,"Kane",235,"code22"],
[35.14355648,36.44326497,"Stone Cold",240,"code21"],
[36.44326497,36.91078601,"The Rock",235,"code23"],
[36.91078601,37.09779443,"Mankind",235,"code24"],
[37.09779443,37.16324738,"The Rock",240,"code23"],
[37.16324738,37.30350369,"Mankind",240,"code24"],
[37.30350369,37.68687094,"The Rock",245,"code23"],
[37.68687094,38.2104945,"Stone Cold",245,"code21"],
[38.2104945,38.54710965,"Undertaker",245,"code14"],
[38.54710965,39.06138279,"Stone Cold",250,"code21"],
[39.06138279,39.07073321,"Mankind",245,"code24"],
[39.07073321,39.29514331,"Triple H",235,"code25"],
[39.29514331,39.38864752,"Mr. McMahon",235,"code26"],
[39.38864752,39.84681814,"Triple H",240,"code25"],
[39.84681814,40.31433918,"Big Show",235,"code27"],
[40.31433918,41.41768883,"Triple H",245,"code25"],
[41.41768883,41.61404767,"The Rock",250,"code23"],
[41.61404767,41.9413124,"Triple H",250,"code25"],
[41.9413124,43.05401247,"The Rock",255,"code23"],
[43.05401247,44.23216549,"Kurt Angle",235,"code28"],
[44.23216549,44.55943022,"The Rock",260,"code23"],
[44.55943022,46.19575385,"Stone Cold",255,"code21"],
[46.19575385,46.33601016,"Kurt Angle",240,"code28"],
[46.33601016,46.91573625,"Stone Cold",260,"code21"],
[46.91573625,47.83207749,"Chris Jericho",235,"code29"],
[47.83207749,48.15934222,"Triple H",255,"code25"],
[48.15934222,48.421154,"Hollywood Hogan",235,"code30"],
[48.421154,49.01023051,"Undertaker",250,"code14"],
[49.01023051,49.33749524,"The Rock",265,"code23"],
[49.33749524,50.12293058,"Brock Lesnar",235,"code31"],
[50.12293058,50.38474236,"Big Show",240,"code27"],
[50.38474236,51.36653654,"Kurt Angle",245,"code28"],
[51.36653654,52.47923661,"Brock Lesnar",240,"code31"],
[52.47923661,52.97480891,"Kurt Angle",250,"code28"],
[52.97480891,54.37737203,"Brock Lesnar",245,"code31"],
[54.37737203,55.62097799,"Eddie Guerrero",235,"code32"],
[55.62097799,58.23909581,"JBL",235,"code33"],
[58.23909581,60.85721363,"John Cena",235,"code34"],
[60.85721363,61.05357247,"Edge",235,"code35"],
[61.05357247,62.29717843,"John Cena",240,"code34"],
[62.29717843,62.50288769,"Rob Van Dam",235,"code36"],
[62.50288769,63.21351967,"Edge",240,"code35"],
[63.21351967,66.81343167,"John Cena",245,"code34"],
[66.81343167,66.81343167,"Randy Orton",235,"code37"],
[66.81343167,66.81343167,"Triple H",260,"code25"],
[66.81343167,68.71156709,"Randy Orton",240,"code37"],
[68.71156709,70.67515545,"Triple H",265,"code25"],
[70.67515545,70.87151429,"Edge",245,"code35"],
[70.87151429,71.26423196,"Jeff Hardy",235,"code38"],
[71.26423196,71.4605908,"Edge",250,"code35"],
[71.4605908,72.11512025,"Triple H",270,"code25"],
[72.11512025,72.50783792,"Randy Orton",245,"code37"],
[72.50783792,72.58264129,"Batista",235,"code39"],
[72.58264129,73.42417916,"Randy Orton",250,"code37"],
[73.42417916,73.620538,"John Cena",250,"code34"],
[73.620538,73.81689684,"Randy Orton",255,"code37"],
[73.81689684,74.27506746,"John Cena",255,"code34"],
[74.27506746,74.92959691,"Sheamus",235,"code40"],
[74.92959691,74.92959691,"John Cena",260,"code34"],
[74.92959691,75.25686164,"Batista",240,"code39"],
[75.25686164,76.04229698,"John Cena",265,"code34"],
[76.04229698,76.89318527,"Sheamus",240,"code40"],
[76.89318527,77.4916122,"Randy Orton",260,"code37"],
[77.4916122,78.98767952,"The Miz",235,"code41"],
[78.98767952,79.70766192,"John Cena",270,"code34"],
[79.70766192,79.78246529,"CM Punk",235,"code42"],
[79.78246529,79.78246529,"Rey Mysterio",235,"code43"],
[79.78246529,79.96947371,"John Cena",275,"code34"],
[79.96947371,80.29673844,"Alberto Del Rio",235,"code44"],
[80.29673844,80.42764433,"John Cena",280,"code34"],
[80.42764433,80.88581495,"Alberto Del Rio",240,"code44"],
[80.88581495,84.94389756,"CM Punk",240,"code42"],
[84.94389756,85.00000008,"The Rock",270,"code23"]
];
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)")
var arc = d3.svg.arc()
.innerRadius(230)
.outerRadius(235)
.startAngle(function(d) { return d[0] * (pi/180); })
.endAngle(function(d) { return d[1] * (pi/180); }) //just radians
var arc2 = d3.svg.arc()
.innerRadius(230)
.outerRadius(function(d) { return d[3] ; })
.startAngle(function(d) { return d[0] * (pi/180); })
.endAngle(function(d) { return d[1] * (pi/180); }) //just radians
var arc3 = d3.svg.arc()
.innerRadius(287.5)
.outerRadius(function(d) { return d[3] ; })
.startAngle(function(d) { return d[0] * (pi/180); })
.endAngle(function(d) { return d[1] * (pi/180); }) //just radians
var arc4 = d3.svg.arc()
.innerRadius(300)
.outerRadius(function(d) { return d[3] ; })
.startAngle(function(d) { return d[0] * (pi/180); })
.endAngle(function(d) { return d[1] * (pi/180); }) //just radians
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>
<object id="logo" data="https://upload.wikimedia.org/wikipedia/en/9/91/WWELogo2014.svg" type="image/svg+xml"></object>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment