Difference between revisions of "Team:Korea U Seoul/Main"

 
(32 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{:Team:Korea_U_Seoul/Templates/Nav}}
 
{{:Team:Korea_U_Seoul/Templates/Nav}}
 
<html>
 
<html>
−
  <style type="text/css">
+
<style>
−
    #mainBubble {
+
/*main colour*/
−
      background: #fff;
+
.navbar-default .navbar-brand,
−
      border: solid 1px #ddd;
+
.contents-sidebar .nav>.active>a,
−
      box-shadow: 0 0 4px rgba(0,0,0,0);
+
.contents-sidebar .nav>.active>a,
−
      font: 10px sans-serif;
+
.contents-sidebar .nav>li>a:hover,
−
      height: 800px;
+
.contents-sidebar .nav>li>a:focus,
−
      position: relative;
+
h5,
−
      width: 80%;
+
h2,
−
    }
+
h1,
−
           
+
.main-container .section a {
−
     #mainBubble svg {
+
    color: #055AB2
−
      left: 0;
+
;
−
      position: absolute;
+
}
−
      top: 0;
+
.contents-sidebar .nav>.active>a,
−
    }
+
.contents-sidebar .nav>li>a:hover,
−
                       
+
.contents-sidebar .nav>li>a:focus {
−
     #mainBubble circle.topBubble {
+
    border-left: 2px solid #04407F;
−
      fill: #aaa;
+
}
−
      stroke: #666;
+
.image.lightbox, #notebook-key-button {
−
      stroke-width: 1.5px;
+
    background-color: #0781FF;
−
    }
+
}
−
    </style>
+
/*complimentary colour*/
−
    <div class="container-fluid" id="title">
+
.navbar-default .navbar-brand:hover,
 +
.definition:hover, .definition:focus,
 +
ol li::before,
 +
.slim ul li:before,
 +
.table>thead>tr>th,
 +
.algorithm ol li::before,
 +
.quote,
 +
.quote h3,
 +
a,
 +
a:visited,
 +
a:hover
 +
{
 +
     color:#022040;
 +
}
 +
.definition {
 +
    border-bottom: 1px dotted #022040;
 +
}
 +
#notebook-key-button.active {
 +
    background-color: #022040;
 +
}
 +
.popover.right>.arrow::after{
 +
     border-right-color: #022040;
 +
}
 +
.popover.bottom>.arrow::after {
 +
    border-bottom-color: #022040;
 +
}
 +
.popover.left>.arrow::after {
 +
    border-left-color: #022040;
 +
}
 +
</style>
 +
 
 +
<div class="container-fluid" id="title">
 
         <div id="logo">
 
         <div id="logo">
−
             <img src="https://static.igem.org/mediawiki/2016/3/39/Korea_U_Seoul_Logo_1.png" id="oxigem_logo">
+
            <h3 style="font-family: emulogic"><br><br><br></h3>
−
         </div>  
+
        </div>
−
    </div>
+
        <div id="solution">
 +
             <img style="width:650px" src="https://static.igem.org/mediawiki/2016/3/34/Korea_U_Seoul_gelec_wh.png">
 +
        </div>
 +
        <div id="logo">
 +
            <h3 style="font-family: emulogic"></h3>
 +
        </div>
 +
 
 +
        <div id="logo">
 +
            <h3 style="font-family: emulogic"></h3>
 +
        </div>       
 +
 
 +
        <div>
 +
            <div id="solution-byline">
 +
                <h3 style="font-family: emulogic"><a href="#">Learn more<br><i class="fa fa-chevron-down"></i></a></h3>
 +
            </div>
 +
         </div>
 +
</div>
 
        
 
        
 
   
 
   
−
<script type="text/javascript" src="//2016.igem.org/Team:Korea_U_Seoul/Assets/d3js?action=raw&ctype=text/javascript"></script>
 
  
−
<div class="container-fluid">
+
 
 +
<div class="container-fluid" style="background-color:black">
 
<div class="col-md-10 col-md-offset-1">
 
<div class="col-md-10 col-md-offset-1">
 +
<div class="info-container">
 +
 +
<img style="width:850px" src="https://static.igem.org/mediawiki/2016/8/85/Korea_U_Seoul_Main_Pacman.gif"/>
 +
</div>
 +
<div class="info-container">
 +
<img src="https://static.igem.org/mediawiki/2016/7/71/0001.jpg">
 +
</div>
 
<!--<div class="info-container">
 
<!--<div class="info-container">
−
<img src="https://static.igem.org/mediawiki/2016/8/85/Korea_U_Seoul_Main_Pacman.gif"/>
+
<img src="http://korea.ac.kr/user/university/upload/mainImage/egovtemp_201509020318482550.jpg"/>
 
</div>-->
 
</div>-->
−
 
−
<div id="mainBubble" class="info-container"><svg class="mainBubbleSVG" width="930.24" height="652"><text id="bubbleItemNote" x="10" y="450.12" font-size="12" dominant-baseline="middle" alignment-baseline="middle" style="fill: rgb(136, 136, 136);">D3.js bubble menu developed by Shipeng Sun (sunsp.gis@gmail.com), Institute of Environment, University of Minnesota, and University of Springfield, Illinois.</text></svg></div>
 
−
  <script>
 
−
  var w = window.innerWidth*0.68*0.95;
 
−
  var h = Math.ceil(w*0.7);
 
−
  var oR = 0;
 
−
  var nTop = 0;
 
−
   
 
−
  var svgContainer = d3.select("#mainBubble")
 
−
      .style("height", h+"px");
 
−
   
 
−
  var svg = d3.select("#mainBubble").append("svg")
 
−
        .attr("class", "mainBubbleSVG")
 
−
        .attr("width", w)
 
−
        .attr("height",h)
 
−
        .on("mouseleave", function() {return resetBubbles();});
 
−
       
 
−
  var mainNote = svg.append("text")
 
−
    .attr("id", "bubbleItemNote")
 
−
    .attr("x", 10)
 
−
    .attr("y", w/2-15)
 
−
    .attr("font-size", 12)
 
−
    .attr("dominant-baseline", "middle")
 
−
    .attr("alignment-baseline", "middle")
 
−
    .style("fill", "#888888")
 
−
    .text(function(d) {return "D3.js bubble menu developed by Shipeng Sun (sunsp.gis@gmail.com), Institute of Environment, University of Minnesota, and University of Springfield, Illinois.";}); 
 
−
 
−
 
−
    d3.json("//2016.igem.org/Team:Korea_U_Seoul/Assets/mainjson?action=raw", function(error, root) {
 
−
        console.log(error);
 
−
   
 
−
        var bubbleObj = svg.selectAll(".topBubble")
 
−
                .data(root.children)
 
−
            .enter().append("g")
 
−
                .attr("id", function(d,i) {return "topBubbleAndText_" + i});
 
−
           
 
−
        console.log(root); 
 
−
        nTop = root.children.length;
 
−
        oR = w/(1+3*nTop); 
 
−
 
−
    h = Math.ceil(w/nTop*2);
 
−
    svgContainer.style("height",h+"px");
 
−
       
 
−
        var colVals = d3.scale.category10();
 
−
       
 
−
        bubbleObj.append("circle")
 
−
            .attr("class", "topBubble")
 
−
            .attr("id", function(d,i) {return "topBubble" + i;})
 
−
            .attr("r", function(d) { return oR; })
 
−
            .attr("cx", function(d, i) {return oR*(3*(1+i)-1);})
 
−
            .attr("cy", (h+oR)/3)
 
−
            .style("fill", function(d,i) { return colVals(i); }) // #1f77b4
 
−
        .style("opacity",0.3)
 
−
            .on("mouseover", function(d,i) {return activateBubble(d,i);});
 
−
       
 
−
           
 
−
        bubbleObj.append("text")
 
−
            .attr("class", "topBubbleText")
 
−
            .attr("x", function(d, i) {return oR*(3*(1+i)-1);})
 
−
            .attr("y", (h+oR)/3)
 
−
        .style("fill", function(d,i) { return colVals(i); }) // #1f77b4
 
−
            .attr("font-size", 30)
 
−
            .attr("text-anchor", "middle")
 
−
        .attr("dominant-baseline", "middle")
 
−
        .attr("alignment-baseline", "middle")
 
−
            .text(function(d) {return d.name})     
 
−
            .on("mouseover", function(d,i) {return activateBubble(d,i);});
 
−
       
 
−
       
 
−
        for(var iB = 0; iB < nTop; iB++)
 
−
        {
 
−
            var childBubbles = svg.selectAll(".childBubble" + iB)
 
−
                .data(root.children[iB].children)
 
−
                .enter().append("g");
 
−
               
 
−
        //var nSubBubble = Math.floor(root.children[iB].children.length/2.0); 
 
−
           
 
−
            childBubbles.append("circle")
 
−
                .attr("class", "childBubble" + iB)
 
−
                .attr("id", function(d,i) {return "childBubble_" + iB + "sub_" + i;})
 
−
                .attr("r",  function(d) {return oR/3.0;})
 
−
                .attr("cx", function(d,i) {return (oR*(3*(iB+1)-1) + oR*1.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                .attr("cy", function(d,i) {return ((h+oR)/3 +        oR*1.5*Math.sin((i-1)*45/180*3.1415926));})
 
−
                .attr("cursor","pointer")
 
−
                .style("opacity",0.5)
 
−
                .style("fill", "#eee")
 
−
                .on("click", function(d,i) {
 
−
                window.open(d.address);               
 
−
              })
 
−
            .on("mouseover", function(d,i) {
 
−
              //window.alert("say something");
 
−
              var noteText = "";
 
−
              if (d.note == null || d.note == "") {
 
−
                noteText = d.address;
 
−
              } else {
 
−
                noteText = d.note;
 
−
              }
 
−
              d3.select("#bubbleItemNote").text(noteText);
 
−
              })
 
−
            .append("svg:title")
 
−
            .text(function(d) { return d.address; }); 
 
−
 
−
            childBubbles.append("text")
 
−
                .attr("class", "childBubbleText" + iB)
 
−
                .attr("x", function(d,i) {return (oR*(3*(iB+1)-1) + oR*1.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                .attr("y", function(d,i) {return ((h+oR)/3 +        oR*1.5*Math.sin((i-1)*45/180*3.1415926));})
 
−
                .style("opacity",0.5)
 
−
                .attr("text-anchor", "middle")
 
−
            .style("fill", function(d,i) { return colVals(iB); }) // #1f77b4
 
−
                .attr("font-size", 6)
 
−
                .attr("cursor","pointer")
 
−
                .attr("dominant-baseline", "middle")
 
−
            .attr("alignment-baseline", "middle")
 
−
                .text(function(d) {return d.name})     
 
−
                .on("click", function(d,i) {
 
−
                window.open(d.address);
 
−
                });
 
−
 
−
        }
 
−
 
−
       
 
−
        });
 
−
 
−
    resetBubbles = function () {
 
−
      w = window.innerWidth*0.68*0.95;
 
−
      oR = w/(1+3*nTop);
 
−
     
 
−
      h = Math.ceil(w/nTop*2);
 
−
      svgContainer.style("height",h+"px");
 
−
 
−
      mainNote.attr("y",h-15);
 
−
         
 
−
      svg.attr("width", w);
 
−
      svg.attr("height",h);     
 
−
     
 
−
      d3.select("#bubbleItemNote").text("D3.js bubble menu developed by Shipeng Sun (sunsp.gis@gmail.com), Institute of Environment, University of Minnesota, and University of Springfield, Illinois.");
 
−
     
 
−
      var t = svg.transition()
 
−
          .duration(650);
 
−
       
 
−
        t.selectAll(".topBubble")
 
−
            .attr("r", function(d) { return oR; })
 
−
            .attr("cx", function(d, i) {return oR*(3*(1+i)-1);})
 
−
            .attr("cy", (h+oR)/3);
 
−
 
−
        t.selectAll(".topBubbleText")
 
−
        .attr("font-size", 30)
 
−
            .attr("x", function(d, i) {return oR*(3*(1+i)-1);})
 
−
            .attr("y", (h+oR)/3);
 
−
   
 
−
      for(var k = 0; k < nTop; k++)
 
−
      {
 
−
        t.selectAll(".childBubbleText" + k)
 
−
                .attr("x", function(d,i) {return (oR*(3*(k+1)-1) + oR*1.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                .attr("y", function(d,i) {return ((h+oR)/3 +        oR*1.5*Math.sin((i-1)*45/180*3.1415926));})
 
−
            .attr("font-size", 6)
 
−
                .style("opacity",0.5);
 
−
 
−
        t.selectAll(".childBubble" + k)
 
−
                .attr("r",  function(d) {return oR/3.0;})
 
−
            .style("opacity",0.5)
 
−
                .attr("cx", function(d,i) {return (oR*(3*(k+1)-1) + oR*1.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                .attr("cy", function(d,i) {return ((h+oR)/3 +        oR*1.5*Math.sin((i-1)*45/180*3.1415926));});
 
−
                   
 
−
      } 
 
−
    }
 
−
       
 
−
       
 
−
        function activateBubble(d,i) {
 
−
            // increase this bubble and decrease others
 
−
            var t = svg.transition()
 
−
                .duration(d3.event.altKey ? 7500 : 350);
 
−
   
 
−
            t.selectAll(".topBubble")
 
−
                .attr("cx", function(d,ii){
 
−
                    if(i == ii) {
 
−
                        // Nothing to change
 
−
                        return oR*(3*(1+ii)-1) - 0.6*oR*(ii-1);
 
−
                    } else {
 
−
                        // Push away a little bit
 
−
                        if(ii < i){
 
−
                            // left side
 
−
                            return oR*0.6*(3*(1+ii)-1);
 
−
                        } else {
 
−
                            // right side
 
−
                            return oR*(nTop*3+1) - oR*0.6*(3*(nTop-ii)-1);
 
−
                        }
 
−
                    }             
 
−
                })
 
−
                .attr("r", function(d, ii) {
 
−
                    if(i == ii)
 
−
                        return oR*1.8;
 
−
                    else
 
−
                        return oR*0.8;
 
−
                    });
 
−
                   
 
−
            t.selectAll(".topBubbleText")
 
−
                .attr("x", function(d,ii){
 
−
                    if(i == ii) {
 
−
                        // Nothing to change
 
−
                        return oR*(3*(1+ii)-1) - 0.6*oR*(ii-1);
 
−
                    } else {
 
−
                        // Push away a little bit
 
−
                        if(ii < i){
 
−
                            // left side
 
−
                            return oR*0.6*(3*(1+ii)-1);
 
−
                        } else {
 
−
                            // right side
 
−
                            return oR*(nTop*3+1) - oR*0.6*(3*(nTop-ii)-1);
 
−
                        }
 
−
                    }             
 
−
                })         
 
−
                .attr("font-size", function(d,ii){
 
−
                    if(i == ii)
 
−
                        return 30*1.5;
 
−
                    else
 
−
                        return 30*0.6;             
 
−
                });
 
−
   
 
−
            var signSide = -1;
 
−
            for(var k = 0; k < nTop; k++)
 
−
            {
 
−
                signSide = 1;
 
−
                if(k < nTop/2) signSide = 1;
 
−
                t.selectAll(".childBubbleText" + k)
 
−
                    .attr("x", function(d,i) {return (oR*(3*(k+1)-1) - 0.6*oR*(k-1) + signSide*oR*2.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                    .attr("y", function(d,i) {return ((h+oR)/3 + signSide*oR*2.5*Math.sin((i-1)*45/180*3.1415926));})
 
−
                    .attr("font-size", function(){
 
−
                            return (k==i)?12:6;
 
−
                        })
 
−
                    .style("opacity",function(){
 
−
                            return (k==i)?1:0;
 
−
                        });
 
−
                   
 
−
                t.selectAll(".childBubble" + k)
 
−
                    .attr("cx", function(d,i) {return (oR*(3*(k+1)-1) - 0.6*oR*(k-1) + signSide*oR*2.5*Math.cos((i-1)*45/180*3.1415926));})
 
−
                    .attr("cy", function(d,i) {return ((h+oR)/3 + signSide*oR*2.5*Math.sin((i-1)*45/180*3.1415926));})
 
−
                    .attr("r", function(){
 
−
                            return (k==i)?(oR*0.55):(oR/3.0);             
 
−
                    })
 
−
                    .style("opacity", function(){
 
−
                            return (k==i)?1:0;                 
 
−
                        });
 
−
            }                 
 
−
        }
 
−
   
 
−
    window.onresize = resetBubbles;
 
−
</script>
 
−
 
  
 
</div></div>
 
</div></div>

Latest revision as of 03:07, 17 October 2016