30:T624,md` # Genetic Drift Say there is a gene with two alleles, _T_ and _t_. Each parent contributes one of their alleles at random to their offspring. The genotype of their offspring can be described by a Punnett square:

	T	t
T	TT	Tt
t	tT	tt

In small populations, random chance can result in one genotype taking over the population over time. For more information, see the Wikipedia articles on [Genetic drift](https://en.wikipedia.org/wiki/Genetic_drift) and the [Hardy-Weinberg principle](https://en.wikipedia.org/wiki/Hardy%E2%80%93Weinberg_principle). For this simulation, we start with ${N} individuals with randomly assigned genotypes. Each horizontal line in the visualization is a generation. The colors represent how many individuals of each genotype there are in the population. The simulation stops as soon as one genotype has taken over the population. Tt TT tt tT `31:T584,{ const ctx = DOM.context2d(width, height); const x = (d) => d * ((width - 100) / N); const offset = 100; while(true) { for(let i = 0; i < history.length; i++) { if(history[i].iteration % 100 == 0) { ctx.clearRect(0, i - 50, offset, 100); ctx.fillText("Generation " + history[i].iteration, 0, i); } ctx.beginPath(); ctx.moveTo(offset + x(0), i); ctx.lineTo(offset + x(history[i].heterozygote1), i); ctx.strokeStyle = colors[0]; ctx.stroke(); ctx.beginPath(); ctx.moveTo(offset + x(history[i].heterozygote1), i); ctx.lineTo(offset + x(history[i].heterozygote1) + x(history[i].homozygote1), i); ctx.strokeStyle = colors[1]; ctx.stroke(); ctx.beginPath(); ctx.moveTo(offset + x(history[i].heterozygote1) + x(history[i].homozygote1), i); ctx.lineTo(offset + x(history[i].heterozygote1) + x(history[i].homozygote1) + x(history[i].homozygote2), i); ctx.strokeStyle = colors[2]; ctx.stroke(); ctx.beginPath(); ctx.moveTo(offset + x(history[i].heterozygote1) + x(history[i].homozygote1) + x(history[i].homozygote2), i); ctx.lineTo(offset + x(history[i].heterozygote1) + x(history[i].homozygote1) + x(history[i].homozygote2) + x(history[i].heterozygote2), i); ctx.strokeStyle = colors[3]; ctx.stroke(); } yield ctx.canvas; } }32:[] 2e:{"title":"Genetic Drift","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"viewof reset = button(\"Rerun simulation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md`\nAfter running this simulation for 500 generations 100 times, one genotype dominated ${simsResult} times.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof N = slider({ min: 5, max: 1000, value: 500, step: 1, title: 'N' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof speed = slider({ min: 1, max: 10, value: 1, step: 1, title: \"Speed\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"colors = [\"#b3cde3\", \"#8c96c6\", \"#8856a7\", \"#810f7c\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"randomPopulation = (n) => [...Array(n).keys()].map((d) => [Math.random() < 0.5, Math.random() < 0.5])","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"simsResult = [...Array(100).keys()].map(() => randomPopulation(N)).map((pop) => run(pop, 500)).map(count).map((d) => Object.values(d).sort()[3] == N).filter((d) => d == true).length","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"history = {\n if(reset) {\n let genes1 = randomPopulation(N);\n let history = [count(genes1)];\n let iteration = 1;\n while(true) {\n for(let i = 0; i < speed; i++) {\n const c = count(genes1);\n if(Object.values(c).sort()[3] != N) {\n c.iteration = iteration;\n history.push(c);\n genes1 = nextGeneration(genes1);\n }\n }\n history = history.slice(Math.max(0, history.length - height), height + 1);\n iteration++;\n yield history\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"nextGeneration = (genes) => genes.map((d) => combine(d, randomGene(genes)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"run = (genes, nGenerations) => {\n for(let i = 0; i < nGenerations; i++) {\n genes = nextGeneration(genes);\n }\n \n return genes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"count = (genes) => ({\n homozygote1: genes.filter((d) => d[0] == true && d[1] == true).length,\n homozygote2: genes.filter((d) => d[0] == false && d[1] == false).length,\n heterozygote1: genes.filter((d) => d[0] == false && d[1] == true).length,\n heterozygote2: genes.filter((d) => d[0] == true && d[1] == false).length\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"randomGene = (genes) => genes[Math.floor(Math.random() * genes.length)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"combine = (gene1, gene2) => [Math.random() < 0.5 ? gene1[0] : gene2[0], Math.random() < 0.5 ? gene1[1] : gene2[1]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"import { slider, checkbox, radio, button } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}