-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (148 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- // <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Roboto" rel="stylesheet">
<title>Surprise Marriages</title>
</head>
<body>
<div class="container">
<h1>Surprise Marriages</h1>
<p>Marriage can be a mysterious thing. What drives people to get together? There have been <a href="https://www.bloomberg.com/graphics/2016-who-marries-whom/">several</a> <a href="http://flowingdata.com/2017/08/28/occupation-matchmaker/">visualizations</a> examining marriage dynamics through the lens of occupations. I want to explore this topic from a different perspective. Instead of simply visualizing who a plumber or a CEO is most likely to marry, I want to see if there are any factors driving these kinds of pairings.</p>
<p>Let's begin by looking at the most common matchups between occupations.</p>
<h2>Most Common Marriages</h2>
<p>Below are the jobs husbands and wives hold for the top 25 most frequently observed pairings. Rather than comparing specific job titles between spouses, let's instead examine the popularity of those jobs. Circles farther to the left indicate that the husband or wife works in a more popular job among workers of their gender. (Since men and women tend to work in different occupations, it's important to look at job frequency between the two sexes separately.)</p>
<div class="plot full-reveal" id="cplot"></div>
<!-- <input type="button" value="Show More Couples" id="toggle"> -->
<p>As we can see, almost all of these couples have a spouse employed in a highly popular occupation. Therefore, seeing so many marriages between these workers would be expected as there are simply lots of people who have these jobs.</p>
<p>Just looking at marriages based on their absolute frequency doesn't seem to shed much light on why people tend to marry one another. The most commonly observed matches are due to the fact that some jobs employ a much higher share of the population than others. Thus we should try to identify marriages that are particularly surprising rather than just very common.</p>
<h2>Most Surprising Marriages</h2>
<p>One way of thinking about which marriages are surprising is by asking which pairings occur more often than we would expect. For this, I am going to apply the concept of <a href="https://medium.com/@uwdata/surprise-maps-showing-the-unexpected-e92b67398865">Bayesian surprise</a>. In a perfectly random world, the likelihood that a man marries a woman who works as a secretary, for example, would be equal to the percentage of all working women who are employed as secretaries. If 5% of women are secretaries then we would expect 5% of marriages to be to a female secretary. Is this in fact what we see?</p>
<p>The plots below compares the percent of spouses in each occupational pairing who hold a particular job with the share of the overall population of workers employed in that profession. Pairings that fall on the dotted line are ones where the share of spouses is equal to the share of all workers with that occupation.</p>
<div class="wrapper plot">
<div class="box" id="splot1"></div>
<div class="box" id="splot2"></div>
</div>
<p>It seems the frequency of most matchups is roughly similar to what we would have expected. But there are some pairings that occur at a much higher rate - we might consider these to be "surprising" marriages. Let's take a deeper look at these couples.</p>
<div class="graphic" id="surprise">
<div class="graphic__prose">
<p class="trigger" data-step="0">This row represents husbands who are chief executives or legislators.</p>
<p class="trigger" data-step="1">Each row represents a different job for the husband.</p>
<p class="trigger" data-step="2">This column represents wives who are chief executives or legislators.</p>
<p class="trigger" data-step="3">Each column represents a different job for the wife.</p>
<p class="trigger" data-step="4">Since marriages where both the husband and wife are chief executives or legislators happens more often than we would expect, the square for that occupational combination is filled in. The color means both spouses work in the field of management.</p>
<p class="trigger" data-step="5">Each filled-in square indicates that marriages between these occupations occur more frequently than we would expect. Spouses who work in the same field are filled with a color representing that field. Grey squares mean the spouses work in different fields.</p>
<p class="trigger" data-step="6"></p>
</div>
<div class="graphic__vis" id="splot3"></div>
</div>
<p>As we can see, many of these matches are between spouses who have the same job or work in the same field. This seems to suggest that people choose to marry either those who have similar interests to themselves or who they encounter frequently at the office.</p>
<p>Another interesting pattern that jumps out is that of the remaining surprise marriages not between spouses in the same field, there are a few professions that seem to be chosen as spouses particularly frequently. For women, elementary and middle school teachers tend to marry at a higher rate than their share of the population would suggest while for men, it is miscellaneous managers who are particularly likely to get married.</p>
<p>This leads to one last interesting observation about the dynamics of marriage - which occupations are more likely to marry and which are more likely to stay single?</p>
<h2>Occupations Most and Least Likely to Marry</h2>
<p>It appears that not all workers are equally likely to get married. Certain jobs such as teachers and secretaries for women or software developers and mechanics for men seem to make for particularly appealing spouses while other professions such as cashiers, home health aides, and maintenance workers account for a smaller share of spouses than their numbers would suggest.</p>
<p>Below is a look at some of the most popular jobs for women and men that get married at noticeably higher or lower rates.</p>
<div class="plot" id="diff_plot_w">
<h3>Female Workers Most and Least Likely to Marry</h3>
<svg class="legend" width="900" height="30">
<line x1="250" x2="270" y1="8" y2="8" stroke="#DF744A" stroke-width="2"></line>
<text x="275" y="8" dy="4" style="font-size:14px; fill:#DF744A">Share of female workers</text>
<circle cx="500" cy="8" r=7 style="fill:#bdbdbd; opacity:0.5"></circle>
<text x="515" y="8" dy="4" style="font-size:14px">One occupational pairing</text>
</svg>
</div>
<div class="plot" id="diff_plot_h">
<h3>Male Workers Most and Least Likely to Marry</h3>
<svg class="legend" width="900" height="30">
<line x1="250" x2="270" y1="8" y2="8" stroke="#609e8f" stroke-width="2"></line>
<text x="275" y="8" dy="4" style="font-size:14px; fill:#609e8f">Share of male workers</text>
<circle cx="500" cy="8" r=7 style="fill:#bdbdbd; opacity:0.5"></circle>
<text x="515" y="8" dy="4" style="font-size:14px">One occupational pairing</text>
</svg>
</div>
<p>Roughly speaking, it appears that workers in more white-collar professions tend to get married at higher rates. This would support studies showing how marriage has become increasingly <a href="http://www.usnews.com/news/blogs/data-mine/2015/10/26/marriage-and-the-growing-class-divide">associated with socioeconomic status</a>.</p>
<p>Marriage certainly can't be reduced to numbers and no statistical analysis can explain what causes people to choose one another but looking at data on the occupations of married couples can help uncover some interesting patterns. At the end of the day, marriage is a very complex decision that is influenced by many factors.</p>
<h2>Appendix</h2>
<p>Find out who people are most likely to marry by occupation:</p>
<div id="occselector">
<select id="sexselect"></select> is a <select id="occselect"></select>
</div>
<div class="plot" id="appendix_plot">
<p>Most likely to marry:</p>
</div>
<p>Note: Pairings with fewer than 10 observations were excluded.</p>
<p>Data Sources: 2014 American Community Survey, Bureau of Labor Statistics Employment Projections 2012-13, Current Population Survey 2015, Occupational Employment Statistics Survey 2015.</p>
<p>© 2017. Designed by <a href="mailto:feng.a.g@gmail.com">fleecealeece</a>.</p>
</div>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="js/d3-tip-v0.6.7.js"></script>
<script type="text/javascript" src="js/jquery.scrollstory.min.js"></script>
<script type="text/javascript" src="js/most_common.js"></script>
<script type="text/javascript" src="js/likely_to_marry.js"></script>
<script type="text/javascript" src="js/most_surprising.js"></script>
<script type="text/javascript" src="js/diff_plot.js"></script>
<script type="text/javascript" src="js/surprise.js"></script>
<script>
// // button to toggle between how much of common marriages plot to show
// $(document).ready(function () {
// $("#toggle").click(function () {
// $("#cplot").toggleClass('full-reveal');
// if ($(this).val() == "Show More Couples") {
// $("#toggle").val("Show Fewer Couples");
// }
// else {
// $("#toggle").val("Show More Couples");
// }
// });
// });
// implement scrollstory
$(function() {
// select elements using jQuery since it is a dependency
var $graphicEl = $('#surprise');
var $graphicVisEl = $graphicEl.find('#splot3');
// viewport height
var viewportHeight = window.innerHeight;
var halfViewportHeight = Math.floor(viewportHeight / 2);
// handle the fixed/static position of grahpic
var toggle = function(fixed, bottom) {
if (fixed) $graphicVisEl.addClass('is-fixed')
else $graphicVisEl.removeClass('is-fixed')
if (bottom) $graphicVisEl.addClass('is-bottom')
else $graphicVisEl.removeClass('is-bottom')
}
// callback function when scrollStory detects item to trigger
var handleItemFocus = function(event, item) {
var step = item.data.step
updateGraph(step);
}
// callback on scrollStory scroll event
// toggle fixed position
var handleContainerScroll = function(event) {
var bottom = false
var fixed = false
var bb = $graphicEl[0].getBoundingClientRect()
var bottomFromTop = bb.bottom - viewportHeight
if (bb.top < 0 && bottomFromTop > 0) {
bottom = false
fixed = true
} else if (bb.top < 0 && bottomFromTop < 0) {
bottom = true
fixed = false
}
toggle(fixed, bottom)
}
$graphicEl.scrollStory({
contentSelector: '.trigger',
triggerOffset: halfViewportHeight,
itemfocus: handleItemFocus,
containerscroll: handleContainerScroll,
})
});
</script>
</body>
</html>