-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·213 lines (190 loc) · 13.7 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
<!-- <script src="../../static/jquery-1.11.1.min.js"></script>
<script src="../../static/jquery.cookie.js"></script>
<script src="../../static/home.js"></script>
<script src="../../static/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../static/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../../static/home.css" type="text/css" /> -->
<!-- <html lang="en">
<head> -->
<title>Could Your Data Discriminate?</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/../knight/knightapp/static/jquery-1.11.1.min.js"></script>
<script src="/../knight/knightapp/static/jquery.cookie.js"></script>
<script src="/../knight/knightapp/static/home.js"></script>
<script src="/../knight/knightapp/static/bootstrap.min.js"></script>
<link rel="stylesheet" href="../knight/knightapp/static/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../knight/knightapp/static/home.css" type="text/css" />
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head> -->
<body>
<div class="container">
<h1>Could Your Data Discriminate?</h1>
<div id="background-content">
<p>Even as explicit discrimination decreases, implicit discrimination remains widespread. It exists in the form of laws or policies that are seemingly color- or gender-blind, but in practice discriminate—often unintentionally—against women or minorities. The emergence of data-driven decision making, predictive analytics, and machine-learning algorithms have automated these discriminatory decision making patterns, thereby introducing new concerns regarding data’s potential discriminatory effects.</p><br>
<p>To determine if your data could be used to make discriminatory decisions, upload it here! Save your data as a .csv (Comma Separated Values) file. The first row of information should contain the names of data columns. After the first row, there should neither be any blank entries, nor entries after the last column. Please see <a href="../knight/media/ExampleFile.csv">this file</a> or the image below for an example of the formatting our tool expects.</p><br><br><center><img src="/../knight/media/screenshot.png" /></center><br><br>
<center> <p>After you upload your data, we'll ask you a few questions about your data so that we can tell you how fair decisions resulting from it will be.</p></center>
</div>
<br><br>
<!-- CAROUSEL START -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h2>So you think you have a discriminatory data set...</h2>
<p>What is a discriminatory data set?</p>
<p>On this website, we’ll talk about a data set being discriminatory under the 80% disparate impact rule.</p>
<p>What’s that?</p>
<p>These cards will give you an overview of how we define discrimination and how we can tell if your data set is discriminatory.</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p>In the 1950s, Duke Power Co., a public utility operating in North and South Carolina, had an explicit policy of only hiring white workers for their high paying jobs. In 1955 they added a requirement that any workers of their high paying jobs had to have a high school diploma. Obviously, the explicit policy of not hiring black workers was discriminatory -- but what about the policy of requiring a high school diploma in an era when fewer blacks had high school diplomas?</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<p>In 1971 the U.S. Supreme Court decided, in Griggs v. Duke Power Co., that this wasn’t ok -- outcomes that demonstrate “disparate impact” against hiring minority groups are not allowed unless justified by a “business necessity” (we’ll come back to this).</p>
<p>Their reasoning? Simply: “tests or criteria for employment or promotion may not provide equality of opportunity merely in the sense of the fabled offer of milk to the stork and the fox.”</p>
</div>
</div>
</div>
<div class="item">
<img class="fourth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Fourth slide">
<div class="container">
<div class="carousel-caption">
<img src="http://www.aesop.mozoho.com/wp-content/uploads/2012/06/thefox.jpeg" width="40%" height="40%"><br><br>
<p>What’s this fable about milk and a stork and a fox? The stork invites the fox for a meal and offers him milk to drink from a narrow-necked vessel. Clearly, the fox isn’t going to be able to drink from this easily, while it’s perfect for the stork!</p>
<p>In the case of Griggs v. Duke Power Co., this narrow-necked vessel was the high school diploma requirement -- it ensured that black workers weren’t hired.</p>
</div>
</div>
</div>
<div class="item">
<img class="fifth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Fifth slide">
<div class="container">
<div class="carousel-caption">
<p>But what if a high school diploma was required to do the job well? Duke Power Co. claimed, using a business necessity defense, that it was. But it was shown that this wasn’t the case -- workers with high school diplomas didn’t perform better than those without. Thus, the practice was ruled discriminatory.</p>
</div>
</div>
</div>
<div class="item">
<img class="sixth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Sixth slide">
<div class="container">
<div class="carousel-caption">
<p>The EEOC (US Equal Employment Opportunity Commission) subsequently introduced hiring guidelines to help employers detect disparate impact. Their suggested rule, that we adopt here, is known as the 80% rule. It states that the proportion of minority applicants who are hired should be at least 80% of the proportion of majority applicants who are hired.</p>
</div>
</div>
</div>
<div class="item">
<img class="seventh-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Seventh slide">
<div class="container">
<div class="carousel-caption">
<p>These days, things are a bit more complicated. Companies try to collect lots of data, more than just information about a high school diploma, about their applicants and employees. This might include their social media data, on-time arrival to work, GPA in college, etc. Their goal is then to ensure that they only hire “good” workers. The company might build an algorithm to predict if someone is a good worker from the data they’ve collected.</p>
</div>
</div>
</div>
<div class="item">
<img class="eighth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Eighth slide">
<div class="container">
<div class="carousel-caption">
<p>Can this be discriminatory? If we again think about the 80% rule, which is focused on ensuring that different groups are hired at equal rates, we can look at the outcome of the algorithm to check if its discriminatory. We’ve talking about hiring here, but we’ll apply this 80% rule to all yes/no decisions. These yes/no decisions being made by algorithms these days include loan decisions, predictive policing, etc.</p>
</div>
</div>
</div>
<div class="item">
<img class="ninth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Ninth slide">
<div class="container">
<div class="carousel-caption">
<p>Now back to what we’re doing here: the tool underlying this website tries to be the canary in the coalmine. The methodology we’re using (CITE) is able to predict whether there is potential for disparate impact if the data is used to make decisions. This is a starting point.</p>
<p>Here’s what we do. You upload a data set that contains people (in rows in a spreadsheet) and:</p>
<p><ol>
<li>Could be used to make a yes/no decision, and contains a decision column with these yes/no values.</li>
<li>Has the potential to make discriminatory decisions, and contains a column with an individual’s race, gender, etc.</li>
<li>Has additional information that you think is legitimately related to the decision being made.</li>
</ol></p>
<p>You’ll be asked to identify each of these different types of columns in your data.</p>
</div>
</div>
</div>
<div class="item">
<img class="tenth-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Tenth slide">
<div class="container">
<div class="carousel-caption">
<p class="resize">What do we do with this data? We take the data you identified as legitimately related to the decision, and use it to try to predict each individual’s race / gender / etc. If we are successful in this prediction, then this data is potentially discriminatory - someone could use it to make a discriminatory decision by predicting the race / gender / etc. and making a decision directly from it. In our earlier example from the Duke Power Co., this would be like predicting that applicants with a high school diploma were white. If, on the other hand, we can’t predict race / gender / class / or other categories that we would prefer not to discriminate based on, then this data is safe to use for decision making without fear of algorithmic discrimination.</p>
<p class="resize">(What don’t we do with this data? We promise not to store the data for any longer than we need to in order to give you these results. The only information we’ll keep long term is a record that someone used this site, so that we can track the usage.)</p>
</div>
</div>
</div>
<div class="item">
<img class="eleventh-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Eleventh slide">
<div class="container">
<div class="carousel-caption">
<p>The scores we’ll show you will be the disparate impact ratio described earlier. Remember that less than 80% is considered discriminatory under the EEOC standard. We’ll show you both an overall score and a score broken down by category, so that you can see how much each category contributes to the overall score.</p>
<p>Give it a try!</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div style="padding: 20" align="center">
<form class="form-inline" role="form" enctype="multipart/form-data">
<!--{% csrf_token %}-->
<div class="form-group">
<input id="file" type="file" name="file"/>
</div>
<div class="form-group">
<input class="form-control" type="button" value="Upload" onclick="home.upload_file()"/>
</div>
</form>
<div id="col-typing" style="display: none"></div>
<div id="download"></div>
<br><br>
<div id="current-heading">
<h2 id="current-fairness"></h2>
<h4 id="current-percentage"></h4>
</div>
<div id="current-graph" align="center"></div>
<div id="graph-heading">
<h2 id="overall-fairness"></h2>
<h4 id="percentage"></h4>
</div>
<div id="total-graph" align="center"></div>
<h2 id="scores-by-category"></h2>
<div id="category-graph" align="center"></div>
</div>
</div>
</body>
</html>