jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

added EU project WIP

gh-pages
Alex de Mulder 9 years ago
parent
fefec38d1d
commit
0e93ed2d10
7 changed files with 36551 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +132
    -0
      showcase/projects/eu/EUgrantmoney.html
  2. +794
    -0
      showcase/projects/eu/css/vis.css
  3. +1
    -0
      showcase/projects/eu/data/combined/2013_FP7-ICT.json
  4. +2
    -0
      showcase/projects/eu/js/FileSaver.min.js
  5. +291
    -0
      showcase/projects/eu/js/init_precalc.js
  6. +443
    -0
      showcase/projects/eu/js/init_view.js
  7. +34888
    -0
      showcase/projects/eu/js/vis.js

+ 132
- 0
showcase/projects/eu/EUgrantmoney.html View File

@ -0,0 +1,132 @@
<!doctype html>
<html>
<head>
<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>

+ 794
- 0
showcase/projects/eu/css/vis.css View File

@ -0,0 +1,794 @@
.vis .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Must be displayed above for example selected Timeline items */
z-index: 10;
}
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
/* override some bootstrap styles screwing up the timelines css */
.vis [class*="span"] {
min-height: 0;
width: auto;
}
.vis.timeline {
}
.vis.timeline.root {
position: relative;
border: 1px solid #bfbfbf;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel {
position: absolute;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border: 1px #bfbfbf;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.left,
.vis.timeline .vispanel.right {
border-top-style: solid;
border-bottom-style: solid;
overflow: hidden;
}
.vis.timeline .vispanel.center,
.vis.timeline .vispanel.top,
.vis.timeline .vispanel.bottom {
border-left-style: solid;
border-right-style: solid;
}
.vis.timeline .background {
overflow: hidden;
}
.vis.timeline .vispanel > .content {
position: relative;
}
.vis.timeline .vispanel .shadow {
position: absolute;
width: 100%;
height: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
/* TODO: find a nice way to ensure shadows are drawn on top of items
z-index: 1;
*/
}
.vis.timeline .vispanel .shadow.top {
top: -1px;
left: 0;
}
.vis.timeline .vispanel .shadow.bottom {
bottom: -1px;
left: 0;
}
.vis.timeline .labelset {
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
position: relative;
left: 0;
top: 0;
width: 100%;
color: #4d4d4d;
box-sizing: border-box;
}
.vis.timeline .labelset .vlabel {
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labelset .vlabel:last-child {
border-bottom: none;
}
.vis.timeline .labelset .vlabel .inner {
display: inline-block;
padding: 5px;
}
.vis.timeline .labelset .vlabel .inner.hidden {
padding: 0;
}
.vis.timeline .itemset {
position: relative;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.vis.timeline .itemset .background,
.vis.timeline .itemset .foreground {
position: absolute;
width: 100%;
height: 100%;
overflow: visible;
}
.vis.timeline .axis {
position: absolute;
width: 100%;
height: 0;
left: 0;
z-index: 1;
}
.vis.timeline .foreground .group {
position: relative;
box-sizing: border-box;
border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .foreground .group:last-child {
border-bottom: none;
}
.vis.timeline .item {
position: absolute;
color: #1A1A1A;
border-color: #97B0F8;
border-width: 1px;
background-color: #D5DDF6;
display: inline-block;
padding: 5px;
}
.vis.timeline .item.selected {
border-color: #FFC200;
background-color: #FFF785;
/* z-index must be higher than the z-index of custom time bar and current time bar */
z-index: 2;
}
.vis.timeline .editable .item.selected {
cursor: move;
}
.vis.timeline .item.point.selected {
background-color: #FFF785;
}
.vis.timeline .item.box {
text-align: center;
border-style: solid;
border-radius: 2px;
}
.vis.timeline .item.point {
background: none;
}
.vis.timeline .item.dot {
position: absolute;
padding: 0;
border-width: 4px;
border-style: solid;
border-radius: 4px;
}
.vis.timeline .item.range {
border-style: solid;
border-radius: 2px;
box-sizing: border-box;
}
.vis.timeline .item.background {
overflow: hidden;
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
padding: 0;
margin: 0;
}
.vis.timeline .item.range .content {
position: relative;
display: inline-block;
max-width: 100%;
overflow: hidden;
}
.vis.timeline .item.background .content {
position: absolute;
display: inline-block;
overflow: hidden;
max-width: 100%;
margin: 5px;
}
.vis.timeline .item.line {
padding: 0;
position: absolute;
width: 0;
border-left-width: 1px;
border-left-style: solid;
}
.vis.timeline .item .content {
white-space: nowrap;
overflow: hidden;
}
.vis.timeline .item .delete {
background: url('img/timeline/delete.png') no-repeat top center;
position: absolute;
width: 24px;
height: 24px;
top: 0;
right: -24px;
cursor: pointer;
}
.vis.timeline .item.range .drag-left {
position: absolute;
width: 24px;
height: 100%;
top: 0;
left: -4px;
cursor: w-resize;
}
.vis.timeline .item.range .drag-right {
position: absolute;
width: 24px;
height: 100%;
top: 0;
right: -4px;
cursor: e-resize;
}
.vis.timeline .timeaxis {
position: relative;
overflow: hidden;
}
.vis.timeline .timeaxis.foreground {
top: 0;
left: 0;
width: 100%;
}
.vis.timeline .timeaxis.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.vis.timeline .timeaxis .text {
position: absolute;
color: #4d4d4d;
padding: 3px;
white-space: nowrap;
}
.vis.timeline .timeaxis .text.measure {
position: absolute;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
visibility: hidden;
}
.vis.timeline .timeaxis .grid.vertical {
position: absolute;
border-left: 1px solid;
}
.vis.timeline .timeaxis .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .timeaxis .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .currenttime {
background-color: #FF7F6E;
width: 2px;
z-index: 1;
}
.vis.timeline .customtime {
background-color: #6E94FF;
width: 2px;
cursor: move;
z-index: 1;
}
.vis.timeline.root {
/*
-webkit-transition: height .4s ease-in-out;
transition: height .4s ease-in-out;
*/
}
.vis.timeline .vispanel {
/*
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
*/
}
.vis.timeline .axis {
/*
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
*/
}
/* TODO: get animation working nicely
.vis.timeline .item {
-webkit-transition: top .4s ease-in-out;
transition: top .4s ease-in-out;
}
.vis.timeline .item.line {
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
transition: height .4s ease-in-out, top .4s ease-in-out;
}
/**/
.vis.timeline .vispanel.background.horizontal .grid.horizontal {
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px solid;
}
.vis.timeline .vispanel.background.horizontal .grid.minor {
border-color: #e5e5e5;
}
.vis.timeline .vispanel.background.horizontal .grid.major {
border-color: #bfbfbf;
}
.vis.timeline .dataaxis .yAxis.major {
width: 100%;
position: absolute;
color: #4d4d4d;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.major.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.minor{
position: absolute;
width: 100%;
color: #bebebe;
white-space: nowrap;
}
.vis.timeline .dataaxis .yAxis.minor.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title{
position: absolute;
color: #4d4d4d;
white-space: nowrap;
bottom: 20px;
text-align: center;
}
.vis.timeline .dataaxis .yAxis.title.measure{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
visibility: hidden;
width: auto;
}
.vis.timeline .dataaxis .yAxis.title.left {
bottom: 0px;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.vis.timeline .dataaxis .yAxis.title.right {
bottom: 0px;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.vis.timeline .legend {
background-color: rgba(247, 252, 255, 0.65);
padding: 5px;
border-color: #b3b3b3;
border-style:solid;
border-width: 1px;
box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
}
.vis.timeline .legendText {
/*font-size: 10px;*/
white-space: nowrap;
display: inline-block
}
.vis.timeline .graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.vis.timeline .graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.vis.timeline .graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.vis.timeline .graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.vis.timeline .graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.vis.timeline .graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.vis.timeline .graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.vis.timeline .graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.vis.timeline .graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.vis.timeline .graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.vis.timeline .fill {
fill-opacity:0.1;
stroke: none;
}
.vis.timeline .bar {
fill-opacity:0.5;
stroke-width:1px;
}
.vis.timeline .point {
stroke-width:2px;
fill-opacity:1.0;
}
.vis.timeline .legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.vis.timeline .outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.vis.timeline .iconFill {
fill-opacity:0.3;
stroke: none;
}
div.network-manipulationDiv {
border-width: 0;
border-bottom: 1px;
border-style:solid;
border-color: #d6d9d8;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 30px;
}
div.network-manipulation-editMode {
position:absolute;
left: 0;
top: 0;
height: 30px;
margin-top:20px;
}
div.network-manipulation-closeDiv {
position:absolute;
right: 0;
top: 0;
width: 30px;
height: 30px;
background-position: 20px 3px;
background-repeat: no-repeat;
background-image: url("img/network/cross.png");
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-manipulation-closeDiv:hover {
opacity: 0.6;
}
span.network-manipulationUI {
font-family: verdana;
font-size: 12px;
-moz-border-radius: 15px;
border-radius: 15px;
display:inline-block;
background-position: 0px 0px;
background-repeat:no-repeat;
height:24px;
margin: -14px 0px 0px 10px;
vertical-align:middle;
cursor: pointer;
padding: 0px 8px 0px 8px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.network-manipulationUI:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
}
span.network-manipulationUI:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
}
span.network-manipulationUI.back {
background-image: url("img/network/backIcon.png");
}
span.network-manipulationUI.none:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
cursor: default;
}
span.network-manipulationUI.none:active {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
}
span.network-manipulationUI.none {
padding: 0;
}
span.network-manipulationUI.notification{
margin: 2px;
font-weight: bold;
}
span.network-manipulationUI.add {
background-image: url("img/network/addNodeIcon.png");
}
span.network-manipulationUI.edit {
background-image: url("img/network/editIcon.png");
}
span.network-manipulationUI.edit.editmode {
background-color: #fcfcfc;
border-style:solid;
border-width:1px;
border-color: #cccccc;
}
span.network-manipulationUI.connect {
background-image: url("img/network/connectIcon.png");
}
span.network-manipulationUI.delete {
background-image: url("img/network/deleteIcon.png");
}
/* top right bottom left */
span.network-manipulationLabel {
margin: 0px 0px 0px 23px;
line-height: 25px;
}
div.network-seperatorLine {
display:inline-block;
width:1px;
height:20px;
background-color: #bdbdbd;
margin: 5px 7px 0px 15px;
}
div.network-navigation_wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.network-navigation {
width:34px;
height:34px;
-moz-border-radius: 17px;
border-radius: 17px;
position:absolute;
display:inline-block;
background-position: 2px 2px;
background-repeat:no-repeat;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.network-navigation:hover {
box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
}
div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.up {
background-image: url("img/network/upArrow.png");
bottom:50px;
left:55px;
}
div.network-navigation.down {
background-image: url("img/network/downArrow.png");
bottom:10px;
left:55px;
}
div.network-navigation.left {
background-image: url("img/network/leftArrow.png");
bottom:10px;
left:15px;
}
div.network-navigation.right {
background-image: url("img/network/rightArrow.png");
bottom:10px;
left:95px;
}
div.network-navigation.zoomIn {
background-image: url("img/network/plus.png");
bottom:10px;
right:15px;
}
div.network-navigation.zoomOut {
background-image: url("img/network/minus.png");
bottom:10px;
right:55px;
}
div.network-navigation.zoomExtends {
background-image: url("img/network/zoomExtends.png");
bottom:50px;
right:15px;
}

+ 1
- 0
showcase/projects/eu/data/combined/2013_FP7-ICT.json
File diff suppressed because it is too large
View File


+ 2
- 0
showcase/projects/eu/js/FileSaver.min.js View File

@ -0,0 +1,2 @@
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs=saveAs||typeof navigator!=="undefined"&&navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator)||function(view){"use strict";if(typeof navigator!=="undefined"&&/MSIE [1-9]\./.test(navigator.userAgent)){return}var doc=view.document,get_URL=function(){return view.URL||view.webkitURL||view},save_link=doc.createElementNS("http://www.w3.org/1999/xhtml","a"),can_use_save_link="download"in save_link,click=function(node){var event=doc.createEvent("MouseEvents");event.initMouseEvent("click",true,false,view,0,0,0,0,0,false,false,false,false,0,null);node.dispatchEvent(event)},webkit_req_fs=view.webkitRequestFileSystem,req_fs=view.requestFileSystem||webkit_req_fs||view.mozRequestFileSystem,throw_outside=function(ex){(view.setImmediate||view.setTimeout)(function(){throw ex},0)},force_saveable_type="application/octet-stream",fs_min_size=0,arbitrary_revoke_timeout=500,revoke=function(file){var revoker=function(){if(typeof file==="string"){get_URL().revokeObjectURL(file)}else{file.remove()}};if(view.chrome){revoker()}else{setTimeout(revoker,arbitrary_revoke_timeout)}},dispatch=function(filesaver,event_types,event){event_types=[].concat(event_types);var i=event_types.length;while(i--){var listener=filesaver["on"+event_types[i]];if(typeof listener==="function"){try{listener.call(filesaver,event||filesaver)}catch(ex){throw_outside(ex)}}}},FileSaver=function(blob,name){var filesaver=this,type=blob.type,blob_changed=false,object_url,target_view,dispatch_all=function(){dispatch(filesaver,"writestart progress write writeend".split(" "))},fs_error=function(){if(blob_changed||!object_url){object_url=get_URL().createObjectURL(blob)}if(target_view){target_view.location.href=object_url}else{var new_tab=view.open(object_url,"_blank");if(new_tab==undefined&&typeof safari!=="undefined"){view.location.href=object_url}}filesaver.readyState=filesaver.DONE;dispatch_all();revoke(object_url)},abortable=function(func){return function(){if(filesaver.readyState!==filesaver.DONE){return func.apply(this,arguments)}}},create_if_not_found={create:true,exclusive:false},slice;filesaver.readyState=filesaver.INIT;if(!name){name="download"}if(can_use_save_link){object_url=get_URL().createObjectURL(blob);save_link.href=object_url;save_link.download=name;click(save_link);filesaver.readyState=filesaver.DONE;dispatch_all();revoke(object_url);return}if(view.chrome&&type&&type!==force_saveable_type){slice=blob.slice||blob.webkitSlice;blob=slice.call(blob,0,blob.size,force_saveable_type);blob_changed=true}if(webkit_req_fs&&name!=="download"){name+=".download"}if(type===force_saveable_type||webkit_req_fs){target_view=view}if(!req_fs){fs_error();return}fs_min_size+=blob.size;req_fs(view.TEMPORARY,fs_min_size,abortable(function(fs){fs.root.getDirectory("saved",create_if_not_found,abortable(function(dir){var save=function(){dir.getFile(name,create_if_not_found,abortable(function(file){file.createWriter(abortable(function(writer){writer.onwriteend=function(event){target_view.location.href=file.toURL();filesaver.readyState=filesaver.DONE;dispatch(filesaver,"writeend",event);revoke(file)};writer.onerror=function(){var error=writer.error;if(error.code!==error.ABORT_ERR){fs_error()}};"writestart progress write abort".split(" ").forEach(function(event){writer["on"+event]=filesaver["on"+event]});writer.write(blob);filesaver.abort=function(){writer.abort();filesaver.readyState=filesaver.DONE};filesaver.readyState=filesaver.WRITING}),fs_error)}),fs_error)};dir.getFile(name,{create:false},abortable(function(file){file.remove();save()}),abortable(function(ex){if(ex.code===ex.NOT_FOUND_ERR){save()}else{fs_error()}}))}),fs_error)}),fs_error)},FS_proto=FileSaver.prototype,saveAs=function(blob,name){return new FileSaver(blob,name)};FS_proto.abort=function(){var filesaver=this;filesaver.readyState=filesaver.DONE;dispatch(filesaver,"abort")};FS_proto.readyState=FS_proto.INIT=0;FS_proto.WRITING=1;FS_proto.DONE=2;FS_proto.error=FS_proto.onwritestart=FS_proto.onprogress=FS_proto.onwrite=FS_proto.onabort=FS_proto.onerror=FS_proto.onwriteend=null;return saveAs}(typeof self!=="undefined"&&self||typeof window!=="undefined"&&window||this.content);if(typeof module!=="undefined"&&module.exports){module.exports.saveAs=saveAs}else if(typeof define!=="undefined"&&define!==null&&define.amd!=null){define([],function(){return saveAs})}

+ 291
- 0
showcase/projects/eu/js/init_precalc.js View File

@ -0,0 +1,291 @@
function focusOn(event) {
var nodeId = event.value;
network.selectNodes([nodeId]);
highlightConnections({nodes:[nodeId]})
network.focusOnNode(nodeId,{animation:false, scale:0.2})
}
function viewAllNeighbours() {
network.zoomExtent({nodes:connectedNodes, duration:0})
}
function doSteps(amount) {
network.setOptions({stabilizationIterations:amount})
network._stabilize()
}
var network;
var nodes;
var edges;
var edgeOpacity = 0.15;
function drawAll(dataJSON, file) {
// create an array with nodes
nodes = new vis.DataSet(dataJSON.nodes);
var totalMass = 0;
for (var i = 0; i < dataJSON.nodes.length; i++) {
totalMass += dataJSON.nodes[i].mass;
//console.log(dataJSON.nodes[i].mass)
}
var gravityConstant = -20000;
if (totalMass < 2000) {
gravityConstant = -2000;
}
var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length);
var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length);
var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio));
opacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio));
// create an array with edges
edges = new vis.DataSet(dataJSON.edges);
// console.log(edgesArray.length,edgesArray)
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var amountOfNodes = dataJSON.nodes.length;
var options = {
stabilize: true,
stabilizationIterations: 15000,
smoothCurves: {
enabled: false,
dynamic: false
},
configurePhysics: false,
physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}},
//physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}},
nodes: {
shape: 'dot',
radiusMax: amountOfNodes * 0.5,
fontColor: '#ffffff',
fontDrawThreshold: 8,
scaleFontWithValue: true,
fontSizeMin: 14,
fontSizeMax: amountOfNodes * 0.25,
fontSizeMaxVisible: 20,
fontStrokeWidth: 1, // px
fontStrokeColor: '#222222'
},
edges: {
opacity: edgeOpacity
},
hideEdgesOnDrag: true,
maxVelocity: 100,
tooltip: {
delay: 200,
fontSize: 12,
color: {
background: "#fff"
}
}
};
network = new vis.Network(container, {nodes:[],edges:[]}, options);
network.on("stabilizationIterationsDone", function() {
this.setFreezeSimulation(true);
});
network.on("stabilized", function() {
console.log('downloading')
network.storePositions();
download(file);
setTimeout(getNewTask(file),3000);
})
network.setData(data);
if (dataJSON.nodes.length < 2) {
console.log('downloading because few nodes')
network.storePositions();
download(file);
setTimeout(getNewTask(file),3000);
}
//network.on("click", highlightConnections);
//window.onresize = function () {
// network.redraw()
//};
//network.on("stabilized", function() {
// network.setOptions({physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0, springConstant: 0}}});
// console.log('downlaoding')
// download();
// setTimeout(next,2000);
//});
//populateCompanyDropdown();
}
// marked is used so we don't do heavy stuff on each click
var marked = false;
var connectedNodes = [];
function highlightConnections(selectedItems) {
var nodeId;
var requireUpdate = false;
// we get all data from the dataset once to avoid updating multiple times.
if (selectedItems.nodes.length == 0 && marked === true) {
connectedNodes = [];
requireUpdate = true;
var allNodes = nodes.get({returnType:"Object"});
// restore on unselect
for (nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
}
marked = false;
network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:0.15}})
}
else if (selectedItems.nodes.length > 0) {
var allNodes = nodes.get({returnType:"Object"});
marked = true;
requireUpdate = true;
var mainNode = selectedItems.nodes[0]; // this is an ID
connectedNodes = network.getConnectedNodes(mainNode);
connectedNodes.push(mainNode);
for (nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(150,150,150,0.1)';
if (allNodes[nodeId].oldLabel === undefined) {
allNodes[nodeId].oldLabel = allNodes[nodeId].label;
allNodes[nodeId].label = "";
}
}
for (var i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].oldLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel;
allNodes[connectedNodes[i]].oldLabel = undefined;
}
}
network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}})
}
if (requireUpdate === true) {
var updateArray = [];
for (nodeId in allNodes) {
updateArray.push(allNodes[nodeId]);
}
nodes.update(updateArray);
}
}
function loadJSON(path, success, error) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText), path);
}
else {
error();
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
function populateDropdown() {
var nodesAr = nodes.get();
var nodeIds = [];
for (var i = 0; i < nodesAr.length;i++) {
nodeIds.push(nodesAr[i].id);
}
nodeIds.sort()
var dropdown = document.getElementById("companyDropdown");
var option = document.createElement('option');
option.text = option.value = 'pick a company to focus on.';
dropdown.add(option);
for (i = 0; i < nodeIds.length; i++) {
option = document.createElement('option');
option.text = option.value = nodeIds[i];
dropdown.add(option);
}
}
function download(path) {
var file = path.replace("./data/data/","");
var nodesAr = nodes.get();
var edgesAr = edges.get();
var obj = {nodes: nodesAr, edges: edgesAr};
var json = JSON.stringify(obj);
var blob = new Blob([json], {type: "text/plain;charset=utf-8"});
saveAs(blob, "processed_" + file);
}
function startTask(path, success) {
// if we find the file already processed, we go to the next one
loadJSON("./data/processedData/processed_" + path,
function() {
getNewTask(path);
},
function() {
loadJSON("./data/data/" + path, success, function() {
console.log("could not find file ", path);
})
});
}
function askAgent(to, message) {
return new Promise(function (resolve, reject) {
if (typeof message == 'object') {
message = JSON.stringify(message);
}
// create XMLHttpRequest object to send the POST request
var http = new XMLHttpRequest();
// insert the callback function. This is called when the message has been delivered and a response has been received
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
var response = "";
if (http.responseText.length > 0) {
response = JSON.parse(http.responseText);
}
resolve(response);
}
else if (http.readyState == 4) {
reject(new Error("http.status:" + http.status));
}
};
// open an asynchronous POST connection
http.open("POST", to, true);
// include header so the receiving code knows its a JSON object
http.setRequestHeader("Content-Type", "text/plain");
// send
http.send(message);
});
}
function getNewTask(path) {
var file = undefined;
if (path !== undefined) {
file = path.replace("./data/data/", "");
}
askAgent("http://127.0.0.1:3000/agents/proxy", {jsonrpc:"2.0",method:"getAssignment", params:{finishedFile:file}}).then(function(reply) {
console.log(reply, reply.result);
if (reply.result != 'none') {
startTask(reply.result, function(data,path) {document.getElementById("FILENAME").innerHTML = path; setTimeout(function() {drawAll(data,path);},200)});
}
})
}
getNewTask()

+ 443
- 0
showcase/projects/eu/js/init_view.js View File

@ -0,0 +1,443 @@
function selectCompany(event) {
var nodeId = event.value;
network.selectNodes([nodeId]);
highlightConnections({nodes:[nodeId]})
network.focusOnNode(nodeId,{animation:false, scale:0.2})
}
function selectYear(year) {
selectedYear = year
console.log(year)
populateYearDiv();
recursiveClearDOM(document.getElementById("projectsDropdown"));
populateProjectsDropdown();
recursiveClearDOM(document.getElementById("companyDropdown"));
}
function selectProject(event) {
if (event.value != "none") {
selectedProject = event.value;
}
if (selectedType != "") {
if (network) {
network.destroy()
network = null;
}
loadJSON('./data/combined/' + selectedYear + "_" + selectedProject + ".json", drawAll);
document.getElementById("FILENAME").innerHTML = selectedYear + "_" + selectedProject + ".json";
}
}
function selectType(type) {
if (selectedType != type) {
selectedType = type;
totalValue = 0;
populateTypeDiv();
var allNodes = nodes.get();
if (allNodes.length > 0) {
if (selectedType == "connections") {
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
node.title = node.id + ": " + node.euData[selectedType];
node.value = Math.max(1,Math.pow(Number(node.euData[selectedType]),1.05));
totalValue += node.value;
}
}
else {
for (var i = 0; i < allNodes.length; i++) {
var node = allNodes[i];
node.title = node.id + ": " + Math.round(Number(node.euData[selectedType])) + " Euro";
node.value = Math.max(Math.round(0.0001 * Number(node.euData[selectedType])),1);
totalValue += node.value;
}
}
nodes.update(allNodes);
}
}
}
function recursiveClearDOM(DOMobject) {
while (DOMobject.hasChildNodes() == true) {
recursiveClearDOM(DOMobject.firstChild);
DOMobject.removeChild(DOMobject.firstChild);
}
}
function viewAllNeighbours() {
network.zoomExtent({nodes:connectedNodes, duration:0})
}
function doSteps(amount) {
network.setFreezeSimulation(false);
network.setOptions({stabilizationIterations:amount})
network._stabilize()
network.setFreezeSimulation(true);
}
var network;
var nodes;
var edges;
var edgeOpacity = 0.15;
var totalValue = 0;
function drawAll(dataJSON, file) {
// create an array with nodes
nodes = new vis.DataSet(dataJSON.nodes);
// create an array with edges
edges = new vis.DataSet(dataJSON.edges);
var totalMass = 0;
totalValue = 0;
for (var i = 0; i < dataJSON.nodes.length; i++) {
totalMass += dataJSON.nodes[i].mass;
totalValue += dataJSON.nodes[i].value;
}
var gravityConstant = -20000;
if (totalMass < 2000) {
gravityConstant = -2000;
}
var edgeNodeRatio = Math.max(1,dataJSON.edges.length) / Math.max(1,dataJSON.nodes.length);
var nodeEdgeRatio = Math.max(1,dataJSON.nodes.length) / Math.max(1,dataJSON.edges.length);
var centralGravity = Math.min(5,Math.max(0.1,edgeNodeRatio));
edgeOpacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio*2));
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var amountOfNodes = dataJSON.nodes.length;
var options = {
stabilize: false,
stabilizationIterations: 15000,
smoothCurves: {
enabled: true,
dynamic: false
},
configurePhysics: false,
physics: {barnesHut: {gravitationalConstant: gravityConstant, centralGravity: centralGravity, springLength: 100, springConstant: 0.001}},
//physics: {barnesHut: {gravitationalConstant: 0, centralGravity: 0.0, springConstant: 0}},
nodes: {
shape: 'dot',
radiusMax: amountOfNodes * 0.5,
fontColor: '#ffffff',
fontDrawThreshold: 8,
scaleFontWithValue: true,
fontSizeMin: 14,
fontSizeMax: amountOfNodes * 0.25,
fontSizeMaxVisible: 20,
fontStrokeWidth: 1, // px
fontStrokeColor: '#222222'
},
edges: {
opacity: edgeOpacity
},
hideEdgesOnDrag: true,
maxVelocity: 100,
tooltip: {
delay: 200,
fontSize: 12,
color: {
background: "#fff"
}
}
};
network = new vis.Network(container, data, options);
network.setFreezeSimulation(true);
network.on("click",highlightConnections);
populateCompanyDropdown();
window.onresize = function () {network.redraw();};
}
// marked is used so we don't do heavy stuff on each click
var marked = false;
var connectedNodes = [];
function highlightConnections(selectedItems) {
if (selectedItems.nodes[0] == 'none') {
return;
}
var nodeId;
var requireUpdate = false;
// we get all data from the dataset once to avoid updating multiple times.
if (selectedItems.nodes.length == 0 && marked === true) {
connectedNodes = [];
requireUpdate = true;
var allNodes = nodes.get({returnType:"Object"});
// restore on unselect
for (nodeId in allNodes) {
allNodes[nodeId].color = undefined;
if (allNodes[nodeId].oldLabel !== undefined) {
allNodes[nodeId].label = allNodes[nodeId].oldLabel;
allNodes[nodeId].oldLabel = undefined;
}
}
marked = false;
network.setOptions({nodes:{fontSizeMin:14},edges:{opacity:edgeOpacity}})
}
else if (selectedItems.nodes.length > 0) {
var allNodes = nodes.get({returnType:"Object"});
marked = true;
requireUpdate = true;
var mainNode = selectedItems.nodes[0]; // this is an ID
connectedNodes = network.getConnectedNodes(mainNode);
connectedNodes.push(mainNode);
for (nodeId in allNodes) {
allNodes[nodeId].color = 'rgba(150,150,150,0.1)';
if (allNodes[nodeId].oldLabel === undefined) {
allNodes[nodeId].oldLabel = allNodes[nodeId].label;
allNodes[nodeId].label = "";
}
}
for (var i = 0; i < connectedNodes.length; i++) {
allNodes[connectedNodes[i]].color = undefined;
if (allNodes[connectedNodes[i]].oldLabel !== undefined) {
allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].oldLabel;
allNodes[connectedNodes[i]].oldLabel = undefined;
}
}
// we want to set the fontSizeMin just so that the node we're looking at has a good fontsize at the zoomLevel
network.setOptions({nodes:{fontSizeMin:150},edges:{opacity:0.025}})
}
if (requireUpdate === true) {
var updateArray = [];
for (nodeId in allNodes) {
updateArray.push(allNodes[nodeId]);
}
nodes.update(updateArray);
}
}
function loadJSON(path, success, error) {
selectedFile = path;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
success(JSON.parse(xhr.responseText), path);
}
else {
error();
}
}
};
xhr.open("GET", path, true);
xhr.send();
}
function populateCompanyDropdown() {
var nodesAr = nodes.get();
var nodeIds = [];
for (var i = 0; i < nodesAr.length;i++) {
nodeIds.push(nodesAr[i].id);
}
nodeIds.sort()
var dropdown = document.getElementById("companyDropdown");
var option = document.createElement('option');
option.text = '-- pick a company to focus on.';
option.value = 'none';
dropdown.add(option);
for (i = 0; i < nodeIds.length; i++) {
option = document.createElement('option');
option.text = option.value = nodeIds[i];
dropdown.add(option);
}
}
function populateTypeDiv() {
var container = document.getElementById("typeContainer");
recursiveClearDOM(container);
var types = ['funding', 'connections'];
var typeLabels = ['size by funding', 'size by connections'];
for (i = 0; i < types.length; i++) {
var div = document.createElement('div');
div.className = 'type';
if (types[i] == selectedType) {
div.className += ' selected'
}
div.innerHTML = typeLabels[i];
div.onclick = selectType.bind(this,types[i])
container.appendChild(div);
}
}
function populateYearDiv() {
var container = document.getElementById("yearContainer");
recursiveClearDOM(container);
for (i = 0; i < years.length; i++) {
var div = document.createElement('div');
div.className = 'year';
if (years[i] == selectedYear) {
div.className += ' selected'
}
div.innerHTML = years[i];
div.onclick = selectYear.bind(this,years[i])
container.appendChild(div);
}
}
function populateProjectsDropdown() {
var dropdown = document.getElementById("projectsDropdown");
var option = document.createElement('option');
option.text = '-- pick project to see the connections';
option.value = 'none';
dropdown.add(option);
for (i = 0; i < yearlyProjects[selectedYear].length; i++) {
option = document.createElement('option');
option.text = option.value = yearlyProjects[selectedYear][i];
dropdown.add(option);
}
}
function download() {
var file = selectedFile.replace("./data/combined/","");
var nodesAr = nodes.get();
var edgesAr = edges.get();
var obj = {nodes: nodesAr, edges: edgesAr};
var json = JSON.stringify(obj);
var blob = new Blob([json], {type: "text/plain;charset=utf-8"});
saveAs(blob, file);
}
var filesList = [
//'2010_FP7-ENERGY.json',
//'2010_FP7-ENVIRONMENT.json',
//'2010_FP7-EURATOM-FISSION.json',
//'2010_FP7-HEALTH.json',
//'2010_FP7-ICT.json',
//'2010_FP7-IDEAS-ERC.json',
//'2010_FP7-INCO.json',
//'2010_FP7-INFRASTRUCTURES.json',
//'2010_FP7-JTI.json',
//'2010_FP7-KBBE.json',
//'2010_FP7-NMP.json',
//'2010_FP7-PEOPLE.json',
//'2010_FP7-REGIONS.json',
//'2010_FP7-REGPOT.json',
//'2010_FP7-SIS.json',
//'2010_FP7-SME.json',
//'2010_FP7-SPACE.json',
//'2010_FP7-SSH.json',
//'2010_FP7-TRANSPORT.json',
//'2010_Other.json',
//'2011_FP7-COH.json',
//'2011_FP7-ENERGY.json',
//'2011_FP7-ENVIRONMENT.json',
//'2011_FP7-EURATOM-FISSION.json',
//'2011_FP7-GA.json',
//'2011_FP7-HEALTH.json',
//'2011_FP7-ICT,FP7-JTI.json',
//'2011_FP7-ICT.json',
//'2011_FP7-IDEAS-ERC.json',
//'2011_FP7-INCO.json',
//'2011_FP7-INFRASTRUCTURES.json',
//'2011_FP7-JTI.json',
//'2011_FP7-KBBE.json',
//'2011_FP7-NMP,FP7-INFRASTRUCTURES.json',
//'2011_FP7-NMP,FP7-TRANSPORT.json',
//'2011_FP7-NMP.json',
//'2011_FP7-PEOPLE.json',
//'2011_FP7-REGIONS.json',
//'2011_FP7-REGPOT.json',
//'2011_FP7-SECURITY.json',
//'2011_FP7-SIS.json',
//'2011_FP7-SME.json',
//'2011_FP7-SPACE.json',
//'2011_FP7-SSH.json',
//'2011_FP7-TRANSPORT.json',
//'2012_CIP.json',
//'2012_FP7-ENERGY.json',
//'2012_FP7-ENVIRONMENT.json',
//'2012_FP7-EURATOM-FISSION.json',
//'2012_FP7-HEALTH.json',
//'2012_FP7-ICT.json',
//'2012_FP7-IDEAS-ERC.json',
//'2012_FP7-INCO.json',
//'2012_FP7-INFRASTRUCTURES.json',
//'2012_FP7-JTI.json',
//'2012_FP7-KBBE.json',
//'2012_FP7-NMP.json',
//'2012_FP7-PEOPLE.json',
//'2012_FP7-REGIONS.json',
//'2012_FP7-REGPOT.json',
//'2012_FP7-SECURITY.json',
//'2012_FP7-SIS.json',
//'2012_FP7-SME.json',
//'2012_FP7-SPACE.json',
//'2012_FP7-SSH.json',
//'2012_FP7-TRANSPORT.json',
//'2012_Other.json',
//'2013_CIP.json',
//'2013_FP7-COH.json',
//'2013_FP7-ENERGY.json',
//'2013_FP7-ENVIRONMENT.json',
//'2013_FP7-EURATOM-FISSION.json',
//'2013_FP7-EURATOM-FUSION.json',
//'2013_FP7-HEALTH.json',
'2013_FP7-ICT.json',
//'2013_FP7-IDEAS-ERC.json',
//'2013_FP7-INCO.json',
//'2013_FP7-INFRASTRUCTURES,FP7-SME.json',
//'2013_FP7-INFRASTRUCTURES.json',
//'2013_FP7-JTI.json',
//'2013_FP7-KBBE.json',
//'2013_FP7-NMP.json',
//'2013_FP7-PEOPLE.json',
//'2013_FP7-REGIONS.json',
//'2013_FP7-REGPOT.json',
//'2013_FP7-SECURITY.json',
//'2013_FP7-SIS.json',
//'2013_FP7-SME.json',
//'2013_FP7-SPACE.json',
//'2013_FP7-SSH.json',
//'2013_FP7-TRANSPORT.json',
]
filesList.sort();
var fileIndex = -1;
function next() {
if (network) {
network.destroy()
network = null;
}
fileIndex++;
document.getElementById("FILENAME").innerHTML = filesList[fileIndex];
loadJSON('./data/combined/' + filesList[fileIndex], drawAll)
}
var years = [];
var yearlyProjects = {};
var selectedFile = "";
for (var i = 0; i < filesList.length; i++) {
var filename = filesList[i];
var filenameArray = filename.split("_");
var year = filenameArray[0];
var project = filenameArray[1].replace(".json", "");
if (years.indexOf(year) == -1) {
years.push(year);
yearlyProjects[year] = [];
}
yearlyProjects[year].push(project);
}
var selectedYear = years[years.length-1];
var selectedType = "connections";
var selectedProject = "";
populateYearDiv();
populateTypeDiv();
populateProjectsDropdown();
//next()

+ 34888
- 0
showcase/projects/eu/js/vis.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save