Difference between revisions of "Template:Heidelberg/Weltkugel"

 
(76 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{#tag:html|
 
{{#tag:html|
−
  {{Heidelberg/templateus/Contentsection|
 
 
   <html>
 
   <html>
 
     <style>
 
     <style>
Line 17: Line 16:
 
             .arcs {
 
             .arcs {
 
                 opacity: 1;
 
                 opacity: 1;
−
                 stroke: #6698be;
+
                 stroke: #BF3E42;
 
                 stroke-width: 5;
 
                 stroke-width: 5;
 
                 fill:none;
 
                 fill:none;
Line 27: Line 26:
 
             stroke-width:1;
 
             stroke-width:1;
 
             opacity: .6;
 
             opacity: .6;
−
             stroke: #6698be;  
+
             stroke: #BF3E42;
 
             }
 
             }
  
 
             .dev{
 
             .dev{
−
                 fill: #6698be;   
+
                 fill: #BF3E42;   
−
                 stroke: #6698be;
+
                 stroke: #BF3E42;
 
                 stroke-width: 1;
 
                 stroke-width: 1;
 
                 cursor: pointer;
 
                 cursor: pointer;
Line 38: Line 37:
  
 
             .dev:hover{
 
             .dev:hover{
−
                 stroke: #6698be;
+
                 stroke: #BF3E42;
 
                 stroke-width: 2;
 
                 stroke-width: 2;
 
             }
 
             }
Line 46: Line 45:
 
                 position: relative;
 
                 position: relative;
 
                 background-color: #393939;
 
                 background-color: #393939;
−
                 min-height: 400px;
+
                 height: 530px;
 
                 color: white;
 
                 color: white;
 
             }
 
             }
Line 59: Line 58:
 
       </style>
 
       </style>
  
 +
<div class="container">
 +
  <div class="row" style="display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; align-content: center; justify-content: center;">
 +
    <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="defs">
 +
        <defs>
 +
          <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
 +
            <stop offset="0%" style="stop-color:white;stop-opacity:1" />
 +
            <stop offset="100%" style="stop-color:whitesmoke;stop-opacity:1" />
 +
          </linearGradient>
 +
          <filter id="glow">
 +
            <feColorMatrix type="matrix"
 +
              values=
 +
                "0.5  0  0  0  0
 +
                0  0.5  0  0  0
 +
                0  0  0.5  0  0
 +
                0  0  0  1  0"/>
 +
            <feGaussianBlur stdDeviation="5.5" result="coloredBlur"/>
 +
            <feMerge>
 +
              <feMergeNode in="coloredBlur"/>
 +
              <feMergeNode in="SourceGraphic"/>
 +
            </feMerge>
 +
          </filter>
 +
        </defs>
 +
      </svg>
 +
    </div>
 +
    <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; 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 style="height:600px">
+
<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>
−
        <svg id="globe"></svg>
+
 
−
        <svg id="defs">
+
<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>
−
          <defs>
+
 
−
            <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="0%">
+
<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>
−
                <stop offset="0%" style="stop-color:white;stop-opacity:1" />
+
 
−
                <stop offset="100%" style="stop-color:whitesmoke;stop-opacity:1" />
+
<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>
−
            </linearGradient>
+
 
−
            <filter id="glow">
+
<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>
−
                <feColorMatrix type="matrix"
+
 
−
                    values=
+
<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>
−
                    "0.5  0  0  0  0
+
 
−
                    0  0.5  0  0  0
+
<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>
−
                    0  0  0.5  0  0
+
 
−
                    0  0  0  1  0"/>
+
<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>
−
                <feGaussianBlur stdDeviation="5.5" result="coloredBlur"/>
+
 
−
                <feMerge>
+
<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 -
−
                    <feMergeNode in="coloredBlur"/>
+
Development within iGEM</a></p>
−
                    <feMergeNode in="SourceGraphic"/>
+
 
−
                </feMerge>
+
      </div>
−
            </filter>
+
    </div>
−
          </defs>
+
−
        </svg>
+
   </div>
−
        <div style="position: absolute; background-color: white !important;color: white !important; width: 400px; right: 100px;top: 120px; border-radius: 10px;border: 1px solid #6698be" id="show"></div>   
+
 
</div>
 
</div>
  
Line 89: 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/b/bb/T--Heidelberg--2017_realplaces.txt",  function(data){
−
    d3.json("/wiki/images/6/61/T--Heidelberg--places.txt",  function(data){
+
 
         // process google sheet into geojson
 
         // process google sheet into geojson
  
Line 115: Line 140:
  
 
          
 
          
−
         start = [0, 27.5]
+
         start = [49.4057072, 8.6135741]
 
         //Setup zoom behavior
 
         //Setup zoom behavior
 
         var zoom = d3.behavior.zoom(true)
 
         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 177: 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 188: 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);
 
                 });
 
                 });
  
Line 260: Line 285:
 
     </script>
 
     </script>
 
   </html>
 
   </html>
−
  }}
 
 
}}
 
}}

Latest revision as of 12:06, 1 November 2017