-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_final.html
205 lines (175 loc) · 7.52 KB
/
index_final.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
<style>
/* Title */
h1 {
text-align: center;
}
h2 {
text-align: center;
}
/* Normal text */
div {
text-align: justify;
}
</style>
</head>
<body>
<script type="text/javascript">
// Defining the borders of the page
"use strict";
var margin = 90,
width = 1200 - margin,
height = 600 - margin;
function draw(data) {
// Chart heading added to visualisation
var title = d3.select("body")
.append("h1")
.text("What Matters in Baseball");
d3.select("body")
.append("div")
.style('margin', '4px')
.style('position', 'relative')
.text("Here I present a visual analysis on parameters that affect performance "
+ "of baseball players. The data I work with contains 1,157 baseball players including "
+ "their handedness (right or left handed), height (in inches), weight (in pounds), "
+ "batting average (BA), and home runs (HR). Based on the results, "
+ "the first plot conveys that players who are shorter, tend to score higher "
+ "on BA. The HR score seems to be consistent among players who are "
+ "between 70-to-75-inch tall, with a significant rise for players who "
+ "are 67-inch tall. "
+ "Based on the second plot, players with 168 pounds to 230 pounds have scored 80 "
+ "or higher HR. Among them the left-handed players seems to have more number of "
+ "higher scores for HR. Right-handed players come second. A few of the heaviest "
+ "players do not score any HR; probably because they are fielders.");
// Format the data:
var handDictionay = {};
handDictionay['L'] = 'Left Handed';
handDictionay['R'] = 'Right Handed';
handDictionay['B'] = 'Both Handed';
data.forEach(function(d) {
d.height = +d['height'];
d.weight = +d['weight'];
d.avg = +d['avg'];
d.HRsqrt = Math.sqrt(d['HR']);
d.HR = +d['HR'];
d.handedness = handDictionay[d.handedness]
});
// Draw the two visualizations
height_avg_hr(data);
handedness_HR(data);
};
// Plotting Batting Average(BA) based on players grouped by their Height
// For each Height group, plotting the average Home Runs(HR) as well
// Using a line plot to show the negative correlation between height and
// Batting Average(BA) scores. Using bubble chart to show the number of
// Home Runs(HR) scored by players based on their heights
function height_avg_hr(data) {
var svg = d3.select("body").append("svg")
.attr("width", width + (margin))
.attr("height", height + 20)
.append('g')
.style("font-size", "14")
.attr('class', 'chart');
svg.append("text")
.attr("x", 400)
.attr("y", 25)
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-weight", "bold")
.style("font-size", "15")
.text("Performance of BA and HR of players "
+ "based on their heights");
/*
Dimple.js Chart construction code
*/
var mychart = new dimple.chart(svg,data);
console.table(data);
mychart.setBounds(60, 30, 710, 450)
// The 1st element of the plot
var x = mychart.addCategoryAxis("x","height");
x.overrideMin = 65;
x.overrideMax = 80;
x.title = "Player's Height (inches)";
x.fontSize = "13px";
// The 2nd element of the plot
var y = mychart.addMeasureAxis("y","avg");
y.tickFormat = ',.2f'; // 2 decimal points
y.title = "Average Batting Performance of Players (avg)";
y.fontSize = "13px";
// The 3rd element of the plot
var z = mychart.addMeasureAxis("z", "HR");
// Control bubble sizes by setting the max and min values
z.overrideMin = 0;
z.overrideMax = 90;
// Aggregationg data based on Height
mychart.addSeries("Home Runs", dimple.plot.bubble)
.aggregate = dimple.aggregateMethod.avg;
mychart.assignColor("Home Runs", "#f6a25a");
// Aggregationg data based on average Home Runs(HR)
var line = mychart.addSeries("Batting average", dimple.plot.line);
line.aggregate = dimple.aggregateMethod.avg;
line.lineMarkers = true;
mychart.assignColor("Batting average", "#254654");
// Show a legend
mychart.addLegend(400, 50, 400, 50, "right");
// Draw the plot
mychart.draw();
};
// Plotting weight agianst Home Runs(HR) to observe if there is
// any correlation. Also, faceting the players based on their
// handedness. Used a scatter plot to show number of Home Runs(HR)
// based on weight. Used colors to differenciate the players based
// on their handedness: Right-handed, Left-handed and Both-handed
function handedness_HR(data) {
var svg = d3.select("body").append("svg")
.attr("width", width + (margin))
.attr("height", height + 20)
.append('g')
.style("font-size", "14")
.attr('class', 'chart');
svg.append("text")
.attr("x", 400)
.attr("y", 15)
.style("text-anchor", "middle")
.style("font-family", "sans-serif")
.style("font-weight", "bold")
.style("font-size", "15")
.text("Performance of HR of players "
+ "based on their weights and handedness");
/*
Dimple.js Chart construction code
*/
var mychart = new dimple.chart(svg,data);
console.table(data);
mychart.setBounds(60, 30, 710, 450)
// The 1st element of the plot
var x = mychart.addMeasureAxis("x","weight");
x.overrideMin = 140;
x.overrideMax = 250;
x.title = "Player's Weight (pounds)";
x.fontSize = "13px";
// The 2nd element of the plot
var y = mychart.addMeasureAxis("y","HR");
y.title = "Home Runs(HR) Based on Player's Weight";
y.fontSize = "13px";
// Aggregationg data based on Handedness
var series = mychart.addSeries(["weight","handedness"], dimple.plot.scatter);
series.aggregate = dimple.aggregateMethod.avg;
mychart.assignColor("Right Handed", "#e96f4c", "#e96f4c",1);
mychart.assignColor("Left Handed", "#219e8f","#219e8f",1);
mychart.assignColor("Both Handed", "#eac563","#eac563",1);
// Show a legend
mychart.addLegend(380, 20, 400, 50, "right");
// Draw the plot
mychart.draw();
};
//Set up and read data from CSV file and draw chart
d3.csv("baseball_data.csv", draw)
</script>
</body>
</html>