|
|
| (9 intermediate revisions by one other user not shown) |
| Line 1: |
Line 1: |
| − | {{Heidelberg/header
| |
| − | }}
| |
| − | {{Heidelberg/navbar
| |
| − | }}
| |
| − | {{Heidelberg/main|
| |
| − | Collaborations|
| |
| − | |
| |
| − | https://static.igem.org/mediawiki/2017/3/38/T--Heidelberg--2017_Background_Owl.jpg|blue|
| |
| − | {{Heidelberg/templateus/Contentsection|
| |
| − | {{#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("/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("#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>
| |
| − |
| |
| − | }}
| |
| − | }}
| |
| − | }}
| |
| − | {{Heidelberg/footer
| |
| − | }}
| |
