Skip to content

Instantly share code, notes, and snippets.

@jrzief
Last active February 13, 2020 15:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jrzief/136540446aa3a8844774cb278a5a64c2 to your computer and use it in GitHub Desktop.
Save jrzief/136540446aa3a8844774cb278a5a64c2 to your computer and use it in GitHub Desktop.
Chord Quiz
license: mit

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

bench jockeying
arguing a call at first base (19 ejections)
arguing balls and strikes (59 ejections)
fighting the other team's pitcher on the field
arguing a called third strike (16 ejections)
spitting on an umpire
arguing a balk call (10 ejections)
arguing a checked swing (12 ejections)
arguing a call at second base (7 ejections)
protesting a bat throw at a pitch-out during a steal
arguing a call at homeplate (4 ejections)
taking issue with an umpire saying something to one of his coaches
protesting a balk non-call
arguing a hit by pitch call (3 ejections)
his pitcher throwing a brushback pitch after a warning
protesting the condition of the field
arguing an interference call (2 ejections)
throwing a helmet at the dugout steps that bounced onto the field
protesting an order to speed up the game
arguing a call at third base (3 ejections)
arguing a fair/foul call
bumping an umpire (3 ejections)
arguing an interference non-call (3 ejections)
arguing about the catcher's box behind the plate
protesting an intentional hit by pitch (2 ejections)
protesting that his runner was not allowed to advance 1 base
arguing an automatic ball called on his pitcher
pointing to the dirt while arguing a fair/foul call
protesting the delay to turn on the field lights
arguing a confusing call on a pitch during a stolen base
throwing his hat while arguing a call at first base
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment