Difference between revisions of "Template:Heidelberg/Weltkugel"

 
(45 intermediate revisions by 2 users not shown)
Line 45: Line 45:
 
                 position: relative;
 
                 position: relative;
 
                 background-color: #393939;
 
                 background-color: #393939;
−
                 min-height: 480px;
+
                 height: 530px;
 
                 color: white;
 
                 color: white;
 
             }
 
             }
Line 59: Line 59:
  
 
<div class="container">
 
<div class="container">
−
   <div class="row">
+
   <div class="row" style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: center;">
−
     <div style="height: 630px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
     <div style="width: 600px; height: 600px;" class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
 
       <svg id="globe"></svg>
 
       <svg id="globe"></svg>
 
       <svg id="defs">
 
       <svg id="defs">
Line 84: Line 84:
 
       </svg>
 
       </svg>
 
     </div>
 
     </div>
−
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="width: 410px; height: 600px;">
−
       <div style="position: absolute; background-color: white !important;color: white !important; width: 400px; right: 100px;top: 125px; border-radius: 10px; border: 1px solid #BF3E42;" id="show" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
+
       <div style="position: absolute; background-color: white !important;color: white !important; width: 400px; top: 100px; border-radius: 8px; border: none; padding: 15px 15px 15px 15px; display: flex; align-items: space-around; flex-wrap: wrap; display: -webkit-flex; -webkit-flex-wrap: wrap;" id="show">
−
     </div>   
+
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration1" class="heidelberg-red">> Mutagenesis Plasmid Inter-Lab Study</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration2" class="heidelberg-orange">> Cloning for iGEM Freiburg</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration3" class="heidelberg-blue">> PCR First Aid Service</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration4" class="heidelberg-green">> iGEM goes green</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration5" class="heidelberg-gray">> Mentoring Stuttgart</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration6" class="heidelberg-red">> Translation Center</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration7" class="heidelberg-orange">> Postcards</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration8" class="heidelberg-green">> No Science without Tolerance</a></p>
 +
 
 +
<p style="font-size: 20px; font-weight: bold; font-family: 'Josefin Sans'; flex-basis: 100%;"><a href="https://2017.igem.org/Team:Heidelberg/Collaborations#collaboration9" class="heidelberg-blue">> Surveys -
 +
Development within iGEM</a></p>
 +
 
 +
      </div>
 +
     </div>  
 +
   
 
   </div>
 
   </div>
 
</div>
 
</div>
Line 93: Line 115:
 
     <script src="http://d3js.org/queue.v1.min.js"></script>
 
     <script src="http://d3js.org/queue.v1.min.js"></script>
 
     <script>   
 
     <script>   
−
         d3.json("/wiki/images/6/61/T--Heidelberg--places.txt",  function(data){
+
         d3.json("/wiki/images/b/bb/T--Heidelberg--2017_realplaces.txt",  function(data){
 
         // process google sheet into geojson
 
         // process google sheet into geojson
  
Line 106: Line 128:
  
 
         function init(){
 
         function init(){
−
             width = 520,
+
             width = 500,
−
             height = 520;
+
             height = 500;
  
  
Line 118: Line 140:
  
 
          
 
          
−
         start = [0, 27.5]
+
         start = [49.4057072, 8.6135741]
 
         //Setup zoom behavior
 
         //Setup zoom behavior
−
         var zoom = d3.behavior.zoom(false)
+
         var zoom = d3.behavior.zoom(true)
 
         .translate(projection.origin())
 
         .translate(projection.origin())
−
         .scale(projection.scale())
+
         .scale(projection.scale()-50)
−
         .scaleExtent([250, 3000])
+
         .scaleExtent([200, 200])
 
         .on("zoom", move);
 
         .on("zoom", move);
 
          
 
          
 
         var circle = d3.geo.greatCircle();
 
         var circle = d3.geo.greatCircle();
 
          
 
          
−
         var lineTooltip = d3.select('#show');
+
         //var lineTooltip = d3.select('#show');
 
              
 
              
 
         var svg = d3.select("#globe")
 
         var svg = d3.select("#globe")
Line 180: Line 202:
 
                         return arcPath(circle.clip(d));
 
                         return arcPath(circle.clip(d));
 
                     }).on("mouseover", function(d) {
 
                     }).on("mouseover", function(d) {
−
                     lineTooltip.html(line_dict[d.properties.name]);
+
                     lineTooltip.html(d.properties.name);
 
                 });
 
                 });
  
Line 191: Line 213:
 
                     return devPath(circle.clip(d));
 
                     return devPath(circle.clip(d));
 
                 }).on("mouseover", function(d) {
 
                 }).on("mouseover", function(d) {
−
                     lineTooltip.html(line_dict[d.properties.name]);
+
                     lineTooltip.html(d.properties.name);
 
                 });
 
                 });
  

Latest revision as of 12:06, 1 November 2017