Team:Penn/Modeling

From 2013.igem.org

(Difference between revisions)
 
(23 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
     <title></title>
+
     <title>modeling</title>
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
      <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/>
-
    <!-- Bootstrap and mainstyle css -->
+
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ" type="text/javascript"></script>
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzEblVWdXkta245Y0k/" type="text/javascript"> </script> <!--javascript-->
-
  <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
<script>
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
        $(document).ready(function($) {
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
+
-
   
+
-
    <script>
+
-
        jQuery(document).ready(function($) {
+
-
       
+
-
        $('body').scrollspy({ target: '#nav-circles' });
+
-
       
+
-
        $("#one").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#top").offset().top,
+
-
    }, '2400');
+
-
});
+
-
   
+
-
      $("#two").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#first-section").offset().top,
+
-
    }, '2400');
+
-
});
+
-
     
+
-
          $("#three, #team").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#second-section").offset().top,
+
-
    }, '2400');
+
-
});
+
-
      $("#four").click(function() {
+
/*load in the sidebar*/
-
        $('html, body').animate({
+
$('.left_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
-
        scrollTop: $("#third-section").offset().top,
+
 
-
    }, '2400');
+
          });
-
});
+
    </script>   
 +
<style>
 +
           
          
          
-
        });
 
-
    </script>
 
-
    <style>
 
-
        /*hero unit positioning*/
 
-
        #text {
 
-
                      align: center;
 
-
float: center;
 
-
            padding: 50px;
 
-
margin-left: auto;
 
-
margin-right: auto;
 
-
margin-top: 40px;
 
-
width: 400px;
 
-
overflow: hidden;
 
-
           
 
-
        }
 
-
       
 
-
        /*navigation circles*/
 
-
        #nav-circles {
 
-
            position: fixed;
 
-
            top: 100px;
 
-
            right: 20px;
 
-
            z-index: 9999;
 
-
        }
 
      
      
          
          
-
        #nav-circles li, #icon  {
 
-
            overflow: hidden;
 
-
            display: block;
 
-
            height: 30px;
 
-
            width: 30px;
 
-
            border-radius: 100%;
 
-
            margin:10px;
 
-
            padding:3px;
 
-
            top: 100px;
 
-
            right: 100px;
 
-
            background-color: gray;
 
-
        }
 
-
       
 
-
        /*Sections*/
 
-
        .section {
 
-
            min-height: 700px;
 
-
            min-width: 500px;
 
-
        }
 
-
       
 
-
        /*rows with images*/
 
-
        .row{
 
-
            width: 100%;
 
-
            margin-top: 100px;
 
-
        }
 
-
       
 
-
      .span4 {
 
-
            height: 150px;
 
-
            width: 150px;
 
-
            position: static;
 
-
              -moz-border-radius: 100%;
 
-
    -webkit-border-radius: 100%;
 
-
    -khtml-border-radius: 100%;
 
-
            border-radius: 100%;
 
-
            overflow: hidden;
 
-
            background-size: 300px;
 
-
            background-position: -70px -20px;
 
-
           
 
-
            display: inline-block;
 
-
           
 
-
        }
 
-
       
 
-
        .span_smaller {
 
-
            font-family: arial, sans-serif;
 
-
            text-align: center;
 
-
            height: 100px;
 
-
            width: 100px;
 
-
            position: relative;
 
-
              -moz-border-radius: 100%;
 
-
    -webkit-border-radius: 100%;
 
-
    -khtml-border-radius: 100%;
 
-
            border-radius: 100%;
 
-
            overflow: hidden;
 
-
            background-size: 300px;
 
-
            background-position: -70px -20px;
 
-
            opacity: .7;
 
-
            margin: 25px;
 
-
            margin-top: 0px;
 
-
            display: inline-block;
 
-
           
 
-
        }
 
-
       
 
-
        .span4 img {
 
-
            height: 150px;
 
-
         
 
-
            position: relative;
 
-
        }
 
-
       
 
-
                .span4:hover {
 
-
            opacity: 1;
 
-
        }
 
-
                        .span_smaller:hover {
 
-
            opacity: 1;
 
-
        }
 
-
       
 
-
        .span_smaller img {
 
-
            height: 100px;
 
-
         
 
-
            position: relative;
 
-
        }
 
-
       
 
-
                .span4:hover {
 
-
            opacity: 1;
 
-
        }
 
-
       
 
-
        .img-span {
 
-
    overflow: hidden;
 
-
    height: 100px;
 
-
width: 100%;
 
-
background-size: 100%;
 
-
    background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
 
-
    background-repeat: no-repeat;
 
-
    background-position: center;
 
-
    position: relative;
 
-
margin-left: 0px;
 
-
margin-top: 20px;
 
-
margin-bottom: 20px;
 
-
}
 
-
 
-
a {
 
-
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 
-
  filter: alpha(opacity=80);
 
-
-moz-opacity: 0.8;
 
-
-khtml-opacity: 0.8;
 
-
  opacity: 0.8;
 
-
}
 
-
 
-
a:hover {
 
-
    opacity: 1;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
    .figure {
 
-
        float: left;
 
-
        margin: 7px;
 
-
    display: inline;
 
-
    max-height: 400px;
 
-
    max-width: 400px;
 
-
       
 
-
    }
 
-
    .clear { clear:both;} /*add a clear div if formatting gets weird because of float*/
 
-
         
 
-
      .caption {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
      margin-bottom: 15px;
 
-
        line-height: 10px;
 
-
text-align: center;
 
-
 
-
      }
 
-
     
 
-
      .caption2 {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
        position: relative;
 
-
        left: -150px;
 
-
        top:-10px;
 
-
 
-
        line-height: 10px;
 
-
text-align: left;
 
-
float: left;
 
-
      }
 
     </style>
     </style>
-
  </head>
+
</head>
-
 
+
<body>
-
    <body>
+
<img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
-
      <div class="navbar-wrapper">
+
<img src="http://collegediabetesnetwork.org/wp-content/uploads/2012/07/UPenn_logo1.png" id="penn"/> <!--penn logo-->
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
  <div class="left_wrap">
-
      <div class="container">
+
-
 
+
-
        <div class="navbar navbar-inverse navbar-fixed-top">
+
-
          <div class="navbar-inner">
+
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
            </button>
+
-
          <!-- <a class="brand" style="color: white; padding-left: 11%;" href="https://2013.igem.org/Team:Penn">Penn iGEM</a>-->
+
-
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
+
-
            <div class="nav-collapse collapse">
+
-
              <ul class="nav">
+
-
             
+
-
                <li><a href="https://2013.igem.org/Team:Penn">Penn iGEM</a></li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                 
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
+
-
                    <li class="active"><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
+
-
                    <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
+
-
                    <!--<li class="divider"></li>
+
-
                    <li class="nav-header">Nav header</li>
+
-
                    <li><a href="#">Separated link</a></li>
+
-
                    <li><a href="#">One more separated link</a></li>-->
+
-
                  </ul>
+
-
                </li>
+
-
                <li><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
        </div><!-- /.navbar -->
+
-
 
+
-
      </div> <!-- /.container -->
+
-
    </div><!-- /.navbar-wrapper -->
+
-
   
+
-
 
+
-
       
+
-
 
+
      
      
-
 
+
 
-
    <!--First section-->
+
  <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo-->
-
    <div class="section" id="first-section">
+
-
       
+
-
    <div align="center" class="row" style="position: relative; margin-left: auto; margin-right: auto; display: block; width: 600px; max-height: 200px; margin-top: 140px; margin-bottom: 40px; overflow: hidden; position: static; white-space: nowrap;">
+
-
<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: 0px 25px 0px 25px;">
+
-
    </div><!-- /.span4 -->
+
      
      
-
     <div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; align: center; margin: 0px 25px 0px 25px;">
+
   
-
          <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
+
   
-
        </div><!-- /.span4 -->
+
   
 +
     <div class="section-title" style="left: 20px;">modeling</div>
-
<div class="span4" style="background-image: url('https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Y5d0PLu26o/photo-7.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg'); margin: auto; margin: 0px 25px 0px 25px;">
+
    </div>
-
          <!--<img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg"/>-->
+
    <div class="section1" style="background-position: top;">
-
        </div><!-- /.span4 --></div>
+
        <div class="text">
 +
            <b><center><h1>
 +
MaGellin
 +
</b></center></h1>
 +
<br>
 +
<b><center>
 +
Open Source Automated, Quantifiable DNA Analysis for our Assay
 +
</b></center>
 +
<br>
 +
MaGellin is a MATLAB script that uses computer vision algorithms to calculate the location and intensity of DNA bands. It also has a bioinformatics module to compare the lengths of bands with the expected lengths, based on the methylation sensitivity of the enzymes and the plasmid of the sequence. So, MaGellin is more than another gel quantifier - it interprets the biological meaning of the band lengths and returns experimentally relevant analyses. MaGellin is crucial for our workflow because it allows for clear input/output. Since our restriction digests always yield bands in predictable locations, MaGellin eliminates user bias and standardizes data sets across trials and labs, accelerating the pace of discovery.
 +
<br>
 +
<br>
 +
MaGellin converts gel images into standardized data sets, making data analysis quick, easy and unbiased.
 +
<br>
 +
<img src="http://s21.postimg.org/z98hqbrdj/gellin.png">
 +
<br>
 +
<br>
 +
A User-friendly GUI that is easy to navigate makes it ideal for first time users.
 +
<br>
 +
<img src="http://s8.postimg.org/5cd9z4b79/gellingui.png">
 +
<br>
 +
<br>
 +
The bioinformatics module simulates DNA digestion, so you know what bands to expect before even touching a pipette.
 +
<br>
 +
<img src="http://s14.postimg.org/6dwg73o5t/gellinbioinfo.png">
 +
<br>
 +
<br>
 +
Computer vision algorithm calculates location and intensity of DNA bands.
 +
<br>
 +
<img src="http://s16.postimg.org/6smb69xt1/gellinvision.png">
 +
<br>
 +
<br>
 +
SkyDrive provides open access to data and encourages collaborations. MaGellin is the interface to our assay, and it acts to abstract our plasmid system the same way a programming language abstracts computer hardware. 
 +
<br>
 +
<img src="http://s18.postimg.org/fusjsrq1l/gellindrive.png">
-
    <!--first hero unit-->
+
         </div>
-
    <div class="hero-unit" id="text">
+
-
      <h4>Modeling</h4>
+
-
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<img src="https://googledrive.com/host/0B4ZBZOYYKBzEdTRvdHVIRDI0OWM/"
+
-
  class="figure"/><p class="caption">This is a caption</p><p>Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
    </div><div class="hero-unit" id="text">
+
-
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                                        </div><div class="hero-unit" id="text">
+
-
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
-
  <img src="https://googledrive.com/host/0B4ZBZOYYKBzER09TYUNULWdHdU0" class="figure"/><p class="caption">This is a caption</p><p>Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p<
+
-
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                                                      <img src="https://googledrive.com/host/0B4ZBZOYYKBzESmtGdU1XelBPVm8/" class="figure"/><p class="caption2">This is a caption</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+
-
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+
-
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+
-
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+
-
  sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
+
-
                                                     
+
-
                                                               
+
     </div>
     </div>
-
</div>
 
-
 
      
      
-
 
-
 
-
   
 
-
    </div> <!--endsection--> 
 
-
       
 
-
    </body>
 
-
 
 
-
 
 
    
    
 +
</body>
 +
<script>
 +
</script>
</html>
</html>

Latest revision as of 10:19, 27 September 2013

modeling

modeling

MaGellin


Open Source Automated, Quantifiable DNA Analysis for our Assay

MaGellin is a MATLAB script that uses computer vision algorithms to calculate the location and intensity of DNA bands. It also has a bioinformatics module to compare the lengths of bands with the expected lengths, based on the methylation sensitivity of the enzymes and the plasmid of the sequence. So, MaGellin is more than another gel quantifier - it interprets the biological meaning of the band lengths and returns experimentally relevant analyses. MaGellin is crucial for our workflow because it allows for clear input/output. Since our restriction digests always yield bands in predictable locations, MaGellin eliminates user bias and standardizes data sets across trials and labs, accelerating the pace of discovery.

MaGellin converts gel images into standardized data sets, making data analysis quick, easy and unbiased.


A User-friendly GUI that is easy to navigate makes it ideal for first time users.


The bioinformatics module simulates DNA digestion, so you know what bands to expect before even touching a pipette.


Computer vision algorithm calculates location and intensity of DNA bands.


SkyDrive provides open access to data and encourages collaborations. MaGellin is the interface to our assay, and it acts to abstract our plasmid system the same way a programming language abstracts computer hardware.

Retrieved from "http://2013.igem.org/Team:Penn/Modeling"