Team:UT Dallas/Infographics

From 2012.igem.org

(Difference between revisions)
Line 10: Line 10:
<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'></script>
-
var prev_year_num=0;
+
-
google.load('visualization', '1', {packages: ['geochart']});
+
-
google.load('visualization', '1', {packages: ['corechart']});
+
-
  function init_tracks_graph()
+
-
  {
+
-
var options={
+
-
                  width:995, height:450,
+
-
                  backgroundColor: { fill: "none" },
+
-
                  legend:{textStyle:{color: 'white'}},
+
-
                  vAxis: {baselineColor:'white',title: "Year",textStyle:{color: 'white'},titleTextStyle:{color: '#ffffff', fontSize: 16}},
+
-
                  hAxis: {baselineColor:'white',title: "Tracks",textStyle:{color: 'white'},titleTextStyle:{color: '#ffffff', fontSize: 16}},
+
-
  animation:{
+
-
duration: 1000,
+
-
easing: 'inAndOut',
+
-
  }
+
-
 
+
-
  };
+
-
    var data=[];
+
-
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([
+
-
['Year','Not Specified'],
+
-
['2008',82,],]);
+
-
 
+
-
var data_2009 = google.visualization.arrayToDataTable([
+
-
['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,],]);
+
-
 
+
-
var data_2010 = google.visualization.arrayToDataTable([
+
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Manufacturing','New Application','Software Tools','Not Specified'],
+
-
['2010',12,16,20,6,20,17,20,6,1,],]);
+
-
 
+
-
var data_2011 = google.visualization.arrayToDataTable([
+
-
['Year','Food/Energy','Environment','Foundational Research','Information Processing','Health/Medicine','Manufacturing','New Application','Software Tools','Not Specified'],
+
-
['2011',15,25,26,10,13,15,31,8,8,],]);   
+
-
    var chart = new google.visualization.BarChart(document.getElementById('tracks_graphs'));
+
-
    var button_2011 = document.getElementById('b2011');
+
-
var button_2010 = document.getElementById('b2010');
+
-
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;
+
-
          });
+
-
          chart.draw(data, options);
+
-
    }
+
-
+
-
    button_2011.onclick = function() {
+
-
      data=data_2011;
+
-
setTimeout("document.getElementById('year_no_tracks').innerHTML='Year 2011';",1000);
+
-
      drawChart(button_2011);
+
-
    }
+
-
    button_2010.onclick = function() {
+
-
  data=data_2010;
+
-
setTimeout("document.getElementById('year_no_tracks').innerHTML='Year 2010';",1000);
+
-
      drawChart(button_2010);
+
-
    }
+
-
    button_2009.onclick = function() {
+
-
  data=data_2009;
+
-
setTimeout("document.getElementById('year_no_tracks').innerHTML='Year 2009';",1000);
+
-
      drawChart(button_2009);
+
-
    }
+
-
    button_2008.onclick = function() {
+
-
  data=data_2008;
+
-
setTimeout("document.getElementById('year_no_tracks').innerHTML='Year 2008';",1000);
+
-
      drawChart(button_2008);
+
-
    }
+
-
    button_2007.onclick = function() {
+
-
  data=data_2007;
+
-
setTimeout("document.getElementById('year_no_tracks').innerHTML='Year 2007';",1000);
+
-
      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>
+
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ytfghybu=erdfyw" rel="stylesheet">
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&ytfghybu=erdfyw" rel="stylesheet">
</html>
</html>

Revision as of 08:37, 25 September 2012

Infographics

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!
Year 2012
Start writing stuffs here
Year 2011
Again start writing stuffs here
Retrieved from "http://2012.igem.org/Team:UT_Dallas/Infographics"