-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
226 lines (194 loc) · 7.95 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Viz Cupid</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<h1 class="header">
Tracing Dating, Marriage, and Everything In-Between
</h1>
<div class="img-container">
<img src="img/heart3.svg" class="heart" />
<div class="centered">
<h1 id="heart-text1">
Love touches all of us, yet there is so much uncertainty around the
evolution of relationships.
</h1>
</div>
</div>
<img src="img/arrow-cupid.png" id="arrow" />
<div class="img-container">
<img src="img/heart3.svg" class="heart" />
<div class="centered">
<h1 id="heart-text2">
<h1>
A 2017 national <a href="https://data.stanford.edu/hcmst2017">survey</a> by Stanford, "How Couples Meet and Stay
Together," shows some surprising trends about couples in America.
<br />
</h1>
</h1>
</div>
</div>
<img src="img/arrow-cupid.png" id="arrow" />
<div class="img-container">
<img src="img/heart3.svg" class="heart" />
<div class="centered">
<h1 id="heart-text2">
<h1>
Let's analyze these relationship
trends through the visualizations below. Our data comes from 3,510 respondents.
</h1>
</h1>
</div>
</div>
<hr />
<div class="container-fluid">
<h1>
Divorced Couples Tend to Have Larger Age Differences than Married Ones
</h1>
<p></p>
<h3>
Below, each point represents a couple, with age of each survey
respondent plotted against their partner's age. To view detailed
information about the age and marital status of each respondent and
the partner, hover over the circles on the visualization.
</h3>
<form class="form-inline">
<div class="form-group">
<label for="ranking-type">Filter by Marital Status</label>
<select class="form-control" id="ranking-type">
<option value="all_attributes">All attributes</option>
<option value="Living with partner">Living with partner</option>
<option value="Married">Married</option>
<option value="Never married">Never married</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
<option value="Divorced">Divorced</option>
</select>
</div>
</form>
<div id="age-vis"></div>
<h3>
Here, we see that there is indeed a significant difference between
couples who are many years apart in age and those that are closer in
age in terms of marital status. Couples with similar ages lie more
closely along the diagonal.
</h3>
</div>
<hr />
<!--MATRIX VISUALIZATION-->
<div class="container-fluid">
<h1>
High Relationship Quality Despite Frequency of Sex
</h1>
<h3>
However, those who find their relationships excellent tend to have sex
3-6 times a week, with once a month or less coming second. Select a scale basis from the drop-down:
the default "overall data" selection will scale the chart over all responses. When you select the scale based on the frequency
categories, you will find that the respondents tend to rate their relationships as excellent. Then, when you
select the scale based on the quality categories, you'll see that there is a high amount of respondents
who have sex once a month or less.
</h3>
<!-- Select box to choose the ranking type -->
<form class="form-inline">
<div class="form-group">
<label for="ranking-type">Make scale based upon </label>
<select class="form-control" id="matrix-ranking-type">
<option value="across_all_freqs">overall data</option>
<option value="across_this_freq">frequency categories</option>
<option value="across_qualities">quality categories</option>
</select>
</div>
</form>
<div class="row">
<div class="col-md-12" id="matrix-vis"></div>
<h3>
We see that the respondents tended to rate their relationships
excellent regardless of sex frequency, and there is not a clear
trend. The data also suggest that very few couples will have a
frequency of more than twice a week.
</h3>
</div>
</div>
<hr />
<div class="container-fluid">
<h1>Time Spent Dating Before Marriage</h1>
<h3>
How to Read:
Here, we plot the first 500 couples based on the year they met for the first time.
Each circle represents the start of one of four stages in a relationship.
<br>
<p></p>
Interactivity: Hover over circles, scroll or double click to zoom, and click and drag the visualization.
Use the brushing component on the area chart below it.
</h3>
<div id="timeline-vis-scale"></div>
<div id="timeline-vis"></div>
<div id="time-area-vis"></div>
<h3>
One couple dated for thirty some years before finally getting married,
but most other couples did not take nearly as long. Another couple
went through meeting each other and getting married within a year. On
average we see that most respondents dated for less than 6 years
before getting married.
</h3>
</div>
<hr />
<div class="img-container">
<img src="img/heart3.svg" class="heart" />
<div class="centered">
<h1 id="heart-text2">
<h1>
From these visualizations, we can conclude that age differences,
frequency of sex, and time spent dating does have a noticeable effect of relationship outcomes.
<br />
</h1>
</h1>
</div>
</div>
<img src="img/arrow-cupid.png" id="arrow" />
<div class="img-container">
<img src="img/heart3.svg" class="heart" />
<div class="centered">
<h1 id="heart-text2">
<h1>
Now, the only question left is: <br>
Where does <em>your</em> relationship lie on each of these visualizations? <br>
And where will your<br>
relationship go?
</h1>
</h1>
</div>
</div>
<div>
<h4>Dataset citation:</h4>
Rosenfeld, Michael J., Reuben J. Thomas, and Sonia Hausen. 2019 How Couples Meet and Stay Together 2017 fresh sample.
[Computer files]. Stanford, CA: Stanford University Libraries.
</div>
</div>
<!-- Load JS libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/queue.min.js"></script>
<script src="js/d3.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="js/d3-tip.js"></script>
<script src="js/dateformat.js"></script>
<!-- Visualization objects -->
<script src="js/matrixvis.js"></script>
<script src="js/age_difference.js"></script>
<script src="js/timelinevis.js"></script>
<script src="js/timeareavis.js"></script>
<!-- Load data, create visualizations -->
<script src="js/main.js"></script>
</body>
</html>