|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.heading, .reason { |
|
font: 30px sans-serif; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.js"></script> |
|
<script> |
|
|
|
var width = 1060, |
|
height = 500 |
|
padding = 30; |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", 30) |
|
.attr("y", 70) |
|
.text("Hall of Fame Manager Bobby Cox") |
|
|
|
svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", 30) |
|
.attr("y", 110) |
|
.text("has been thrown out") |
|
|
|
svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", 30) |
|
.attr("y", 150) |
|
.text("of a Major League Baseball game") |
|
|
|
svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", 30) |
|
.attr("y", 190) |
|
.text("for: ") |
|
|
|
// start with this line, transition it out as reasons drop in. |
|
var blank = svg.append("line") |
|
.attr("x1", 80) |
|
.attr("y1", 200) |
|
.attr("x2", 490) |
|
.attr("y2", 200) |
|
.attr("stroke", "black") |
|
.attr("stroke-width", 3) |
|
|
|
// show these after all reasons have been cycled through |
|
var final_1 = svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", -1000) |
|
.attr("y", 330) |
|
.text("Most of his ejections occured while defending one of his players") |
|
|
|
var final_2 = svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", -1000) |
|
.attr("y", 370) |
|
.text("from being ejected, or in response to one of his players being ejected.") |
|
|
|
var final_3 = svg.append("text") |
|
.attr("class", "heading") |
|
.attr("x", 30) |
|
.attr("y", height + padding) |
|
.text("Bobby was a player's manager.") |
|
|
|
d3.text("bobby_reasons.txt", function(err, data) { |
|
var r = data.split("\n"); // thanks kai |
|
|
|
// fade the blank line out |
|
blank |
|
.transition() |
|
.duration(3850) |
|
.attr("stroke-width", 1e-6) |
|
|
|
// data join |
|
var reasons = svg.selectAll(".reason") |
|
.data(r); |
|
|
|
// enter |
|
reasons.enter() |
|
.append("text") |
|
.attr("class", "reason") |
|
.attr("x", 85) |
|
.attr("y", 190) |
|
.attr("opacity", 1e-6) |
|
.text(function(d) { return d; }); |
|
|
|
// update + remove |
|
reasons |
|
.attr("opacity", 1e-6) |
|
.transition() |
|
.delay(function(d, i) { |
|
return i*5000; |
|
}) |
|
.duration(3850) |
|
.attr("opacity", 1) |
|
.each("end", function(d) { |
|
svg.selectAll(".reason") |
|
.filter(function(f) { |
|
return f == d; |
|
}) |
|
.transition() |
|
.duration(1150) |
|
.attr("y", 500) |
|
.attr("opacity", 1e-6) |
|
.remove() |
|
}) |
|
|
|
final_1.transition() |
|
.delay(155000) |
|
.duration(1000) |
|
.attr("x", 30) |
|
|
|
final_2.transition() |
|
.delay(156000) |
|
.duration(1000) |
|
.attr("x", 30) |
|
|
|
final_3.transition() |
|
.delay(158000) |
|
.duration(1000) |
|
.attr("y", 410) |
|
|
|
}); |
|
d3.select(self.frameElement).style("height", height + "px").style("width", width + "px"); |
|
</script> |