Created
October 8, 2016 00:23
-
-
Save rakmial/e6977331fd96ced35a513d7e253cda6e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> | |
var svg = dimple.newSvg("#chartContainer", 950, 700); | |
d3.csv("/bbsummaries.csv",function (data) { | |
dimple.filterData(data,"handedness",["L","R"]); | |
var summarycontrol = new dimple.chart(svg,data); | |
var defaultColor = summarycontrol.defaultColors[0]; | |
var selectedColor = summarycontrol.defaultColors[2]; | |
var framerate = 3000; | |
var firstTick = true; | |
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(); | |
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); | |
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(); | |
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; }); | |
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