Difference between revisions of "Template:Heidelberg/Weltkugel"

(Created page with "{{#tag:html| <img src="https://static.igem.org/mediawiki/2017/8/8d/T--Heidelberg--2017_weltkugel_placeholder.png"; style="width: 100%"> }}")
 
 
(86 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{#tag:html|
 
{{#tag:html|
−
<img src="https://static.igem.org/mediawiki/2017/8/8d/T--Heidelberg--2017_weltkugel_placeholder.png"; style="width: 100%">
+
  <html>
 +
    <style>
 +
            .land {
 +
                fill: #393939;
 +
                stroke: #393939;
 +
                stroke-width: 1px;
 +
            }
 +
 
 +
            .globe {
 +
                fill: white;
 +
                stroke: #393939;
 +
                stroke-width: 2px;
 +
            }
 +
 
 +
            .arcs {
 +
                opacity: 1;
 +
                stroke: #BF3E42;
 +
                stroke-width: 5;
 +
                fill:none;
 +
                cursor: pointer;
 +
                stroke-dasharray: 1%;
 +
            }
 +
 
 +
            .flyers {
 +
            stroke-width:1;
 +
            opacity: .6;
 +
            stroke: #BF3E42;
 +
            }
 +
 
 +
            .dev{
 +
                fill: #BF3E42; 
 +
                stroke: #BF3E42;
 +
                stroke-width: 1;
 +
                cursor: pointer;
 +
            }
 +
 
 +
            .dev:hover{
 +
                stroke: #BF3E42;
 +
                stroke-width: 2;
 +
            }
 +
 
 +
           
 +
            #show {
 +
                position: relative;
 +
                background-color: #393939;
 +
                height: 530px;
 +
                color: white;
 +
            }
 +
           
 +
            .more {
 +
             
 +
                position: absolute;
 +
                left: 0px;
 +
                top: 100px;
 +
            }
 +
 
 +
      </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">
 +
 
 +
<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>
 +
 
 +
<script src="/wiki/images/7/79/D3_custom.min.txt"></script>
 +
    <script src="http://d3js.org/queue.v1.min.js"></script>
 +
    <script> 
 +
        d3.json("/wiki/images/b/bb/T--Heidelberg--2017_realplaces.txt",  function(data){
 +
        // process google sheet into geojson
 +
 
 +
 
 +
        //console.log(data);
 +
        var line_dict = {'Moscow': '<p>Moscow</p>', 'Mumbai': '<p>Mumbai</p>'};
 +
       
 +
        var width, height;
 +
        var Globe_Cities = {};
 +
        var links = [], arcLines = [];
 +
        init();
 +
 
 +
        function init(){
 +
            width = 500,
 +
            height = 500;
 +
 
 +
 
 +
        //Setup path for globe
 +
        var projection = d3.geo.azimuthal().mode("orthographic").translate([width / 2, height / 2]);
 +
        var scale0 = projection.scale();
 +
        var path = d3.geo.path().projection(projection)
 +
        var arcPath = d3.geo.path().projection(projection)
 +
        var devPath = d3.geo.path().projection(projection).pointRadius(6);
 +
 
 +
       
 +
        start = [49.4057072, 8.6135741]
 +
        //Setup zoom behavior
 +
        var zoom = d3.behavior.zoom(true)
 +
        .translate(projection.origin())
 +
        .scale(projection.scale()-50)
 +
        .scaleExtent([200, 200])
 +
        .on("zoom", move);
 +
       
 +
        var circle = d3.geo.greatCircle();
 +
       
 +
        //var lineTooltip = d3.select('#show');
 +
           
 +
        var svg = d3.select("#globe")
 +
        .attr("width", width)
 +
        .attr("height", height)
 +
        .attr('class', 'more')
 +
        .append("g")
 +
        .call(zoom);
 +
       
 +
        var locations = svg.append('g').attr('id', 'locations')
 +
       
 +
        //Create the base globe
 +
        var backgroundCircle = svg.append("circle")
 +
            .attr('cx', width / 2)
 +
            .attr('cy', height / 2)
 +
            .attr('r', projection.scale())
 +
            .attr('class', 'globe')
 +
            .attr("filter", "url(#glow)")
 +
            .attr("fill", "url(#gradBlue)");
 +
 
 +
            var g = svg.append("g"),
 +
            devG = svg.append("g"),
 +
            globeFeatures,
 +
            devFeatures;
 +
           
 +
            d3.json("https://raw.githubusercontent.com/python-visualization/folium/master/examples/data/world-countries.json", function(land) {
 +
               
 +
                var a = data.features[0]
 +
                data.features.forEach(function(b) {
 +
                    if (a !== b) {
 +
                        links.push({
 +
                            source: a.geometry.coordinates,
 +
                            target: b.geometry.coordinates,
 +
                            name: b.properties.name,
 +
                        });
 +
                    }
 +
                });
 +
 
 +
 
 +
                links.forEach(function(e,i,a) {
 +
                    var feature =  { "type": "Feature", "properties": {"name": e.name}, "geometry": { "type": "LineString", "coordinates": [e.source,e.target]}}
 +
                    arcLines.push(feature)
 +
                })
 +
 
 +
                //Draw arcs between places
 +
                arc = devG.selectAll("arcs").data(arcLines)
 +
                arc.enter()
 +
                .append("path")
 +
                    .attr("class","arcs")
 +
                    .attr("d", function(d){
 +
                        return arcPath(circle.clip(d));
 +
                    }).on("mouseover", function(d) {
 +
                    lineTooltip.html(d.properties.name);
 +
                });
 +
 
 +
                //Draw place markers (circles)
 +
                devFeatures = devG.selectAll(".dev").data(data.features);
 +
                devFeatures.enter()
 +
                .append("path")
 +
                    .attr("class", "dev")
 +
                    .attr("d", function(d) {
 +
                    return devPath(circle.clip(d));
 +
                }).on("mouseover", function(d) {
 +
                    lineTooltip.html(d.properties.name);
 +
                });
 +
 
 +
                var devNames = []
 +
                data.features.forEach(function(a){
 +
                    devNames.push("point_" + a["properties"]["name"].replace(/ |\.|,/g, '_')) //Strip things that could break code
 +
                })
 +
 
 +
                arcLines.forEach(function(a){
 +
                    devNames.push("link_" + a["properties"]["name"].replace(/ |\.|,/g, '_')) //Strip things that could break code
 +
                })
 +
 
 +
                var zippedIds = devFeatures[0].concat(arcLines).map(function(e, i) {
 +
                    return [e, devNames[i]];
 +
                });
 +
 
 +
                zippedIds.forEach(function(a){
 +
                    a[0].id=a[1]
 +
                });
 +
 
 +
                console.log(zippedIds)
 +
 
 +
                //Draw countires
 +
                features = g.selectAll(".land").data(land.features);
 +
                features.enter()
 +
                    .append("path")
 +
                    .attr("class", "land")
 +
                    .attr("d", function(d){
 +
                        return path(circle.clip(d)); });
 +
            });
 +
           
 +
            //Redraw all items with new projections
 +
            function redraw(){
 +
                features.attr("d", function(d){
 +
                    return path(circle.clip(d));
 +
            });
 +
            arc.attr("d", function(d){
 +
                console.log(arcPath(circle.clip(d)));
 +
                return arcPath(circle.clip(d));
 +
            });
 +
            devFeatures.attr("d", function(d) {
 +
                return devPath(circle.clip(d));
 +
            });
 +
        }
 +
       
 +
        var old_minor = 0.2;
 +
        var previous = 400;
 +
        var result;
 +
       
 +
       
 +
        function move() {
 +
            if(d3.event){
 +
                var scale = d3.event.scale;
 +
 
 +
                var origin = [d3.event.translate[0] * -0.3, d3.event.translate[1]*0.3];
 +
               
 +
                projection.scale(scale);     
 +
                backgroundCircle.attr('r', scale);
 +
                path.pointRadius(scale / scale0);
 +
                devPath.pointRadius(6 * scale / scale0);
 +
                projection.origin(origin);
 +
                circle.origin(origin); 
 +
                redraw();
 +
            }
 +
        }
 +
 
 +
 
 +
    }
 +
});
 +
 
 +
    </script>
 +
  </html>
 
}}
 
}}

Latest revision as of 12:06, 1 November 2017