History of the WWE Title – Visual using d3.js

Understand the history of the WWE Title using a visual made with d3.js

I was keen to start making bespoke visuals using the javascript library d3.js. One of the best ways to learn a new topic is to set yourself a challenge so I decided to try and emulate a great infographic seen at www.shah3d.com and shown below.

History of the WWE Title

The final version I made with d3 is here.

I’m still learning d3.js, but I’ll try and cover the interesting aspects of making this visual. The bits I’ll focus on are the use of SVG arcs and mouse over events to transition opacity. Feel free to leave comments below on how to make improvements.

Creating the coloured arcs required using data to calculate the correct start and end angle of the arc. You’ll also need to set the inner and outer radius of the arc – the gap between the inner and outer radius is what makes your arc.

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); })

Now the above is just a variable, no arc has been added to the page with just this code. The height of the arc is 5 pixels (235-230) whilst the start angle is making use of d[0] and d[1], the first and second values of each “row” in my data. My data looks like this:

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"]]

So d[0] for the first arc is -85, for the second arc it’s -84.79 and so on. Note that the start angle of each arc is the same as the end angle of the preceding arc. This is so that we don’t have any gaps in my final visual.

Now, as I said, we still haven’t actually instructed the browser the render any arcs to the page yet. The code below does that. Notice how it makes use of the arc variable which I showed earlier.

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]); })

I’ll quickly race through each line above.

vis.selectAll(".line")

‘vis’ is the svg element that has been made earlier in the code. We’ll be appending arcs and other elements to this variable. selectAll(“.line”) means select all the elements with a class set to “line”. These don’t exist yet, so in a way this line is simply stating what we want to make.

.data(series)
.enter()
.append("path")

We refer to our data that is held in the variable ‘series’, shown earlier. We’ll get an element (in this case a path) for each row in our data. We then append a “path” element for each row in our dataset.

.attr("class", function(d) { return d[4] + " " +"line"; })
    .attr("d", arc)
    .attr("transform", "translate(600,330)")
    .attr("fill",function(d) { return p(d[2]); })

We next assign each “path” element a class based on our dataset, d[4]. Now SVG paths require a “d” attribute. This might tell it co-ordinates for a line but in this case we use our arc variable to create an arc. The transform attribute nudges all the arcs into position I want them on the page and then we colour each arc by using data to drive the resultant fill. You’ll see that d[2] is wrapped inside p(). ‘p’ here is a colour scale I’d made earlier:

var p=d3.scale.category10();

The bottom half of the visual has arcs that help make the top arcs transparent when you hover over them, like so:

d3js mouseover

This was used to help users spot individual title reigns. The code below was one aspect that I know could be more efficient as I duplicate this code many times in the final visual.

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)
	});	

We start by selecting the element that has an id of “code6″ and assigning a mouseover event to it. This element will be the one on the bottom half of the visual. The function that’s called will then select all the arcs that have a class of “line” and transition their opacity to be just 0.1. Every arc at the top has a class of “line” so they all go transparent. Instantly, a second change then happens. Every element with a class (not id) of “code6″ gets set an opacity of 1. So we now have the top row all being transparent apart from the elements with a class of “code6″. When we “mouseout” the entire top half of arcs gets set opacity back to 1.0 as normal. This process helps highlight and un-highlight certain wrestlers in the timeline.

Leave a Reply

  

  

  


× 3 = six

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>