Skip to content

Instantly share code, notes, and snippets.

@WillTurman

WillTurman/index.html

Created March 12, 2013 04:58
Show Gist options
  • Save WillTurman/5140482 to your computer and use it in GitHub Desktop.
Save WillTurman/5140482 to your computer and use it in GitHub Desktop.
Download ZIP
Strikezone Scatterplot
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #FFF;
}
.box {
fill: none;
stroke: #000;
}
.tooltip {
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("z-index", "20")
.style("visibility", "hidden")
.style("top", "370px")
.style("left", "85px")
.style("width", "300px");
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 600 - margin.left -margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = ["#346389", "#DD5C55", "#88BB4A"];
var colorx = d3.scale.ordinal().range(color);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data/pitchfx.csv", function(data) {
data.forEach(function(d){
d.x = +d.pitchx;
d.y = +d.pitchy;
if (d.type === "S") {
d.t = "Strike"
}
else if (d.type === "B") {
d.t = "Ball"
}
else if (d.type === "X") {
d.t = "In Play"
}
if (d.pitch === "FF") {
d.p = "Four Seam Fastball"
}
else if(d.pitch === "FT") {
d.p = "Two Seam Fastball"
}
else if (d.pitch === "CU") {
d.p = "Curveball"
}
else if (d.pitch === "SL") {
d.p = "Slider"
}
else if (d.pitch === "CH") {
d.p = "Changeup"
}
d.s = d.speed;
d.des = d.description;
//console.log(d.x, d.y);
})
x.domain(d3.extent(data, function(d) { return d.x; })).nice();
y.domain(d3.extent(data, function(d) { return d.y; })).nice();
console.log(x(-0.8));
console.log(x(0.8));
svg.append("g")
.attr("class", "box")
.append("rect")
.attr("x", x(-0.8))
.attr("y", y(3.5))
.attr("width", (x(0.8)-x(-0.8)))
.attr("height", (y(1.5)-y(3.5)))
.style();
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 5)
.attr("cx", function(d) { return x(d.x); })
.attr("cy", function(d) { return y(d.y); })
.style("fill", function(d) { return colorx(d.t); })
.on("mouseover", function(d) {
d3.select(this)
.transition().duration(50).attr("r", 15),
tooltip.html("<h3>" + "Pitch: " + d.p + "<br>Speed: " + d.s + "<br>Description: " + d.des + "</h3>")
.style("transition-property", "opacity")
.style("transition-duration", "0.7s")
.style("opacity", "1")
.style("visibility", "visible");
})
.on("mouseout", function(d) {
d3.select(this)
.transition().duration(50).attr("r", 5),
tooltip.style("visibility", "hidden");
});
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("distance from center of plate (feet)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("height (feet)");
var legend = svg.selectAll(".legend")
.data(colorx.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 30)
.attr("y", margin.top)
.attr("width", 18)
.attr("height", 18)
.style("fill", colorx);
legend.append("text")
.attr("x", width - 40)
.attr("y", margin.top + 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
console.log("working");
</script>
</body>
Raw
pitchfx.csv
inning id pitchx pitchy pitch speed type description
1 1 0.096 2.22 FF 90.9 S Called Strike
1 2 -0.857 2.825 FF 90.9 S Swinging Strike
1 3 -1.685 3.016 FF 91.8 B Ball
1 4 0.36 2.599 FF 91.8 S Jordan Schafer strikes out swinging.
1 5 -0.287 2.274 FF 91.2 S Foul
1 6 0.74 1.515 CU 79 S Swinging Strike
1 7 0.077 2.911 FF 93.1 S Jose Altuve strikes out swinging.
1 8 -1.072 2.22 FF 92 S Called Strike
1 9 -1.318 2.289 CH 85.9 B Ball
1 10 -0.248 1.305 SL 85.4 S Foul
1 11 0.306 3.218 FF 92.8 X Jed Lowrie pops out to third baseman Pablo Sandoval in foul territory.
2 12 -0.384 2.836 FF 89.7 S Called Strike
2 13 0.129 1.718 SL 84.2 X J. D. Martinez flies out to center fielder Angel Pagan.
2 14 -1.276 2.331 FT 90.4 S Called Strike
2 15 -0.392 4.957 SL 86.8 B Ball
2 16 -0.185 0.506 CH 85.1 B Ball
2 17 -1.569 2.443 FF 92 B Ball
2 18 -0.828 3.656 FF 91.5 S Foul
2 19 -1.18 1.292 CH 87.1 S Brett Wallace strikes out swinging.
2 20 0.245 2.567 FF 92 S Foul
2 21 -1.46 3.554 FF 91.9 B Ball
2 22 0.407 1.231 SL 85.9 S Swinging Strike
2 23 0.452 2.43 SL 87.3 X Chris Johnson grounds out softly, shortstop Joaquin Arias to first baseman Brandon Belt.
3 24 0.452 1.567 CH 84.9 B Ball
3 25 -0.902 3.079 FF 90.5 S Swinging Strike
3 26 -0.16 2.791 FF 90.2 S Foul
3 27 -0.421 1.267 SL 86.7 B Ball
3 28 -1.282 1.951 CH 86.4 S Foul
3 29 -0.437 1.924 SL 86.8 X Brian Bogusevic grounds out, second baseman Ryan Theriot to first baseman Brandon Belt.
3 30 0.894 1.022 FF 92.2 B Ball
3 31 -1.187 2.29 FT 92 S Swinging Strike
3 32 -1.144 2.609 FF 92.2 S Foul
3 33 0.063 3.138 SL 86.3 S Foul
3 34 0.708 1.172 CU 80.9 B Ball
3 35 0.917 2.025 FF 92.1 S Chris Snyder called out on strikes.
3 36 -2.145 1.973 FF 90.9 B Ball
3 37 -0.25 2.941 FF 90.8 S Called Strike
3 38 -0.758 2.627 FF 91.4 S Foul
3 39 -1.07 4.492 FF 92.3 B Ball
3 40 0.035 2.49 FF 91.8 S J. A. Happ called out on strikes.
4 41 -1.426 2.78 FF 89.6 B Ball
4 42 -0.42 1.943 CH 85.6 S Called Strike
4 43 -0.924 2.677 FF 90.2 S Called Strike
4 44 -0.434 3.063 SL 86.9 S Foul
4 45 0.095 1.745 SL 85.8 S Foul
4 46 -1.665 2.997 CU 77.6 B Ball
4 47 -1.42 2.703 FF 91.1 S Foul
4 48 -0.69 2.944 FT 91.5 S Foul
4 49 -0.272 1.25 CH 87.5 S Foul
4 50 0.178 3.688 FF 91.9 S Jordan Schafer strikes out swinging.
4 51 0.354 2.587 CU 78.4 S Called Strike
4 52 1.644 0.78 SL 86.1 B Ball
4 53 0.463 3.081 FF 92.1 S Called Strike
4 54 0.003 2.236 CU 78.6 S Foul
4 55 0.166 1.318 CH 87.2 S Foul
4 56 0.087 3.271 FF 92.5 S Jose Altuve called out on strikes.
4 57 -0.221 2.644 CU 78.1 S Called Strike
4 58 -0.662 3.606 FF 91.1 B Ball
4 59 -0.525 1.309 FF 91.6 B Ball
4 60 -0.101 1.408 CH 87.1 S Foul
4 61 0.845 1.548 SL 87.8 S Foul
4 62 -0.548 1.961 SL 86.7 X Jed Lowrie flies out to left fielder Melky Cabrera in foul territory.
5 63 1.032 3.156 FF 90.3 B Ball
5 64 -0.056 2.095 CU 75.8 S Foul
5 65 -0.245 1.713 FF 90.2 S Called Strike
5 66 0.108 1.338 CU 77.3 S Foul
5 67 -1.648 2.224 CU 76.3 B Ball
5 68 -0.286 2.315 FF 90.4 S J. D. Martinez called out on strikes.
5 69 -0.602 2.633 FF 91 S Foul
5 70 -0.094 2.136 FF 91.5 S Called Strike
5 71 0.03 4.015 FF 92 S Brett Wallace strikes out swinging.
5 72 0.551 2.103 SL 86.5 S Called Strike
5 73 2.23 0.479 SL 87.1 B Ball
5 74 0.179 2.728 FF 93.1 S Foul
5 75 1.412 2.513 CU 81.4 B Ball
5 76 -1.39 2.889 SL 87.8 X Chris Johnson grounds out softly, second baseman Ryan Theriot to first baseman Brandon Belt.
6 77 -0.505 1.185 CH 84.2 B Ball
6 78 -0.501 1.624 CH 84.4 S Called Strike
6 79 -0.226 3.601 FF 89.7 S Swinging Strike
6 80 0.06 2.386 SL 87.6 S Foul
6 81 0.593 2.433 FF 91.9 S Brian Bogusevic called out on strikes.
6 82 -0.734 1.887 FT 91.8 X Chris Snyder flies out to left fielder Melky Cabrera.
6 83 0.531 1.506 CU 77.5 S Called Strike
6 84 0.329 1.948 CU 78.5 S Called Strike
6 85 0.166 4.248 FF 92.3 B Ball
6 86 0.687 0.553 CU 79 S Brian Bixler strikes out swinging, catcher Buster Posey to first baseman Brandon Belt.
7 87 0.245 1.977 CH 84.4 S Called Strike
7 88 -2.006 2.279 FF 90.8 B Ball
7 89 0 2.486 FF 90.4 S Foul
7 90 2.232 -0.726 CU 78 B Ball
7 91 0.723 4.226 FF 91.4 B Ball
7 92 0.418 2.551 FF 91.8 X Jordan Schafer flies out to right fielder Gregor Blanco.
7 93 0.486 2.273 SL 86.9 S Called Strike
7 94 -0.622 2.7 FF 91.3 S Foul
7 95 1.686 1.369 CU 79.6 B Ball
7 96 0.988 1.884 FF 93.2 S Jose Altuve called out on strikes.
7 97 -0.244 1.79 CH 87.8 S Foul
7 98 -0.461 3.946 FF 91.2 B Ball
7 99 -1.2 3.176 FF 91.5 S Called Strike
7 100 -0.124 -0.085 CH 87.9 B Ball
7 101 0.521 2.592 FF 94.4 S Foul
7 102 -1.621 1.932 SL 87.7 B Ball
7 103 0.25 1.768 CH 86.6 S Jed Lowrie strikes out swinging.
8 104 -1.494 3.101 FF 90.9 X J. D. Martinez grounds out, third baseman Joaquin Arias to first baseman Brandon Belt.
8 105 -0.225 1.641 CH 85.8 S Called Strike
8 106 0.705 3.028 SL 86.8 B Ball
8 107 -0.669 4.581 FF 91.8 S Swinging Strike
8 108 -1.81 3.5 SL 87.9 B Ball
8 109 0.558 -0.006 SL 86.5 B Ball
8 110 0.727 2.46 FF 93 S Brett Wallace called out on strikes.
8 111 1.337 2.444 FF 92.1 B Ball
8 112 0.724 2.681 FF 92.4 S Foul
8 113 -1.65 3.456 SL 87.5 B Ball
8 114 -0.336 2.87 FF 92.7 X Chris Johnson grounds out, shortstop Brandon Crawford to first baseman Brandon Belt.
9 115 0.006 1.648 CH 85.8 S Foul
9 116 -1.445 2.698 FF 91.6 B Ball
9 117 1.74 3.266 FF 91.2 B Ball
9 118 0.243 1.663 CH 86.6 S Foul
9 119 -1.357 3.113 FF 91.9 X Brian Bogusevic flies out to left fielder Melky Cabrera in foul territory.
9 120 1.188 1.861 CU 77.5 B Ball
9 121 -0.88 2.649 FF 92.4 X Chris Snyder flies out to left fielder Melky Cabrera.
9 122 -0.819 1.912 CH 87.5 S Called Strike
9 123 -1.233 4.148 FF 92.4 B Ball
9 124 -0.957 1.409 CH 87 S Called Strike
9 125 0.056 3.232 FF 93.6 X Jason Castro grounds out, third baseman Joaquin Arias to first baseman Brandon Belt.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment