From 673edd1d77db0640e1e3a67fa99356b29f8d7725 Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Fri, 31 Jul 2020 13:23:28 +0200
Subject: [PATCH] new

---
 __pycache__/run.cpython-37.pyc            | Bin 13044 -> 13061 bytes
 frontend/src/components/FeatureSpace1.vue | 540 ++++++++++++++++++---
 frontend/src/components/FeatureSpace2.vue |  21 +-
 frontend/src/components/FeatureSpace3.vue | 542 +++++++++++++++++++---
 frontend/src/components/FeatureSpace4.vue | 542 +++++++++++++++++++---
 frontend/src/components/Main.vue          |   7 +-
 6 files changed, 1449 insertions(+), 203 deletions(-)

diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc
index 3e9e870320dcf21712efe21b91d4e847dd0c17cc..f38a6eeb0ea8d47d88e76ee459808db229ca89cf 100644
GIT binary patch
delta 1724
zcmZA2J8#=o6bEo#QbrX~w4N44y&OrFEZM51$blb8>?X1ebSN?u$YK<A127h<7Dm9b
zi*X1IYS0%_w76e@>d>MHGBhsGE(JPv$_MDsr5Ouk$&?}Jxu-X@XanXw|8qt1{0KsN
zaqq#gF))mnf`9+KsvrIEvtg9kyJyAn5xeQmgE3)D0mF|^6)y!T-=H-%O4w2R(nIFO
zKo4pi;z1n;W0c@eD!0Z-KLzP2^K!1JGFX{ZWwFXrwSbl7rXf9HUIEt(u0>q4xR!8T
zz_sjVAU9!l;-kp7s`Jv#+DSWw_pd<CUyyt0sp{pR;^!cTSFE_EpNC2m%SG25S^RXd
zJ<dR3!gR$}9;nBvrFd1h05QKfRVM691wU2#TsdZT*496Zy5%pFQN>PMxVMl0m=^7Y
zhpJbTx69EeFWk!z!_ic)4t2kZk7wy5G8D(G7yxq>*AlL^p)&B6@MKduH0N31Xn;u$
zu_qiRG|*w<@C|Y_uxb*+zAPBU5Tk_*T{0Lk7&1)BU?B#RjJBLaFf`|HWav1V>aD;E
zF;<DO8ZcUt(H4wVJUK5J5$9>Z=s=zrVoxyg&_PBXhwl)hgVmeFxLp;DQi#z-MqDyf
zVyMW-ONJU^sFKl>lL$t{`4bs&oJ{quz!hTjiO~-jUCHPPMjubMBxBC`EnuvJMGUbg
z7#6G}!@}X$iLs8=Rbp(_1fv{cY#_ss42>8XGAzl^LJUnZHsvIOG3Pu%hJll*-WF^T
zW1AS;0b@flHiydC+oqw!OMi_j@!DLcN<8@+REgnt#K`!zUK^@*+Ros+yh|M&t_PjB
zs1t`9LFXoQ4A==ew_umP5C$;7F9d#6zdAO33quW`78^3W)c|j5!QM<~k2?D^oqg&Y
z%ybTh%H6tK_oMET8yhW-8p1xo>oJA85x?m!PlF8eeru|T-Lcq)#Op{Y8A_>8s)kZ4
zl)9m`5lVwl+6&TH+<rfZA|1>o7bl0p`Q(&~7jo%BE}v(p&0Y=Kq15wR@BIH5$h|qc
zNjF+LzYyis3%MW8{Jq9c{HvzUlg(59ym_C$Y#y={zq9-eTjtM}PuVU%YMrn<czmCC
z+DY~?-)Wavn;*8{e&esX`_6|a?%DV4uOsXOzP2_vJ6WqS_K1JiJ!C)ff4kkpud1Sa
z5)nT+b5YfK%vXA+mXGNV(WjpxEuzKLD4S=FfA)Lt7p6bLZRfE#_#FD5YKMhO{{i?b
B=eqy^

delta 1704
zcmZA2&u<$=6bJB~SqHgZuN^zide@Gf*ol8Np>~}rKbi)LlSqIn^@5P-p;6H`3l56V
zvLH2@l?6@(2t@+s56GGW5>XFSsW|jfP8@sei9eyIiYpRt9@C9Ck?eWjH`&?uS*_%U
zd;i?md%B)b;P1WN%I;5(b-hI1KP#4Y$r{sx<Vf)|EEDLsCi*EmZeKbkeu8OXt+8ZS
zCz;+)@u%f?2I*juWk<v}JW)+SmB%Uvm5J3fRF;=v*&*=@uuj2Rgf$2246M_zmb@%8
zhQv<q$9|;lD{so4v@>x3GBbjl+{=!rZ?JMO%?voP>={9xmE%y(dPd*m-^{iKSymVl
zO|g}SbdOq!U-2xK2nr)*NWNF#zlz@~d&JJ!+ELt_`A+GV?5qWQ+wg%@wx^G&UzN8r
zaFmzcEK9&>)SqYb!5loEg@c$QzH?##$Q4+NuvQ(V=P$s;dFfEyze7ij<<TMbgd@*t
z;K;-9HFVUVsw3mGIl(AK7)@Ykl0lF`fRUFB5@8U@Xvs+gLv>#OLxahvf0<oI#v(En
zLq=0FT7t0%7n_n1bN>n%OUy)u*b@wsEdj%X;g^uH1l60!_^=`vGZ97`7)i;X$e_S5
zC4)v7R5Chp62XYMe*z;3lTrUFyNZl1GP)t7Eg2ob=)%R8WK6ifhm2)rAw%p5hQ*eF
zVZrdr$XJHz8ZvHH1)~&UtN=ro3>6tFFf7SXBMenCR^=puG2xy9Lx;(zzsA;(v5t)O
zkg*~etBzv(>o}Bn>91oYUYiZ9#FM{)l^A|gj0|t<b%)wndkWs=x3HtJjj;1Jc9QHy
z*tsb>{MP*Kff1Oj7gXSp5Qo5dJviB9TVtIq>}-#9wz0D_*4c5CdsVL*#Jzbh(J%KG
z1aJuF5e2)kpyt&_VP>hIF;c|tKy0)0>xgMGk}{E0iKJ#EwIgXIl6sM}6{dl>{dO2d
z+8IwCOwJ1DlVdJk$TJsm={&RQ_-U*aNu8i^>;K1q?$z;4ywSq>L6{dW<Zd)`yY?H=
zd8&TI^}5Ds;|~A1{yBFVN2JbQHV(-qcbW&}1NgqnueB!2`&3cBfRFM9IZW?-b>Ds9
zee&snGk1Ic-h)<?f82Wa>~ZUd7`e+guk_BozA{J1DgUK?hy2R_ZMV~Zh|6Q*=Vc;J
v-A8<*b7-AFdM5h#v!lk;1dWpvaZk>kcb*XK6t>+*;_HMTcfV9WDqQ*xSh3vx

diff --git a/frontend/src/components/FeatureSpace1.vue b/frontend/src/components/FeatureSpace1.vue
index 38998f0..1c59e08 100644
--- a/frontend/src/components/FeatureSpace1.vue
+++ b/frontend/src/components/FeatureSpace1.vue
@@ -1,30 +1,12 @@
 <template>
-  <div>
-    <label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
-    <select id="selectFile" @change="selectDataSet()">
-        <option value="HeartC.csv" selected>Heart Disease</option>
-        <option value="IrisC.csv">Iris</option>
-        <option value="local">Upload New File</option>
-    </select>
-    <button class="btn-outline-success"
-    id="initializeID"
-    v-on:click="initialize">
-    <font-awesome-icon icon="search" />
-    {{ searchText }}
-    </button>
-    <button class="btn-outline-danger"
-    id="resetID"
-    v-on:click="reset">
-    <font-awesome-icon icon="trash" />
-    {{ resetText }}
-    </button>
+  <div class="column">
+    <div id="FeatureGraph1"></div>
   </div>
 </template>
 
 <script>
-import Papa from 'papaparse'
 import { EventBus } from '../main.js'
-import {$,jQuery} from 'jquery';
+import * as greadability from '../greadability.js'
 import * as d3Base from 'd3'
 
 // attach all d3 plugins to the d3 library
@@ -34,53 +16,485 @@ export default {
   name: 'FeatureSpace1',
   data () {
     return {
-      defaultDataSet: 'HeartC', // default value for the first data set
-      searchText: 'Hyper-parameter search',
-      resetText: 'Reset',
-      dataset: 'Data set'
+      dataFS1: [],
+      jsonData: [],
     }
   },
   methods: {
-    selectDataSet () {   
-      const fileName = document.getElementById('selectFile')
-      this.defaultDataSet = fileName.options[fileName.selectedIndex].value
-      this.defaultDataSet = this.defaultDataSet.split('.')[0]
-
-      if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
-        this.dataset = "Data set"
-        d3.select("#data").select("input").remove(); // Remove the selection field.
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-      } else {
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-        d3.select("#data").select("input").remove();
-        this.dataset = ""
-        var data
-        d3.select("#data")
-          .append("input")
-          .attr("type", "file")
-          .style("font-size", "18.5px")
-          .style("width", "200px")
-          .on("change", function() {
-            var file = d3.event.target.files[0];
-            Papa.parse(file, {
-                header: true,
-                dynamicTyping: true,
-                skipEmptyLines: true,
-                complete: function(results) {
-                  data = results.data;
-                  EventBus.$emit('SendToServerLocalFile', data)
+      initializeNetwork () {   
+        
+        var listofNodes = this.dataFS1[0]
+        var dataLoc = JSON.parse(this.dataFS1[2])
+
+        var nodes = []
+        listofNodes.forEach(element => nodes.push({"name": element}))
+
+        var links = []
+
+        Object.entries(dataLoc).forEach(
+            function ([feature, value]) {
+              Object.entries(value).forEach( function ([featureInside, value]) {
+                if (feature != featureInside) { 
+                  if (value >= 0) {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
+                  } else {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
+                  }
+                }   
+              })
+        })
+
+        this.jsonData = {"nodes": nodes, "links": links};
+
+        this.graphVizualization()
+
+      },
+      graphVizualization () {
+
+        var listofNodes = this.dataFS1[0]
+        var uniqueTarget = JSON.parse(this.dataFS1[14])
+        var corrTarget = JSON.parse(this.dataFS1[6])
+        var corrGlob = JSON.parse(this.dataFS1[10])
+        var VIFVar = JSON.parse(this.dataFS1[18])
+        var MIVar = JSON.parse(this.dataFS1[22])
+
+        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
+
+        var corrTargetFormatted = []
+        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
+          var corrTargetFormattedLoc = []
+          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
+            if (j > uniqueTarget.length - 1) {
+              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
+            }
+          }
+          corrTargetFormatted.push(corrTargetFormattedLoc) 
+        }
+
+        var corrGlobFormatted = []
+        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
+          if (i != 0) {
+            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
+          }
+        }
+
+        var VIFVarFormatted = []
+        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
+          if (i != 0) {
+            if (Object.values(VIFVar)[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (Object.values(VIFVar)[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+        }
+
+        function min(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.min.apply(null, input);
+        }
+
+        function max(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.max.apply(null, input);
+        }
+
+        function normalize(min, max) {
+            var delta = max - min;
+            return function (val) {
+                return (val - min) / delta;
+            };
+        }
+
+        var MIMin = min(MIVar)
+        var MIMax = max(MIVar)
+
+        MIVar = MIVar.map(normalize(MIMin, MIMax))
+
+        var colorsScaleNodes = d3.scaleLinear()
+          .domain([MIMin, MIMax])
+          .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
+
+        var svg = d3.select("#FeatureGraph1");
+        svg.selectAll("*").remove();
+
+        var width = 800;
+        var height = 500;
+
+        var numTicks = 200;
+
+        var selectedParams;
+        var bestParams;
+
+        var dispatch = d3.dispatch('layoutend');
+
+        svg = d3.select("#FeatureGraph1").append("svg")
+          .attr("width", width)
+          .attr("height", height);
+
+        var graph = this.jsonData
+
+        var link = svg.append('g')
+          .attr('class', 'links')
+          .selectAll('line')
+          .data(graph.links)
+          .enter().append('line')
+          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+
+        var node = svg.append('g')
+          .attr('class', 'nodes')
+          .selectAll('g')
+          .data(graph.nodes)
+          .enter().append('g')
+
+        var paramGroups = [
+          {name: 'chargeStrength', values: [-30, -80]},
+          {name: 'linkDistance', values: [30, -80]},
+          {name: 'linkStrength', values: [0, 1]},
+          {name: 'gravity', values: [0, 0.5]},
+          {name: 'iterations', values: [1, 2]},
+          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
+          {name: 'velocityDecay', values: [0.4, 0.8]}
+        ];
+
+        var paramList = generateParams(paramGroups);
+
+        var bestSoFar = d3.select('.best').selectAll('li')
+          .data(paramGroups.map(function (d) { return d.name; }))
+          .enter().append('li')
+          .text(function (d) { return d; });
+
+        dispatch.on('layoutend', function (params, i) {
+          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
+            bestParams = params;
+            selectedParams = bestParams;
+
+            bestSoFar
+              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
+              .text(function (d) { return d + ' = ' + bestParams[d]; });
+          }
+
+        });
+
+        var i = 0;
+        var stepper = d3.timer(function () {
+          var p = paramList[i];
+          var forceSim = getForceSimFromParams(p);
+
+          // Reset node attributes.
+          graph.nodes.forEach(function (n) {
+            n.x = n.y = n.vx = n.vy = 0;
+          });
+
+          forceSim.nodes(graph.nodes)
+            .stop();
+
+          forceSim.force('link')
+            .links(graph.links);
+
+          for (var t = 0; t < numTicks; ++t) {
+            forceSim.tick();
+          }
+
+          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
+          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
+          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+
+          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
+
+          dispatch.call('layoutend', forceSim, p, i);
+
+          ++i;
+          if (i >= paramList.length) {
+            
+            var widthLoc = 100;
+            var arcSize = (6 * widthLoc / 100);
+            var innerRadius = arcSize * 2; 
+
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+              .attr("id", function(d, i) { return "svg" + (i); })
+
+            graph.nodes.forEach(function(itemVal, indexNode) {
+
+              // var data = [[
+              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
+              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
+              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
+              // ];]
+              
+              var data = []
+
+              for(let k = 0; k < uniqueTarget.length; k++) {
+                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
+              }
+              var length = data.length
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+              var border = VIFVarFormatted[indexNode]
+
+                  var arcs = data.map(function (obj, i) {
+                    if (i == length) {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
+                    } else {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
+                    }
+                  });
+                  
+                  var arcsGrey = data.map(function (obj, i) {
+                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
+                  });
+
+                  var pieData = data.map(function (obj, i) {
+                      return [
+                          {value: obj.value, arc: arcs[i], object: obj},
+                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
+                          {value: 0, arc: arcs[i], object: obj}];
+                  });
+
+                  var pie = d3.pie().sort(null).value(function (d) {
+                      return d.value;
+                  });
+                  var id = indexNode
+                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
+                      .append('g')
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
+                      .append('g')
+                      .classed('textClass', true)
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+
+                  g.selectAll('path').data(function (d) {
+                      return pie(d);
+                  }).enter().append('path')
+                      .attr('id', function (d, i) {
+                          if (i == 1) {
+                              return "Text" + d.data.object.label
+                          }
+                      })
+                      .attr('d', function (d) {
+                          return d.data.arc(d);
+                      }).attr('fill', function (d, i) {
+                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
+                  });
+
+                  g.each(function (d, index) {
+
+                      var el = d3.select(this);
+                      var path = el.selectAll('path').each(function (r, i) {
+                          if (i === 1) {
+                              var centroid = r.data.arc.centroid({
+                                  startAngle: r.startAngle + 0.05,
+                                  endAngle: r.startAngle + 0.001 + 0.05
+                              });
+                              var lableObj = r.data.object;
+                              g.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .attr('dominant-baseline', 'central')
+                                  .append("textPath")
+                                  .attr("textLength", function (d, i) {
+                                      return 0;
+                                  })
+                                  .attr("startOffset", '5')
+                                  .attr("dy", '-3em')
+                                  .text(lableObj.value + '%');
+                          }
+                          if (i === 0) {
+                              var centroidText = r.data.arc.centroid({
+                                  startAngle: r.startAngle,
+                                  endAngle: r.startAngle
+                              });
+                              var lableObj = r.data.object;
+                              gText.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .text(lableObj.label)
+                                  .style('fill', lableObj.lcolor)
+                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
+                                  .attr('dominant-baseline', 'central');
+                          }
+                      });
+
+                  });
+
+                })
+
+                var drag_handler = d3.drag()
+                  .on("start", drag_start)
+                  .on("drag", drag_drag)
+                  .on("end", drag_end);	
+                  
+                drag_handler(node);
+
+                var labels = node.append("text")
+                  .text(function(d) {
+                    return d.name;
+                  })
+                  .attr('x', 20)
+                  .attr('y', 8);
+            
+                node.append('title').text(function (d) { return d.name; });
+
+                //add zoom capabilities 
+                var zoom_handler = d3.zoom()
+                    .on("zoom", zoom_actions);
+
+                zoom_handler(svg); 
+
+                drawGraph();
+
+                //Zoom functions 
+                function zoom_actions(){
+                    svg.attr("transform", d3.event.transform)
                 }
-              });
-          })
-      }
-    },
-    reset () {
-      EventBus.$emit('reset')
-      EventBus.$emit('alternateFlagLock')
+
+                function drag_start(d) {
+                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
+                      d.fx = d.x;
+                      d.fy = d.y;
+                  }
+
+                  //make sure you can't drag the circle outside the box
+                  function drag_drag(d) {
+                    d.fx = d3.event.x;
+                    d.fy = d3.event.y;
+                    tickActions();
+                  }
+
+                  function drag_end(d) {
+                    if (!d3.event.active) forceSim.alphaTarget(0);
+                    d.fx = null;
+                    d.fy = null;
+                  }
+
+                stepper.stop();
+          }
+
+        });
+
+        function tickActions() {
+          link
+            .attr('x1', function (d) { return d.source.x; })
+            .attr('x2', function (d) { return d.target.x; })
+            .attr('y1', function (d) { return d.source.y; })
+            .attr('y2', function (d) { return d.target.y; });
+
+          node
+            .attr("id", function(d, i) { return "g" + (i); })
+            .attr("transform", function(d, i) {
+              d.x = d.x - 50
+              d.y = d.y - 50
+              return "translate(" + d.x + "," + d.y + ")";
+            })
+        };
+
+        function drawGraph () {
+          graph.nodes.forEach(function (n, i) {
+            n.x = selectedParams.positions[i].x;
+            n.y = selectedParams.positions[i].y;
+          });
+
+          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMin = xDistance[0];
+          xDistance = xDistance[1] - xDistance[0];
+
+          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMin = yDistance[0];
+          yDistance = yDistance[1] - yDistance[0];
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
+            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
+          });
+
+          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMid = (xDistance[1] + xDistance[0]) / 2;
+          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMid = (yDistance[1] - yDistance[0]) / 2;
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = n.x + width/2 - xMid;
+            n.y = n.y + height/2 - yMid;
+          });
+
+          tickActions();
+        }
+
+        function generateParams (paramGroups, paramList, currParam) {
+          var p = paramGroups[0];
+
+          if (!paramList) paramList = [];
+
+          if (!currParam) currParam = {};
+
+          p.values.forEach(function (v) {
+            var setting = {};
+            setting[p.name] = v;
+            if (paramGroups.length === 1) {
+              paramList.push(Object.assign(setting, currParam));
+            } else {
+              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
+            }
+          });
+
+          return paramList;
+        }
+
+        function getForceSimFromParams (params) {
+          var forceSim = d3.forceSimulation()
+            .force('link', d3.forceLink().iterations(params.iterations))
+            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
+            .force('x', d3.forceX(0).strength(params.gravity))
+            .force('y', d3.forceY(0).strength(params.gravity))
+            .force('center', d3.forceCenter(0, 0))
+            .alphaDecay(params.alphaDecay)
+            .velocityDecay(params.velocityDecay);
+
+          if (params.linkStrength !== null) {
+            forceSim.force('link').strength(params.linkStrength);
+          }
+
+          return forceSim;
+        }
+
+      },
+      reset () {
+        var svg = d3.select("#FeatureGraph1");
+        svg.selectAll("*").remove();
+      },
     },
-    initialize () {
-      EventBus.$emit('ConfirmDataSet')
-    }
+  mounted () {
+    EventBus.$on('quad1', data => { this.dataFS1 = data })
+    EventBus.$on('quad1', this.initializeNetwork)
   }
 }
 </script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.links line {
+  stroke: #D3D3D3;
+  stroke-opacity: 0.6;
+}
+
+.nodes circle {
+  fill: #000000;
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.column {
+  float: left;
+  margin: 0 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpace2.vue b/frontend/src/components/FeatureSpace2.vue
index 391fe9a..0fc643d 100644
--- a/frontend/src/components/FeatureSpace2.vue
+++ b/frontend/src/components/FeatureSpace2.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="column">
     <div id="FeatureGraph2"></div>
-    <div id="result"></div>
   </div>
 </template>
 
@@ -52,6 +51,7 @@ export default {
       },
       graphVizualization () {
 
+        var listofNodes = this.dataFS2[0]
         var uniqueTarget = JSON.parse(this.dataFS2[15])
         var corrTarget = JSON.parse(this.dataFS2[7])
         var corrGlob = JSON.parse(this.dataFS2[11])
@@ -216,10 +216,10 @@ export default {
             var innerRadius = arcSize * 2; 
 
             var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
-              .attr("id", function(d, i) { return "svg" + (i); })
+              .attr("id", function(d, i) { return "svg" + (i+listofNodes.length); })
 
             graph.nodes.forEach(function(itemVal, indexNode) {
-              console.log(indexNode)
+              
               // var data = [[
               //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
               //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
@@ -235,7 +235,6 @@ export default {
               data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
               var border = VIFVarFormatted[indexNode]
 
-
                   var arcs = data.map(function (obj, i) {
                     if (i == length) {
                       return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
@@ -258,16 +257,15 @@ export default {
                   var pie = d3.pie().sort(null).value(function (d) {
                       return d.value;
                   });
-
-                  var g = d3.select('#svg'+indexNode).selectAll('g').data(pieData).enter()
+                  var id = indexNode+listofNodes.length
+                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
-                  var gText = d3.select('#svg'+indexNode).selectAll('g.textClass').data([{}]).enter()
+                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
                       .append('g')
                       .classed('textClass', true)
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
 
-
                   g.selectAll('path').data(function (d) {
                       return pie(d);
                   }).enter().append('path')
@@ -283,7 +281,6 @@ export default {
                   });
 
                   g.each(function (d, index) {
-                    console.log(d)
 
                       var el = d3.select(this);
                       var path = el.selectAll('path').each(function (r, i) {
@@ -384,7 +381,7 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("id", function(d, i) { return "g" + (i); })
+            .attr("id", function(d, i) { return "g" + (i+listofNodes.length); })
             .attr("transform", function(d, i) {
               d.x = d.x - 50
               d.y = d.y - 50
@@ -468,8 +465,8 @@ export default {
       },
     },
   mounted () {
-    EventBus.$on('quad', data => { this.dataFS2 = data })
-    EventBus.$on('quad', this.initializeNetwork)
+    EventBus.$on('quad2', data => { this.dataFS2 = data })
+    EventBus.$on('quad2', this.initializeNetwork)
   }
 }
 </script>
diff --git a/frontend/src/components/FeatureSpace3.vue b/frontend/src/components/FeatureSpace3.vue
index 16c02a1..9d18f5d 100644
--- a/frontend/src/components/FeatureSpace3.vue
+++ b/frontend/src/components/FeatureSpace3.vue
@@ -1,30 +1,12 @@
 <template>
-  <div>
-    <label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
-    <select id="selectFile" @change="selectDataSet()">
-        <option value="HeartC.csv" selected>Heart Disease</option>
-        <option value="IrisC.csv">Iris</option>
-        <option value="local">Upload New File</option>
-    </select>
-    <button class="btn-outline-success"
-    id="initializeID"
-    v-on:click="initialize">
-    <font-awesome-icon icon="search" />
-    {{ searchText }}
-    </button>
-    <button class="btn-outline-danger"
-    id="resetID"
-    v-on:click="reset">
-    <font-awesome-icon icon="trash" />
-    {{ resetText }}
-    </button>
+  <div class="column">
+    <div id="FeatureGraph3"></div>
   </div>
 </template>
 
 <script>
-import Papa from 'papaparse'
 import { EventBus } from '../main.js'
-import {$,jQuery} from 'jquery';
+import * as greadability from '../greadability.js'
 import * as d3Base from 'd3'
 
 // attach all d3 plugins to the d3 library
@@ -34,53 +16,487 @@ export default {
   name: 'FeatureSpace3',
   data () {
     return {
-      defaultDataSet: 'HeartC', // default value for the first data set
-      searchText: 'Hyper-parameter search',
-      resetText: 'Reset',
-      dataset: 'Data set'
+      dataFS3: [],
+      jsonData: [],
     }
   },
   methods: {
-    selectDataSet () {   
-      const fileName = document.getElementById('selectFile')
-      this.defaultDataSet = fileName.options[fileName.selectedIndex].value
-      this.defaultDataSet = this.defaultDataSet.split('.')[0]
-
-      if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
-        this.dataset = "Data set"
-        d3.select("#data").select("input").remove(); // Remove the selection field.
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-      } else {
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-        d3.select("#data").select("input").remove();
-        this.dataset = ""
-        var data
-        d3.select("#data")
-          .append("input")
-          .attr("type", "file")
-          .style("font-size", "18.5px")
-          .style("width", "200px")
-          .on("change", function() {
-            var file = d3.event.target.files[0];
-            Papa.parse(file, {
-                header: true,
-                dynamicTyping: true,
-                skipEmptyLines: true,
-                complete: function(results) {
-                  data = results.data;
-                  EventBus.$emit('SendToServerLocalFile', data)
+      initializeNetwork () {   
+        
+        var listofNodes = this.dataFS3[0]
+        var dataLoc = JSON.parse(this.dataFS3[4])
+
+        var nodes = []
+        listofNodes.forEach(element => nodes.push({"name": element}))
+
+        var links = []
+
+        Object.entries(dataLoc).forEach(
+            function ([feature, value]) {
+              Object.entries(value).forEach( function ([featureInside, value]) {
+                if (feature != featureInside) { 
+                  if (value >= 0) {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
+                  } else {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
+                  }
+                }   
+              })
+        })
+
+        this.jsonData = {"nodes": nodes, "links": links};
+
+        this.graphVizualization()
+
+      },
+      graphVizualization () {
+
+        var listofNodes = this.dataFS3[0]
+        var uniqueTarget = JSON.parse(this.dataFS3[16])
+        var corrTarget = JSON.parse(this.dataFS3[8])
+        var corrGlob = JSON.parse(this.dataFS3[12])
+        var VIFVar = JSON.parse(this.dataFS3[20])
+        var MIVar = JSON.parse(this.dataFS3[24])
+
+        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
+
+        var corrTargetFormatted = []
+        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
+          var corrTargetFormattedLoc = []
+          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
+            if (j > uniqueTarget.length - 1) {
+              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
+            }
+          }
+          corrTargetFormatted.push(corrTargetFormattedLoc) 
+        }
+
+        var corrGlobFormatted = []
+        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
+          if (i != 0) {
+            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
+          }
+        }
+
+        var VIFVarFormatted = []
+        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
+          if (i != 0) {
+            if (Object.values(VIFVar)[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (Object.values(VIFVar)[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+        }
+
+        function min(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.min.apply(null, input);
+        }
+
+        function max(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.max.apply(null, input);
+        }
+
+        function normalize(min, max) {
+            var delta = max - min;
+            return function (val) {
+                return (val - min) / delta;
+            };
+        }
+
+        var MIMin = min(MIVar)
+        var MIMax = max(MIVar)
+
+        MIVar = MIVar.map(normalize(MIMin, MIMax))
+
+        var colorsScaleNodes = d3.scaleLinear()
+          .domain([MIMin, MIMax])
+          .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
+
+        var svg = d3.select("#FeatureGraph3");
+        svg.selectAll("*").remove();
+
+        var width = 800;
+        var height = 500;
+
+        var numTicks = 200;
+
+        var selectedParams;
+        var bestParams;
+
+        var dispatch = d3.dispatch('layoutend');
+
+        svg = d3.select("#FeatureGraph3").append("svg")
+          .attr("width", width)
+          .attr("height", height);
+
+        var graph = this.jsonData
+
+        var link = svg.append('g')
+          .attr('class', 'links')
+          .selectAll('line')
+          .data(graph.links)
+          .enter().append('line')
+          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+
+        var node = svg.append('g')
+          .attr('class', 'nodes')
+          .selectAll('g')
+          .data(graph.nodes)
+          .enter().append('g')
+
+        var paramGroups = [
+          {name: 'chargeStrength', values: [-30, -80]},
+          {name: 'linkDistance', values: [30, -80]},
+          {name: 'linkStrength', values: [0, 1]},
+          {name: 'gravity', values: [0, 0.5]},
+          {name: 'iterations', values: [1, 2]},
+          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
+          {name: 'velocityDecay', values: [0.4, 0.8]}
+        ];
+
+        var paramList = generateParams(paramGroups);
+
+        var bestSoFar = d3.select('.best').selectAll('li')
+          .data(paramGroups.map(function (d) { return d.name; }))
+          .enter().append('li')
+          .text(function (d) { return d; });
+
+        dispatch.on('layoutend', function (params, i) {
+          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
+            bestParams = params;
+            selectedParams = bestParams;
+
+            bestSoFar
+              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
+              .text(function (d) { return d + ' = ' + bestParams[d]; });
+          }
+
+        });
+
+        var i = 0;
+        var stepper = d3.timer(function () {
+          var p = paramList[i];
+          var forceSim = getForceSimFromParams(p);
+
+          // Reset node attributes.
+          graph.nodes.forEach(function (n) {
+            n.x = n.y = n.vx = n.vy = 0;
+          });
+
+          forceSim.nodes(graph.nodes)
+            .stop();
+
+          forceSim.force('link')
+            .links(graph.links);
+
+          for (var t = 0; t < numTicks; ++t) {
+            forceSim.tick();
+          }
+
+          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
+          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
+          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+
+          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
+
+          dispatch.call('layoutend', forceSim, p, i);
+
+          ++i;
+          if (i >= paramList.length) {
+            
+            var widthLoc = 100;
+            var arcSize = (6 * widthLoc / 100);
+            var innerRadius = arcSize * 2; 
+
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+              .attr("id", function(d, i) { return "svg" + (listofNodes.length*2+i); })
+
+            graph.nodes.forEach(function(itemVal, indexNode) {
+
+              // var data = [[
+              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
+              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
+              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
+              // ];]
+              
+              var data = []
+
+              for(let k = 0; k < uniqueTarget.length; k++) {
+                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
+              }
+              var length = data.length
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+              var border = VIFVarFormatted[indexNode]
+
+
+                  var arcs = data.map(function (obj, i) {
+                    if (i == length) {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
+                    } else {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
+                    }
+                  });
+                  
+                  var arcsGrey = data.map(function (obj, i) {
+                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
+                  });
+
+                  var pieData = data.map(function (obj, i) {
+                      return [
+                          {value: obj.value, arc: arcs[i], object: obj},
+                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
+                          {value: 0, arc: arcs[i], object: obj}];
+                  });
+
+                  var pie = d3.pie().sort(null).value(function (d) {
+                      return d.value;
+                  });
+                  var id = listofNodes.length*2+indexNode
+                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
+                      .append('g')
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
+                      .append('g')
+                      .classed('textClass', true)
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+
+
+                  g.selectAll('path').data(function (d) {
+                      return pie(d);
+                  }).enter().append('path')
+                      .attr('id', function (d, i) {
+                          if (i == 1) {
+                              return "Text" + d.data.object.label
+                          }
+                      })
+                      .attr('d', function (d) {
+                          return d.data.arc(d);
+                      }).attr('fill', function (d, i) {
+                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
+                  });
+
+                  g.each(function (d, index) {
+
+                      var el = d3.select(this);
+                      var path = el.selectAll('path').each(function (r, i) {
+                          if (i === 1) {
+                              var centroid = r.data.arc.centroid({
+                                  startAngle: r.startAngle + 0.05,
+                                  endAngle: r.startAngle + 0.001 + 0.05
+                              });
+                              var lableObj = r.data.object;
+                              g.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .attr('dominant-baseline', 'central')
+                                  .append("textPath")
+                                  .attr("textLength", function (d, i) {
+                                      return 0;
+                                  })
+                                  .attr("startOffset", '5')
+                                  .attr("dy", '-3em')
+                                  .text(lableObj.value + '%');
+                          }
+                          if (i === 0) {
+                              var centroidText = r.data.arc.centroid({
+                                  startAngle: r.startAngle,
+                                  endAngle: r.startAngle
+                              });
+                              var lableObj = r.data.object;
+                              gText.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .text(lableObj.label)
+                                  .style('fill', lableObj.lcolor)
+                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
+                                  .attr('dominant-baseline', 'central');
+                          }
+                      });
+
+                  });
+
+                })
+
+                var drag_handler = d3.drag()
+                  .on("start", drag_start)
+                  .on("drag", drag_drag)
+                  .on("end", drag_end);	
+                  
+                drag_handler(node);
+
+                var labels = node.append("text")
+                  .text(function(d) {
+                    return d.name;
+                  })
+                  .attr('x', 20)
+                  .attr('y', 8);
+            
+                node.append('title').text(function (d) { return d.name; });
+
+                //add zoom capabilities 
+                var zoom_handler = d3.zoom()
+                    .on("zoom", zoom_actions);
+
+                zoom_handler(svg); 
+
+                drawGraph();
+
+                //Zoom functions 
+                function zoom_actions(){
+                    svg.attr("transform", d3.event.transform)
                 }
-              });
-          })
-      }
-    },
-    reset () {
-      EventBus.$emit('reset')
-      EventBus.$emit('alternateFlagLock')
+
+                function drag_start(d) {
+                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
+                      d.fx = d.x;
+                      d.fy = d.y;
+                  }
+
+                  //make sure you can't drag the circle outside the box
+                  function drag_drag(d) {
+                    d.fx = d3.event.x;
+                    d.fy = d3.event.y;
+                    tickActions();
+                  }
+
+                  function drag_end(d) {
+                    if (!d3.event.active) forceSim.alphaTarget(0);
+                    d.fx = null;
+                    d.fy = null;
+                  }
+
+                stepper.stop();
+          }
+
+        });
+
+        function tickActions() {
+          link
+            .attr('x1', function (d) { return d.source.x; })
+            .attr('x2', function (d) { return d.target.x; })
+            .attr('y1', function (d) { return d.source.y; })
+            .attr('y2', function (d) { return d.target.y; });
+
+          node
+            .attr("id", function(d, i) { return "g" + (listofNodes.length*2+i); })
+            .attr("transform", function(d, i) {
+              d.x = d.x - 50
+              d.y = d.y - 50
+              return "translate(" + d.x + "," + d.y + ")";
+            })
+        };
+
+        function drawGraph () {
+          graph.nodes.forEach(function (n, i) {
+            n.x = selectedParams.positions[i].x;
+            n.y = selectedParams.positions[i].y;
+          });
+
+          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMin = xDistance[0];
+          xDistance = xDistance[1] - xDistance[0];
+
+          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMin = yDistance[0];
+          yDistance = yDistance[1] - yDistance[0];
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
+            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
+          });
+
+          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMid = (xDistance[1] + xDistance[0]) / 2;
+          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMid = (yDistance[1] - yDistance[0]) / 2;
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = n.x + width/2 - xMid;
+            n.y = n.y + height/2 - yMid;
+          });
+
+          tickActions();
+        }
+
+        function generateParams (paramGroups, paramList, currParam) {
+          var p = paramGroups[0];
+
+          if (!paramList) paramList = [];
+
+          if (!currParam) currParam = {};
+
+          p.values.forEach(function (v) {
+            var setting = {};
+            setting[p.name] = v;
+            if (paramGroups.length === 1) {
+              paramList.push(Object.assign(setting, currParam));
+            } else {
+              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
+            }
+          });
+
+          return paramList;
+        }
+
+        function getForceSimFromParams (params) {
+          var forceSim = d3.forceSimulation()
+            .force('link', d3.forceLink().iterations(params.iterations))
+            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
+            .force('x', d3.forceX(0).strength(params.gravity))
+            .force('y', d3.forceY(0).strength(params.gravity))
+            .force('center', d3.forceCenter(0, 0))
+            .alphaDecay(params.alphaDecay)
+            .velocityDecay(params.velocityDecay);
+
+          if (params.linkStrength !== null) {
+            forceSim.force('link').strength(params.linkStrength);
+          }
+
+          return forceSim;
+        }
+
+      },
+      reset () {
+        var svg = d3.select("#FeatureGraph3");
+        svg.selectAll("*").remove();
+      },
     },
-    initialize () {
-      EventBus.$emit('ConfirmDataSet')
-    }
+  mounted () {
+    EventBus.$on('quad3', data => { this.dataFS3 = data })
+    EventBus.$on('quad3', this.initializeNetwork)
   }
 }
 </script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.links line {
+  stroke: #D3D3D3;
+  stroke-opacity: 0.6;
+}
+
+.nodes circle {
+  fill: #000000;
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.column {
+  float: left;
+  margin: 0 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpace4.vue b/frontend/src/components/FeatureSpace4.vue
index e816ed5..f046b72 100644
--- a/frontend/src/components/FeatureSpace4.vue
+++ b/frontend/src/components/FeatureSpace4.vue
@@ -1,30 +1,12 @@
 <template>
-  <div>
-    <label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
-    <select id="selectFile" @change="selectDataSet()">
-        <option value="HeartC.csv" selected>Heart Disease</option>
-        <option value="IrisC.csv">Iris</option>
-        <option value="local">Upload New File</option>
-    </select>
-    <button class="btn-outline-success"
-    id="initializeID"
-    v-on:click="initialize">
-    <font-awesome-icon icon="search" />
-    {{ searchText }}
-    </button>
-    <button class="btn-outline-danger"
-    id="resetID"
-    v-on:click="reset">
-    <font-awesome-icon icon="trash" />
-    {{ resetText }}
-    </button>
+  <div class="column">
+    <div id="FeatureGraph4"></div>
   </div>
 </template>
 
 <script>
-import Papa from 'papaparse'
 import { EventBus } from '../main.js'
-import {$,jQuery} from 'jquery';
+import * as greadability from '../greadability.js'
 import * as d3Base from 'd3'
 
 // attach all d3 plugins to the d3 library
@@ -34,53 +16,487 @@ export default {
   name: 'FeatureSpace4',
   data () {
     return {
-      defaultDataSet: 'HeartC', // default value for the first data set
-      searchText: 'Hyper-parameter search',
-      resetText: 'Reset',
-      dataset: 'Data set'
+      dataFS4: [],
+      jsonData: [],
     }
   },
   methods: {
-    selectDataSet () {   
-      const fileName = document.getElementById('selectFile')
-      this.defaultDataSet = fileName.options[fileName.selectedIndex].value
-      this.defaultDataSet = this.defaultDataSet.split('.')[0]
-
-      if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload.
-        this.dataset = "Data set"
-        d3.select("#data").select("input").remove(); // Remove the selection field.
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-      } else {
-        EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
-        d3.select("#data").select("input").remove();
-        this.dataset = ""
-        var data
-        d3.select("#data")
-          .append("input")
-          .attr("type", "file")
-          .style("font-size", "18.5px")
-          .style("width", "200px")
-          .on("change", function() {
-            var file = d3.event.target.files[0];
-            Papa.parse(file, {
-                header: true,
-                dynamicTyping: true,
-                skipEmptyLines: true,
-                complete: function(results) {
-                  data = results.data;
-                  EventBus.$emit('SendToServerLocalFile', data)
+      initializeNetwork () {   
+        
+        var listofNodes = this.dataFS4[0]
+        var dataLoc = JSON.parse(this.dataFS4[5])
+
+        var nodes = []
+        listofNodes.forEach(element => nodes.push({"name": element}))
+
+        var links = []
+
+        Object.entries(dataLoc).forEach(
+            function ([feature, value]) {
+              Object.entries(value).forEach( function ([featureInside, value]) {
+                if (feature != featureInside) { 
+                  if (value >= 0) {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
+                  } else {
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
+                  }
+                }   
+              })
+        })
+
+        this.jsonData = {"nodes": nodes, "links": links};
+
+        this.graphVizualization()
+
+      },
+      graphVizualization () {
+
+        var listofNodes = this.dataFS4[0]
+        var uniqueTarget = JSON.parse(this.dataFS4[17])
+        var corrTarget = JSON.parse(this.dataFS4[9])
+        var corrGlob = JSON.parse(this.dataFS4[13])
+        var VIFVar = JSON.parse(this.dataFS4[21])
+        var MIVar = JSON.parse(this.dataFS4[25])
+
+        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
+
+        var corrTargetFormatted = []
+        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
+          var corrTargetFormattedLoc = []
+          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
+            if (j > uniqueTarget.length - 1) {
+              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
+            }
+          }
+          corrTargetFormatted.push(corrTargetFormattedLoc) 
+        }
+
+        var corrGlobFormatted = []
+        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
+          if (i != 0) {
+            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
+          }
+        }
+
+        var VIFVarFormatted = []
+        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
+          if (i != 0) {
+            if (Object.values(VIFVar)[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (Object.values(VIFVar)[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+        }
+
+        function min(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.min.apply(null, input);
+        }
+
+        function max(input) {
+            if (toString.call(input) !== "[object Array]")  
+              return false;
+          return Math.max.apply(null, input);
+        }
+
+        function normalize(min, max) {
+            var delta = max - min;
+            return function (val) {
+                return (val - min) / delta;
+            };
+        }
+
+        var MIMin = min(MIVar)
+        var MIMax = max(MIVar)
+
+        MIVar = MIVar.map(normalize(MIMin, MIMax))
+
+        var colorsScaleNodes = d3.scaleLinear()
+          .domain([MIMin, MIMax])
+          .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']);
+
+        var svg = d3.select("#FeatureGraph4");
+        svg.selectAll("*").remove();
+
+        var width = 800;
+        var height = 500;
+
+        var numTicks = 200;
+
+        var selectedParams;
+        var bestParams;
+
+        var dispatch = d3.dispatch('layoutend');
+
+        svg = d3.select("#FeatureGraph4").append("svg")
+          .attr("width", width)
+          .attr("height", height);
+
+        var graph = this.jsonData
+
+        var link = svg.append('g')
+          .attr('class', 'links')
+          .selectAll('line')
+          .data(graph.links)
+          .enter().append('line')
+          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
+
+        var node = svg.append('g')
+          .attr('class', 'nodes')
+          .selectAll('g')
+          .data(graph.nodes)
+          .enter().append('g')
+
+        var paramGroups = [
+          {name: 'chargeStrength', values: [-30, -80]},
+          {name: 'linkDistance', values: [30, -80]},
+          {name: 'linkStrength', values: [0, 1]},
+          {name: 'gravity', values: [0, 0.5]},
+          {name: 'iterations', values: [1, 2]},
+          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
+          {name: 'velocityDecay', values: [0.4, 0.8]}
+        ];
+
+        var paramList = generateParams(paramGroups);
+
+        var bestSoFar = d3.select('.best').selectAll('li')
+          .data(paramGroups.map(function (d) { return d.name; }))
+          .enter().append('li')
+          .text(function (d) { return d; });
+
+        dispatch.on('layoutend', function (params, i) {
+          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
+            bestParams = params;
+            selectedParams = bestParams;
+
+            bestSoFar
+              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
+              .text(function (d) { return d + ' = ' + bestParams[d]; });
+          }
+
+        });
+
+        var i = 0;
+        var stepper = d3.timer(function () {
+          var p = paramList[i];
+          var forceSim = getForceSimFromParams(p);
+
+          // Reset node attributes.
+          graph.nodes.forEach(function (n) {
+            n.x = n.y = n.vx = n.vy = 0;
+          });
+
+          forceSim.nodes(graph.nodes)
+            .stop();
+
+          forceSim.force('link')
+            .links(graph.links);
+
+          for (var t = 0; t < numTicks; ++t) {
+            forceSim.tick();
+          }
+
+          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
+          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
+          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+
+          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
+
+          dispatch.call('layoutend', forceSim, p, i);
+
+          ++i;
+          if (i >= paramList.length) {
+            
+            var widthLoc = 100;
+            var arcSize = (6 * widthLoc / 100);
+            var innerRadius = arcSize * 2; 
+
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+              .attr("id", function(d, i) { return "svg" + (listofNodes.length*3+i); })
+
+            graph.nodes.forEach(function(itemVal, indexNode) {
+
+              // var data = [[
+              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
+              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
+              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
+              // ];]
+              
+              var data = []
+
+              for(let k = 0; k < uniqueTarget.length; k++) {
+                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
+              }
+              var length = data.length
+              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
+              var border = VIFVarFormatted[indexNode]
+
+
+                  var arcs = data.map(function (obj, i) {
+                    if (i == length) {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
+                    } else {
+                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
+                    }
+                  });
+                  
+                  var arcsGrey = data.map(function (obj, i) {
+                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
+                  });
+
+                  var pieData = data.map(function (obj, i) {
+                      return [
+                          {value: obj.value, arc: arcs[i], object: obj},
+                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
+                          {value: 0, arc: arcs[i], object: obj}];
+                  });
+
+                  var pie = d3.pie().sort(null).value(function (d) {
+                      return d.value;
+                  });
+                  var id = listofNodes.length*3+indexNode
+                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
+                      .append('g')
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
+                      .append('g')
+                      .classed('textClass', true)
+                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+
+
+                  g.selectAll('path').data(function (d) {
+                      return pie(d);
+                  }).enter().append('path')
+                      .attr('id', function (d, i) {
+                          if (i == 1) {
+                              return "Text" + d.data.object.label
+                          }
+                      })
+                      .attr('d', function (d) {
+                          return d.data.arc(d);
+                      }).attr('fill', function (d, i) {
+                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
+                  });
+
+                  g.each(function (d, index) {
+
+                      var el = d3.select(this);
+                      var path = el.selectAll('path').each(function (r, i) {
+                          if (i === 1) {
+                              var centroid = r.data.arc.centroid({
+                                  startAngle: r.startAngle + 0.05,
+                                  endAngle: r.startAngle + 0.001 + 0.05
+                              });
+                              var lableObj = r.data.object;
+                              g.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .attr('dominant-baseline', 'central')
+                                  .append("textPath")
+                                  .attr("textLength", function (d, i) {
+                                      return 0;
+                                  })
+                                  .attr("startOffset", '5')
+                                  .attr("dy", '-3em')
+                                  .text(lableObj.value + '%');
+                          }
+                          if (i === 0) {
+                              var centroidText = r.data.arc.centroid({
+                                  startAngle: r.startAngle,
+                                  endAngle: r.startAngle
+                              });
+                              var lableObj = r.data.object;
+                              gText.append('text')
+                                  .attr('font-size', ((2 * width) / 100))
+                                  .text(lableObj.label)
+                                  .style('fill', lableObj.lcolor)
+                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
+                                  .attr('dominant-baseline', 'central');
+                          }
+                      });
+
+                  });
+
+                })
+
+                var drag_handler = d3.drag()
+                  .on("start", drag_start)
+                  .on("drag", drag_drag)
+                  .on("end", drag_end);	
+                  
+                drag_handler(node);
+
+                var labels = node.append("text")
+                  .text(function(d) {
+                    return d.name;
+                  })
+                  .attr('x', 20)
+                  .attr('y', 8);
+            
+                node.append('title').text(function (d) { return d.name; });
+
+                //add zoom capabilities 
+                var zoom_handler = d3.zoom()
+                    .on("zoom", zoom_actions);
+
+                zoom_handler(svg); 
+
+                drawGraph();
+
+                //Zoom functions 
+                function zoom_actions(){
+                    svg.attr("transform", d3.event.transform)
                 }
-              });
-          })
-      }
-    },
-    reset () {
-      EventBus.$emit('reset')
-      EventBus.$emit('alternateFlagLock')
+
+                function drag_start(d) {
+                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
+                      d.fx = d.x;
+                      d.fy = d.y;
+                  }
+
+                  //make sure you can't drag the circle outside the box
+                  function drag_drag(d) {
+                    d.fx = d3.event.x;
+                    d.fy = d3.event.y;
+                    tickActions();
+                  }
+
+                  function drag_end(d) {
+                    if (!d3.event.active) forceSim.alphaTarget(0);
+                    d.fx = null;
+                    d.fy = null;
+                  }
+
+                stepper.stop();
+          }
+
+        });
+
+        function tickActions() {
+          link
+            .attr('x1', function (d) { return d.source.x; })
+            .attr('x2', function (d) { return d.target.x; })
+            .attr('y1', function (d) { return d.source.y; })
+            .attr('y2', function (d) { return d.target.y; });
+
+          node
+            .attr("id", function(d, i) { return "g" + (listofNodes.length*3+i); })
+            .attr("transform", function(d, i) {
+              d.x = d.x - 50
+              d.y = d.y - 50
+              return "translate(" + d.x + "," + d.y + ")";
+            })
+        };
+
+        function drawGraph () {
+          graph.nodes.forEach(function (n, i) {
+            n.x = selectedParams.positions[i].x;
+            n.y = selectedParams.positions[i].y;
+          });
+
+          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMin = xDistance[0];
+          xDistance = xDistance[1] - xDistance[0];
+
+          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMin = yDistance[0];
+          yDistance = yDistance[1] - yDistance[0];
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
+            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
+          });
+
+          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
+          var xMid = (xDistance[1] + xDistance[0]) / 2;
+          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
+          var yMid = (yDistance[1] - yDistance[0]) / 2;
+
+          graph.nodes.forEach(function (n, i) {
+            n.x = n.x + width/2 - xMid;
+            n.y = n.y + height/2 - yMid;
+          });
+
+          tickActions();
+        }
+
+        function generateParams (paramGroups, paramList, currParam) {
+          var p = paramGroups[0];
+
+          if (!paramList) paramList = [];
+
+          if (!currParam) currParam = {};
+
+          p.values.forEach(function (v) {
+            var setting = {};
+            setting[p.name] = v;
+            if (paramGroups.length === 1) {
+              paramList.push(Object.assign(setting, currParam));
+            } else {
+              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
+            }
+          });
+
+          return paramList;
+        }
+
+        function getForceSimFromParams (params) {
+          var forceSim = d3.forceSimulation()
+            .force('link', d3.forceLink().iterations(params.iterations))
+            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
+            .force('x', d3.forceX(0).strength(params.gravity))
+            .force('y', d3.forceY(0).strength(params.gravity))
+            .force('center', d3.forceCenter(0, 0))
+            .alphaDecay(params.alphaDecay)
+            .velocityDecay(params.velocityDecay);
+
+          if (params.linkStrength !== null) {
+            forceSim.force('link').strength(params.linkStrength);
+          }
+
+          return forceSim;
+        }
+
+      },
+      reset () {
+        var svg = d3.select("#FeatureGraph4");
+        svg.selectAll("*").remove();
+      },
     },
-    initialize () {
-      EventBus.$emit('ConfirmDataSet')
-    }
+  mounted () {
+    EventBus.$on('quad4', data => { this.dataFS4 = data })
+    EventBus.$on('quad4', this.initializeNetwork)
   }
 }
 </script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.links line {
+  stroke: #D3D3D3;
+  stroke-opacity: 0.6;
+}
+
+.nodes circle {
+  fill: #000000;
+  stroke: #fff;
+  stroke-width: 1px;
+}
+
+.column {
+  float: left;
+  margin: 0 10px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index f883198..05e4435 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -495,7 +495,10 @@ export default Vue.extend({
         .then(response => {
           console.log('Server successfully send the correlation matrices!')
           this.correlResul = response.data.correlResul
-          EventBus.$emit('quad', this.correlResul)
+          EventBus.$emit('quad1', this.correlResul)
+          EventBus.$emit('quad2', this.correlResul)
+          EventBus.$emit('quad3', this.correlResul)
+          EventBus.$emit('quad4', this.correlResul)
         })
         .catch(error => {
           console.log(error)
@@ -617,7 +620,7 @@ body {
   top: 0px;
   bottom: 0px;
   margin-top: -4px !important;
-  overflow: hidden !important;
+  //overflow: hidden !important;
 }
 
 .modal-backdrop {