Merge remote-tracking branch 'origin/gh-pages' into gh-pages

9 years ago · d850bac385
--- a/featureRequests.html
+++ b/featureRequests.html
@ -135,11 +135,12 @@ Legend:
 </ul>
 <h3 id="network">Network</h3>
 <ul>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/602" target="_blank">602</a>) Add hoverEdge and blurEge events.</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/528" target="_blank">548</a>) Allow labels to be images too.</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/530" target="_blank">530</a>, <a href="https://github.com/almende/vis/issues/475" target="_blank">475</a>, <a href="https://github.com/almende/vis/issues/300" target="_blank">300</a>) Improve option structure for the behaviour of the network. This will solve multiple issues if done correctly.</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/528" target="_blank">528</a>) Allow the inserting of a custom sorting function for the hierarchical layout.</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/507" target="_blank">507</a>) Add animations to the edges, like circles travelling over them or icons.</li>
    <li class="pink">(<a href="https://github.com/almende/vis/issues/426" target="_blank">426</a>) Label stroke ref: <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/">http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/</a></li>
    <li class="done">(<a href="https://github.com/almende/vis/issues/426" target="_blank">426</a>) Label stroke ref: <a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/">http://www.html5canvastutorials.com/tutorials/html5-canvas-text-stroke/</a></li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/430" target="_blank">430</a>) Add fix/unfix functions for nodes. This can be done with allowToMoveX and Y but native options would be better ('node.disableMove' and 'node.disableDrag').</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/351" target="_blank">351</a>) Improve the options for arrows, backarrows and linetypes. Possibly receiving a function as input for custom nodes &amp; edges.</li>
    <li class="normal">(<a href="https://github.com/almende/vis/issues/335" target="_blank">335</a>) Set smooth curves per edge.</li>
--- a/showcase/projects/eu/css/vis.css
+++ b/showcase/projects/eu/css/vis.css
@ -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;
 }
--- a/showcase/projects/eu/data/combined/2013_FP7-EURATOM-FISSION.json
+++ b/showcase/projects/eu/data/combined/2013_FP7-EURATOM-FISSION.json
--- a/showcase/projects/eu/data/combined/2013_FP7-ICT.json
+++ b/showcase/projects/eu/data/combined/2013_FP7-ICT.json
--- a/showcase/projects/eu/index.html
+++ b/showcase/projects/eu/index.html
@ -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>
--- a/showcase/projects/eu/js/FileSaver.min.js
+++ b/showcase/projects/eu/js/FileSaver.min.js
@ -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})}
--- a/showcase/projects/eu/js/init_precalc.js
+++ b/showcase/projects/eu/js/init_precalc.js
@ -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()
--- a/showcase/projects/eu/js/init_view.js
+++ b/showcase/projects/eu/js/init_view.js
@ -0,0 +1,459 @@
 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;
        }
        network.setOptions({nodes:{radiusMax: nodeRadius, customScalingFunction:function (min,max,total,value) {
          if (max == min) {
            return 0.5;
          }
          else {
            var scale = 1 / (max - min);
            return Math.max(0,(value - min)*scale);
          }
        }}});
      }
      else { // by funding
        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 = Number(node.euData[selectedType]);
          totalValue += node.value;
        }
        network.setOptions({nodes:{radiusMax: 80*nodeRadius, customScalingFunction:function (min,max,total,value) {
          var scale = value / total;
          return scale;
        }}});
      }
      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));
  var amountOfNodes = dataJSON.nodes.length;

  edgeOpacity = Math.min(1.0,Math.max(0.15,nodeEdgeRatio*2));
  nodeRadius = amountOfNodes * 0.8;

  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };

  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: nodeRadius,
      fontColor: '#ffffff',
      fontDrawThreshold: 8,
      scaleFontWithValue: true,
      fontSizeMin: 8,
      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
    console.log(totalValue, allNodes[mainNode].value)

    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-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 = "";
 var nodeRadius = 1000;

 populateYearDiv();
 populateTypeDiv();
 populateProjectsDropdown();

 //next()
--- a/showcase/projects/eu/js/vis.js
+++ b/showcase/projects/eu/js/vis.js