Difference between revisions of "Team:UCSC"

Line 1: Line 1:
 
{{UCSC-Header}}
 
{{UCSC-Header}}
{{highcharts}}
 
  
 
<html>
 
<html>
    <head>
+
  <head>
        <!-- MathJax (LaTeX for the web) -->
+
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
        <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js">
+
        <title>Santa Cruz IGEM</title>
        </script>
+
  </head>
        <script type="text/x-mathjax-config">
+
        MathJax.Hub.Config({
+
                SVG: { linebreaks: { automatic: true } }
+
        });
+
        </script>
+
    </head>
+
    <body align="center">
+
        <h1>Modeling</h1>
+
            <div class=quote>Predict and optimize yield</div>
+
        <div align="left">
+
            <h4>Acetaminophen <img class="acetaminophen" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Paracetamol-skeletal.svg/1200px-Paracetamol-skeletal.svg.png" style="width:168px;height=128px"> </h4>
+
         
+
            <div class=text-container>
+
            To predict theoretical acetaminophen production, we calculated the amount of its precursor, chorismate, by quantifying its main products, the aromatic amino acids phenylalanine, tyrosine, and tryptophan.
+
            Since no amino acid composition data was available for Synechococcus, we started by using literature data for the similar cyanobacteria species Spirulina found that between 11 and 13.6 percent of amino acids were aromatics by mass, or between 6.5 and 7.7 molar percent of total protein. Even using the lower aromatic percentages and assuming a third of precursor goes to our pathway, we predict 22.6mg acetaminophen per gram biomass.
+
            </br>
+
            </div>
+
            $$
+
            \frac{0.449\ mmol\ FWY}{1g\  biomass}\approx \frac{0.449\ mmol\ chor.}{1g\ biomass}\rightarrow\frac{1\ mol\ acet.}{3\ mol\ chor.}=\frac{0.15\ mmoles\ acet}{1\ g\ biomass}\times\frac{151.163g\ acet.}{1\ mol\ acet.}=\frac{22.62mg\ acet.}{1g\ biomass}$$
+
            <div class=text-cuntainer>
+
            An estimate for acetaminophen production using the amino acid composition for Spirulina and assuming one third of the precursor goes to our enzyme, 4ABH.
+
            </div>
+
            </br>
+
            <div class=text-container>
+
            To further verify our organism's amount of acetaminophen precursor, we ran both the genome and ribosomal protein sequences through a custom Python program converting codons to amino acids and calculating aromatic amino acid molar percentages which resulted in 9.3% and 5.14% respectively. Using our sequence analysis based value of 9.3% and the assumption that our enzymes would take a third of the acetaminophen precursor, we estimate an acetaminophen concentration would be around 18mg per gram dried biomass.
+
            </br>
+
            </div>
+
            $$\frac{0.093\ g\ FYW}{1\ g\ protein}\times\frac{0.6g protein}{1\ biomass}=\frac{0.056\ g\ FYW}{1g\ biomass}\rightarrow\frac{0.37\ mmol\ chor}{1\ g\ biomass}\times\frac{1\ mol\ acet}{3\ mol\ chor}\times\frac{151.163g\ acet}{1\ mol\ acet.}=\frac{18.61mg\ acet.}{1g\ biomass}$$
+
        <div class=text-cuntainer>
+
            This equation is based on moles of aromatic amino acids calculated by translating the organism's 3MB genome and assuming a third of precursor goes to our pathway.
+
        </div>
+
        </br>
+
        <div class=text-container>
+
            These numbers show that there is likely enough precursor and that acetaminophen production should be within a userful, measurable range of up to 23mg acetaminophen per gram biomass.
+
        </div>
+
        </div>
+
        <div align="left">
+
        <h4>Biomass <img class="spirulina_pic" src="https://static.igem.org/mediawiki/2017/5/5c/Spirulina_powder.png" style="width:168px;height=128px"></h4>
+
        <div class=text-containter>
+
            To understand the production capacity of our organism, we aggregated growth data from published papers and all of our lab’s growth data.  Using limited logistic growth curves and linear algebra to fit our equation, we modelled dried biomass and cell count per time, with the additional dependent variables of temperature, light intensity, and starter culture density.
+
        </div>
+
        <div id="graph"></div>
+
  
  
        Timescale: <button onclick="MinusDays(); MakeChart();"> < </button>
+
<style>
            <var id="htmlDaysID"></var> days
+
        <button onclick="PlusDays(); MakeChart();"> > </button>
+
            </br>
+
  
            Light Intensity: <button onclick="MinusOneLight();MakeChart();"> < </button>
+
.frontpage {
            <var id="htmlIntensityID"></var> &mu;E m<sup>-2</sup> s<sup>-1</sup>
+
margin-right: 25px;
            <button onclick="PlusOneLight(); MakeChart();"> > </button>
+
margin-left: 25px;
            </br>
+
  
            Temperature: <button onclick="MinusOneDegree(); MakeChart();"> < </button>
 
            <var id="htmlTempID"></var> &#x2103;
 
            <button onclick="PlusOneDegree(); MakeChart();"> > </button>
 
            </br>
 
  
            Starting Density: <button id="MinusDensity" onclick="MinusDensity(); MakeChart();"> < </button>
+
<div id="page">
            <var id="htmlDensityID"></var> g biomass/ L
+
            <button onclick="PlusDensity(); MakeChart();">  > </button>
+
            </br>
+
  
            <div id="demo"></div>
+
  <div class="headerbox" style="margin-right: 25px; margin-left: 25px;">  
 
+
<img src="https://static.igem.org/mediawiki/2017/5/50/Frontpage1.png" style="user-drag: none;  
            <h3>References</h3>
+
user-select: none;
            <a href= http://onlinelibrary.wiley.com/doi/10.1002/cjce.22154/abstract>Growth optimization of Synechococcus elongatus PCC7942 in lab flasks and a 2-D photobioreactor</a> </br>
+
-moz-user-select: none;
            <a href= http://ucelinks.cdlib.org:8888/sfx_local?ID=doi:10.1007%2Fs10811-011-9683-2&genre=article&atitle=Carbon%20metabolism%20and%20energy%20conversion%>Carbon metabolism and energy conversion of Synechococcus sp. PCC 7942 under mixotrophic conditions.</a></br>
+
-webkit-user-drag: none;
            <a href=https://ndb.nal.usda.gov/ndb/foods/show/3306?fgcd=&manu=&lfacet=&format=Full&count=&max=50&offset=&sort=default&order=asc&qlookup=11667&ds=&qt=&qp=&qa=&qn=&q=&ing=>United States Department of Agriculture Full Nutritional Report, Spirulina</a></br>
+
-webkit-user-select: none;
            <a href=http://onlinelibrary.wiley.com/store/10.1002/jsfa.2740330511/asset/2740330511_ftp.pdf?v=1&t=j7tly39i&s=d889996cde56001a928eced82e3506459f823956>Nutritional Quality of the Blue-Green Alga Spirulina platensis. </a>
+
-ms-user-select: none;
        </div>
+
    </body>
+
 
+
<style>
+
    #page {
+
        background: honeydew;
+
    }
+
    #graph {
+
        min-width: 50px;
+
        max-width: 2000px;
+
        min-height: 200px;
+
        max-height: 1000;
+
        width: 1200px;
+
        height: 700px;
+
        margin: 0 auto;
+
    }
+
    @media (max-width: 1086px) {
+
        #graph {
+
        min-width: 200px;
+
        max-width: 800px;
+
        height: 400;
+
        min-height: 200;
+
        max-height: 600px;
+
        width: 70%;
+
        margin: 0 auto;
+
        }
+
    }
+
    @media (max-width: 768px) {
+
        #graph {
+
        min-width: 150px;
+
        max-width: 700px;
+
            height: 300;
+
            min-height: 100;
+
            max-height: 500px;
+
            width: 85%;
+
            margin: 0 auto;
+
        }
+
    }
+
    @media (max-width: 576px) {
+
        #graph {
+
            min-width: 100px;
+
            max-width: 400px;
+
            height: 200;
+
            min-height: 50;
+
            max-height: 400px;
+
            width: 95%;
+
            margin: 0 auto;
+
        }
+
    }
+
    button{
+
        background-color: #cccccc ;
+
    margin: 4px 2px;
+
    font-size: 30px;
+
    border-radius: 10px
+
    }
+
    button:hover{
+
        background-color: #888888 ;
+
        margin: 4px 2px;
+
        font-size: 30px;
+
        border-radius: 10px;
+
        cursor: pointer;
+
    }
+
    button:active{
+
        background-color: #666666 ;
+
        margin: 4px 2px;
+
        font-size: 30px;
+
        border-radius: 1.5cm
+
    }
+
    body{
+
        text-align: auto;
+
        margin-left: 80px;
+
        margin-right: 80px;
+
        background-color: honeydew;
+
    }
+
    img.acetaminophen {
+
        position: relative;
+
        top: 0px;
+
    }
+
    img.spirulina_pic {
+
        position: relative;
+
        top: 0px;
+
    }
+
    h1 {
+
        font-family: 'Quicksand'; /*!important*/
+
        font-size: 250%; /*!important*/
+
    }
+
    h3 {
+
    font-family: 'Quicksand' !important;
+
    font-size: 40px !important;
+
    text-align: center;
+
    position:relative;
+
    /*  margin-left: 200px !important;
+
    margin-right: 200px !important;*/
+
    } 
+
    .text-container {
+
 
         width: 100%;
 
         width: 100%;
        padding-left: 0px;
+
        padding-right: 0px;
+
</div>
    }
+
</div>
    .text-cuntainer {
+
        width: 90%;
+
        padding-left: 100px;
+
        text-align: center;
+
        padding-right: 0px;
+
    }
+
    .quote {
+
    font-family: 'Quicksand' !important;
+
    font-style: italic !important;
+
    font-size: 40px;
+
    }
+
  
</style>
 
 
<script>
 
    localStorage.jsDaysValue = 10
 
    localStorage.jsIntensityValue = 100
 
    localStorage.jsTempValue = 33
 
    localStorage.jsDensityValue = Number(0.1)
 
 
    document.getElementById("htmlDaysID").innerHTML = localStorage.jsDaysValue;
 
    document.getElementById("htmlIntensityID").innerHTML = localStorage.jsIntensityValue;
 
    document.getElementById("htmlTempID").innerHTML = localStorage.jsTempValue;
 
    document.getElementById("htmlDensityID").innerHTML = localStorage.jsDensityValue;
 
 
    function MinusDays() {
 
        if(localStorage.jsDaysValue>1){
 
            localStorage.jsDaysValue=parseInt(localStorage.jsDaysValue)-1;
 
        }
 
        document.getElementById("htmlDaysID").innerHTML=localStorage.jsDaysValue;
 
    }
 
    function PlusDays() {
 
        localStorage.jsDaysValue=parseInt(localStorage.jsDaysValue)+1;
 
        document.getElementById("htmlDaysID").innerHTML = localStorage.jsDaysValue;
 
    }
 
    function MinusOneLight() {
 
        if(localStorage.jsIntensityValue>10){
 
            localStorage.jsIntensityValue=parseInt(localStorage.jsIntensityValue)-10;
 
        }
 
        document.getElementById("htmlIntensityID").innerHTML=localStorage.jsIntensityValue;
 
    }
 
    function PlusOneLight() {
 
        localStorage.jsIntensityValue=parseInt(localStorage.jsIntensityValue)+10;
 
 
        document.getElementById("htmlIntensityID").innerHTML=localStorage.jsIntensityValue;
 
    }
 
 
    function MinusOneDegree() {
 
        if(localStorage.jsTempValue>1){
 
            localStorage.jsTempValue=parseInt(localStorage.jsTempValue)-1;
 
        }
 
        document.getElementById("htmlTempID").innerHTML=localStorage.jsTempValue;
 
    }
 
    function PlusOneDegree() {
 
        localStorage.jsTempValue=parseInt(localStorage.jsTempValue)+1;
 
        document.getElementById("htmlTempID").innerHTML = localStorage.jsTempValue;
 
    }
 
    function MinusDensity() {
 
        if(localStorage.jsDensityValue>0.15){
 
            localStorage.jsDensityValue=(Number(localStorage.jsDensityValue)-0.1).toFixed(1);
 
    }
 
        document.getElementById("htmlDensityID").innerHTML=localStorage.jsDensityValue;
 
    }
 
    function PlusDensity() {
 
        localStorage.jsDensityValue=(Number(localStorage.jsDensityValue)+0.1).toFixed(1);
 
        document.getElementById("htmlDensityID").innerHTML = localStorage.jsDensityValue;
 
    }
 
 
</script>
 
 
<script src="https://code.highcharts.com/highcharts.src.js"></script>
 
 
<script> //Charting
 
    function MakeChart(){
 
        var yValueArray = []
 
        for(var dayNum=0; dayNum<=localStorage.jsDaysValue; dayNum++){
 
            var myNum = 1/(1+(Math.pow(Math.E,((-1+(Math.abs(localStorage.jsIntensityValue-100)/250))+(Math.abs(localStorage.jsTempValue-33)/9))*dayNum+5)))
 
            //yValueArray.push(myNum);
 
            yValueArray.push(Number(myNum.toFixed(4))+Number(localStorage.jsDensityValue));
 
        }   
 
 
        //document.getElementById("demo").innerHTML = localStorage.jsDensityValue;
 
 
        Highcharts.chart('graph', {
 
 
            title: {
 
                text: ''
 
            },
 
            subtitle: {
 
                text: ''
 
            },
 
            yAxis: {
 
                title: {
 
                    text: 'Grams Dried Biomass per Liter'
 
                }
 
            },
 
            xAxis: {
 
                title: {
 
                    text: 'Days'
 
                }
 
            },
 
            legend: {
 
                layout: 'vertical',
 
                align: 'right',
 
                verticalAlign: 'center'
 
            },
 
            plotOptions: {
 
                series: {
 
                    pointStart: 0
 
                }
 
            },
 
            series: [{
 
                name: 'Synechococcus 7942',
 
                data: yValueArray,
 
            }]
 
        });
 
    }
 
    MakeChart()
 
</script>
 
 
</html>
 
</html>
{{Scroll}}
 
 
  
 
{{UCSC-Footer}}
 
{{UCSC-Footer}}

Revision as of 19:55, 21 September 2017

Santa Cruz IGEM