|
|
| (31 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*/ |
| | + | .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 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"> | + | <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"> | | <div class="info-container"> |
| − | <img src="https://static.igem.org/mediawiki/2016/8/85/Korea_U_Seoul_Main_Pacman.gif"/> | + | |
| | + | <img style="width:850px" src="https://static.igem.org/mediawiki/2016/8/85/Korea_U_Seoul_Main_Pacman.gif"/> |
| | </div> | | </div> |
| − | | + | <div class="info-container"> |
| − | <!--<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> | + | <img src="https://static.igem.org/mediawiki/2016/7/71/0001.jpg"> |
| − | <script>
| + | </div> |
| − | var w = window.innerWidth*0.68*0.95;
| + | <!--<div class="info-container"> |
| − | var h = Math.ceil(w*0.7);
| + | <img src="http://korea.ac.kr/user/university/upload/mainImage/egovtemp_201509020318482550.jpg"/> |
| − | var oR = 0;
| + | </div>--> |
| − | 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> |
