Team:UT Dallas/Infographics

From 2012.igem.org

(Difference between revisions)
Line 9: Line 9:
<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">  
<script type="text/javascript">  
-
var prev_fname="";
+
google.load('visualization', '1', {packages: ['geochart']});
-
function change_map(fname)
+
    function draw_map(year_num)  
-
{
+
-
if(prev_fname!=fname)
+
{
{
-
        $('#world_map').fadeOut("slow");
+
  document.getElementById('visualization').innerHTML='Loading . . .';
-
$('#world_map').html($('#'+fname).html());
+
  var data=null;
-
$('#world_map').fadeIn("slow");
+
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]]);
-
prev_fname=fname;
+
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 = {
 +
            colorAxis: {colors: ['green','yellow','red']},
 +
            width: 1000,
 +
            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;
 +
      geochart.draw(data,options);
 +
    }
 +
    //google.setOnLoadCallback(draw_2012);
</script>
</script>
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&purtryjryjytu=eryw" rel="stylesheet">
<link href="https://2012.igem.org/Team:UT_Dallas/test/page.css?action=raw&ctype=text/css&purtryjryjytu=eryw" rel="stylesheet">
Line 32: Line 62:
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!
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!
</div>
</div>
-
 
+
<div id="visualization"></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>
+
<input type='button' value='2012' onClick="draw_map(2012)">
-
 
+
<input type='button' value='2011' onClick="draw_map(2011)">
-
 
+
<input type='button' value='2010' onClick="draw_map(2010)">
-
<div id='world_map'>map</div>
+
<input type='button' value='2009' onClick="draw_map(2009)">
-
<ul style='list-style: none outside none;'>
+
<input type='button' value='2008' onClick="draw_map(2008)">
-
  <li class='st_list' onclick="change_map('2004')">2004</li>
+
<input type='button' value='2007' onClick="draw_map(2007)">
-
  <li class='st_list' onclick="change_map('2005')">2005</li>
+
<input type='button' value='2006' onClick="draw_map(2006)">
-
  <li class='st_list' onclick="change_map('2006')">2006</li>
+
<input type='button' value='2005' onClick="draw_map(2005)">
-
  <li class='st_list' onclick="change_map('2007')">2007</li>
+
<input type='button' value='2004' onClick="draw_map(2004)">
-
  <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>

Revision as of 23:09, 24 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!
Retrieved from "http://2012.igem.org/Team:UT_Dallas/Infographics"