<!doctype html> <html> <head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script> <title>Network | Basic usage</title> <meta http-equiv="content-type" content="text/html; charset=UTF8"> <script type="text/javascript" src="./js/FileSaver.min.js"></script> <script type="text/javascript" src="./js/vis.js"></script> <link href="./css/vis.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./data/FP7_ICT.js"></script> <style type="text/css"> #mynetwork { width: 100%; height: 90%; background-color:#222222; border:1px solid #333333; } body{ background-color:#222222; width: 100%; height: 100%; } html { width: 100%; height: 100%; } #controls { /*background-color: #3ea349;*/ } #FILENAME { color: #ffffff; } div.container { display:inline-flex; } div.year { float:left; width:150px; height:25px; background-color: #80baff; border: 2px solid #1e357e; font-size:20px; line-height:25px; text-align: center; margin-right:10px; margin-top:5px; margin-bottom:5px; } div.year.selected { background-color: #91ff88; border: 2px solid #297d21; font-size:22px; font-weight:bold; } select.selectBox { width:400px; } div.type { float:left; width:200px; height:25px; background-color: #80baff; border: 2px solid #1e357e; font-size:20px; line-height:25px; text-align: center; margin-right:10px; margin-bottom:5px; } div.type.selected { background-color: #91ff88; border: 2px solid #297d21; } div.label{ display:inline-block; width:200px; font-size:15px; color:#ffffff; } div.debug { display:none; } </style> </head> <body> <div class="debug"> <input type="button" value="100 steps" onclick="doSteps(100);"> <input type="button" value="500 steps" onclick="doSteps(500);"> <input type="button" value="1000 steps" onclick="doSteps(1000);"> <input type="button" value="5000 steps" onclick="doSteps(5000);"> <input type="button" value="unfreeze" onclick="network.setFreezeSimulation(false);"> <input type="button" value="download" onclick="download();"> <input type="button" value="next" onclick="next();"> <span id="FILENAME">filename here</span> </div> <div id="controls"> <div id="yearContainer" class="container"></div> <br /> <div id="typeContainer" class="container"> <div class="type" onclick="selectType('funding');"> size by funding </div> <div class="type selected" onclick="selectType('connections');"> size by connectivity </div> </div> <div id="projectContainer"> <div class="label">Select a project to view: </div><select id="projectsDropdown" class="selectBox" onchange="selectProject(this)"></select> </div> <div id="companyContainer"> <div class="label">Select a company to highlight:</div><select id="companyDropdown" class="selectBox" onchange="selectCompany(this)"></select> </div> <input type="button" value="Center galaxy" onclick="highlightConnections({nodes:[]}); network.zoomExtent({duration:0});"> <input type="button" value="View all neighbours" onclick="viewAllNeighbours();"> </div> <div id="mynetwork"></div> <script type="text/javascript" src="js/init_view.js"></script> </body> </html>