Team:UT Dallas/Infographics

From 2012.igem.org

(Difference between revisions)

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.

@@ Line 7: / Line 7: @@
 <!-- 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='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">
+<script type="text/javascript" src="https://2012.igem.org/Team:UT_Dallas/infographics.js?action=raw&ctype=text/javascript&dsfjkhasdf=erferf"></script>
-google.load('visualization', '1', {packages: ['geochart']});
+<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ythrtybu=erdfyw" rel="stylesheet">
-    function draw_map(year_num)
+<style>
-	{
+.gold_coins
-	  document.getElementById('visualization').innerHTML='Loading . . .';
+{
-	  var data=null;
+position:relative;
-		var data_2012 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',1],['China',30],['India',4],['Indonesia',1],['Japan',12],['Korea',4],['Taiwan',4],['Congo',1],['Belgium',1],['Denmark',2],['France',4],['Germany',10],['Israel',1],['Italy',2],['Netherlands',7],['Norway',1],['Poland',1],['Scotland',2],['Slovenia',1],['Spain',3],['Sweden',2],['Switzerland',2],['Turkey',3],['United Kingdom',7],['Argentina',1],['Brazil',1],['Chile',1],['Colombia',1],['Costa Rica',1],['Panama',3],['Mexico',8],['United States',56],['Canada',11]]);
+height:50px;
-		var data_2011 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',2],['China',21],['India',3],['Japan',9],['Korea',4],['Taiwan',2],['Belgium',2],['Denmark',3],['France',5],['Germany',5],['Italy',2],['Netherlands',4],['Norway',1],['Poland',1],['Scotland',3],['Spain',3],['Sweden',1],['Switzerland',1],['Turkey',4],['United Kingdom',5],['Brazil',1],['Colombia',1],['Panama',2],['Mexico',3],['United States',43],['Canada',10],['South Africa',1],['Hungary',1]]);
+width:77px;
-		var data_2010 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',3],['China',11],['India',3],['Japan',9],['Korea',3],['Taiwan',2],['Belgium',1],['Denmark',2],['France',3],['Germany',8],['Italy',1],['Netherlands',2],['Poland',1],['Scotland',1],['Slovenia',1],['Spain',2],['Sweden',2],['Switzerland',2],['Turkey',2],['United Kingdom',8],['Panama',1],['Mexico',3],['United States',36],['Canada',7],['South Africa',1],['Hungary',1]]);
+background: url('https://static.igem.org/mediawiki/2012/d/d1/Gold_coin.png');
-		var data_2009 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',2],['China',9],['India',4],['Japan',6],['Korea',2],['Taiwan',2],['Belgium',2],['Denmark',2],['France',2],['Germany',4],['Italy',2],['Netherlands',2],['Poland',1],['Scotland',1],['Slovenia',1],['Spain',2],['Sweden',2],['Switzerland',1],['Turkey',1],['United Kingdom',8],['Brazil',1],['Colombia',2],['Mexico',2],['United States',30],['Canada',10],['Singapore',1]]);
+    font-size: 18px;
-		var data_2008 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',1],['China',9],['India',1],['Japan',3],['Belgium',1],['France',2],['Germany',2],['Italy',2],['Netherlands',2],['Poland',1],['Scotland',1],['Slovenia',1],['Spain',1],['Switzerland',2],['Turkey',2],['United Kingdom',5],['Colombia',1],['Mexico',2],['United States',28],['Canada',10],['Singapore',1]]);
+    font-weight: bold;
-		var data_2007 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Australia',1],['China',5],['India',1],['Japan',2],['Italy',2],['Scotland',1],['Slovenia',1],['Turkey',1],['Colombia',1],['Mexico',1],['United States',25],['Canada',6]]);
+    text-align: center;
-		var data_2006 = google.visualization.arrayToDataTable([['Country', 'Teams'],['India',1],['Japan',2],['Korea',1],['Germany',1],['Scotland',1],['Slovenia',1],['Switzerland',1],['Turkey',1],['United Kingdom',2],['Colombia',1],['Mexico',1],['United States',23],['Canada',3]]);
+line-height: 30px;
-		var data_2005 = google.visualization.arrayToDataTable([['Country', 'Teams'],['Switzerland',1],['United Kingdom',1],['United States',10],['Canada',1]]);
+}
-		var data_2004 = google.visualization.arrayToDataTable([['Country', 'Teams'],['United States',5]]);
-      var options = {
+.silver_coins
-            datalessRegionColor:'#eeeeee',
+{
-            backgroundColor: { fill: "none" },
+position:relative;
-            colorAxis: {colors: ['green','yellow','red']},
+height:50px;
-            width: 1000,
+width:77px;
-            height: 700
+background: url('https://static.igem.org/mediawiki/2012/3/3c/Silver_coin.png');
-          };
+    font-size: 18px;
-      var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
+    font-weight: bold;
-	  if(year_num==2012)
+    text-align: center;
-		data=data_2012;
+line-height: 30px;
-	  else if(year_num==2011)
+}
-		data=data_2011;
-	  else if(year_num==2010)
+.bronze_coins
-		data=data_2010;
+{
-	  else if(year_num==2009)
+position:relative;
-		data=data_2009;
+height:50px;
-	  else if(year_num==2008)
+width:77px;
-		data=data_2008;
+background: url('https://static.igem.org/mediawiki/2012/2/29/Bronze_coin.png');
-	  else if(year_num==2007)
+    font-size: 18px;
-		data=data_2007;
+    font-weight: bold;
-	  else if(year_num==2006)
+    text-align: center;
-		data=data_2006;
+line-height: 30px;
-	  else if(year_num==2005)
+}
-		data=data_2005;
+</style>
-	  else if(year_num==2004)
+<script language="javascript">
-		data=data_2004;
+$(document).ready(function(){  colorize_menu('project');});
-      geochart.draw(data,options);
-    }
-    //google.setOnLoadCallback(draw_2012);
 </script>
-<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&pyjytu=eryw" rel="stylesheet">
 </html>
 <div id='top_box'>
@@ Line 61: / Line 59: @@
 </div>
 <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 id="visualization"></div>
+<div id='world_heat_map' style='height:730px'>
-<input type='button' value='2012' onClick="draw_map(2012)">
+<div id="visualization" style="margin-bottom: 3px;width:960px;height:700px;margin-left:-5px;overflow:hidden"></div>
-<input type='button' value='2011' onClick="draw_map(2011)">
+<div id="year_no">Year 2012</div>
-<input type='button' value='2010' onClick="draw_map(2010)">
+<input type='button' value='2012' onClick="draw_map(2012)" class="button" style="width:65px">
-<input type='button' value='2009' onClick="draw_map(2009)">
+<input type='button' value='2011' onClick="draw_map(2011)" class="button" style="width:65px">
-<input type='button' value='2008' onClick="draw_map(2008)">
+<input type='button' value='2010' onClick="draw_map(2010)" class="button" style="width:65px">
-<input type='button' value='2007' onClick="draw_map(2007)">
+<input type='button' value='2009' onClick="draw_map(2009)" class="button" style="width:65px">
-<input type='button' value='2006' onClick="draw_map(2006)">
+<input type='button' value='2008' onClick="draw_map(2008)" class="button" style="width:65px">
-<input type='button' value='2005' onClick="draw_map(2005)">
+<input type='button' value='2007' onClick="draw_map(2007)" class="button" style="width:65px">
-<input type='button' value='2004' onClick="draw_map(2004)">
+<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>
+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.
+<br>
+<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>
+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.
+<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 id="year_no_awards">Year 2011</div>
+<input type='button' value='2007' onclick="coins(coin_array_2007)" class="button" style="width:65px">
+<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>
+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.
+<br>
+<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>
+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>
 </html>