Team:UT Dallas/Infographics

From 2012.igem.org

(Difference between revisions)
 
(141 intermediate revisions not shown)
Line 7: Line 7:
<!-- Internet Explorer PNG fix - END /-->
<!-- Internet Explorer PNG fix - END /-->
 +
 +
<link href='http://fonts.googleapis.com/css?family=Scada' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
<script type='text/javascript' src='https://2012.igem.org/Team:UT_Dallas/script.js?action=raw&ctype=text/javascript'></script>
 +
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
 +
<script type="text/javascript" src="https://2012.igem.org/Team:UT_Dallas/infographics.js?action=raw&ctype=text/javascript&dsfjkhasdf=erferf"></script>
 +
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ythrtybu=erdfyw" rel="stylesheet">
 +
<style>
 +
.gold_coins
 +
{
 +
position:relative;
 +
height:50px;
 +
width:77px;
 +
background: url('https://static.igem.org/mediawiki/2012/d/d1/Gold_coin.png');
 +
    font-size: 18px;
 +
    font-weight: bold;
 +
    text-align: center;
 +
line-height: 30px;
 +
}
-
<script type="text/javascript">
+
.silver_coins
-
var prev_fname="";
+
{
-
function change_map(fname)
+
position:relative;
-
{
+
height:50px;
-
if(prev_fname!=fname)
+
width:77px;
-
{
+
background: url('https://static.igem.org/mediawiki/2012/3/3c/Silver_coin.png');
-
        $('#world_map').fadeOut("slow");
+
    font-size: 18px;
-
$('#world_map').html($('#'+fname).html());
+
    font-weight: bold;
-
$('#world_map').fadeIn("slow");
+
    text-align: center;
-
prev_fname=fname;
+
line-height: 30px;
-
}
+
}
}
 +
 +
.bronze_coins
 +
{
 +
position:relative;
 +
height:50px;
 +
width:77px;
 +
background: url('https://static.igem.org/mediawiki/2012/2/29/Bronze_coin.png');
 +
    font-size: 18px;
 +
    font-weight: bold;
 +
    text-align: center;
 +
line-height: 30px;
 +
}
 +
</style>
 +
<script language="javascript">
 +
$(document).ready(function(){  colorize_menu('project');});
</script>
</script>
-
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&purtryjryjytu=eryw" rel="stylesheet">
 
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 29: Line 59:
</div>
</div>
<div id='middle_box'>
<div id='middle_box'>
-
<div id='st_1'><h2 class='title'>Infographics</h2>
+
<div id='st_1'><h2 class='title'>iGEM Ingenious Engineering</h2>
-
This year, it has been X years since iGEM first started. We wanted to highlight some of the defining moments and show them to the rest of the iGEM world through these infographics! Enjoy!
+
iGEM’s almost unbelievable growth is easily seen by the dramatic increase in teams and countries that now participate in this international competition. From five teams from the U.S. in 2004 to over 200 in 2012, iGEM has reached out to all corners of the world (though Africa still needs some iGEM outreach).
 +
<br>
 +
<center><h2>Team Development</h2></center>
</div>
</div>
-
<div id='all_charts' style='display:none;visibility:hidden;'>
+
<div id='world_heat_map' style='height:730px'>
-
<div id='2012'>
+
<div id="visualization" style="margin-bottom: 3px;width:960px;height:700px;margin-left:-5px;overflow:hidden"></div>
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&range=A1%3AB37&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","animation":{"duration":0},"colors":["#00ff00","#ffff00","#ff0000"],"displayMode":"regions","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},"width":973,"height":554},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
<div id="year_no">Year 2012</div>
 +
<input type='button' value='2012' onClick="draw_map(2012)" class="button" style="width:65px">
 +
<input type='button' value='2011' onClick="draw_map(2011)" class="button" style="width:65px">
 +
<input type='button' value='2010' onClick="draw_map(2010)" class="button" style="width:65px">
 +
<input type='button' value='2009' onClick="draw_map(2009)" class="button" style="width:65px">
 +
<input type='button' value='2008' onClick="draw_map(2008)" class="button" style="width:65px">
 +
<input type='button' value='2007' onClick="draw_map(2007)" class="button" style="width:65px">
 +
<input type='button' value='2006' onClick="draw_map(2006)" class="button" style="width:65px">
 +
<input type='button' value='2005' onClick="draw_map(2005)" class="button" style="width:65px">
 +
<input type='button' value='2004' onClick="draw_map(2004)" class="button" style="width:65px">
</div>
</div>
-
 
+
Diversity is brought to iGEM through the teams it hosts and also through the projects it presents. As of 2012, there are eight main tracks that a team can adopt as the overarching theme of their project. This allows for a clear picture of what topics are currently popular and what topics have room for more growth.
-
<div id='2011'>
+
<br>
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CC1%3AC37&gid=0&pub=1","options":{"titleTextStyle":{"fontSize":16},"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"title":"Chart title","booleanRole":"certainty","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
<center><h2>Tracks Through the Years</h2></center>
 +
<div id='tracks_maps'>
 +
        <div id="tracks_graphs" style="width: 995px;"></div>
 +
        <div id="year_no_tracks">Year 2011</div>
 +
<input type='button' value='2011' id='b2011' class="button" style="width:65px">
 +
<input type='button' value='2010' id='b2010' class="button" style="width:65px">
 +
<input type='button' value='2009' id='b2009' class="button" style="width:65px">
 +
<input type='button' value='2008' id='b2008' class="button" style="width:65px;display:none">
 +
<input type='button' value='2007' id='b2007' class="button" style="width:65px">
</div>
</div>
-
<div id='2010'>
+
Though iGEM is not all about winning, it is interesting to see how the number of medalists have increased over the years. Unfortunately there has been a rather large decrease in 2011. We don’t know if this is because iGEM judges are holding the competitors to a higher standard or if there have been some halfhearted attempts to join this prestigious competition.
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CD1%3AD37&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
<br>
 +
<center><h2>Winners Through the Years</h2></center>
 +
<div id='awards_graph'>
 +
<div id='coin_graph' style="overflow:hidden;height:400px;width:550px;border:0px;background: url('https://static.igem.org/mediawiki/2012/3/31/Coin_graph_bg.png');margin-bottom: 15px; margin-left:235px;">
 +
<div id='gold_coin_graph' style="position:relative;height:1800px;width:80px;overflow:visible;top:-1415px;margin-left: 50px;float:left"></div>
 +
<div id='silver_coin_graph' style="position:relative;height:1800px;width:80px;overflow:visible;top:-1415px;margin-left: 100px;float:left"></div>
 +
<div id='bronze_coin_graph' style="position:relative;height:1800px;width:80px;overflow:visible;top:-1415px;margin-left: 100px;float:left"></div>
</div>
</div>
-
 
+
<div id="year_no_awards">Year 2011</div>
-
<div id='2009'>
+
<input type='button' value='2007' onclick="coins(coin_array_2007)" class="button" style="width:65px">
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CE1%3AE37&gid=0&pub=1","options":{"titleTextStyle":{"fontSize":16},"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"title":"Chart title","booleanRole":"certainty","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
<input type='button' value='2008' onclick="coins(coin_array_2008)" class="button" style="width:65px">
 +
<input type='button' value='2009' onclick="coins(coin_array_2009)" class="button" style="width:65px">
 +
<input type='button' value='2010' onclick="coins(coin_array_2010)" class="button" style="width:65px">
 +
<input type='button' value='2011' onclick="coins(coin_array_2011)" class="button" style="width:65px">
</div>
</div>
-
 
+
With the increase of winners and the diversity of teams that have accumulated internationally, we have high hopes that iGEM will continue to bring about innovative ideas that will never cease to stifle the mind of what is possible and how we can help the world.
-
<div id='2008'>
+
<br>
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CF1%3AF37&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
<center><h2>PRET Reporters</h2></center>
 +
<div id="reporters">
 +
<img src="https://static.igem.org/mediawiki/2012/7/7e/Reporters.png" style="margin-left: 85px;">
</div>
</div>
-
 
+
These PRET reporters are categorized according to their binding promoter. They are categorized into the following ways: Reporter binded with a constitutive promoter, reporter binded with a inducible promoter, reporters binded with repressible promoters, and finally reporters without promoters. This categorization makes it simpler to select the appropriate reporter required by the various needs of teams.  
-
<div id='2007'>
+
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CG1%3AG37&gid=0&pub=1","options":{"titleTextStyle":{"fontSize":16},"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"title":"Chart title","booleanRole":"certainty","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
-
</div>
+
-
 
+
-
<div id='2006'>
+
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CH1%3AH37&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
-
</div>
+
-
 
+
-
<div id='2005'>
+
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CI1%3AI37&gid=0&pub=1","options":{"titleTextStyle":{"fontSize":16},"vAxes":[{"title":"Left vertical axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"title":"Chart title","booleanRole":"certainty","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"title":"Horizontal axis title","useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
-
</div>
+
-
 
+
-
<div id='2004'>
+
-
<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js"> {"dataSourceUrl":"//docs.google.com/spreadsheet/tq?key=0AtenKzPUxWiedFZYZ0gzVExBdDFDaHRBWnpMeTBoYmc&transpose=0&headers=1&merge=COLS&range=A1%3AA37%2CJ1%3AJ37&gid=0&pub=1","options":{"vAxes":[{"useFormatFromData":true,"title":"Left vertical axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}],"titleTextStyle":{"fontSize":16},"booleanRole":"certainty","title":"Chart title","height":554,"animation":{"duration":500},"colors":["#00ff00","#ffff00","#ff0000"],"width":973,"displayMode":"regions","hAxis":{"useFormatFromData":true,"title":"Horizontal axis title","minValue":null,"viewWindowMode":"pretty","viewWindow":{"min":null,"max":null},"maxValue":null}},"state":{},"view":{},"chartType":"GeoChart","chartName":"Chart 1"} </script>
+
-
</div>
+
-
</div>
+
-
 
+
-
 
+
-
<div id='world_map'>map</div>
+
-
<ul style='list-style: none outside none;'>
+
-
  <li class='st_list' onclick="change_map('2004')">2004</li>
+
-
  <li class='st_list' onclick="change_map('2005')">2005</li>
+
-
  <li class='st_list' onclick="change_map('2006')">2006</li>
+
-
  <li class='st_list' onclick="change_map('2007')">2007</li>
+
-
  <li class='st_list' onclick="change_map('2008')">2008</li>
+
-
  <li class='st_list' onclick="change_map('2009')">2009</li>
+
-
  <li class='st_list' onclick="change_map('2010')">2010</li>
+
-
  <li class='st_list' onclick="change_map('2011')">2011</li>
+
-
  <li class='st_list' onclick="change_map('2012')">2012</li>
+
-
</ul>
+
</div>
</div>
</html>
</html>

Latest revision as of 03:01, 4 October 2012

iGEM Ingenious Engineering

iGEM’s almost unbelievable growth is easily seen by the dramatic increase in teams and countries that now participate in this international competition. From five teams from the U.S. in 2004 to over 200 in 2012, iGEM has reached out to all corners of the world (though Africa still needs some iGEM outreach).

Team Development

Year 2012
Diversity is brought to iGEM through the teams it hosts and also through the projects it presents. As of 2012, there are eight main tracks that a team can adopt as the overarching theme of their project. This allows for a clear picture of what topics are currently popular and what topics have room for more growth.

Tracks Through the Years

Year 2011
Though iGEM is not all about winning, it is interesting to see how the number of medalists have increased over the years. Unfortunately there has been a rather large decrease in 2011. We don’t know if this is because iGEM judges are holding the competitors to a higher standard or if there have been some halfhearted attempts to join this prestigious competition.

Winners Through the Years

Year 2011
With the increase of winners and the diversity of teams that have accumulated internationally, we have high hopes that iGEM will continue to bring about innovative ideas that will never cease to stifle the mind of what is possible and how we can help the world.

PRET Reporters

These PRET reporters are categorized according to their binding promoter. They are categorized into the following ways: Reporter binded with a constitutive promoter, reporter binded with a inducible promoter, reporters binded with repressible promoters, and finally reporters without promoters. This categorization makes it simpler to select the appropriate reporter required by the various needs of teams.
Retrieved from "http://2012.igem.org/Team:UT_Dallas/Infographics"