This is an implementation of Schelling's spatial segregation model 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.

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.

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.

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.

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 Micromotives and Macrobehavior 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 NetLogo Segregation model, and the choice of a random vacant cell as the destination of each move was inspired by Raj Singh's implementation. 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.

Implemented using d3 and html5slider. This project is open-source and available on GitHub. Copyright © 2013 by Matthew Wigginton Conway.