elk-simulation.html

<!DOCTYPE html>
<html lang="en-US">


<head>
<style>
/*CSS*/

/*sets up printer*/
@media print {
  body * {
    visibility: hidden;
  }
  #myChart, #myChart * {
    visibility: visible;
  }
  #myChart {
    position: absolute;
    left: 0;
    top: 0;
  }
}


input[id*=In] {
  height:27px;
  padding:5px 5px 0px 0px;
  margin-bottom: 10px;
  text-transform: none;
  width: 100px;
  background: rgb(0, 0, 0, 0);
  color: white;
  font-size: 20px;
  border: none;
  border-bottom: 2px solid white;
}


/*gets rid of the number arrows*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


select {
  height:35px;
  padding:5px 5px 0px 0px;
  margin-bottom: 10px;
  border-radius: 0px;
  text-transform: none;
  width: 100px;
  background: #FFFFFF;
  color: white;
  font-size: 20px;
  border: none;
  border-bottom: 2px solid white;
  
  /* make arrow and background */
  background:
    linear-gradient(45deg, transparent 50%, #d3d3d3 50%),
    linear-gradient(135deg, #d3d3d3 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 7px) calc(1em - 3px),
    calc(100%) calc(1em - 3px),
    100% 0;
  background-size:
    7px 7px,
    7px 7px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  /* reset */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
  
}
  
  
input[id*=In]:focus{
  border-bottom: 2px solid black;
  color: black;
  outline: none;
}
select[id*=In]:focus{
  border-bottom: 2px solid #000;
  color: #000;
  outline: none;
  
  
  background:
    linear-gradient(45deg, transparent 50%, black 50%),
    linear-gradient(135deg, black 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 7px) calc(1em - 3px),
    calc(100%) calc(1em - 3px),
    100% 0;
  background-size:
    7px 7px,
    7px 7px,
    2.5em 2.5em;
  background-repeat: no-repeat;
  /* reset */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
  
}
   
   
abbr {
  font-size: 20px;
  font-family: arial;
  border-radius: 100px;
  border: 1px solid black;
  cursor: default;
  text-decoration: none !important;
  color: black;
}
abbr:hover {
  border: 1px solid white;
  text-decoration: none !important;
  color: white;
  
}
button {
  width: 80px;
  height: 40px;
  font-size: 18px;
  background: #0080FF;
  outline-style: none;
  color: #FFF;
}
button:active {
  background: #6593F5;
}
pre {
  font-family: Verdana;
  font-size: 18px;
  color: white;
}
pre.citation {
  position: absolute;
  bottom: 0px;
  font-size: 10px
}
div.descriptions {
  position: absolute;
  top: 5px;
  left: -33px;
  height: 0px;
}
div.form {
  position: absolute;
  top: 37px;
  left: 345px;
  height: 0px;
}
div.questions {
  position: absolute;
  top: 25px;
  left: 420px;
  height: 0px;
}
div.button {
  position: absolute;
  top: 275px;
  left: 210px;
  height: 0px;
}
div.error {
  position: absolute;
  top: 310px;
  left: 15px;
  height: 0px;
}
#buttons2 {
  display: none;
  margin: 5px auto;
  
}
#inputs {
  position: relative;
  margin: 0 auto;
  top: 0px;
  left: 0px;
  width: 500px; 
  height: 330px;
  border: 2px solid #d3d3d3;
  background: rgba(180, 180, 180, 0.5);
}
#results {
  position: relative;
  margin: 0 auto;
  top: 0px;
  left: 0px;
  width: 80%; 
  height: 50%;
  border: 2px solid #d3d3d3;
  background: rgba(180, 180, 180, 0.5);
  display: none;
}
body {
    background: url("http://www.whimsandfancies.com/wp-content/gallery/point_reyes/tule_elk_clsup.jpg") no-repeat center fixed; 
    background-size: cover;
}
</style>
  <!--Metadata set up -->
  <title>Tule Elk Simulation</title>
  <meta charset="UTF-8">
</head>
<body>

<!--HTML-->


<!--Heading-->
<h1 style="text-align:center; font-family:Verdana; color:rgb(255,255,255);">Tule Elk Simulation</h1>
<!--instrutions-->
<p id="directions" style="text-align:center; color:rgb(255,255,255); font-family:Verdana;">Hover over question marks for more information or look at the "What You Need to Know" sheet.</p><br>

<!--Creates a div that hides when button is pressed-->
<div id="inputs">

  
  <!--div for the descriptions-->
  <div class="descriptions">
    <pre style="text-align:right;"> 
      Generations to Simulate: <br>
      Likelihood of Environmental Change: <br>
      Migration Rate: <br>
      Mutation Rate: <br>
      Allele to Simulate: <br>
    </pre>
  </div>
  
  
  <!--div for the form/inputs-->
  <div class="form">
    <form id="frm1" onkeyup="return checkCorrect()">
    <input type="number" id="genIn" value="100" min="50" max="500" step="10"><br>
    <input type="number" id="envirIn" value="10" min="1" max="100" step="1"><br>
    <input type="number" id="migrationIn" value="10" min="0" max="100" step="1"><br>
    <input type="number" id="mutationIn" value="10" min="0" max="100" step="1"><br>
    <select id="allelesIn">
      <option value="BL42">BL42</option>
      <option value="BM6505">BM6505</option>
      <option value="RM006">RM006</option>
      <option value="BM5004">BM5004</option>
      <option value="BM4107">BM4107</option>
      <option value="BM888">BM888</option>
      <option value="BM1009">BM1009</option>
      <option value="MAF109">MAF109</option>
      <option value="JP15">JP15</option>
    </select>
    </form>
  </div>


  <!--div for the question marks-->
  <div class="questions">
    <pre>
      <abbr title="How many generations will be simulated"> ? </abbr><br>
      <abbr title="The percent chance that enviroment will change and make certain alleles more evolutionarily helpful"> ? </abbr><br>
      <abbr title="How much migration in and out of the herd"> ? </abbr><br>
      <abbr title="Likelyhood that alleles will mutate"> ? </abbr><br>
      <abbr title="Which allele will be simulated"> ? </abbr>
    </pre>
  </div>
  
  
  <!--Creates a div for the button-->
  <div class="button">
    <button onClick="simAllGen()">Submit</button>
  </div>
  
  
  <!--Creates a div for error message-->
  <div class="error">
    <p style="color:white; text-align:center;" id="whichOne"></p>
  </div>
</div>


<!--Creates a div of reset button and graph-->
<div id="results">
  <canvas id="myChart"></canvas>
  <pre id="genLabel" padding="0px" style="color: black; text-align:center; line-height:.1;">Generation</pre>  
</div>


<div id="buttons2">
  <pre><button onClick="showInput()">Reset</button> <button onClick="runAgain()" style="width: 110px;">Run Again</button> <button onClick="window.print()">Print</button></pre>
</div>


<!--cite the picture-->
<pre class="citation"> *Photo courtesy of Soma Acharya, writer at Whims and Fancies, url:http://www.whimsandfancies.com/winter-warmth/</pre>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>


<script>
//creates all values of alleles as dictionaries
var BL42 = {};
var BM6505 = {};
var RM006 = {};
var BM5004 = {};
var BM4017 = {};
var BM888 = {};
var BM1009 = {};
var MAF109 = {};
var JP15 = {};
//creates an array of all dictionaries
var alleles = [];
var pop;
var popPoints = [];
//input variable
var gens;
var envirChange;
var migration;
var mutation;
var allele;
var alleleToSim;
//fitness of the alleles
var fit1;
var fit2;
var fit3;
var popAA;
var popAa;
var popaa;
var popAAOriginal;
var popAaOriginal;
var popaaOriginal;
var AACap;
var AaCap;
var aaCap;

//chart vars
var ctx;
var chart;
	
function assignVars() {
//creates all values of alleles as dictionaries
  BL42 = {name: "BL42", numAlleles: 2, alleleA: 0.076, alleleB: 0.924};
  BM6505 = {name: "BM6505", numAlleles: 1, alleleA: 1};
  RM006 = {name: "RM006", numAlleles: 1, alleleA: 1};
  BM5004 = {name: "BM5004", numAlleles: 2, alleleA: 0.226, alleleB: 0.774};
  BM4017 = {name: "BM4017", numAlleles: 1, alleleA: 1};
  BM888 = {name: "BM888", numAlleles: 2, alleleA: 0.694, alleleB: 0.306};
  BM1009 = {name: "BM1009", numAlleles: 1, alleleA: 1};
  MAF109 = {name: "MAF109", numAlleles: 2, alleleA: 0.267, alleleB: 0.733};
  JP15 = {name: "JP15", numAlleles: 1, alleleA: 1};
//creates an array of all dictionaries
  alleles = [BL42, BM6505, RM006, BM5004, BM4017, BM888, BM1009, MAF109, JP15];
  pop = 440;
  popPoints = [440];
//input variable
  gens = document.getElementById("genIn").value;
  envirChange = document.getElementById("envirIn").value;;
  migration = document.getElementById("migrationIn").value;;
  mutation = document.getElementById("mutationIn").value;;
  allele = document.getElementById("allelesIn").value;;
  alleleToSim = findAllele();
//fitness of the alleles
  fit1 = 1;
  fit2 = 1;
  fit3 = 1;
  popAA = 0;
  popAa = 0;
  popaa = 0;
  popAAOriginal = 0;
  popAaOriginal = 0;
  popaaOriginal = 0;
  AACap;
  AaCap;
  aaCap;
}


//create a graph
function createGraph() {
  Chart.defaults.global.defaultFontColor = "black";
  var xAxis = document.getElementById("genIn").value;
  var xPoints = [];
  var yPoints = [];
  for(var i = 0; i < popPoints.length; i+=Math.round(xAxis/20)) {
    yPoints.push(popPoints[i]);
  }
  for(var i = 0; i <= xAxis; i+=Math.round(xAxis/20)) {
    xPoints.push(i);
  }
  ctx = document.getElementById('myChart').getContext('2d');
  chart = new Chart(ctx, {
      type: 'line',
      
      axisX: {
        interval: 50,
      },
    
      // The data for our dataset
      data: {
          labels: xPoints,
          datasets: [{
              label: "Population",
              backgroundColor: 'rgba(255, 99, 132, 0)',
              borderColor: 'rgb(255, 99, 0)',
              data: yPoints,
          }]
      },

      // Configuration options go here
      options: {
        
        elements: {
          line: {
              tension: 0, // disables bezier curves
          }
        }
      }
  });
}

//destroys the canvas so that it doesn't move
function removeGraph(){
  chart.destroy();
};


function runAgain() {
  removeGraph();
  simAllGen();
}


function simAllGen() {
  if(canSubmit) {
    hideInput();
    assignVars();
    for(var i = 0; i < gens; i++) {
      changeFit();
      createIndividuals();
      calcOffspring();
      calcPop();
    }
    createGraph();
  } else {
    if(theFalse == 0) {
      name = "Generations to Simulate";
    } else if(theFalse == 1) {
      name = "Likelihood of Environment Change";
    } else if(theFalse == 2) {
      name = "Migration Rate";
    } else if(theFalse == 3) {
      name = "Mutation Rate";
    }
    document.getElementById("whichOne").innerHTML = "**The value in " + name + " is outside the required range. Please enter a number between " + idMins[theFalse] + " and " + idMaxes[theFalse] + ".";
  }
}
//changes the fitness of genes based on random environmental changes
function changeFit() {
  if(envirChange/100 > Math.random()) {
    var which = Math.floor(Math.random()*2);
    var up = Math.floor(Math.random()*2);
    if(which === 0) {
      if(up === 0) {
        fit1 = Math.max(0, fit1 - (Math.random()/5));
      } else {
        fit1 = Math.min(1, fit1 + (Math.random()/5));
      }
    } else {
      if(up === 0) {
        fit2 = Math.max(0, fit2 - (Math.random()/5));
      } else {
        fit2 = Math.min(1, fit2 + (Math.random()/5));
      }
    }
  }
}
//calculates the total pop for each allele based on fitness
function calcPop() {
  //calculates the new pops based on fitness
  
  popAA = Math.max(0, Math.floor((popAA * fit1)-popAAOriginal));
  popAa = Math.max(0, Math.floor((popAa * fit1)-popAaOriginal));
  popaa = Math.max(0, Math.floor((popaa * fit2)-popaaOriginal));
  
  //creates a cap on the population (equilibirum)
  if(pop > 0) {
    AACap = Math.floor(600*(popAA/pop));
    AaCap = Math.floor(600*(popAa/pop));
    aaCap = Math.floor(600*(popaa/pop));
  } else {
    AACap = 0;
    AaCap = 0;
    aaCap = 0;
  }
  

  //creates new pops based on the cap
  popAA = Math.min(AACap, popAA);
  popAa = Math.min(AaCap, popAa);
  popaa = Math.min(aaCap, popaa);
  
 
  //calculates total pop
  pop = (popAA + popAa + popaa);
  popPoints.push(pop);
  
  
  //calculates the new frequencies
  if(pop > 0) {
    alleleToSim.alleleA = ((popAA *2.0) + popAa) / (pop*2);
	alleleToSim.alleleB = 1 - alleleToSim.alleleA;
  } else {
    alleleToSim.alleleA = 0;
    alleleToSim.alleleB = 0;
  }
}


//does hardey-wineberg to calculate new population numbers
function calcOffspring() {
  //assumes 80% of the generation mates and each pair makes 3 children
  var popAAMates = Math.floor((popAA*2.4) - (popAA*2.4)%2);
  var popAaMates = Math.floor((popAa*2.4) - (popAa*2.4)%2);
  var popaaMates = Math.floor((popaa*2.4) - (popaa*2.4)%2);
  for(var i = 0; i < (pop*1.2 - ((pop*1.2)%2) - 3); i++) { //make sure there are an even number of mates
  
    //assigns the two mates to an allele type
    var mate1 = Math.floor(Math.random()*3);
    var mate2 = Math.floor(Math.random()*3);
    while((mate1 === 0 && popAAMates <= 0) || (mate1 == 1 && popAaMates <= 0) || (mate1 == 2 && popaaMates <= 0)) {
      mate1 = Math.floor(Math.random()*3);
    }
    if(mate1 === 0) {
      popAAMates--;
    } else if (mate1 == 1) {
      popAaMates--;
    } else {
      popaaMates--;
    }
    while((mate2 === 0 && popAAMates <= 0) || (mate2 == 1 && popAaMates <= 0) || (mate2 == 2 && popaaMates <= 0)) {
      mate2 = Math.floor(Math.random()*3);
    }
    if(mate2 === 0) {
      popAAMates--;
    } else if (mate2 == 1) {
      popAaMates--;
    } else {
      popaaMates--;
    }
    
    
    //calculate allele type
    if(mate1 === 0 && mate2 === 0) {
      popAA++;
    }
    if((mate1 === 0 && mate2 == 1) || (mate1 == 1 && mate2 === 0)) {
      var which = Math.round(Math.random()*4);
      if(which <=2) {
        popAA++;
      } else {
        popAa++;
      }
    }
    if((mate1 === 0 && mate2 == 2) || (mate1 == 2 && mate2 === 0)) {
      popAa++;
    }
    if(mate1 == 1 && mate2 == 1) {
      var which = Math.round(Math.random()*4);
      if(which===0) {
        popAA++;
      } else if(which==3) {
        popaa++;
      } else {
        popAa++;
      }
    }
    if((mate1 == 1 && mate2 == 2) || (mate1 == 2 && mate2 == 1)) {
      var which = Math.round(Math.random()*2);
      if(which===0) {
        popAa++;
      } else {
        popaa++;
      }
    }
    if(mate1 == 2 && mate2 == 2) {
      popaa++;
    }
  }
}

//finds which gene the user wants to simulate
function findAllele() {
  for(var i = 0; i < alleles.length; i++) {
    if(alleles[i].name == allele) {
      if(alleles[i].name == "BM6505" || alleles[i].name == "JP15" || alleles[i].name == "BM1009" || alleles[i].name == "BM4017" || alleles[i].name == "RM006") {
        migration = 0;
      }
      return(alleles[i]);
    }
  }
}
//creates and array of individuals
function createIndividuals() {
  var p = alleleToSim.alleleA;
  var q;
  if(alleleToSim.numAlleles > 1) {
    q = alleleToSim.alleleB;
  } else {
    q = 0;
  }
  //migraition
  p = p * (1.0 - (migration/100)) + (migration/100);
  
  
  //mutation rate
  if(alleleToSim.numAlleles > 1) {
    p = (1 - (mutation/100)) * p + (mutation/100) * (1 - p);
  }
  
  
  //assigns the number of pops for each allele
  popAA = Math.round((p * p) * pop); //get number of AA
  popAa = Math.round((2.0 * p * q) * pop); //get number of Aa
  popaa = Math.round((q * q) * pop); //get number of aa
  
  
  //assings the same value as above but for later use
  popAAOriginal = popAA;
  popAaOriginal = popAa;
  popaaOriginal = popaa;
  
  
  //gives population size
  pop = popAA + popAa + popaa;
}
//at first, we define a variable stating that an event listener has been attached onto the field
var validate = false;
//id names
var ids = ["genIn", "envirIn", "migrationIn", "mutationIn"];
//id mins and maxes
var idMins = [50, 1, 0, 0];
var idMaxes = [500, 100, 100, 100];
var canSubmit = true;
var count = 0;
var textInBox;
var value;
var name;
var theFalse;
function checkCorrect() {
  for(var i = 0; i < ids.length; i++) {
    textInBox = document.forms["frm1"][ids[i]].value;
    value = textInBox.replace(/[^\d]/g, '');
    if(value <= idMaxes[i] && value >= idMins[i]) {
      count++;
      document.getElementById(ids[i]).style.borderBottom=null;
      document.getElementById(ids[i]).style.color=null;
      document.getElementById("whichOne").innerHTML = "";
    } 
    else {
      theFalse = i;
      count = 0;
      document.getElementById(ids[i]).style.borderBottom="2px solid red";
      document.getElementById(ids[i]).style.color="red";
    }
  }
  if(count == 4) {
    canSubmit=true;
    count = 0;
  } else {
    canSubmit=false;
    count = 0;
  }
}
//hides and show results/inputs
function hideInput() {
  document.getElementById("inputs").style.display = "none";
  document.getElementById("results").style.display = "block";
  document.getElementById("buttons2").style.display = "table";
  document.getElementById("directions").style.display = "none";
}
function showInput() {
  document.getElementById("inputs").style.display = "block";
  document.getElementById("results").style.display = "none";
  document.getElementById("buttons2").style.display = "none";
  document.getElementById("directions").style.display = "block";
}
</script>
</body>