Chord Quiz

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

forked from dhoboy's block: Chord Quiz

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

.heading  {
  font: 40px sans-serif;
  fill: #6b486b;
}
.chord {
    font-size: 50px;
    font-weight: bold;
    text-align: center
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
// "#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56",
var width = 710,
	height = 900,
	padding = 30;

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

svg.append("text")
  .attr("class", "heading")
  .attr("x", 40)
  .attr("y", 70)
  //.style("font-size", "2rem")
  //.style("text-align", "center")
  .text("Can you Play the chord in 5 seconds?")

svg.append("text")
  .attr("class", "heading")
  .attr("x", 150)
  .attr("y", 140)
  .text("Major Chords for # Keys")

// start with this line, transition it out as chords 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 chords have been cycled through
/* 
var final_1 = svg.append("text")
	.attr("class", "heading")
    .attr("x", -1000)
    .attr("y", 330)
    .text("Try the circle of fifths in flat keys") 
*/

var ch1 = ["G-1", "D-1", "A-1", "E-1", "B-1"];
  var ch2 = ["G-2", "D-2", "A-2", "E-2", "B-2"];
  var ch3 = ["G-3", "D-3", "A-3", "E-3", "B-3"];
  var ch4 = ch1.concat(ch2).concat(ch3);
  console.log('ch4', ch4);
  // fade the blank line out
  /* blank
    .transition()
    .duration(3850)
    .attr("stroke-width", 1e-6)
 */
  // data join
  var chords = svg.selectAll(".chords")
      .data(ch4);

// enter
  chords.enter()
    .append("text")
    .attr("class", "chord")
	.attr("x", 325)
	.attr("y", 240)
  .style("fill", "blue")
	.attr("opacity", 1e-6)
	.text(function(d) { return d; });  
    	 
  // update + remove
  chords
    .attr("opacity", 1e-6)
    .transition()
	  .delay(function(d, i) {
		  return i*6000;	
	  })
	  .duration(3850)
	  .attr("opacity", 1)
	  .each("end", function(d, i) {	  	
	  	svg.selectAll(".chord")
	  	  .filter(function(f) {
	  	    return f == d;
	  	 })
      //.style("fill", "orange")
	  	.transition()
	  	  .duration(3000)
        .style("fill", "red")
	  	  .attr("y", 750)
	  	  .attr("opacity", 1e-6)
	  	  .remove()
	  })
  
   /* final_1.transition()
      .delay(155000)
      .duration(1000)
      .attr("x", 30)
   */

d3.select(self.frameElement).style("height", height + "px").style("width", width + "px");	
</script>

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