31:Te9a,canvas = { replay; // set variables var start = Date.now(); let timer = null; var freq_h = []; var freq_d = []; var time = []; const h = 250; // set population var population = d3.range(ne).map(function (d, i) { return { x: w * Math.random(), y: h * Math.random(), dx: (Math.random() - 0.5) * speed, dy: (Math.random() - 0.5) * speed, r: 10, status: -1 * (Math.random() - p), // <0 dove, >0 hawk isColliding: false }; }); // create canvas var canvas = document.createElement("canvas"); canvas.width = w + 10; canvas.height = h + 10; var context = canvas.getContext("2d"); // function that draw a single node in a population function drawNode(d) { context.beginPath(); if (d.status > 0) { context.fillStyle = "Red"; } else { context.fillStyle = "#63ACBE"; } context.arc(d.x, d.y, d.r, 0, d.r * Math.PI); context.fill(); } // function that update nodes location 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 calculate the frequency function updatePlot() { var cntHawk = 0; for (var i = 0; i < population.length; i++) { if (population[i].status > 0) { cntHawk = cntHawk + 1; } } var freq = (cntHawk / population.length).toFixed(2); freq_h.push(freq); freq_d.push(1 - freq); time.push(time.length); viewof plot.value = [time, freq_h, freq_d]; } // function to dettect collision between two nodess 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; // h * h if (n1.status > 0 && n2.status > 0) { // change both to dove n1.status = -1 * n1.status; n2.status = -1 * n2.status; // h * d } else if ( (n1.status > 0 && n2.status < 0) || (n1.status < 0 && n2.status > 0) ) { if (n1.status < 0) { n1.status = -1 * n1.status; } else { n2.status = -1 * n2.status; } } } } else { n1.isColliding = false; n2.isColliding = false; } } for (var i = 0; i < population.length; i++) { for (var j = i + 1; j < population.length; j++) { detectCollision(population[i], 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 i = 0; i < population.length; i++) { for (var j = i + 1; j < population.length; j++) { detectCollision(population[i], population[j], false); } } population.forEach(function (d) { updateNode(d); }); context.restore(); } return canvas; }32:T586,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 - 12},0)`) .call(d3.axisLeft(y).ticks(8)) .call((g) => g.select(".domain").remove()); const path_h = svg .append("path") .attr("fill", "none") .attr("stroke", "#EE442F") .attr("stroke-width", 3); const path_d = svg .append("path") .attr("fill", "none") .attr("stroke", "#63ACBE") .attr("stroke-width", 3); function update() { path_h.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_h[i]))(viewof plot.time) ); path_d.attr( "d", d3 .line() .x(x) .y((_, i) => y(viewof plot.freq_d[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(); }33:T456,md` --- ### Interpretation *What happens when you start the population with just a few **Doves**?* *What happens when you start the population with just a few **Hawks**?* **Game theory** is about making **predictions**. Given the **payoffs**, what do we predict will be the **outcome** of evolution? The Hawks and Doves model has a very interesting outcome. It is an example where the population evolves to an evolutionary stable state (**ESS**) where both types persist in the population. This evolution to a **polymorphic** equilibrium is a result of **frequency dependent selection**. The costs and benefits of each strategy depend on the frequency of the strategy in the population. - When **Hawks** are **rare** *(the Hawk allele is at low frequency in the population)* The chance of meeting a Dove is high. Hawks beat Doves so the frequency of the Hawk allele increases. - When **Hawks** are **abundant** *(the Hawk allele is at high frequency in the population)* The chance of meeting a Dove is low. Hawks bear the cost of fighting one another, so the frequency of the Hawk allele decreases. `34:[] 2f:{"title":"Hawks and Doves","cells":[{"id":0,"value":"md`# Hawks and Doves\n### Simulating the frequency dependent selection\nThe first model was created by John Maynard Smith to explain the evolution of aggression.\n\n\n\ncode used: \nhttps://observablehq.com/@gurmanbh/moving-dots-in-canvas#nodes_num\nhttps://observablehq.com/@stevan/hardy-weinberg-equilibrium#s1\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":939,"value":"md`\n---\n### Strategies\nImagine a population where individuals are competing for resources. \nAn individual can take one of two strategies:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`${canvas1(\n \"Red\"\n)} represents a **Hawk**, an aggresive individual that fights for resources, \n${canvas1(\n \"Blue\"\n)} represents a **Dove**, a gentle individual that does not fight. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"md`---\n### Interactions\nWhen individuals meet they interact. The result of their interactions is determines their fitness. \n\n- ${canvas1(\"Red\")}${canvas1(\"Red\")}**=>** ${canvas1(\"Blue\")}${canvas1(\n \"Blue\"\n)}**Hawk-Hawk.** Hawks fight to the death and the resource is taken by doves.\n- ${canvas1(\"Red\")}${canvas1(\"Blue\")}**=>** ${canvas1(\"Red\")}${canvas1(\n \"Red\"\n)}**Hawk-Dove.** Hawk takes the resource. \n- ${canvas1(\"Blue\")}${canvas1(\"Blue\")}**=>** ${canvas1(\"Blue\")}${canvas1(\n \"Blue\"\n)}**Dove-Dove.** Doves share the resource. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`\n----\n### Parameters\nPress Start&Replay after changing the parameter values to update the plot\n` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"viewof p = {\n const p = slider({\n title: \"Hawk proportion\",\n max: 1,\n step: 0.01,\n value: 0.5\n });\n p.input.style.width = \"80%\";\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"viewof ne = {\n const ne = slider({\n title: \"Population size\",\n max: 100,\n step: 1,\n value: 70\n });\n ne.input.style.width = \"80%\";\n return ne;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"viewof speed = {\n const s = slider({\n title: \"Speed\",\n min: 1,\n max: 10,\n step: 1,\n value: 8\n });\n s.input.style.width = \"80%\";\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"viewof replay = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"md`\n---\n### Population\nIndividuals interact at random. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`## variables for the plot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"function canvas1(input){\n // create canvas\n var canvas1 = document.createElement( 'canvas' );\n canvas1.width = 50;\n canvas1.height = 50;\n var context1 = canvas1.getContext( '2d' );\n context1.beginPath();\n if(input ==\"Red\"){\n context1.fillStyle = \"#EE442F\";\n }else{context1.fillStyle = \"#63ACBE\";}\n context1.arc(25, 25, 15, 0, 25 * Math.PI);\n context1.fill();\n \n return canvas1\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"viewof plot = new View()","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"class View {\n constructor() {\n this._time =[];\n this._freq_h = [];\n this._freq_d = [];\n\n }\n \n get time(){\n return this._time;\n }\n \n get freq_h(){\n return this._freq_h;\n }\n \n get freq_d(){\n return this._freq_d;\n }\n \n set value(value){\n this._time = value[0];\n this._freq_h = value[1];\n this._freq_d = value[2];\n //this.dispatchEvent({type: \"input\", value});\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"import {button} from \"@rohscx/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}