28:null 29:["$","title",null,{"children":"Rock-Paper-Scissors | Stevan Springer | Observable"}] 2e:Tea8,text2 = md` ### Interactions We will model a population of lizards that **interact** with each other. The interactions between different strategies determines **fitness**. The interactions between side-blotched lizard males are like a game of Rock-Paper-Scissors. Let's see how they work by imagining that each interaction is a contest between two males. The winner gets to mate and has two babies with his strategy, which replace the original two males: **Scrappers(S) beat Partners(P)** ${canvas1("S")} ${canvas1("P")} => **S beats P** => ${canvas1("S")} ${canvas1( "S" )} Scrappers are strong, and able to win fights against Partners. **Partners(P) beat Rascals(R)** ${canvas1("P")} ${canvas1("R")} => **P beats R** => ${canvas1("P")} ${canvas1( "P" )} Partners guard their mates, so Rascals don't have a chance to sneak in. **Rascals(R) beats Scrappers(S)** ${canvas1("R")} ${canvas1("S")} => **R beats S** => ${canvas1("R")} ${canvas1( "R" )} Rascals can sneak in against Scrappers when they are away fighting for mates. ### R beats S, S beats P, and P beats R. Rock-Paper-Scissors. ----- ## Simulation of a Lizard Population The **population model** will help us understand how the **fitness** of each strategy depends on its **frequecy**. Scientists use **models** to make **predictions**. In this case, we want to make a model that can predict how the **frequency** of each of the three strategies will change over time. By modeling the interactions we can predict how many more or fewer of each type of allele there will be from one generation to the next. The answer depends on the **parameters**, which are the settings of the model. Different **settings** can cause the model to have different **outcomes**. The first thing scientists do is make an **educated guess**. Some parameters are set based on experiments or other measurements. Some parameters are allowed to vary across many different values, so that we can **explore** what might happen in different circumstances. ### Make a Prediction! Think about a game of **rock-paper-scissors**, but imagine it played by pairing up all the individuals in a population. If **rock** was very common in the population, can you **predict** how well **paper** will do? What about **scissors**? If you imagine that wins increase the frequency of an allele, and losses decrease its frequency, can you predict how the population will change in the next generation? ### Once you have a prediction, use the sliders to set your parameters *1) Try **different values** for each **slider** to test your **intuition** about how the **frequency** of each type changes. 2) Try the **same parameter settings** more than once. Do **identical parameters** always produce the **same outcome** *? ----- ### Frequencies You can move the red dot in the triangular slider to control the frequncy of **rock, paper, and scissors** alleles. *Can you make a population that is **all rock**? What about **50% scissors** and **50% paper**? Equal **frequency** of all three **alleles**?* ` //${canvas1("I")}${canvas1("S")} => ${canvas1("I")}${canvas1("I")} **Infection.** An infected host transmits the virus. //${canvas1("I")} => ${canvas1("R")} **Recovery.** An infected host heals and becomes immune. //Other States //${canvas1("V")} **Vaccinated(V)** - immune to the virus because of vaccination. //${canvas1("D")} **Dead(D)** - killed by the virus. //Other Changes //${canvas1("I")} => ${canvas1("D")} **Death.** An infected host dies of the viral infection. //${canvas1("R")} => ${canvas1("S")} **Loss of Immunity.** A recovered host becomes susceptible again. //${canvas1("V")} => ${canvas1("S")} **Loss of Immunity.** A vaccinated host becomes susceptible again.2f:T8b7,//colours: rock #F89540, paper #31688E, scissors #FDE725 graph_alleles = { //Parameters let x = 0; let y = 0; let w = width; let h = 25; let init_R = frequencies[0]; let init_P = frequencies[1]; let init_S = frequencies[2]; const svg = d3.select(DOM.svg(w, h)); //rectangles-frequencies horizontal// //rock svg .append("rect") .attr("fill", "#F89540") .attr("transform", "translate(0,0)") .attr("x", x) .attr("y", y) .attr("width", w * init_R) .attr("height", h); //paper svg .append("rect") .attr("fill", "#31688E") .attr("transform", "translate(0,0)") .attr("x", w * init_R) .attr("y", y) .attr("width", w * init_P) .attr("height", h); //scissors svg .append("rect") .attr("fill", "#fde725") .attr("transform", "translate(0,0)") .attr("x", w * init_R + w * init_P) .attr("y", y) .attr("width", w * init_S) .attr("height", h); svg .append("text") .attr("transform", "translate(-5,0)") .attr("x", (w * init_R) / 2) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("R"); svg .append("text") .attr("transform", "translate(0,0)") .attr("x", w * init_R + (w * init_P) / 2) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("P"); svg .append("text") .attr("transform", "translate(5,0)") .attr("x", w * init_R + w * init_P + (w * init_S) / 2) .attr("y", 0.75 * h) .attr("font-family", "sans-serif") .attr("font-size", "20px") .attr("text-anchor", "middle") .attr("fill", "Black") .text("S"); //dividers svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", w * init_R) .attr("y", y) .attr("width", 1) .attr("height", h); svg .append("rect") .attr("fill", "white") .attr("transform", "translate(0,0)") .attr("x", w * init_R + w * init_P) .attr("y", y) .attr("width", 1) .attr("height", h); return svg.node(); }30:T13e0,canvas = { replay; // set variables let popsize = 300; var start = Date.now(); let timer = null; var freq_R = []; var freq_P = []; var freq_S = []; var time = []; const h = 250; // set population var population = d3.range(popsize).map(function (d, i) { //note 100 is population size (replaced ne slider with fixed value) //set initial frequency from ternary slider var random_seed = Math.random(); if (random_seed <= frequencies[0]) { var allele = "R"; } else if (random_seed >= 1 - frequencies[2]) { var allele = "S"; } else { var allele = "P"; } return { x: w * Math.random(), y: h * Math.random(), dx: (Math.random() - 0.5) * speed * 10, dy: (Math.random() - 0.5) * speed * 10, r: 5, status: allele, isColliding: false }; }); // create canvas var canvas = document.createElement("canvas"); canvas.width = w + 10; canvas.height = h + 10; var context = canvas.getContext("2d"); // function that draws a single node in a population function drawNode(d) { context.beginPath(); if (d.status == "R") { context.fillStyle = "#F89540"; } else if (d.status == "P") { context.fillStyle = "#31688E"; } else if (d.status == "S") { context.fillStyle = "#FDE725"; } context.arc(d.x, d.y, d.r, 0, d.r * Math.PI); context.fill(); } // function that updates the location of each node function updateNode(d) { d.x += d.dx; if (d.x > w) { d.x = w; d.dx = -d.dx; } // right else if (d.x < 0) { d.x = 0; d.dx = -d.dx; } // left d.y += d.dy; if (d.y > h) { d.dy = -d.dy; d.y = h; } // bottom else if (d.y < 0) { d.dy = -d.dy; d.y = 0; } // top drawNode(d); } // function that calculates the frequency function updatePlot() { var count_R = 0; var count_P = 0; var count_S = 0; for (var g = 0; g < population.length; g++) { if (population[g].status == "R") { count_R = count_R + 1; } else if (population[g].status == "P") { count_P = count_P + 1; } else { count_S = count_S + 1; } } freq_R.push(count_R / population.length.toFixed(2)); freq_P.push(count_P / population.length).toFixed(2); freq_S.push(count_S / population.length).toFixed(2); time.push(time.length); viewof plot.value = [time, freq_R, freq_P, freq_S]; } // function to detect collision between two nodes function detectCollision(n1, n2, isfirst) { // Calculate the distance between the two circles let squareDistance = (n1.x - n2.x) * (n1.x - n2.x) + (n1.y - n2.y) * (n1.y - n2.y); //when colliding if (squareDistance <= 2 * n1.r * (2 * n2.r)) { if (isfirst) { n2.x = w * Math.random(); n2.y = w * Math.random(); } if (n1.isColliding == false || n2.isColliding == false) { n1.isColliding = true; n2.isColliding = true; n1.dx = -1 * n1.dx; n1.dy = -1 * n1.dy; n2.dx = -1 * n2.dx; n2.dy = -1 * n2.dy; } } //CHANGES //Interaction of R and P individual if ( n1.status == "R" && n2.status == "P" && Math.random() < rate_C / popsize ) { n1.status = "P"; n2.status = "P"; } else if ( n1.status == "P" && n2.status == "R" && Math.random() < rate_C / popsize ) { n1.status = "P"; n2.status = "P"; } //Interaction of R and S individual else if ( n1.status == "R" && n2.status == "S" && Math.random() < rate_C / popsize ) { n1.status = "R"; n2.status = "R"; } else if ( n1.status == "S" && n2.status == "R" && Math.random() < rate_C / popsize ) { n1.status = "R"; n2.status = "R"; } //Interaction of S and P individual else if ( n1.status == "S" && n2.status == "P" && Math.random() < rate_C / popsize ) { n1.status = "S"; n2.status = "S"; } else if ( n1.status == "P" && n2.status == "S" && Math.random() < rate_C / popsize ) { n1.status = "S"; n2.status = "S"; } else { n1.isColliding = false; n2.isColliding = false; } } for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], true); } } timer = d3.timer(ticked); function ticked() { var now = Date.now(), duration = now - start; //if(duration % 500 ==0){ updatePlot(); //} // Update the circle positions. context.clearRect(0, 0, w + 10, h + 10); context.save(); // check collisions for (var g = 0; g < population.length; g++) { for (var j = g + 1; j < population.length; j++) { detectCollision(population[g], population[j], false); } } population.forEach(function (d) { updateNode(d); }); context.restore(); } return canvas; }31:T693,timeLineChart = { replay; let timer = null; const height = 250; const x = d3 .scaleLinear() .domain([0, viewof plot.time.length]) .range([margin.left, width - margin.right]); const y = d3 .scaleLinear() .domain([0, 1]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg").attr("viewBox", [0, 0, w, height]); const xaxis = svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg .append("g") .attr("transform", `translate(${margin.left - 10},0)`) .call(d3.axisLeft(y).ticks(8)) .call((g) => g.select(".domain").remove()); const path_R = svg .append("path") .attr("fill", "none") .attr("stroke", "#F89540") .attr("stroke-width", 4); const path_P = svg .append("path") .attr("fill", "none") .attr("stroke", "#31688E") .attr("stroke-width", 4); const path_S = svg .append("path") .attr("fill", "none") .attr("stroke", "#FDE725") .attr("stroke-width", 4); function update() { path_R.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_R[i]))(viewof plot.time) ); path_P.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_P[i]))(viewof plot.time) ); path_S.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_S[i]))(viewof plot.time) ); x.domain([0, viewof plot.time.length]); xaxis.call(d3.axisBottom(x)); svg.dispatch("input"); } console.log(viewof plot); timer = d3.timer(update); return svg.node(); }32:T416,text4 = md` ### Interpreting the Graph *1) What does each **bouncing dot** represent? 2) Does the graph tell you which strategy is **common** and which is **rare?** 3) What do the **x axis** and the **y axis** represent?* ### Interpreting the Model *4) What **settings** cause allele frequencies to change **quickly** or **slowly**? 5) Why does the **frequency** of each **strategy** go up, and then down? 6) Do the **allele frequencies** have to reach a stable (unchanging) state? 7) Can you predict in advance which **strategy** will **fix** (reach 100% frequency)?* ### Extending the Model *8) What exactly happens whan one of the **strategies** is lost by **genetic drift**? 9) What **parameter** would you **change** to prevent the loss of a strategy? 10) What assumption does the model make about **genotype** and **phenotype**?* ### Bonus Question for Evolution Experts! *11) Can you **imagine** what would happen if populations were **structured in space** so that lizards can only interact with their neighbors?*`33:[] 2c:{"id":"2552e488e6eb0479","slug":"rock-paper-scissors","title":"Rock-Paper-Scissors","thumbnail":"fea16b25956f2c6a515169d7a49c8f7e054e7d21f8777b56c07377dc1d2c3e67","access_level":"public","create_time":"$D2021-11-17T20:57:28.848Z","update_time":"$D2025-09-27T16:11:36.081Z","view_time":null,"first_public_time":"$D2021-11-27T02:49:11.620Z","has_unpublished_edits":null,"fork":{"id":"e213bfd1844ab97d","slug":"sir-model-simulation","title":"SIR Model (Simulation)","owner":{"id":"0fec91d07be759ed","login":"stevan","name":"Stevan Springer"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0fec91d07be759ed","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":"starter_2024"},"version":1949,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fa65c6f0b85e129d","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":null}],"members":[{"type":"individual","id":"fa65c6f0b85e129d","login":"stevan","name":"Stevan Springer","avatar_url":"https://avatars-next.observableusercontent.com/ec6faccd9add25b7c625596b4c7e9bf87c8ce757ad2e350333cda752f6207c31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"50b7f37a3be9a727","slug":"evolution","title":"Evolution","owner":{"id":"0fec91d07be759ed","login":"stevan","name":"Stevan Springer"}},"type":"notebook","body":{"title":"Rock-Paper-Scissors","cells":[{"id":0,"value":"//20211128 Copyright Stevan Springer (stevan.springer@gmail.com)\n\ntext1 = md`# Rock-Paper-Scissors\n### *Simulating frequency dependent selection in non-transitive strategies.* \nThis simulation is based on real populations, studied by Barry Sinervo and his team at UC Santa Cruz. https://www.nature.com/articles/380240a0\n\n\n-----\n## A Natural Game of Rock-Paper-Scissors \nThe **side blotched lizard** (*Uta stansburiana*), lives in the deserts of Southwestern North America. In these lizards there are three alternative types of males, which you can recognize by their colour. Each type of male takes a different **mating strategy**: \n\n### Strategies\n${canvas1(\"R\")} **Rascals (R)** - are lusty lotharios, they seduce females. \n${canvas1(\"P\")} **Partners (P)** - are lifelong lovers, they guard females. \n${canvas1(\"S\")} **Scrappers (S)** - are loathsome louts, they fight for females.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1888,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1672,"value":"viewof frequencies = ternarySlider({\n labels: [\"Rock\", \"Paper\", \"Scissors\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1676,"value":"md`\nYour population started with **${pc(frequencies[0])}** Rock, **${pc(\n frequencies[1]\n)}** Paper, and **${pc(frequencies[2])}** Scissors.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"text7 = md`\n### Parameters\nYou can use sliders to control how often **changes** between **states** happen. In this model you can control three **parameters**: \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"viewof speed = {\n const s = slider({\n title: \"Speed\",\n description: \"Do individuals contact each other rarely <= or => often?\",\n min: 0,\n max: 1,\n step: 0.01,\n value: 0.4\n });\n s.input.style.width = \"80%\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"viewof rate_C = {\n const rate_C = slider({\n title: \"Contest Rate\",\n description:\n \"When individuals interact, do contests occur rarely <= or => often?\",\n max: 1,\n step: 0.01,\n value: 0.25\n });\n rate_C.input.style.width = \"80%\";\n return rate_C;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1768,"value":"viewof rate_M = {\n const rate_M = slider({\n title: \"Mutation Rate (x 10-3)\",\n description: \"Do mutations occur rarely <= or => often?\",\n max: 1,\n step: 0.01,\n value: 0.5\n });\n rate_M.input.style.width = \"80%\";\n return rate_M;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":905,"value":"text3 = md`\n\n#### Press the **Start** button to begin a new simulation \n*If the computer slows down, refresh the page to start over.* \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1645,"value":"text5 = md`# Program Settings\nThe cells below contain information needed to run the simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"function canvas1(input) {\n // create canvas\n var canvas1 = document.createElement(\"canvas\");\n canvas1.width = 40;\n canvas1.height = 40;\n var context1 = canvas1.getContext(\"2d\");\n context1.beginPath();\n if (input == \"R\") {\n context1.fillStyle = \"#FDE725\";\n } else if (input == \"P\") {\n context1.fillStyle = \"#31688E\";\n } else if (input == \"S\") {\n context1.fillStyle = \"#F89540\";\n } else {\n context1.fillStyle = \"Red\";\n }\n context1.arc(20, 20, 20, 0, 20 * Math.PI);\n context1.fill();\n\n return canvas1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"viewof plot = new View()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"class View {\n constructor() {\n this._time = [];\n this._freq_R = [];\n this._freq_P = [];\n this._freq_S = [];\n }\n\n get time() {\n return this._time;\n }\n\n get freq_R() {\n return this._freq_R;\n }\n\n get freq_P() {\n return this._freq_P;\n }\n\n get freq_S() {\n return this._freq_S;\n }\n\n set value(value) {\n this._time = value[0];\n this._freq_R = value[1];\n this._freq_P = value[2];\n this._freq_S = value[3];\n //this.dispatchEvent({type: \"input\", value});\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"import {button} from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"import { ternarySlider } from \"@yurivish/ternary-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"pc = d3.format(\".0%\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2d:"$2c:body"