Skip to content

Instantly share code, notes, and snippets.

@rakmial

rakmial/bbsummaries.csv

Last active December 6, 2016 21:00
Show Gist options
  • Save rakmial/65041c89c7d494b9e4cc0a95f3fbc00e to your computer and use it in GitHub Desktop.
Save rakmial/65041c89c7d494b9e4cc0a95f3fbc00e to your computer and use it in GitHub Desktop.
Download ZIP
Dimple Interactive Baseball Chart
Raw
bbsummaries.csv
summary height handedness avg HR summary.type
1 68 L median 68 L 0.2475 9.5 median
2 68 R median 68 R 0.2465 14.5 median
3 69 L median 69 L 0.257 16 median
4 69 R median 69 R 0.239 9 median
5 70 L median 70 L 0.2595 24.5 median
6 70 R median 70 R 0.249 27 median
7 71 L median 71 L 0.253 30 median
8 71 R median 71 R 0.249 21 median
9 72 L median 72 L 0.2515 33 median
10 72 R median 72 R 0.241 20 median
11 73 L median 73 L 0.2535 47 median
12 73 R median 73 R 0.242 26 median
13 74 L median 74 L 0.255 36 median
14 74 R median 74 R 0.244 39 median
15 75 L median 75 L 0.26 82 median
16 75 R median 75 R 0.248 57 median
17 76 L median 76 L 0.253 62 median
18 76 R median 76 R 0.227 29 median
19 68 L maximum 68 L 0.281 54 maximum
20 68 R maximum 68 R 0.253 25 maximum
21 69 L maximum 69 L 0.307 103 maximum
22 69 R maximum 69 R 0.278 155 maximum
23 70 L maximum 70 L 0.295 147 maximum
24 70 R maximum 70 R 0.304 316 maximum
25 71 L maximum 71 L 0.306 452 maximum
26 71 R maximum 71 R 0.305 351 maximum
27 72 L maximum 72 L 0.328 563 maximum
28 72 R maximum 72 R 0.296 342 maximum
29 73 L maximum 73 L 0.311 306 maximum
30 73 R maximum 73 R 0.287 389 maximum
31 74 L maximum 74 L 0.299 475 maximum
32 74 R maximum 74 R 0.298 548 maximum
33 75 L maximum 75 L 0.282 255 maximum
34 75 R maximum 75 R 0.299 354 maximum
35 76 L maximum 76 L 0.266 339 maximum
36 76 R maximum 76 R 0.282 196 maximum
37 68 L minimum 68 L 0.196 5 minimum
38 68 R minimum 68 R 0.213 2 minimum
39 69 L minimum 69 L 0.212 2 minimum
40 69 R minimum 69 R 0.21 0 minimum
41 70 L minimum 70 L 0.229 1 minimum
42 70 R minimum 70 R 0.189 0 minimum
43 71 L minimum 71 L 0.191 2 minimum
44 71 R minimum 71 R 0.127 2 minimum
45 72 L minimum 72 L 0.115 1 minimum
46 72 R minimum 72 R 0.123 0 minimum
47 73 L minimum 73 L 0.214 0 minimum
48 73 R minimum 73 R 0.123 0 minimum
49 74 L minimum 74 L 0.201 0 minimum
50 74 R minimum 74 R 0.119 0 minimum
51 75 L minimum 75 L 0.137 5 minimum
52 75 R minimum 75 R 0.066 0 minimum
53 76 L minimum 76 L 0.201 13 minimum
54 76 R minimum 76 R 0.111 0 minimum
Raw
index.html
<html>
<div id="chartContainer">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
<h2> Where Lefties Reign </h2>
<p> Baseball fans know that left-handed batters net some of the best batting averages in the game.<br>
Height has an effect on batting average, too - but a much greater effect on home runs.<br>
Explore this plot to learn more!</p>
<script type="text/javascript">
// Create the container SVG for the chart and the legends
var svg = dimple.newSvg("#chartContainer", 950, 700);
// Read in data, filter by handedness
d3.csv("bbsummaries.csv",function (data) {
dimple.filterData(data,"handedness",["L","R"]);
//initialize variables for interactive summary control legend
var summarycontrol = new dimple.chart(svg,data);
var defaultColor = summarycontrol.defaultColors[0];
var selectedColor = summarycontrol.defaultColors[2];
var framerate = 3000;
var firstTick = true;
//Create interactive summary control legend
summarycontrol.setBounds(210,655,55,40);
var s1 = summarycontrol.addCategoryAxis("y","summary.type");
var s2 = summarycontrol.addMeasureAxis("x","summary.type");
s2.hidden = true;
var t = summarycontrol.addSeries("summary.type",dimple.plot.bar);
t.addEventHandler("click", onClick);
t.getTooltipText = function (e) {
return [
"Display " + e.aggField[0]
]
}
summarycontrol.draw();
//Eliminate axes and lines in order to make graph look like legend
s1.titleShape.remove();
s1.shapes.selectAll("line,path").remove();
s1.shapes.selectAll("text")
.style("text-anchor", "start")
.style("font-size", "10px")
.attr("transform","translate(18,0.5)");
t.shapes
.attr("rx", 3)
.attr("ry", 3)
.style("fill", function (d) { return (d.s1 === 'median' ? selectedColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.s1 === 'median' ? selectedColor.stroke : defaultColor.stroke) })
.style("opacity", 0.4);
//Create actual bar and line plot, start handedness legend and storyboard
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 800, 600);
var x = myChart.addCategoryAxis("x", ["height","handedness"]);
var y1 = myChart.addMeasureAxis("y", "avg");
var y2 = myChart.addMeasureAxis("y","HR");
var a = myChart.addSeries("handedness",dimple.plot.bar,[x,y1]);
var l = myChart.addSeries("handedness",dimple.plot.line,[x,y2]);
var myLegend = myChart.addLegend(72, 660, 50, 100, "Left");
var story = myChart.setStoryboard("summary.type");
story.frameDuration = framerate;
myChart.draw();
//Orphan the legend, create onClick and onTick functions for storyboard control
myChart.legends = [];
function onClick(e) {
story.pauseAnimation();
if (e.yValue === story.getFrameValue()) {
story.startAnimation();
} else {
story.goToFrame(e.yValue);
story.pauseAnimation();
}
}
function onTick(e) {
if (!firstTick) {
s.shapes
.transition()
.duration(frame/2)
.style("fill", function (d) { return (d.s1 === e ? selectedColor.fill : defaultColor.fill) })
.style("stroke", function (d) { return (d.s1 === e ? selectedColor.stroke : defaultColor.stroke) });
}
firstTick = false;
}
svg.selectAll("title_text")
.data(["| Click legend to","| select handedness","| or summary type"])
.enter()
.append("text")
.attr("x", 110)
.attr("y", function (d, i) { return 667 + i * 12; })
.style("font-family", "sans-serif")
.style("font-size", "10px")
.style("color", "Black")
.text(function (d) { return d; });
//Allows the legend to filter data by handedness
var filterValues = dimple.getUniqueValues(data, "handedness");
myLegend.shapes.selectAll("rect")
.on("click", function (e) {
var hide = false;
var newFilters = [];
filterValues.forEach(function (f) {
if (f === e.aggField.slice(-1)[0]) {
hide = true;
} else {
newFilters.push(f);
}
});
if (hide) {
d3.select(this).style("opacity", 0.5);
} else {
newFilters.push(e.aggField.slice(-1)[0]);
d3.select(this).style("opacity", 0.9);
}
filterValues = newFilters;
myChart.data = dimple.filterData(data, "handedness", filterValues);
myChart.draw(800);
});
});
</script>
</div>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment