-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
206 lines (196 loc) · 16.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OkCupid Drug Data</title>
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/main.css" rel="stylesheet">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="dist/js/okc-charts.js"></script>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="jumbotron">
<a href="index.html"><span class="customh1" text-align="center"><h1>OkCupid Drug Data</h1></span></a>
<h2>A series of charts analyzing the differences between <b>45,866</b> Bay Area <a href="http://www.okcupid.com/"><b>OkCupid</b></a> users that reported using drugs <b><i>often</i></b>, <b><i>sometimes</i></b>, or <b><i>never</i></b>.</h2>
<h4>Anonymized <a href="https://eric.ed.gov/?id=EJ1070114">raw data</a> collected by Albert Y. Kim and Adriana Escobedo-Land with permission in June 2012. <a href="clean-data.xlsx" download> Clean data</a> assembled by Angelica Walker on Februrary 8th, 2017.</h4>
<h4>It is important to note that self-reported data may lead to inaccuracies. However, this data provides a strong picture of how users wish to be perceived by potential dates.</h4>
<p></p>
<div class="container">
<div class="textbox1">
<h3>Age</h3>
<p style="margin-bottom: 30px">As expected, users that report using drugs are much younger on average.</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="AgeOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="AgeSometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="AgeNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="textbox2">
<h3>Race</h3>
<p>While being Black or Hispanic increases the likelihood of doing drugs "often", there is virtually no difference in race between people who use drugs "sometimes" and "never".</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="RaceOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="RaceSometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="RaceNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
<h4>Races are divided into 10 categories: White, Black, Hispanic / Latinx, Indian, Middle Eastern, Pacific Islander, Asian (non-I/ME/PI), Native American, Black/White, and Other. "Other" category includes any multiracial identities besides Black/White, as well as people who self-reported "Other". It does not include people who refused to answer.</h4>
</div>
</div>
<div class="container">
<div class="textbox3">
<h3>Religion</h3>
<p>As expected, religion has a large impact on whether or not a user will use drugs. People who use drugs are much more likely to identify as agnostic or atheist. Surprisingly, however, people who use drugs "often" are more likely to belong to organized religions than those who use drugs "sometimes."</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="ReligionOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="ReligionSometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="ReligionNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="textbox4">
<h3>Drinking Habits</h3>
<p>For alcohol consumption, we see a large difference in users who report using drugs "often" but, as with our race data, a relatively small gap between users that use drugs "sometimes" and "never."</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="DrinkingOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="DrinkingSometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="DrinkingNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="textbox5">
<h3>Sexual Orientation</h3>
<p>Interestingly, people who "never" use drugs are both the most likely identify as gay and the least likely to identify bisexual. This may be because people unwilling to publicly admit that they use drugs are more likely to hide or suppress their bisexuality.</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="OrientationOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="OrientationSometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="OrientationNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="textbox6">
<h3>Industry</h3>
<p>People who "never" use drugs are more likely to work in traditional office jobs, while those who use drugs "sometimes" or "often" are much more likely to work in creative careers. People who use drugs "sometimes" are the most likely to work in the tech industry. Using drugs "often" makes you more likely to be a student, unemployed, or - more interestingly - retired.</p>
<div class="container">
<div class="row">
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="IndustryOften" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="IndustrySometimes" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="IndustryNever" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<p>The following charts ignore users who are not working or did not specify an industry:</p>
<div class="col-lg-4">
<td><h3 style="margin-bottom: -80px">Often</h3><div id="IndustryOften2" style="width: 300; height: 400px; margin-bottom: -80px"></div></td>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Sometimes</h3><div id="IndustrySometimes2" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
<div class="col-lg-4">
<h3 style="margin-bottom: -80px">Never</h3><div id="IndustryNever2" style="width: 300; height: 400px; margin-bottom: -80px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="textbox1">
<div class="container">
<div class="container">
<div class="container">
<h3>Artist Statement</h3>
<span style="text-align: right">
<p class="statement"> For years, I have been interested in debunking commonly held stereotypes of drug users. Users and addicts are commonly portrayed as lazy, unemployed heathens that leach resources out of the economy. While much of this stigma has diminished with modern legalization movements, certain drugs and populations (poor people and people of color) continue to be vilified.</p>
<p class="statement"> The data for these charts was scraped off of OkCupid, the fourth largest dating website in the world, by researchers for the Journal of Statistics Education. I have been following OkCupid’s own data blog for years, as they have a long history of using their data to confront social issues such as racism in the dating scene. The blog recognizes that while many people lie on their dating profiles, this data is still capable of generating many legitimate insights. Dating websites are actually one of the few places online where a significant amount of people will openly admit to using drugs, because drug habits are often an important criteria when searching for partners (i.e. people who use drugs tend to date other people that use drugs).</p>
<p class="statement"> One of my main goals in designing this website was to keep it engaging for a diverse population of viewers. This is why I chose to display my data using the JavaScript Google Charts API - it allowed me to create charts that are both beautiful and interactive. Using customization tools to replace the keys with rollover labels cleaned up the page and made it easier for users to instantly associate colors with labels; this was especially important considering there are so many different charts that each have different labels. I chose to structure the charts in horizontal columns rather than rows because it allows users to instantly compare the charts without scrolling. This was my first time using an API, and while it took some time to set up, it ultimately proved to be the best option for my purposes.</p>
<p class="statement"> The first thing to notice about these charts is that, regardless of any differences or trends between the three categories, each chart contains users from every possible demographic - there was not a single option that zero users chose. This goes to show that there is no one type of drug user; users come from all socioeconomic demographics and all walks of life.</p>
<p class="statement"> This was no surprise to me. In my personal experience, I’ve met people addicted to hard drugs that work as lawyers, chemists, professors, software developers, and engineers. These people, typically white and upper middle class, often approach drugs with an “it couldn’t possibly happen to me” attitude. Perhaps if we stopped portraying addiction as a problem that only affects poor people of color, these people wouldn’t feel so invincible. Furthermore, perhaps we as a nation would stop treating addiction as a criminal issue and work harder to provide addicts with the recovery resources they need. </p>
<p class="statement"> The “sometimes” data presents another important point - many people occasionally use (as opposed to “abuse”) drugs with the practice having little to no impact on their day to day life. In every variable, the demographics of people who use drugs “sometimes” had a barely noticable difference between those that “never” use drugs. These people attend work, school, and worship services just like everybody else. They seek love, in all its forms, just like everybody else. However, current laws force these users into the shadows.</p>
<p class="statement"> Despite their abilities, people that use drugs are often denied jobs due to unnecessary drug tests, creating a substantial negative impact on themselves, their families, and the larger economy. One can only expect that if fear (both the fear of others finding out about one’s drug use and the media- and employer-induced fear of using drugs in the first place) was not an issue, the number of drug users working “professional” jobs would be much higher.</p>
<p class="statement" style="margin-bottom: 30px"> Industry data aside, this project revealed a variety of other interesting insights that are noted below each of the section headings. My hope is that this work will spur conversations on the issues I’ve brought up as well as other issues I’ve yet to consider. Feel free to share this page on social media or contact me with questions at <a href="mailto:[email protected]?Subject=OkCupid%20Data">[email protected]</a>. </p>
</span>
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" style="margin-bottom: 30px">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_tumblr"></a>
<a class="a2a_button_reddit"></a>
<a class="a2a_button_email"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.linkname = "OkCupid Drug Data";
a2a_config.linkurl = "https://sickandhungry.github.io/okcupid-drug-data/";
a2a_config.num_services = 6;
a2a_config.color_main = "ffffff";
a2a_config.color_border = "ffffff";
a2a_config.color_link_text = "ffffff";
a2a_config.color_link_text_hover = "fdbdff";
a2a_config.color_bg = "780074";
a2a_config.color_arrow = "fff";
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
</div>
</div>
</div>
</div>
</div>
<h4 class="copyright">© <a href="https://github.com/sickandhungry/">Angelica Walker</a> 2017 ~ Created for <a href="https://github.com/mjlavin80">Matthew Lavin</a>'s Advanced Composing Digital Media course at the <a href="http://www.pitt.edu">University of Pittsburgh</a>.
</div>
</div>
</div>
</body>
</html>