31:T5c9,//20201008 Copyright Stevan Springer (stevan.springer@gmail.com) text1 = md`# Hardy-Weinberg Equilibrium ### *Combining alleles into genotypes according to their frequency.* ----- ## Allele Frequency: Choosing Variants at Random. If we imagine a population with only two alleles **A** and **a**, we can estimate the abundance of each by calculating it's **frequency**. The frequency of allele **A** (denoted with the letter ***p***) is the fraction of all alleles in the population which are **A**. So if we imagine all the sperm and eggs made by all the individuals in a population, then ***p*** represents the chance of choosing one of these gametes at random and finding that it contains allele **A**. When there are only two alleles in the population, the gamete we've chosen will always contain either **A** or **a**. So the frequency of allele **a** is the chance that we didn't find allele **A**, denoted with the letter ***q*** or equivalently ***(1 - p)***. ***Equation 1:*** If there are two alleles, then the probability of a randomly chosen gamete containing either **allele A ( p = freq(A) )** or **allele a ( q = freq(a) )** is **1**. ${tex.block`(p + q) = 1`} Let's see how this works by taking a sample of sperm and eggs from a population and looking at the abundance of each allele when ***p*** is high and when ***p*** is low. #### Drag the slider to set ***p*** and see how it changes the abundance of each allele in a random sample of sperm and eggs.`32:T5b2,//colours: blue #71879a, lightblue #b1c5d4 sim_alleles = { //set figure dimensions let height = 150; //load data const nodes = data.map(d => Object.create(d)); //run simulation const simulation = d3 .forceSimulation(nodes) .alphaTarget(0) // stay hot .velocityDecay(0.75) // low friction // .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) //.force("x", d3.forceX().strength(-0.05)) //.force("y", d3.forceY().strength(0.5)) .force( "collide", d3 .forceCollide() .radius(d => d.r + 2) .iterations(3) ); //display simulation const svg = d3.create("svg").attr("viewBox", [30, 0, width, height]); //shift to hide nodes at 0,0 const node = svg .append("g") .selectAll(".node") .data(nodes) .join("g") .attr('class', 'node'); node .append('circle') .attr("r", d => d.r) .attr("fill", d => d.allele_color); if (input1.r1 == "show") { node .append("text") .text(function(d) { return d.allele; }) .style('fill', '#000000') .style('font-size', '16px') .style('font-family', 'Helvetica') .attr("text-anchor", "middle") //.attr('x', -5) .attr('y', 5); } simulation.on("tick", () => { node.attr("transform", d => `translate(${d.x}, ${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }33:T55f,//colours: blue #71879a, lightblue #b1c5d4 graph_alleles = { //Parameters let x = 0; let y = 0; let w = width; let h = 25; let p = input1.s1; const svg = d3.select(DOM.svg(w, h)); //rectangles-allele frequencies horizontal// svg .append("rect") .attr("fill", "#b1c5d4") .attr("transform", "translate(0,0)") .attr("x", x) .attr("y", y) .attr("width", w * p) .attr("height", h); svg .append("rect") .attr("fill", "#71879a") .attr("transform", "translate(0,0)") .attr("x", w * p) .attr("y", y) .attr("width", w * (1 - p)) .attr("height", h); svg .append("text") .attr("transform", "translate(-5,0)") .attr("x", (w * p) / 2) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("A"); svg .append("text") .attr("transform", "translate(5,0)") .attr("x", w * p + (w * (1 - p)) / 2) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("a"); svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", w * p) .attr("y", y) .attr("width", 1) .attr("height", h); return svg.node(); }34:T59f,text2 = md` ## Genotype Frequency: Choosing Individuals at Random. Diploid individuals result from the fusion of two haploid gametes. The Hardy-Weinberg Equilibrium equation tells us how many of each genotype to expect when we randomly choose two alleles and combine them. If we know the **allele frequencies** (***p*** and ***q***) then we can use the Hardy-Weinberg Equilibrium equation to predict the **genotype frequencies** - how many individuals will be **AA**, or **Aa**, or **aa**. We are imagining creating diploid individuals by sampling two gametes from the population at random. The chance of getting genotype **AA** depends on the frequency of the **A** allele, it is the chance of drawing an **A** allele twice in a row: this is ***p*** AND ***p*** again, which is the same as ***p²***. So by the same logic, the chance of sampling an **aa** genotype is ***q²***, the frequency of the **a** allele squared. Since there are two ways to draw the alleles that make a heterozygote (either **Aa** or **aA**) the probability of sampling a heterozygote is **2pq**. ***Equation 2:*** Because we sample two alleles to make each genotype, the expected frequency of each **genotype** depends on the frequency of each **allele**. ${tex.block`(p + q)^2 = p^2 + 2pq + q^2 = 1`} #### Drag the slider to set ***p*** and see how it changes the abundance of each genotype in a population of diploid individuals. `35:T586,sim_genotypes = { //set figure dimensions let height = 250; //load data const nodes = data.map(d => Object.create(d)); //run simulation const simulation = d3 .forceSimulation(nodes) .alphaTarget(0) // stay hot .velocityDecay(0.75) // low friction // .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) //.force("x", d3.forceX().strength(-0.05)) //.force("y", d3.forceY().strength(0.5)) .force( "collide", d3 .forceCollide() .radius(d => 20 + 2) .iterations(3) ); //display simulation const svg = d3.create("svg").attr("viewBox", [20, 0, width, height]); //shift to hide nodes at 0,0 const node = svg .append("g") .selectAll(".node") .data(nodes) .join("g") .attr('class', 'node'); node .append('circle') .attr("r", 20) .attr("fill", d => d.genotype_color); if (input2.r2 == "show") { node .append("text") .text(function(d) { return d.genotype; }) .style('fill', '#000000') .style('font-size', '16px') .style('font-family', 'Helvetica') .attr("text-anchor", "middle") //.attr('x', -10) .attr('y', 5); } simulation.on("tick", () => { node.attr("transform", d => `translate(${d.x}, ${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }36:T1c95,//colours: blue #71879a, lightblue #b1c5d4 graphic1 = { let w = width; let h = width / 3; // sets the size of the square let x = 25; let y = 25; let p = d3.format(".2f")(input2.s2); let q = d3.format(".2f")(1 - p); let psq = d3.format(".3f")(p * p); let pq2 = d3.format(".3f")(2 * p * q); let qsq = d3.format(".3f")(q * q); const svg = d3.select(DOM.svg(w, h + 3 * x)); //vertical allele frequencies svg .append("rect") .attr("fill", "#b1c5d4") .attr("transform", "translate(h,0)") .attr("x", 0) .attr("y", y) .attr("width", x) .attr("height", h * p); svg .append("rect") .attr("fill", "#71879a") .attr("transform", "translate(0,0)") .attr("x", 0) .attr("y", y + h * p) .attr("width", x) .attr("height", h * (1 - p)); svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", 0) .attr("y", y + h * p) .attr("width", x) .attr("height", 1); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", x / 2) .attr("y", y + (h * p) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("A"); svg .append("text") .attr("transform", "translate(0,10)") .attr("x", x / 2) .attr("y", y + h * p + (h * (1 - p)) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("a"); //horizontal allele frequencies svg .append("rect") .attr("fill", "#b1c5d4") .attr("transform", "translate(0,0)") .attr("x", 2 * x) .attr("y", h + 2 * y) .attr("width", h * p) .attr("height", 25); svg .append("rect") .attr("fill", "#71879a") .attr("transform", "translate(0,0)") .attr("x", 2 * x + h * p) .attr("y", h + 2 * y) .attr("width", h * (1 - p)) .attr("height", 25); svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", 2 * x + h * p) .attr("y", h + 2 * y) .attr("width", 1) .attr("height", 25); svg .append("text") .attr("transform", "translate(-10,0)") .attr("x", 2 * x + (h * p) / 2) .attr("y", 2 * y + h + 20) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("A"); svg .append("text") .attr("transform", "translate(10,0)") .attr("x", 2 * x + h * p + (h * (1 - p)) / 2) .attr("y", 2 * y + h + 20) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("a"); //genotype frequencies //p^2 svg .append("rect") .attr("fill", "#fae755") .attr("transform", "translate(0,0)") .attr("x", 2 * x) .attr("y", y) .attr("width", h * p) .attr("height", h * p); //2pq svg .append("rect") .attr("fill", "#8ccd64") .attr("transform", "translate(0,0)") .attr("x", 2 * x + h * p) .attr("y", y) .attr("width", h * (1 - p)) .attr("height", h * p); svg .append("rect") .attr("fill", "#8ccd64") .attr("transform", "translate(0,0)") .attr("x", 2 * x) .attr("y", y + h * p) .attr("width", h * p) .attr("height", h * (1 - p)); //q^2 svg .append("rect") .attr("fill", "#42818c") .attr("transform", "translate(0,0)") .attr("x", 2 * x + h * p) .attr("y", y + h * p) .attr("width", h * (1 - p)) .attr("height", h * (1 - p)); //annotations-lines svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", 2 * x) .attr("y", y + h * p) .attr("width", h) .attr("height", 1); svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", 2 * x + h * p) .attr("y", y) .attr("width", 1) .attr("height", h); //text annotations svg .append("text") .attr("transform", "translate(-10,0)") .attr("x", 2 * x + (h * p) / 2) .attr("y", y + (h * p) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("AA"); svg .append("text") .attr("transform", "translate(10,0)") .attr("x", 2 * x + h * p + (h * (1 - p)) / 2) .attr("y", y + (h * p) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("Aa"); svg .append("text") .attr("transform", "translate(-10,10)") .attr("x", 2 * x + (h * p) / 2) .attr("y", y + h * p + (h * (1 - p)) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("aA"); svg .append("text") .attr("transform", "translate(10,10)") .attr("x", 2 * x + h * p + (h * (1 - p)) / 2) .attr("y", y + h * p + (h * (1 - p)) / 2) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("aa"); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", 0.25 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("Allele Frequencies"); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", y + 0.25 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("freq(A) = p = " + p); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", 2 * y + 0.25 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("freq (a) = q = " + q); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("Genotype Frequencies"); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", y + 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("freq(AA) = p^2 = " + psq); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", 2 * y + 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("freq (Aa) = 2pq = " + pq2); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", 0.75 * w) .attr("y", 3 * y + 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("freq(aa) = q^2 = " + qsq); return svg.node(); }37:T55d,text5 = md` ## Hardy-Weinberg is a Null Model for Population Genetics. Null models tell us what to expect in the simplest case. They take our assumptions about how a system works and use them to predict what should happen if everything behaves the way we think it does. The Hardy-Weinberg Equilibrium **(HWE)** equation tells us how many of each possible **genotype** to expect if alleles are sampled according to their **frequency**. If a population is in Hardy-Weinberg equilibrium, then we can convert back and forth between allele frequencies and genotype frequencies. ### The Hardy-Weinberg model has two basic assumptions: 1. **The population is not evolving.** This means that the allele frequency does not change from one generation to the next. Allele frequencies can change due to **selection**, **migration**, **drift**, or **mutation**. 2. **Mating is random**. This means that **alleles** are combined into **genotypes** according to the **frequency** of each allele in the population. We saw this assumption in **'Equation 2'** above. ### Populations that are mating randomly and not evolving are expected to be in **Hardy Weinberg Equilibrium (HWE)**. HWE is called an **equilibrium** because a non-evolving population will return to this expected combination of genotype frequencies whenever alleles are combined at random into individual genotypes.`38:[] 2f:{"title":"Hardy-Weinberg Equilibrium","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1561,"value":"viewof input1 = columns({\n s1: slider({\n title: \"p<\\i> (The Frequency of the A allele in the population)\",\n max: 1,\n step: .01,\n value: 0.5,\n width: 0.8\n }),\n r1: checkbox({\n align: \"right\",\n title: \"Show Alleles\",\n options: [{ value: \"show\", label: \"\" }],\n value: \"hide\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1166,"value":"question1 = md` ### ***Questions:*** \n***Q1.*** *Where would you set the **p** slider to have a **1 in 20** chance of sampling an **A** allele?* \n \n***Q2.*** *What is the value of **q** when the chance of sampling an **A** allele is **10%**?* \n \n***Q3.*** *What value of **p** and **q** gives an **equal chance** of sampling each allele?* \n \n----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1564,"value":"viewof input2 = columns({\n s2: slider({\n title: \"p<\\i> (The Frequency of the A allele in the population)\",\n max: 1,\n step: .01,\n value: 0.5\n }),\n r2: checkbox({\n align: \"right\",\n title: \"Show Genotypes\",\n options: [{ value: \"show\", label: \"\" }],\n value: \"hide\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1471,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"question2 = md` ### ***Questions:*** \n***Q1.*** *Where would you set the **p** slider to make the frequency of **AA** equal 0.36?* \n \n***Q2.*** *If **A** is dominant, about what value of **p** gives an equal frequency of each **phenotype**?* \n \n***Q3.*** *What value of **p** gives the highest number of **heterozygotes**?* \n \n----------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1658,"value":"chart({\n xAxis: {\n title: \"Allele Frequency\",\n min: 0,\n max: 1\n },\n yAxis: {\n title: \"Genotype Frequency\",\n min: 0,\n max: 1\n },\n series: [\n // { title: \"p^2\", points: x => x ** 2, color: \"#fae755\", width: 5 titleposition: right},\n { points: x => x ** 2, color: \"#fae755\", width: 5 },\n { points: x => (1 - x) ** 2, color: \"#42818c\", width: 5 },\n { points: x => x * (1 - x) * 2, color: \"#8ccd64\", width: 5 }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`----------\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"import { slider, radio, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1562,"value":"import { columns } from \"@bcardiff/observable-columns\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1413,"value":"data = d3.range(200).map(() => {\n //set allele depending on p//\n let rU = d3.randomUniform(0, 1);\n if (rU() < input1.s1) {\n var allele = \"A\";\n var a_color = \"#b1c5d4\";\n } else {\n allele = \"a\";\n a_color = \"#71879a\";\n }\n\n //set genotype depending on p\n let p = input2.s2; // controlled by slider 1\n let q = 1 - p;\n let p_sq = p * p;\n let q_sq = q * q;\n if (rU() < p_sq) {\n var genotype = \"AA\";\n var g_color = \"#fae755\";\n } else if (rU() > 1 - q_sq) {\n genotype = \"aa\";\n g_color = \"#42818c\";\n } else {\n genotype = \"Aa\";\n g_color = \"#8ccd64\";\n }\n\n //set radius for sperm and eggs//\n let rI = d3.randomInt(1, 3);\n let r = rI() * 18 - 10;\n\n //set initial postion\n let x = Math.random() * width;\n let y = 0;\n\n //set values for each point\n let point = {\n allele: allele,\n allele_color: a_color,\n genotype: genotype,\n genotype_color: g_color,\n x: x,\n y: y,\n r: r\n };\n\n return point;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1156,"value":"//frequencies = md`
***A:***\n//${tex`p = ${d3.format(\".2f\")(input2.s2)}, q = ${d3.format(\".2f\")(\n// 1 - input2.s2\n//)}`}\n//***G:***\n//${tex`p^2 = ${d3.format(\".3f\")(input2.s2 * input2.s2)}, 2pq = ${d3.format(\n// \".3f\"\n//)(2 * input2.s2 * (1 - input2.s2))}, q^2 = ${d3.format(\".3f\")(\n// (1 - input2.s2) * (1 - input2.s2)\n//)}`}
`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1649,"value":"freqs = d3.range(0, 1.0001, 0.01).map(i => ({\n p: d3.format(\".2f\")(i),\n q: d3.format(\".2f\")(1 - i),\n psq: d3.format(\".3f\")(i ** 2),\n psq: d3.format(\".3f\")((1 - i) ** 2),\n twopq: d3.format(\".3f\")(i * (1 - i) * 2)\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1660,"value":"import { chart } from \"@joshdata/simple-line-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1545,"value":"DOM.download(new Blob([d3.csvFormat(data)], { type: \"text/csv\" }), \"test.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"text6 = md`## Notes`\n//viewof s1 = {\n// const s1 = slider({\n// title: \"p<\\i> (The Frequency of the A allele in the population)\",\n// max: 1,\n// step: .01,\n// value: 0.5\n// });\n// s1.input.style.width = \"61.8%\";\n// return s1;\n//}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}