-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (121 loc) · 4.61 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
<html>
<head>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<style>
.container {
display: flex;
animation: fadeIn 1s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.flex-item {
flex: 1;
font-size: smaller;
}
h3 {
font-size: 1.5rem;
margin-top: 0.25rem;
margin-bottom: 0.5rem;
}
.padding {
padding: 3%;
}
body {
color: var(--text);
background-color: var(--bg);
font-size: 1.15rem;
line-height: 1.5;
display: grid;
grid-template-columns: 0 !important;
margin: 1.5;
}
#moreinfo {
margin: auto;
width: 60%;
font-size: smaller;
animation: fadeIn 1s;
}
</style>
<body>
<main>
<div id="game" class="container padding">
<div id="gamediv" class="flex-item"></div>
<div class="flex-item">
<h3>The plot</h3>
Welcome to ████ hospital, as an (unpaid) intern you will be helping the wonderful doctors here to diagnose
patients quicker and
more efficiently than ever before.
<br>
To the left we have plotted previous patient data. The x and y coordinates correspond to predicting factors of
the disease we are trying to test for.
Hopefully you can find a pattern to allow us to predict whenever or not future patients are infected or not.
<h3>Instructions</h3>
Your goal is to draw a line that best separates the infected (red) from the healthy (green).
<br>
Draw a line by <b>clicking and dragging left to right</b>. Don't try right to left. I haven't fixed that yet.
<br>
Don't worry too much about getting it perfect, but try to get the accuracy as high as possible.
<br>
The results will be displayed below, If you don't like the results, you can try again just by drawing another
line.
Be sure to randomize the patients in order to see if your results generalizes well.
<div>
<button onclick="toggle()">More info</button>
<button onclick="reset()">Randomize Patients</button>
</div>
Your stats
<div id="output"></div>
</div>
</div>
<div id="moreinfo" style="display: none;">
<h1>What is the point of this???</h1>
The purpose of this website is to demonstrate algorithmic bias. If you experiment a couple of different times, you
can see that you will pretty consistently
have better accuracy rates for square 🔶 patients compared to triangle 🔺 patients. This isn't because you are
secretly racist against triangle patients but it's an
artifact of how triangle patients are a minority. In this case, the triangle patients follow a different pattern
than the square patients, but that
can be hard to see because of the square's majority.
<h3>Algorithms? What algorithms?</h3>
The process of drawing a separating line is pretty much what most of machine learning boils down to. Of course,
the
difference is that while you eyeballed it, the computer can do this in a much more systematic and precise manner.
What you did here is called supervised classification. Classification, becuase you are classifying patients as
infected or not.
Supervised, because the data already been labeled infected or not.
<h3>The question of fairness</h3>
There is endless amount of literature debating what it means to be fair. Being fair is subjective, and hard to
define. But if we want more fair algorithms, society is going to have to formulate a mathematical definition
of fairness.
<br>
<button onclick="toggle()">Go back</button>
<!-- <h3>Further reading, if you are interested</h3> -->
</div>
<script>
var showGame = true;
function toggle() {
if (showGame) {
document.querySelector('#game').style.display = 'none';
document.querySelector('#moreinfo').style.display = '';
document.querySelector('button').innerText = 'Go back';
} else {
polyline = [];
document.querySelector('#game').style.display = '';
document.querySelector('#moreinfo').style.display = 'none';
document.querySelector('button').innerText = 'More info';
}
showGame = !showGame;
}
</script>
</main>
</body>
</html>