Bobby Cox

Looking at the reasons Major League Baseball Hall of Fame Manager Bobby Cox was ejected during his career.

Data courtesy of Retrosheet.

They asked me to say: "The information used here was obtained free of charge from and is copyrighted by Retrosheet. Interested parties may contact Retrosheet at "www.retrosheet.org"."

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.heading, .reason {
  font: 30px sans-serif;
}

</style>
<body>
<script src="https://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>

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

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