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%"> }}")
 
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%">
+
  {{Heidelberg/templateus/Contentsection|
 +
  <html>
 +
    <style>
 +
            .land {
 +
                fill: #393939;
 +
                stroke: #393939;
 +
                stroke-width: 1px;
 +
               
 +
            }
 +
 
 +
            .globe {
 +
                fill: white;
 +
                stroke: #393939;
 +
                stroke-width: 2px;
 +
               
 +
            }
 +
 
 +
            .arcs {
 +
                opacity: 1;
 +
                stroke: #6698be;
 +
                stroke-width: 5;
 +
                fill:none;
 +
                cursor: pointer;
 +
                stroke-dasharray: 1%;
 +
            }
 +
 
 +
            .flyers {
 +
            stroke-width:1;
 +
            opacity: .6;
 +
            stroke: #6698be;
 +
            }
 +
 
 +
            .dev{
 +
                fill: #6698be; 
 +
                stroke: #6698be;
 +
                stroke-width: 1;
 +
                cursor: pointer;
 +
            }
 +
 
 +
            .dev:hover{
 +
                stroke: #6698be;
 +
                stroke-width: 2;
 +
            }
 +
 
 +
           
 +
            #show {
 +
                position: relative;
 +
                background-color: #393939;
 +
                min-height: 400px;
 +
                color: white;
 +
            }
 +
           
 +
            .more {
 +
             
 +
                position: absolute;
 +
                left: 0px;
 +
                top: 100px;
 +
            }
 +
 
 +
      </style>
 +
 
 +
 
 +
      <div style="height:700px">
 +
                                                      <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 style="position: absolute;background-color: white !important;color: white !important; width: 400px; right: 100px;top: 200px; border-radius: 10px;border: 1px solid #6698be" id="show"></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/6/61/T--Heidelberg--places.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 = 600,
 +
            height = 600;
 +
 
 +
 
 +
        //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 = [0, 27.5]
 +
        //Setup zoom behavior
 +
        var zoom = d3.behavior.zoom(true)
 +
        .translate(projection.origin())
 +
        .scale(projection.scale())
 +
        .scaleExtent([250, 3000])
 +
        .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(line_dict[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(line_dict[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>
 +
  }}
 
}}
 
}}

Revision as of 11:52, 31 October 2017