-
Notifications
You must be signed in to change notification settings - Fork 0
/
narration.html
323 lines (256 loc) · 12.6 KB
/
narration.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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Narration web | Ballé - Fort</title>
<script src="https://d3js.org/d3.v4.js"></script>
<link rel="stylesheet" type="text/css" href="narration.css">
</head>
<body>
<h1>Le All-Star Game NBA entre 2000 à 2016</h1>
<h2>Présentation du jeu de données</h2>
<p>Le jeu de données utilisé regroupe les informations sur les joueurs ayant participés aux All-Star Games de NBA entre les années 2000 et 2016. Ces informations regroupent pour chaque joueur leur équipe, leurs informations physiques et les informations sur leur draft.
</br></br>
Nous nous sommes donc intéréssés à ce jeu de données afin de voir si durant ces 17 années, des tendances se dégageaient dans le style de jeu en mettant en avant les données physiques des joueurs. De plus, nous allons nous intéréssés aux joueurs et équipes les plus représentés lors de ces 17 années.</p>
<h2>Les équipes présentes aux All-Star Games</h2>
<p>La première question à laquelle nous avons voulu répondre est celle des équipes et de leur représentation sur les 17 All-Star Games.
</br></br>
L'histogramme présenté comporte donc les 34 équipes et le nombre de joueurs appelés aux All-Star Game. Les 17 années sont séparées en 4 périodes, qui permettent de se rendre compte de la domination des équipes sur certaines périodes.
</br></br>
On peut notamment voir que les Phoenix Suns ont connu Une très bonne période de 10 ans entre 2000 et 2011. Cependant, ils n'ont plus aucune séléction depuis cette année là. Au contraire, on s'aperçoit que les Golden State Warriorsn'ont connu des séléctions que depuis 2012, mais avec un grand nombre de séléctions. Cela permet donc d'appuyer leurs récentes performances.</p>
<div id="teams"></div>
<h2>Les joueurs présents aux All-Star Games</h2>
<p>
Dans ce nouvel histogramme, on peut observer les joueurs ayant été sélectionnés avec une équipe en particulier. Pour cela, il suffit de cliquer sur une des équipes sur le graphe précédent. Cela va charger les données sur les joueurs ayant joués pour cette équipe et comptant au moins une sélection au All-Star Game.
</p>
<div id="players"></div>
<h2>La masse des joueurs lors des All-Star Games</h2>
<p>Nous allons maintenant passer à la troisième et dernière question qui est sur le physique des joueurs et l'évolution potentielle du style de jeu et des tendances annuelles.
</br></br>
Ici, nous pouvons observer la masse en kilogrammes des joueurs. Tout comme le premier histogramme, les 17 années sont découpées en 4 périodes. La première information qui ressort est que la dernière période, entre 2012 et 2016, est moins éparpillée en termes de masses. Cela peut s'expliquer par la normalisation des joueurs, ou aujourd'hui les meneurs peuvent être très grands par exemple, et donc plus lourd. Nous allons voir si cette tendance s'accentue avec les tailles dans la page suivante.</p>
<div id="weight"></div>
<h2>Le taille des joueurs lors des All-Star Games</h2>
<p>
Nous avons donc maintenant la taille des joueurs sélectionnés aux All-Star Games. Mis à part un joueur qui se trouve dans la tranche entre 1 mètre 74 et et 1 mètre 77, on peut voir que la tendance récente de l'uniformisation des joueurs se confirme. Les tailles entre 2 mètres et 2 mètres 13 sont donc un peu plus représentées dans les 4 dernières années.
</br></br>
Les postes de joueurs sont donc maintenant beaucoup moins liés aux physiques des joueurs. Un joueur grand peut très bien être au poste de meneur, tandis qu'il n'aurait jamais pu le faire quelques années auparavant.
</p>
<div id="height"></div>
<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
width = 1000 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svgTeams = d3.select("#teams")
.append("svg")
.attr("width", width+ 800 + margin.left + margin.right)
.attr("height", height+ 100+ margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var svgPlayers = d3.select("#players")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + 50 + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var svgWeight = d3.select("#weight")
.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 + ")");
var svgHeight = d3.select("#height")
.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 + ")");
// Parse the Data
d3.tsv("data.tsv", function(data) {
var actualTeam = "Golden State Warriors";
var map = new Map();
var teamsNumbers = new Map();
var playersNumbers = new Map();
var weightNumbers = new Map();
var heightNumbers = new Map();
data.forEach(element => {
if (teamsNumbers.has(element.Team)) {
teamsNumbers.set(element.Team, teamsNumbers.get(element.Team)+1);
} else {
teamsNumbers.set(element.Team, 1);
}
if (playersNumbers.has(element.Player)) {
map = playersNumbers.get(element.Player);
if (map.has(element.Team)) {
playersNumbers.set(element.Player, map.set(element.Team, map.get(element.Team)+1));
} else {
playersNumbers.set(element.Player, map.set(element.Team,1));
}
} else {
playersNumbers.set(element.Player, new Map().set(element.Team,1));
}
if (weightNumbers.has(element.WeightClass)) {
weightNumbers.set(element.WeightClass, weightNumbers.get(element.WeightClass)+1);
} else {
weightNumbers.set(element.WeightClass, 1);
}
if (heightNumbers.has(element.HeightClass)) {
heightNumbers.set(element.HeightClass, heightNumbers.get(element.HeightClass)+1);
} else {
heightNumbers.set(element.HeightClass, 1);
}
});
var playersArr = new Map();
sortedTeams = Array.from( teamsNumbers.entries() ).sort(function(b, a) {
return a[1] - b[1];
});
var teamsNames = new Array();
sortedTeams.forEach(element => {
teamsNames.push(element[0]);
})
sortedWeight = Array.from( weightNumbers.entries() ).sort(function(b, a) {
return b[0] - a[0];
});
var WeightNames = new Array();
sortedWeight.forEach(element => {
WeightNames.push(element[0]);
})
sortedHeight = Array.from( heightNumbers.entries() ).sort(function(b, a) {
return b[0] - a[0];
});
var HeightNames = new Array();
sortedHeight.forEach(element => {
HeightNames.push(element[0]);
})
/* Teams */
var x = d3.scaleBand()
.range([ 0, width ])
.domain(teamsNames)
.padding(0.2);
svgTeams.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 30])
.range([ height, 0]);
svgTeams.append("g")
.call(d3.axisLeft(y));
// Bars
svgTeams.selectAll("mybar")
.data(sortedTeams)
.enter()
.append("rect")
.attr("x", function(d) { return x(d[0]); })
.attr("y", function(d) { return y(d[1]); })
.attr("width", x.bandwidth())
.attr("height", function(d) { return height - y(d[1]); })
.attr("fill", "#cf2500").on("click",function(d){
actualTeam = d[0];
updatePlayers();
})
/* PLayers */
function updatePlayers() {
svgPlayers.selectAll("*")
.remove()
playersArr.clear();
Array.from(playersNumbers.entries()).forEach(element => {
if (element[1].has(actualTeam)) {
playersArr.set(element[0], element[1].get(actualTeam));
}
});
console.log(playersArr);
// Barsvar
x1 = d3.scaleBand()
.range([ 0, width ])
.domain(Array.from(playersArr.keys()))
.padding(0.2);
svgPlayers.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x1))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Add Y axis
var y1 = d3.scaleLinear()
.domain([0, Math.max(...playersArr.values())])
.range([ height, 0]);
svgPlayers.append("g")
.call(d3.axisLeft(y1));
svgPlayers.selectAll("mybar")
.data(Array.from( playersArr.entries() ))
.enter()
.append("rect")
.attr("x", function(d) { return x1(d[0]); })
.attr("y", function(d) { return y1(d[1]); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y1(d[1]); })
.attr("fill", "#2e00a7")
}
updatePlayers();
/* Weight */
var x2 = d3.scaleBand()
.range([ 0, width ])
.domain(WeightNames)
.padding(0.2);
svgWeight.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x2))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Add Y axis
var y2 = d3.scaleLinear()
.domain([0, 100])
.range([ height, 0]);
svgWeight.append("g")
.call(d3.axisLeft(y2));
// Bars
svgWeight.selectAll("mybar")
.data(sortedWeight)
.enter()
.append("rect")
.attr("x", function(d) { return x2(d[0]); })
.attr("y", function(d) { return y2(d[1]); })
.attr("width", x2.bandwidth())
.attr("height", function(d) { return height - y2(d[1]); })
.attr("fill", "#009431")
/* Height */
var x3 = d3.scaleBand()
.range([ 0, width ])
.domain(HeightNames)
.padding(0.2);
svgHeight.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x3))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Add Y axis
var y3 = d3.scaleLinear()
.domain([0, 100])
.range([ height, 0]);
svgHeight.append("g")
.call(d3.axisLeft(y3));
// Bars
svgHeight.selectAll("mybar")
.data(sortedHeight)
.enter()
.append("rect")
.attr("x", function(d) { return x3(d[0]); })
.attr("y", function(d) { return y3(d[1]); })
.attr("width", x3.bandwidth())
.attr("height", function(d) { return height - y3(d[1]); })
.attr("fill", "#f1bb00")
})
</script>
</body>
</html>