-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
207 lines (189 loc) · 8.09 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
<!DOCTYPE html>
<html>
<!--
Copyright 2013 Matthew Wigginton Conway
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
<title>Schelling's Spatial Segregation Model</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="html5slider.js"></script>
<script src="segregation.js"></script>
<link rel="stylesheet" href="segregation.css" />
</head>
<body>
<div id="content">
<div id="controls">
<form id="input" onsubmit="run(); return false;">
<table>
<tr>
<td>
<label for="tolerance">Threshold</label>
</td>
<td >
<input type="range" id="tolerance" oninput="toleranceReadout.value = '' + Math.round(this.value * 100) + '%'"
min="0" max="1" step="0.01" value="0.3" />
</td>
<td>
<output for="tolerance" class="inputReadout" name="toleranceReadout" />
</td>
</tr>
<tr>
<td>
<label for="fill">Fill factor</label>
</td>
<td >
<input type="range" id="fill" oninput="fillReadout.value = '' + Math.round(this.value * 100) + '%'"
min="0" max="1" step="0.01" value="0.95" />
</td>
<td>
<output for="fill" class="inputReadout" name="fillReadout" />
</td>
</tr>
<tr>
<td>
<label for="size">Grid size</label>
</td>
<td >
<input type="range" id="size" oninput="sizeReadout.value = '' + this.value + 'x' + this.value"
min="2" max="40" step="1" value="30" />
</td>
<td>
<output for="size" class="inputReadout" name="sizeReadout" />
</td>
</tr>
<tr>
<td>
<label for="balance">Balance</label>
</td>
<td>
<input type="range" id="balance" oninput="balanceReadout.value = '' + Math.round(this.value * 100) + '%'"
min="0" max="1" step="0.01" value="0.5" />
</td>
<td>
<output for="balance" class="inputReadout" name="balanceReadout" />
</td>
</tr>
<tr>
<td colspan="3">
<input type="submit" value="Run Model"</a>
</td>
</tr>
</table>
</form>
</div>
<div id="board" class="clearme">
<!-- board spaces will be populated here -->
</div>
<div id="statistics">
<div>
<span id="percentAlikeChart" class="clearme"></span>
<span id="percentAlikeReadout" class="readout clearme"></span>
</div>
<div>
<span id="percentUnhappyChart" class="clearme"></span>
<span id="percentUnhappyReadout" class="readout clearme"></span>
</div>
</div>
<div class="clear"></div>
</div>
<div id="about">
<p>
This is an implementation
of <a href="https://class.coursera.org/modelthinking/lecture/16">Schelling's
spatial segregation model</a> in JavaScript. It should work in
recent versions of Firefox, Chrome and Safari; it may or may not
work in Internet Explorer. Schelling's model is agent-based; the
agents (the red and purple dots, in this case) represent two
groups choosing residential locations. Each agent decides
whether it is happy or unhappy in a neighborhood based on
whether its neighbors are like it or not. There is a threshold
for the percentage of like neighbors required to be happy. For
instance, if the threshold is 25% and 2 out of 8 neighbors are
like the agent, the agent will be happy. However, if the
threshold is 35%, the agent will not be happy and will move. The
lighter dots represent unhappy agents, while the darker dots
represent happy agents.
</p>
<p>
What is interesting about the model is that, even with a
relatively low threshold, say 30%, extreme segregation
results. Thus, fairly tolerant agents end up in segregated
neighborhoods despite a tolerance for diversity.
<p>
<p>
The threshold has already been described. The fill factor
determines what percentage of grid cells are occupied; for
instance, a 95% fill factor leaves 5% of the cells vacant. The
grid size simply determines how large the simulation grid
is. The balance slider determines the balance between members
of one group and members of another; if set to 50% there will
be the same number of red and purple agents.
</p>
<p>
The numbers on the right show the mean percentage of like
neighbors and the percentage of unhappy cells. The mean
percentage of like neighbors is the arithmetic mean of the
percentages of like neighbors to total neighbors for each
cell. More segregated layouts have higher numbers. The
percentage of unhappy cells is the percentage of the cells that
are currently unhappy. The graphs show the progression of these
statistics over the course of the model run.
</p>
<p>
The model is initialized by placing the cells randomly on the
board. On each step of the model, a randomly selected unhappy
cell is moved to a randomly selected vacant cell; the display
updates every 20 steps. Schelling's book <i>Micromotives and
Macrobehavior</i> contains a good description of the model's
operation in general as well as its behavior under specific
circumstances, on pages 147–155 (in the 1978 paperback,
anyhow). The interface was inspired by
the <a href="http://ccl.northwestern.edu/netlogo/models/Segregation">NetLogo
Segregation model</a>, and the choice of a random vacant cell
as the destination of each move was inspired
by <a href="http://web.mit.edu/rajsingh/www/lab/alife/schelling.html">Raj
Singh's implementation.</a> Edge effects are corrected by
treating the space as a torus; the top row is considered
adjacent to the bottom row and the rightmost column is
considered adjacent to the leftmost column.
</p>
<p class="boilerplate">
Implemented using <a href="http://www.d3js.org">d3</a>
and <a href="https://github.com/fryn/html5slider">html5slider</a>. This
project is open-source
and <a href="https://github.com/mattwigway/segregation.js">available
on GitHub</a>. Copyright © 2013 by <a href="http://www.indicatrix.org">Matthew Wigginton
Conway</a>.
</p>
</div>
<script type="text/javascript">
d3.selectAll('input')
.each(function () {
var evt = new Event('input');
this.dispatchEvent(evt);
});
function run() {
if (typeof(s) != 'undefined')
s.stop();
d3.selectAll('.clearme').html('');
var tol = d3.select('#tolerance')[0][0].value;
var size = d3.select('#size')[0][0].value;
var fill = d3.select('#fill')[0][0].value;
var totalAgents = fill * (Math.pow(size, 2) - 1); // there needs always to be a single vacant square
var n2 = d3.select('#balance')[0][0].value * totalAgents;
var n1 = totalAgents - n2;
s = new org.indicatrix.Segregation(size, 300, tol, n1, n2);
s.start();
}
</script>
</body>
</html>