CINXE.COM
JBI Portal - Japan alliance for Bioscience Information
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="JBI (Japan alliance for Bioscience Information)ポータルは、わが国を代表する生命科学のデータベース開発・運用機関が共同で提供する、日本発の生命科学データベースポータルサイトです。研究者に役立つサービス・情報のワンストップサービスを目指します。 The JBI (Japan alliance for Bioscience Information) portal is a database of life science databases from Japan, jointly provided by database development and management institutions representing life sciences, which is representative of Japan."> <title>JBI Portal - Japan alliance for Bioscience Information</title> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> <link rel="stylesheet" href="css/style.css?20170721"> </head> <body class="bg_color_top"> <div class="bg_graphic" id="graphic"> </div> <header class="global_header"> <h1 class="logo_box"> <a href="./index.html"> <img src="./img/jbi_logo.svg" class="jbi_logo" alt="JBI Japan alliance for Bioscience Information"> </a> </h1> <div class="header_credits"> <div id=organization_container></div> <p><a href="https://creativecommons.org/licenses/by/4.0/deed.ja" target="_blank"><img src="http://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by.svg" alt="Creative Commons 4.0"></a> © 2017 Japan alliance for Bioscience Information, Licensed under <a href="https://creativecommons.org/licenses/by/4.0/deed.ja" target="_blank">CC-BY 4.0</a> / <a href="sitepolicy.html">Site policy</a></p> </div> </header> <div class="base"> <div class="content"> <header class="top_page_header"> <dir class="top_figure"> <img src="./img/top-expresstion-jbi.png" alt="JBI Japan alliance for Bioscience Information" id="top_figure_jbi"> </dir> <div class="top_tagline"> <span lang="ja"> <span>JBI (Japan alliance for Bioscience Information)ポータルは、</span><br> <span>わが国を代表する生命科学の</span><br> <span>データベース開発・運用機関が共同で提供する、</span><br> <span>日本発の生命科学データベースポータルサイトです。</span><br> <span>研究者に役立つサービス・情報のワンストップサービスを目指します。</span> </span> <span lang="en"> <span>The JBI (Japan alliance for Bioscience Information) portal is </span><br> <span>a database of life science databases from Japan, </span><br> <span>jointly provided by database development and </span><br> <span>management institutions representing life sciences, </span><br> <span>which is representative of Japan.</span> </div> <div class="select_lang"> <div id="lang_en" class="select_lang_box">English</div> <div id="lang_ja" class="select_lang_box">Japanese</div> </div> </header> <div class="sidebar"> <ul> <li><a href="./index.html"><div class="menu_block"><span class="menu_txt">Top</span></div></a></li> <li><a href="./aboutus.html"><div class="menu_block in_active"><span class="menu_txt">About</span></div></a></li> <li><a href="./news.html"><div class="menu_block in_active"><span class="menu_txt">News</span></div></a></li> <li><a href="./events.html"><div class="menu_block in_active"><span class="menu_txt">Events</span></div></a></li> <li><a href="./services.html"><div class="menu_block in_active"><span class="menu_txt">Services</span></div></a></li> <li><a href="./contact.html"><div class="menu_block in_active"><span class="menu_txt">Contact</span></div></a></li> </ul> </div> <div class="top_list_box"> <div class="top_list_contents_box" id="top_list_news"> <h2>News <a href="./news.html">more</a></h2> <ul> </ul> </div> <div class="top_list_contents_box right_box" id="top_list_events"> <h2>Events <a href="./events.html">more</a></h2> <ul> </ul> </div> </div> <div class="footer_space clearfix"> </div> </div> </div> <script type="text/template" id="template_top_list"> <li lang="<%= data.lang %>"> <%= data.divData %> <div class="news_list_title"><%= data.title %></div> <div class="news_list_metadata"> <div class="news_list_tag"><%= data.instituion %></div><div class="news_list_date"><%= data.pub_date %></div> </div> </div> </li> </script> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/d3.v3.min.js"></script> <script src="./js/underscore-min.js"></script> <script src="./js/select_lang.js"></script> <script src="./js/main.js"></script> <script > ////////////////////* animation /////////////////// function Pos(_x,_y) { this.x = _x; this.y = _y; }; function LogoGenerator(_data,_xWidth,_tileSize) { this.originalData = _data; this.xWidth = _xWidth; this.tileSize = _tileSize; this.posData = []; }; LogoGenerator.prototype.init = function() { for (var i = 0; i < this.originalData.length; i++) { var num = this.originalData[i]; if(num == 1) { var posX = i % this.xWidth * this.tileSize; var posY = parseInt(i / this.xWidth) * this.tileSize; var posObj = new Pos(posX,posY); this.posData.push(posObj); } } }; var jbiLogo = [ 0,1,1,0,1,1,1,0,0,1, 0,0,1,0,1,0,0,1,0,1, 0,0,1,0,1,1,1,0,0,1, 0,0,1,0,1,0,0,1,0,1, 1,1,0,0,1,1,1,0,0,1, ]; var jbiLogoGen = new LogoGenerator(jbiLogo,10,52); jbiLogoGen.init(); function shuffle(array) { var m = array.length, t, i; // While there remain elements to shuffle… while (m) { // Pick a remaining element… i = Math.floor(Math.random() * m--); // And swap it with the current element. t = array[m]; array[m] = array[i]; array[i] = t; } return array; } shuffle(jbiLogoGen.posData); var d3Animation =function() { var width = 760, height = 600, radius = width/4; // 元のJBIを表示 // グループで回転、個別に回転の切り分け // svgのグループ構造確認 // group class main と、 class component で管理する。 var svg = d3.select("#graphic").append("svg") .attr("width", width) .attr("height", height); var d3BaseGroup = svg.append("g") .attr("class","d3BaseGroup") .attr("transform","translate(" + (width/2-200) + "," + (height/2-200) + ")");// translateで画面中央に移動。 var data = []; var labelTexts = ["DDBJ Sequence Read Archiv","Mass Submission System","DDBJ Sequence Read Archive","Japanese Genotype-phenotype Archive","ARSA","VecScreen"]; for(var i=0; i < 30; i++) { data.push({"label":labelTexts[i % labelTexts.length],"points":100}); } // d3.extent()で、データの最大値と最小値が[最大値,最小値]で出る。 var dataExtent = d3.extent(data,function(d){ return d["points"]}); var r = d3.scale.linear() .domain([0,data.length]) .range([0,360]); var y = d3.scale.linear() .domain(dataExtent) .range([radius, 0]); // 0で一番外側になるようにradiusと0の位置を本来と逆にしている。 // svg.selectAll(".surroundings").data(data) データの数分だけからのObjectが準備される。 // enter()で、からおぶじぇくとに dataプロパティを作成し、データを持たせる var d3Elements = d3BaseGroup.selectAll(".d3element").data(data).enter() .append("g") .attr("class","d3element") .attr("x",0) .attr("y",0) .attr("transform",function(d,i){ return "rotate(" + r(i) + ")"; }); var colors = ["#d4b32f","#476328","#164f73","#8c643e","#c46b45"]; var d3Rectangles = d3Elements.append("rect") .attr("x",300) .attr("y",-25) .attr("width",50) .attr("height",50) .attr("opacity",1.0) .attr("fill", function(d,i){ return colors[i % 5]; }); var d3Labels = d3Elements.append("text") .attr("x",360) .attr("y",5) .attr("text-anchor", "left") // テキストの位置を中央揃えに。 .attr("width",100) .attr("height",100) .attr("stroke","black") .attr("opacity",1.0) .text(function(d,i){ return data[i]["label"]; }); // リスト内の位置をテキストとして出す。 d3BaseGroup.transition().duration(3200).ease("cubic-out").attr("transform","translate(" + (width/2-200) + "," + (height/2-200) + ") rotate(230)"); setTimeout(function() { d3Elements .transition() .duration(1300) .attr("transform","rotate(0)"); d3Rectangles .transition() .duration(1000) .attr("opacity",function(d,i){ return (i < jbiLogoGen.posData.length) ? 1.0 : 0.0; }) .attr("x", function(d,i) { var posx = 0; if(i < jbiLogoGen.posData.length) { posx = jbiLogoGen.posData[i].x; } return posx; }) .attr("y", function(d,i) { var posy = 0; if(i < jbiLogoGen.posData.length) { posy = jbiLogoGen.posData[i].y; } return posy; }); d3Labels.transition().duration(600).attr("x",320).attr("opacity",0.0); d3BaseGroup.transition().duration(1000).attr("transform","translate(0,100) rotate(-15)"); }, 3200); }; //*topAnimation(); //*LANG_CALLBACK(); $(function() { // News var newsManager = new NewsManager(); // 第３引数は、index.htmlか否か newsManager.init($("#top_list_news ul"),"#template_top_list",true); newsManager.loadData(); // Events var eventsManager = new EventManager(); eventsManager.init($('#top_list_events ul'),'#template_top_list',true,'','','events_list_box'); eventsManager.loadData(); // d3 Animation d3Animation(); }); var EVENT_FEED; function getEventData(feed) { EVENT_FEED = feed.feed.entry; } //* top figure $('.top_figure').append( _.shuffle([ '<img src="./img/top-expresstion-dbcls.png" alt="DBCLS Database Center of Life Science">', '<img src="./img/top-expresstion-ddbj.png" alt="DDBJ DNA Data Bank of Japan">', '<img src="./img/top-expresstion-nbdc.png" alt="NBDC National Bioscience Database Center">', '<img src="./img/top-expresstion-pdbj.png" alt="PDBj Protein Data Bank Japan">' ]) ); </script> <script src="https://spreadsheets.google.com/feeds/cells/1-RJ3DvaAeaO1ul3jkvCYGR7Z814u4-8iFHDCr_PUFik/2/public/values?alt=json-in-script&callback=getEventData"></script> </body> </html>