Difference between revisions of "Team:Heidelberg/CollaborationsTest"

Line 9: Line 9:
 
     {{Heidelberg/templateus/Contentsection|
 
     {{Heidelberg/templateus/Contentsection|
 
         {{#tag:html|
 
         {{#tag: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="background-color:#393939;padding-top: 100px;position: relative;min-height: 900px;">
 +
<div class="t-container" style="position: relative;">
 +
                                                  <div class="t-col t-col_12" style="position: relative;">
 +
                                                      <h1 style="color: white !important" id="div">Collaborations</h1>
 +
                                                      <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>
 +
        </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("places.json",  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("#div")
 +
        .append("svg")
 +
        .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>
 +
 
         }}
 
         }}
 
     }}
 
     }}

Revision as of 14:13, 28 October 2017

Collaborations
\.
}}