vis6.js |
|
Asks JavaScript to show more errors. |
"use strict";
|
¶ Boilerplate jQueryThis code loads the file |
$(function() {
var fileName = "res/scores.json";
$.getJSON(fileName)
.done(function (data) {
visualize(data);
})
.fail(function() {
alert("Failed to load the JSON file: " + fileName);
});
});
|
¶ d3.js visualizationAll of the code to create our visualization will be contained in the |
var visualize = function(data) {
console.log(data);
|
¶ Data Pre-processingThe input data, in |
var teams = data.map(function (d) {
return d["Opponent"];
});
|
After the |
teams = d3.set(teams).values();
console.log(teams);
|
The same logic is applied to get the set of unique years in the |
var years = data.map(function (d) {
return d["Year"];
});
years = d3.set(years).values();
console.log(years);
|
¶ Boilerplate Code for d3.js |
var margin = { top: 50, right: 50, bottom: 50, left: 150 },
width = 800 - margin.left - margin.right,
height = (teams.length * 20);
var svg = d3.select("#chart6")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("width", width + margin.left + margin.right)
.style("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
¶ d3.js Scales |
|
¶
Opponent Scale (
|
var teamsScale = d3.scale.ordinal()
.domain( teams )
.rangePoints( [0, height] );
|
¶
Years Scale (
|
var yearsScale = d3.scale.ordinal()
.domain( years )
.rangePoints( [0, width] );
|
¶ d3.js Axes |
|
¶ Axis for OpponentsStandard vertical axis, oriented left. |
var teamsAxis = d3.svg.axis()
.scale(teamsScale)
.orient("left");
svg.append("g")
.attr("class", "axis")
.call(teamsAxis);
|
¶ Axis for YearsNear standard horizontal axis, oriented top. Instead of allowing d3.js to
draw every tick, we specify the |
var yearsAxis = d3.svg.axis()
.scale(yearsScale)
.tickValues( [2014, 2000, 1980, 1960, 1940, 1920, 1900, 1892] )
.orient("top");
svg.append("g")
.attr("class", "axis")
.call(yearsAxis);
|
¶ Helper functions |
|
¶ d3.tipTo allow for mouseover pop-up boxes, we use the d3.tip.js library for d3. More info: d3.tip on Github |
var tip = d3.tip()
.attr('class', 'd3-tip')
|
Returns a string of the format: Illinois vs. Iowa (1952) |
.html(function(d) {
return "Illinois " + d["Location"] + " " + d["Opponent"] + " (" + d["Year"] + ")<br>" +
d["IlliniScore"] + "-" + d["OpponentScore"];
});
svg.call(tip);
|
¶
Function:
|
var didIllinoisWin = function(opponent, year) {
for (var i = 0; i < data.length; i++) {
var d = data[i];
if (d["Year"] == year && d["Opponent"] == opponent) {
if (d["Result"] == "W") {
return true;
} else {
return false;
}
}
}
return false;
};
|
¶ Visual Elements |
svg.selectAll("circles")
.data(data)
.enter()
|
SVG Shape Appending a circle for each game played by the Illini football team |
.append("circle")
|
¶ CSS ClassAdds the CSS class |
.attr("class", "football-team")
|
¶ x-position (center)Based on the year in the data, passed through the |
.attr("cx", function (d, i) {
return yearsScale( d["Year"] );
})
|
¶ y-position (center)Based on the opponent in the data, passed through the |
.attr("cy", function (d, i) {
return teamsScale( d["Opponent"] );
})
|
¶ RadiusBy default, the radius of every circle will be 2px. If the Illini are on a winning streak verses a given opponent, increase the size of the circle by 1px for each consecutive victory. |
.attr("r", function (d, i) {
|
Initial Values |
var radius = 2;
var year = d["Year"];
var opponent = d["Opponent"];
|
Start with the year before last |
year = year - 1;
|
Loop while the Illini are winning |
while ( didIllinoisWin(opponent, year) ) {
year = year - 1;
radius = radius + 1;
}
|
Return the calculated radius as the radius |
return radius;
})
|
¶ Fill Color
|
.attr("fill", function (d, i) {
if ( d["Result"] == "W" ) {
return "hsla(255, 100%, 30%, 0.5)";
} else {
return "hsla(0, 100%, 30%, 0.5)";
}
})
|
¶ On mouseover effectOn a mouseover, two things should happen:
|
.on('mouseover', function (d, i) {
|
Shows the d3.tip |
tip.show(d, i);
|
Select all of the elements with the class |
svg.selectAll(".football-team")
|
Filter each element such that we retain all elements where the opponent ( |
.filter(function (e) {
return (e["Opponent"] != d["Opponent"]);
})
|
Apply a transition to the data, changing the opacity of those visual elements to 10% (0.1) |
.transition()
.style("opacity", 0.1);
})
|
¶ On mouseout effectSame as mouseover, but in reverse. This means:
|
.on('mouseout', function (d, i) {
tip.hide(d, i);
svg.selectAll(".football-team")
.filter(function (e) {
return (e["Opponent"] != d["Opponent"]);
})
.transition()
.style("opacity", 1);
})
;
};
|