-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (126 loc) · 6.32 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
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<title>/r/nba Survey on Online Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1" />-->
<link rel="shortcut icon" type="image/x-icon" href="/~sarikaya/favicon.ico" />
<!-- boostrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" />
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="flair.css" />
<style type="text/css">
body {
font-family: "Fira Sans", Arial, Helvetica, sans-serif
}
h4 {
font-weight: 400;
}
.navbar-brand > img {
position: relative;
top: -7px;
padding-right: 15px;
}
.container > div {
padding-top: 50px;
}
.expl {
margin: 15px 0 35px;
}
g.bars > rect {
stroke: #ccc;
stroke-width: 1;
}
.axis path, .axis line {
fill: none;
stroke: #222;
}
.tick text {
font-size: 12px;
}
.tick line {
opacity: 0.2;
}
.categ > tspan {
text-anchor: middle;
}
h4 {
color: #aaa;
font-size: 14px;
margin-bottom: 15px;
}
.sigLine {
stroke: #666;
stroke-width: 1;
fill: transparent;
shape-rendering: crispEdges;
}
g.sigs > rect, g.teamlabel > rect, g.bandwagon > rect {
fill: #fff;
stroke: transparent;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="icon.png" class="img-responsive pull-left">
/r/nba Survey on Online Community
</a>
</div>
<div class="colapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#questionContainer">Survey Questions</a></li>
<li><a href="#anovaContainer">Survey Statistics</a></li>
<li><a href="#teamContainer">Team Bandwagoning</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li><a href="https://www.reddit.com/r/nba/comments/3tuvh6/help_me_understand_online_communication_in_rnba/" target="_blank">Original Thread</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="questionContainer">
<h1>Survey Questions</h1>
<div class="expl">
<p>The below graphs show the 731 responses to the <a href="https://www.reddit.com/r/nba/comments/3tuvh6/help_me_understand_online_communication_in_rnba/" target="_blank">original survey</a>.</p>
<p>The first two questions bin a response and are the independent variables for the statistical analysis later. The next six questions concern how up-to-date people feel to the NBA. The next five gauge social connections to the NBA environment on /r/nba. The last six questions concern engagement with NBA basketball.</p>
</div>
</div>
<div id="anovaContainer">
<h1>Survey Statistics</h1>
<div class="expl">
<p>Given how people <strong>participate in other online communities</strong> (lighter shade does not, darker does) and <strong>talks basketball in daily life</strong> (blue does not talk, green does), how does that affect how people interact and feel current with the NBA?</p>
<p><em>Statistical bullshit:</em> Although the questions were designed to elicit responses on three scales (current with NBA, interaction in /r/nba, feeling a part of the NBA community), factor analysis yielded five unique scales (from no inflection point in the Scree test, so utilizing the Kaiser criterion yielded five components with eigenvalues above 1.0). None of the scales met the threshold for Chronbach's α of 0.7 (0.68, 0.67, 0.54, 0.51, 0.51), probably because this was my first time trying to write consistent questions for a survey.</p>
<p>Since the survey was a between-subjects design (a person can only answer questions from a unique combination of independent variables), a two-way ANOVA was performed for all five scales. Two of the scales (below) yielded statistically significant differences between groups. Red error bars show standard error. Significance with p < 0.05 are shown in red.</p>
</div>
</div>
<div id="teamContainer">
<h1>Team Bandwagoning</h1>
<div class="expl">
<p>People have favorite teams, but they also like to root for other teams. Which teams have fans who are jumping on the bandwagon, and which people are jumping ship?</p>
<p><strong>Mouseover (or tap on mobile) the team logos</strong> (ordered by each axis) to highlight the corresponding line. The left axis describes the number of people who have that team as their favorite, and the right axis has the number of people rooting for that team this year. The higher the slope of the line, the more the bandwagon effect.</p>
</div>
</div>
<footer style="clear: both;">
© 2016 Alper Sarikaya — <a href="https://github.com/yelper/r-nba-survey-results/blob/master/LICENSE" target="_blank">MIT License</a>. TypeScript code available at the <a href="https://github.com/yelper/r-nba-survey-results" target="_blank">GitHub repo</a>.
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="colorbrewer.js"></script>
<script type='text/javascript' src="app.js"></script>
</body>
</html>