Team:UT Dallas/Infographics

From 2012.igem.org

(Difference between revisions)
 
(37 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="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>
-
var prev_year_num=0;
+
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ythrtybu=erdfyw" rel="stylesheet">
-
google.load('visualization', '1', {packages: ['geochart']});
+
<style>
-
google.load('visualization', '1', {packages: ['corechart']});
+
.gold_coins
-
  function init_tracks_graph()
+
{
-
  {
+
position:relative;
-
var options={  
+
height:50px;
-
                  width:995, height:450,
+
width:77px;
-
                  backgroundColor: { fill: "none" },
+
background: url('https://static.igem.org/mediawiki/2012/d/d1/Gold_coin.png');
-
                  legend:{textStyle:{color: 'white'}},
+
    font-size: 18px;
-
                  vAxis: {baselineColor:'white',title: "Year",textStyle:{color: 'white'},titleTextStyle:{color: '#ffffff', fontSize: 16}},
+
    font-weight: bold;
-
                  hAxis: {baselineColor:'white',title: "Tracks",textStyle:{color: 'white'},titleTextStyle:{color: '#ffffff', fontSize: 16}},
+
    text-align: center;
-
  animation:{
+
line-height: 30px;
-
duration: 1000,
+
}
-
easing: 'inAndOut',
+
-
  }
+
-
 
+
-
  };
+
-
    var data=[];
+
-
var msg="Year 2011";
+
-
var data_2007 = google.visualization.arrayToDataTable([
+
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Not Specified'],
+
-
['2007',7,9,18,10,9,6,],]);
+
-
var data_2008 = google.visualization.arrayToDataTable([
+
.silver_coins
-
['Year','Not Specified'],
+
{
-
['2008',82,],]);
+
position:relative;
 +
height:50px;
 +
width:77px;
 +
background: url('https://static.igem.org/mediawiki/2012/3/3c/Silver_coin.png');
 +
    font-size: 18px;
 +
    font-weight: bold;
 +
    text-align: center;
 +
line-height: 30px;
 +
}
-
var data_2009 = google.visualization.arrayToDataTable([
+
.bronze_coins
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Manufacturing','New Application','Software Tools','Not Specified'],
+
{
-
['2009',8,16,21,8,15,14,13,8,2,],]);
+
position:relative;
-
 
+
height:50px;
-
var data_2010 = google.visualization.arrayToDataTable([
+
width:77px;
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Manufacturing','New Application','Software Tools','Not Specified'],
+
background: url('https://static.igem.org/mediawiki/2012/2/29/Bronze_coin.png');
-
['2010',12,16,20,6,20,17,20,6,1,],]);
+
     font-size: 18px;
-
 
+
     font-weight: bold;
-
var data_2011 = google.visualization.arrayToDataTable([
+
     text-align: center;
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Manufacturing','New Application','Software Tools','Not Specified'],
+
line-height: 30px;
-
['2011',15,25,26,10,13,15,31,8,8,],]);   
+
}
-
    var chart = new google.visualization.BarChart(document.getElementById('tracks_graphs'));
+
</style>
-
    var button_2011 = document.getElementById('b2011');
+
<script language="javascript">
-
var button_2010 = document.getElementById('b2010');
+
$(document).ready(function(){ colorize_menu('project');});
-
var button_2009 = document.getElementById('b2009');
+
-
var button_2008 = document.getElementById('b2008');
+
-
var button_2007 = document.getElementById('b2007');
+
-
data=data_2011;
+
-
    function drawChart(button)
+
-
{
+
-
      // Disabling the button while the chart is drawing.
+
-
      button.disabled = true;
+
-
      google.visualization.events.addListener(chart, 'ready',
+
-
          function() {
+
-
            button.disabled = false;
+
-
            document.getElementById('year_no_tracks').innerHTML=msg;
+
-
          });
+
-
          chart.draw(data, options);
+
-
     }
+
-
+
-
    button_2011.onclick = function() {
+
-
      data=data_2011;
+
-
      msg='Year 2011';
+
-
      drawChart(button_2011);
+
-
     }
+
-
    button_2010.onclick = function() {
+
-
  data=data_2010;
+
-
msg='Year 2010';
+
-
      drawChart(button_2010);
+
-
     }
+
-
    button_2009.onclick = function() {
+
-
  data=data_2009;
+
-
msg='Year 2009';
+
-
      drawChart(button_2009);
+
-
    }
+
-
    button_2008.onclick = function() {
+
-
  data=data_2008;
+
-
msg='Year 2008';
+
-
      drawChart(button_2008);
+
-
    }
+
-
    button_2007.onclick = function() {
+
-
  data=data_2007;
+
-
msg='Year 2007';
+
-
      drawChart(button_2007);
+
-
    }
+
-
    drawChart(button_2011);
+
-
  }
+
-
    function draw_map(year_num)
+
-
{
+
-
  var data=null;
+
-
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]]);
+
-
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]]);
+
-
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]]);
+
-
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]]);
+
-
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]]);
+
-
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]]);
+
-
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]]);
+
-
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 = {
+
-
            legend:{textStyle: {color: "black", fontSize: 16}},
+
-
            datalessRegionColor:'#eeeeee',
+
-
            backgroundColor: { fill: "none" },
+
-
            colorAxis: {minValue: 0,maxValue:56, colors: ['green','yellow','magenta','red']},
+
-
            width: 994,
+
-
            height: 700
+
-
          };   
+
-
      var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));
+
-
  if(year_num==2012)
+
-
data=data_2012;
+
-
  else if(year_num==2011)
+
-
data=data_2011;
+
-
  else if(year_num==2010)
+
-
data=data_2010;
+
-
  else if(year_num==2009)
+
-
data=data_2009;
+
-
  else if(year_num==2008)
+
-
data=data_2008;
+
-
  else if(year_num==2007)
+
-
data=data_2007;
+
-
  else if(year_num==2006)
+
-
data=data_2006;
+
-
  else if(year_num==2005)
+
-
data=data_2005;
+
-
  else if(year_num==2004)
+
-
data=data_2004;
+
-
      if(prev_year_num!=year_num)
+
-
      {
+
-
          if(prev_year_num!=0)
+
-
          {
+
-
              //document.getElementById('visualization').innerHTML='Loading . . .';
+
-
              $('#visualization').fadeOut('slow', function() {
+
-
                geochart.draw(data,options);
+
-
                document.getElementById('year_no').innerHTML='Year '+year_num;
+
-
                prev_year_num=year_num;
+
-
                $("#visualization").fadeIn("slow");
+
-
              });
+
-
              //$("#visualization").fadeOut("slow");
+
-
          }
+
-
          else
+
-
          {
+
-
              geochart.draw(data,options);
+
-
              document.getElementById('year_no').innerHTML='Year '+year_num;
+
-
              prev_year_num=year_num;
+
-
          }
+
-
         
+
-
      }
+
-
    }
+
-
$(document).ready(function() {
+
-
  draw_map(2012);
+
-
  init_tracks_graph();
+
-
});
+
</script>
</script>
-
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ytfghybu=erdfyw" rel="stylesheet">
 
</html>
</html>
<div id='top_box'>
<div id='top_box'>
Line 167: 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='world_heat_map' style='height:730px'>
<div id='world_heat_map' style='height:730px'>
-
<div id="visualization" style="margin-bottom: 3px;width:995px;height:700px;margin-left: -5px;"></div>
+
<div id="visualization" style="margin-bottom: 3px;width:960px;height:700px;margin-left:-5px;overflow:hidden"></div>
<div id="year_no">Year 2012</div>
<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='2012' onClick="draw_map(2012)" class="button" style="width:65px">
Line 183: Line 77:
<input type='button' value='2004' onClick="draw_map(2004)" class="button" style="width:65px">
<input type='button' value='2004' onClick="draw_map(2004)" class="button" style="width:65px">
</div>
</div>
-
Start writing stuffs here
+
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_maps'>
         <div id="tracks_graphs" style="width: 995px;"></div>
         <div id="tracks_graphs" style="width: 995px;"></div>
Line 190: Line 86:
<input type='button' value='2010' id='b2010' 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='2009' id='b2009' class="button" style="width:65px">
-
<input type='button' value='2008' id='b2008' 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">
<input type='button' value='2007' id='b2007' class="button" style="width:65px">
</div>
</div>
-
Again start writing stuffs here
+
 
 +
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>
</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"