-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (134 loc) · 6.38 KB
/
index.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
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Argumentative Vis - CSE 578 - Spring 2023</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="js/main.js"></script>
<style>
.myContainer {
margin:auto;
width:1210px;
}
#bar_div, #pie_div {
float:left;
width:600px;
padding:10px;
}
#bar_div {
float:right;
}
svg {
width: 580px;
height:400px;
background-color: white;
border: 1px solid lightgray;
border-radius: 3px;
}
.tooltip {
position: absolute;
width: 100px;
height:60px;
border: 2px solid black;
background-color: white;
border-radius: 10px;
}
#tooltip {
background-color: red;
}
.in-support{
background-color: #87ab87;
}
.ag-support{
background-color: #e5a3a3;
}
.text-justify{
text-align: justify;
text-justify: inter-word;
}
.grey-back{
background-color: #fff5d7;
}
</style>
</head>
<body>
<div class="myContainer">
<h4 class="text-center">Argumentative Vis</h4>
<h6 class="text-center">Kaustuv Mukherji - [email protected]</h6>
<hr>
<div class="row grey-back">
<h2 class="text-center" style="font-family: cursive, Georgia, serif;">FIFA World Cup: Impact of venues on match results</h2>
<h5 class="text-center" style="font-family: serif;"><i>(hover to see details)</i></h5>
</div>
<div class="row">
<div class="col in-support">
<h4 class="text-center" style="font-family: Georgia, serif;">Teams playing at home are way more likely to win!</h4>
<svg id="for_svg"></svg>
<h6 style="text-align:right" style="font-family: serif;">*Matches at non-neutral venues only.</h6>
</div>
<div class="col ag-support" style="font-family: Georgia, serif;">
<h4 class="text-center">"Home Advantage" is overrated!</h4>
<svg id="against_svg"></svg>
</div>
</div>
<div class="row">
<div class="col in-support">
<h5 class="text-left" style="font-family: Georgia, serif;">From 1930 to 2022, in World Cup games
played in the home nation of one of the teams, the home team has
come up trumps 74% of the time. </h5>
</div>
<div class="col ag-support">
<h5 class="text-left" style="font-family: Georgia, serif;">The concept of "home advantage" popularized by
club football does not translate over to international world cup football
with only 58% home wins over the years (1930 - 2022). </h5>
</div>
</div>
<div class="row grey-back">
<p class="text-justify">
<b>Topic:</b> Does home advantage matter in football? (it's Football, not Soccer!).
</p>
<p class="text-justify">
<b>Dataset:</b> International football results from 1872 to 2022. <a href="https://www.kaggle.com/datasets/martj42/international-football-results-from-1872-to-2017?resource=download&select=results.csv">Link</a>
</p>
<p class="text-justify">
<b>Description:</b> Typically, a team is said to be "playing at home",
if the match is hosted at their local stadium.
It is often argued that the home team gets an advantage because of
(a) their familiarity with the playing conditions, weather, etc.,
(b) vocal support from the majority of the crowd.
However, technically in each match one team is seeded as the home team, even if the match
is at a neutral venue, or hosted without fans in attendance. This is particularly
true for World Cup football where most games are played between teams foreign to the
host nation.
</p>
<p class="text-justify">
<b>Personal Opinion:</b> The visualization on the right
considers all world cup games, the majority of which fall under these
"neutral" games category where even though one team is marked as
"home team" officially, they do not enjoy any benefits and so,
the results of this visual is misleading. In comparison, the visual
on the right is more appropriate.
</p>
</div>
<div class="row">
<div class="col in-support">
<p class="text-justify">
<b>Technique used:</b> Omission.
<br>
By removing data points for all matches played in neutral venues, this visualization
shows significant "home advantage" albeit on a subset of the entire dataset (99 matches out of 750).
</p>
</div>
<div class="col ag-support">
<p class="text-justify">
<b>Technique used:</b> Obscuring.
<br>
Shows that "home advantage" is not so significant by including data points from all matches.
This is obscuring in a way as it considers matches played on neutral venues with no home advantage.
In fact, most of the data points (651 of 750) are from neutral matches.
</p>
</div>
</div>
</div>
</body>
</html>