new

frontend/src/components/FeatureSpace1.vue

@@ -23,6 +23,7 @@ export default {
       corrMatrixCombTotal: [],
       VIFRemaining: [],
       MIRemaining: [],
+      computeNodes: 0
     }
   },
   methods: {
@@ -145,6 +146,7 @@ export default {
 
         var nodes = []
         var groupID = 0
+
         listofNodes.forEach( function(element) {
           groupID++
           nodes.push({"name": element, "group": groupID+"_root"})
@@ -173,6 +175,9 @@ export default {
             {"name": element+"_r_10", "group": groupID},
           )
         })
+        
+        this.computeNodes = nodes.length
+        EventBus.$emit('countNodes1', this.computeNodes)
 
         Object.entries(pushEachFinal).forEach(
             function ([index, feature]) {

frontend/src/components/FeatureSpace2 copy.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="column">
-    <div id="FeatureGraph1"></div>
+    <div id="FeatureGraph2"></div>
   </div>
 </template>
 
@@ -13,142 +13,21 @@ import * as d3Base from 'd3'
 const d3 = Object.assign(d3Base)
 
 export default {
-  name: 'FeatureSpace1',
+  name: 'FeatureSpace2',
   data () {
     return {
-      dataFS1: [],
+      dataFS2: [],
-      dataFS1Trans: [],
       jsonData: [],
-      corrMatrixComb: [],
-      corrMatrixCombTotal: [],
-      VIFRemaining: [],
-      MIRemaining: [],
     }
   },
   methods: {
       initializeNetwork () {   
         
-        var listofNodes = this.dataFS1[0]
+        var listofNodes = this.dataFS2[0]
-        var dataLoc = JSON.parse(this.dataFS1[2])
+        var dataLoc = JSON.parse(this.dataFS2[3])
-        var pushEachFinal = []
-        var pushEach
-        var oldVal
-        var newVal
-        var outcome
-        var countLoc
-
-        var corrMatrixCombLoc =[]
-        var corrMatrixCombTotalLoc = []
-        var VIFRemainingLoc = []
-        var MIRemainingLoc = []
-
-        this.dataFS1Trans.forEach(function(element, index) {
-          var round = element.round
-          corrMatrixCombLoc.push(Object.values(JSON.parse(round[4])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[8]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(round[12]))[0])
-          MIRemainingLoc.push(JSON.parse(round[16]))
-          round = JSON.parse(round[0])
-          oldVal = 0
-          newVal = 0
-          outcome = 0
-          countLoc = 0
-          pushEach = []
-          Object.entries(round).forEach(
-          function ([feature, value]) {
-            var key = Object.keys(value)
-            var search = Object.values(dataLoc[key])
-            oldVal = Math.abs(search[countLoc]) + oldVal
-            newVal = Math.abs(Object.values(value)[0]) + newVal
-            countLoc++
-          })
-          oldVal = oldVal / listofNodes.length
-          newVal = newVal / listofNodes.length
-          outcome = oldVal - newVal
-          pushEach.push({keyIns: "round", valueIns: outcome})
-
-          var roundLogE = element.roundLogE
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[4])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[8]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[12]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLogE[16]))
-          roundLogE = JSON.parse(roundLogE[0])
-          oldVal = 0
-          newVal = 0
-          outcome = 0
-          countLoc = 0
-          Object.entries(roundLogE).forEach(
-          function ([feature, value]) {
-            var key = Object.keys(value)
-            var search = Object.values(dataLoc[key])
-            oldVal = Math.abs(search[countLoc]) + oldVal
-            newVal = Math.abs(Object.values(value)[0]) + newVal
-            countLoc++
-          })
-          oldVal = oldVal / listofNodes.length
-          newVal = newVal / listofNodes.length
-          outcome = oldVal - newVal
-          pushEach.push({keyIns: "roundLogE", valueIns: outcome})
-
-          var roundLog2 = element.roundLog2
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[4])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[8]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[12]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLog2[16]))
-          roundLog2 = JSON.parse(roundLog2[0])
-          oldVal = 0
-          newVal = 0
-          outcome = 0
-          countLoc = 0
-          Object.entries(roundLog2).forEach(
-          function ([feature, value]) {
-            var key = Object.keys(value)
-            var search = Object.values(dataLoc[key])
-            oldVal = Math.abs(search[countLoc]) + oldVal
-            newVal = Math.abs(Object.values(value)[0]) + newVal
-            countLoc++
-          })
-          oldVal = oldVal / listofNodes.length
-          newVal = newVal / listofNodes.length
-          outcome = oldVal - newVal
-          pushEach.push({keyIns: "roundLog2", valueIns: outcome})
-
-          var roundLog10 = element.roundLog10
-          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[4])))
-          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[8]))[0] * 100)
-          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[12]))[0])
-          MIRemainingLoc.push(JSON.parse(roundLog10[16]))
-          roundLog10 = JSON.parse(roundLog10[0])
-          oldVal = 0
-          newVal = 0
-          outcome = 0
-          countLoc = 0
-          Object.entries(roundLog10).forEach(
-          function ([feature, value]) {
-            var key = Object.keys(value)
-            var search = Object.values(dataLoc[key])
-            oldVal = Math.abs(search[countLoc]) + oldVal
-            newVal = Math.abs(Object.values(value)[0]) + newVal
-            countLoc++
-          })
-          oldVal = oldVal / listofNodes.length
-          newVal = newVal / listofNodes.length
-          outcome = oldVal - newVal
-          pushEach.push({keyIns: "roundLog10", valueIns: outcome})
-          pushEachFinal.push({key: listofNodes[index], value: pushEach})
-          })
-
-        this.corrMatrixComb = [...corrMatrixCombLoc]
-        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
-        this.VIFRemaining = [...VIFRemainingLoc]
-        this.MIRemaining = [...MIRemainingLoc]
 
         var nodes = []
-        var groupID = 0
+        listofNodes.forEach(element => nodes.push({"name": element}))
-        listofNodes.forEach( function(element) {
-          groupID++
-          nodes.push({"name": element, "group": groupID})
-        })
 
         var links = []
 
@@ -157,35 +36,14 @@ export default {
               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, "lin_color": "#D3D3D3"})
+                    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})
                   }
                 }   
               })
         })
 
-        groupID = 0
-        listofNodes.forEach( function(element) {
-          groupID++
-          nodes.push(
-            {"name": element+"_r", "group": groupID},
-            {"name": element+"_r_E", "group": groupID},
-            {"name": element+"_r_2", "group": groupID},
-            {"name": element+"_r_10", "group": groupID},
-          )
-        })
-
-        Object.entries(pushEachFinal).forEach(
-            function ([index, feature]) {
-              feature.value.forEach(function (element, indexIns) {
-                if (element.valueIns > 0) {
-                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"})
-                }
-                else {
-                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
-                }
-              })
-        })
-
         this.jsonData = {"nodes": nodes, "links": links};
 
         this.graphVizualization()
@@ -193,13 +51,13 @@ export default {
       },
       graphVizualization () {
 
-        var listofNodes = this.dataFS1[0]
+        var listofNodes = this.dataFS2[0]
-        var uniqueTarget = JSON.parse(this.dataFS1[14])
+        var uniqueTarget = JSON.parse(this.dataFS2[15])
-        var corrTarget = JSON.parse(this.dataFS1[6])
+        var corrTarget = JSON.parse(this.dataFS2[7])
-        var corrGlob = JSON.parse(this.dataFS1[10])
+        var corrGlob = JSON.parse(this.dataFS2[11])
-        var VIFVar = JSON.parse(this.dataFS1[18])
+        var VIFVar = JSON.parse(this.dataFS2[19])
-        var MIVar = JSON.parse(this.dataFS1[22])
+        var MIVar = JSON.parse(this.dataFS2[23])
-        MIVar = MIVar.concat(this.MIRemaining)
+
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
         var corrTargetFormatted = []
@@ -213,16 +71,6 @@ export default {
           corrTargetFormatted.push(corrTargetFormattedLoc) 
         }
 
-        for (let j = 0; j < uniqueTarget.length; j++) {
-          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
-            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
-              corrTargetFormatted[j].push(0)
-            } else {
-              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
-            }
-          }
-        }
-
         var corrGlobFormatted = []
         for (let i = 0; i < Object.keys(corrGlob).length; i++) {
           if (i != 0) {
@@ -230,10 +78,6 @@ export default {
           }
         }
 
-        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
-            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
-        }
-
         var VIFVarFormatted = []
         for (let i = 0; i < Object.keys(VIFVar).length; i++) {
           if (i != 0) {
@@ -247,16 +91,6 @@ export default {
           }
         }
 
-        for (let i = 0; i < this.VIFRemaining.length; i++) {
-            if (this.VIFRemaining[i] > 10) {
-              VIFVarFormatted.push(4)
-            } else if (this.VIFRemaining[i] > 5) {
-              VIFVarFormatted.push(2)
-            } else {
-              VIFVarFormatted.push(0)
-            }
-          }
-
         function min(input) {
             if (toString.call(input) !== "[object Array]")  
               return false;
@@ -281,14 +115,14 @@ export default {
 
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
-        var colorsScaleNodes = d3.scaleOrdinal()
+        var colorsScaleNodes = d3.scaleLinear()
-          .domain(d3.ticks([MIMin, MIMax, 10]))
+          .domain([MIMin, MIMax])
-          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
+          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
 
-        var svg = d3.select("#FeatureGraph1");
+        var svg = d3.select("#FeatureGraph2");
         svg.selectAll("*").remove();
 
-        var width = 1000;
+        var width = 800;
         var height = 500;
 
         var numTicks = 200;
@@ -298,7 +132,7 @@ export default {
 
         var dispatch = d3.dispatch('layoutend');
 
-        svg = d3.select("#FeatureGraph1").append("svg")
+        svg = d3.select("#FeatureGraph2").append("svg")
           .attr("width", width)
           .attr("height", height);
 
@@ -309,9 +143,7 @@ export default {
           .selectAll('line')
           .data(graph.links)
           .enter().append('line')
-          .attr("stroke", function(d) { return d.lin_color; })
           .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
-          
 
         var node = svg.append('g')
           .attr('class', 'nodes')
@@ -384,20 +216,23 @@ 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) {
               
+              // 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) {
@@ -422,7 +257,7 @@ export default {
                   var pie = d3.pie().sort(null).value(function (d) {
                       return d.value;
                   });
-                  var id = indexNode
+                  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)');
@@ -546,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
@@ -625,14 +460,13 @@ export default {
 
       },
       reset () {
-        var svg = d3.select("#FeatureGraph1");
+        var svg = d3.select("#FeatureGraph2");
         svg.selectAll("*").remove();
       },
     },
   mounted () {
-    EventBus.$on('quadTrans1', data => { this.dataFS1Trans = data })
+    EventBus.$on('quad2', data => { this.dataFS2 = data })
-    EventBus.$on('quad1', data => { this.dataFS1 = data })
+    EventBus.$on('quad2', this.initializeNetwork)
-    EventBus.$on('quad1', this.initializeNetwork)
   }
 }
 </script>
@@ -647,10 +481,6 @@ svg {
   display: block;
 }
 
-.links line {
-  stroke-opacity: 0.6;
-}
-
 .column {
   float: left;
   margin: 0 10px;

frontend/src/components/FeatureSpace2.vue

@@ -13,11 +13,17 @@ import * as d3Base from 'd3'
 const d3 = Object.assign(d3Base)
 
 export default {
-  name: 'FeatureSpace2',
+  name: 'FeatureSpace1',
   data () {
     return {
       dataFS2: [],
+      dataFS2Trans: [],
       jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
+      computeNodes: 0
     }
   },
   methods: {
@@ -25,9 +31,125 @@ export default {
         
         var listofNodes = this.dataFS2[0]
         var dataLoc = JSON.parse(this.dataFS2[3])
+        var pushEachFinal = []
+        var pushEach
+        var oldVal
+        var newVal
+        var outcome
+        var countLoc
+
+        var corrMatrixCombLoc =[]
+        var corrMatrixCombTotalLoc = []
+        var VIFRemainingLoc = []
+        var MIRemainingLoc = []
+
+        this.dataFS2Trans.forEach(function(element, index) {
+          var round = element.round
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[5])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[9]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[13]))[0])
+          MIRemainingLoc.push(JSON.parse(round[17]))
+          round = JSON.parse(round[1])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          pushEach = []
+          Object.entries(round).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "round", valueIns: outcome})
+
+          var roundLogE = element.roundLogE
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[9]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[13]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[17]))
+          roundLogE = JSON.parse(roundLogE[1])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLogE).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLogE", valueIns: outcome})
+
+          var roundLog2 = element.roundLog2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[9]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[13]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[17]))
+          roundLog2 = JSON.parse(roundLog2[1])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog2).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog2", valueIns: outcome})
+
+          var roundLog10 = element.roundLog10
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[9]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[13]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[17]))
+          roundLog10 = JSON.parse(roundLog10[1])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog10).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog10", valueIns: outcome})
+          pushEachFinal.push({key: listofNodes[index], value: pushEach})
+          })
+
+        this.corrMatrixComb = [...corrMatrixCombLoc]
+        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
+        this.VIFRemaining = [...VIFRemainingLoc]
+        this.MIRemaining = [...MIRemainingLoc]
 
         var nodes = []
-        listofNodes.forEach(element => nodes.push({"name": element}))
+        var groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push({"name": element, "group": groupID+"_root"})
+        })
 
         var links = []
 
@@ -36,20 +158,43 @@ export default {
               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})
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"})
-                  } else {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
                   }
                 }   
               })
         })
 
+        groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push(
+            {"name": element+"_r", "group": groupID},
+            {"name": element+"_r_E", "group": groupID},
+            {"name": element+"_r_2", "group": groupID},
+            {"name": element+"_r_10", "group": groupID},
+          )
+        })
+
+        Object.entries(pushEachFinal).forEach(
+            function ([index, feature]) {
+              feature.value.forEach(function (element, indexIns) {
+                if (element.valueIns > 0) {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"})
+                }
+                else {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                }
+              })
+        })
+
         this.jsonData = {"nodes": nodes, "links": links};
 
         this.graphVizualization()
 
       },
       graphVizualization () {
+        
+        var computeNodesVar = this.computeNodes
 
         var listofNodes = this.dataFS2[0]
         var uniqueTarget = JSON.parse(this.dataFS2[15])
@@ -57,7 +202,7 @@ export default {
         var corrGlob = JSON.parse(this.dataFS2[11])
         var VIFVar = JSON.parse(this.dataFS2[19])
         var MIVar = JSON.parse(this.dataFS2[23])
-
+        MIVar = MIVar.concat(this.MIRemaining)
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
         var corrTargetFormatted = []
@@ -71,6 +216,16 @@ export default {
           corrTargetFormatted.push(corrTargetFormattedLoc) 
         }
 
+        for (let j = 0; j < uniqueTarget.length; j++) {
+          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
+            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
+              corrTargetFormatted[j].push(0)
+            } else {
+              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
+            }
+          }
+        }
+
         var corrGlobFormatted = []
         for (let i = 0; i < Object.keys(corrGlob).length; i++) {
           if (i != 0) {
@@ -78,6 +233,10 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
+            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
+        }
+
         var VIFVarFormatted = []
         for (let i = 0; i < Object.keys(VIFVar).length; i++) {
           if (i != 0) {
@@ -91,6 +250,16 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.VIFRemaining.length; i++) {
+            if (this.VIFRemaining[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (this.VIFRemaining[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+
         function min(input) {
             if (toString.call(input) !== "[object Array]")  
               return false;
@@ -115,14 +284,14 @@ export default {
 
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
-        var colorsScaleNodes = d3.scaleLinear()
+        var colorsScaleNodes = d3.scaleOrdinal()
-          .domain([MIMin, MIMax])
+          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
+          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
 
         var svg = d3.select("#FeatureGraph2");
         svg.selectAll("*").remove();
 
-        var width = 800;
+        var width = 1000;
         var height = 500;
 
         var numTicks = 200;
@@ -143,13 +312,26 @@ export default {
           .selectAll('line')
           .data(graph.links)
           .enter().append('line')
+          .attr("stroke", function(d) { return d.lin_color; })
           .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')
+          .on("click", function(id, index) { 
+            var groupLoc = index + 1
+            var items = document.getElementsByClassName(groupLoc)
+            items.forEach( function (it) {
+              if (it.style.visibility == "hidden") {
+                it.style.visibility = "visible";
+              } else {
+                it.style.visibility = "hidden";
+              }
+            })
+          });
 
         var paramGroups = [
           {name: 'chargeStrength', values: [-30, -80]},
@@ -215,24 +397,21 @@ export default {
             var arcSize = (6 * widthLoc / 100);
             var innerRadius = arcSize * 2; 
 
-            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (i+listofNodes.length); })
+              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
 
             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) {
@@ -257,7 +436,8 @@ export default {
                   var pie = d3.pie().sort(null).value(function (d) {
                       return d.value;
                   });
-                  var id = indexNode+listofNodes.length
+
+                  var id = indexNode + computeNodesVar
                   var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
@@ -344,6 +524,15 @@ export default {
 
                 drawGraph();
 
+                for (let i = 0; i < listofNodes.length; i++) {
+                  var numb = graph.nodes[i]['group'].match(/\d/g)
+                  numb = parseInt(numb.join(""))
+                  var items = document.getElementsByClassName(numb)
+                  items.forEach( function (it) {
+                    it.style.visibility = "hidden";
+                  })
+                }
+
                 //Zoom functions 
                 function zoom_actions(){
                     svg.attr("transform", d3.event.transform)
@@ -381,7 +570,7 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("id", function(d, i) { return "g" + (i+listofNodes.length); })
+            .attr("id", function(d, i) { return "g" + (i+computeNodesVar); })
             .attr("transform", function(d, i) {
               d.x = d.x - 50
               d.y = d.y - 50
@@ -458,6 +647,10 @@ export default {
           return forceSim;
         }
 
+        this.computeNodes = this.computeNodes + graph.nodes.length
+
+        EventBus.$emit('countNodes2', this.computeNodes)
+
       },
       reset () {
         var svg = d3.select("#FeatureGraph2");
@@ -465,8 +658,10 @@ export default {
       },
     },
   mounted () {
+    EventBus.$on('quadTrans2', data => { this.dataFS2Trans = data })
     EventBus.$on('quad2', data => { this.dataFS2 = data })
     EventBus.$on('quad2', this.initializeNetwork)
+    EventBus.$on('countNodes1', data => { this.computeNodes = data })
   }
 }
 </script>
@@ -481,6 +676,10 @@ svg {
   display: block;
 }
 
+.links line {
+  stroke-opacity: 0.6;
+}
+
 .column {
   float: left;
   margin: 0 10px;

frontend/src/components/FeatureSpace3.vue

@@ -13,11 +13,17 @@ import * as d3Base from 'd3'
 const d3 = Object.assign(d3Base)
 
 export default {
-  name: 'FeatureSpace3',
+  name: 'FeatureSpace1',
   data () {
     return {
       dataFS3: [],
+      dataFS3Trans: [],
       jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
+      computeNodes: 0
     }
   },
   methods: {
@@ -25,9 +31,125 @@ export default {
         
         var listofNodes = this.dataFS3[0]
         var dataLoc = JSON.parse(this.dataFS3[4])
+        var pushEachFinal = []
+        var pushEach
+        var oldVal
+        var newVal
+        var outcome
+        var countLoc
+
+        var corrMatrixCombLoc =[]
+        var corrMatrixCombTotalLoc = []
+        var VIFRemainingLoc = []
+        var MIRemainingLoc = []
+
+        this.dataFS3Trans.forEach(function(element, index) {
+          var round = element.round
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[6])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[10]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[14]))[0])
+          MIRemainingLoc.push(JSON.parse(round[18]))
+          round = JSON.parse(round[2])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          pushEach = []
+          Object.entries(round).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "round", valueIns: outcome})
+
+          var roundLogE = element.roundLogE
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[6])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[10]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[14]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[18]))
+          roundLogE = JSON.parse(roundLogE[2])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLogE).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLogE", valueIns: outcome})
+
+          var roundLog2 = element.roundLog2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[6])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[10]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[14]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[18]))
+          roundLog2 = JSON.parse(roundLog2[2])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog2).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog2", valueIns: outcome})
+
+          var roundLog10 = element.roundLog10
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[6])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[10]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[14]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[18]))
+          roundLog10 = JSON.parse(roundLog10[2])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog10).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog10", valueIns: outcome})
+          pushEachFinal.push({key: listofNodes[index], value: pushEach})
+          })
+
+        this.corrMatrixComb = [...corrMatrixCombLoc]
+        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
+        this.VIFRemaining = [...VIFRemainingLoc]
+        this.MIRemaining = [...MIRemainingLoc]
 
         var nodes = []
-        listofNodes.forEach(element => nodes.push({"name": element}))
+        var groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push({"name": element, "group": groupID+"_root"})
+        })
 
         var links = []
 
@@ -36,14 +158,35 @@ export default {
               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})
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"})
-                  } else {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
                   }
                 }   
               })
         })
 
+        groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push(
+            {"name": element+"_r", "group": groupID},
+            {"name": element+"_r_E", "group": groupID},
+            {"name": element+"_r_2", "group": groupID},
+            {"name": element+"_r_10", "group": groupID},
+          )
+        })
+
+        Object.entries(pushEachFinal).forEach(
+            function ([index, feature]) {
+              feature.value.forEach(function (element, indexIns) {
+                if (element.valueIns > 0) {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"})
+                }
+                else {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                }
+              })
+        })
+
         this.jsonData = {"nodes": nodes, "links": links};
 
         this.graphVizualization()
@@ -51,13 +194,15 @@ export default {
       },
       graphVizualization () {
 
+        var computeNodesVar = this.computeNodes
+
         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])
-
+        MIVar = MIVar.concat(this.MIRemaining)
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
         var corrTargetFormatted = []
@@ -71,6 +216,16 @@ export default {
           corrTargetFormatted.push(corrTargetFormattedLoc) 
         }
 
+        for (let j = 0; j < uniqueTarget.length; j++) {
+          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
+            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
+              corrTargetFormatted[j].push(0)
+            } else {
+              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
+            }
+          }
+        }
+
         var corrGlobFormatted = []
         for (let i = 0; i < Object.keys(corrGlob).length; i++) {
           if (i != 0) {
@@ -78,6 +233,10 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
+            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
+        }
+
         var VIFVarFormatted = []
         for (let i = 0; i < Object.keys(VIFVar).length; i++) {
           if (i != 0) {
@@ -91,6 +250,16 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.VIFRemaining.length; i++) {
+            if (this.VIFRemaining[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (this.VIFRemaining[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+
         function min(input) {
             if (toString.call(input) !== "[object Array]")  
               return false;
@@ -115,14 +284,14 @@ export default {
 
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
-        var colorsScaleNodes = d3.scaleLinear()
+        var colorsScaleNodes = d3.scaleOrdinal()
-          .domain([MIMin, MIMax])
+          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
+          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
 
         var svg = d3.select("#FeatureGraph3");
         svg.selectAll("*").remove();
 
-        var width = 800;
+        var width = 1000;
         var height = 500;
 
         var numTicks = 200;
@@ -143,13 +312,26 @@ export default {
           .selectAll('line')
           .data(graph.links)
           .enter().append('line')
+          .attr("stroke", function(d) { return d.lin_color; })
           .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')
+          .on("click", function(id, index) { 
+            var groupLoc = index + 1
+            var items = document.getElementsByClassName(groupLoc)
+            items.forEach( function (it) {
+              if (it.style.visibility == "hidden") {
+                it.style.visibility = "visible";
+              } else {
+                it.style.visibility = "hidden";
+              }
+            })
+          });
 
         var paramGroups = [
           {name: 'chargeStrength', values: [-30, -80]},
@@ -215,27 +397,23 @@ export default {
             var arcSize = (6 * widthLoc / 100);
             var innerRadius = arcSize * 2; 
 
-            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (listofNodes.length*2+i); })
+              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
 
             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 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,7 +436,7 @@ export default {
                   var pie = d3.pie().sort(null).value(function (d) {
                       return d.value;
                   });
-                  var id = listofNodes.length*2+indexNode
+                  var id = indexNode + computeNodesVar
                   var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
@@ -267,7 +445,6 @@ export default {
                       .classed('textClass', true)
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
 
-
                   g.selectAll('path').data(function (d) {
                       return pie(d);
                   }).enter().append('path')
@@ -346,6 +523,15 @@ export default {
 
                 drawGraph();
 
+                for (let i = 0; i < listofNodes.length; i++) {
+                  var numb = graph.nodes[i]['group'].match(/\d/g)
+                  numb = parseInt(numb.join(""))
+                  var items = document.getElementsByClassName(numb)
+                  items.forEach( function (it) {
+                    it.style.visibility = "hidden";
+                  })
+                }
+
                 //Zoom functions 
                 function zoom_actions(){
                     svg.attr("transform", d3.event.transform)
@@ -383,7 +569,7 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("id", function(d, i) { return "g" + (listofNodes.length*2+i); })
+            .attr("id", function(d, i) { return "g" + (i+computeNodesVar); })
             .attr("transform", function(d, i) {
               d.x = d.x - 50
               d.y = d.y - 50
@@ -460,6 +646,9 @@ export default {
           return forceSim;
         }
 
+        this.computeNodes = this.computeNodes + graph.nodes.length
+        EventBus.$emit('countNodes3', this.computeNodes)
+
       },
       reset () {
         var svg = d3.select("#FeatureGraph3");
@@ -467,8 +656,10 @@ export default {
       },
     },
   mounted () {
+    EventBus.$on('quadTrans3', data => { this.dataFS3Trans = data })
     EventBus.$on('quad3', data => { this.dataFS3 = data })
     EventBus.$on('quad3', this.initializeNetwork)
+    EventBus.$on('countNodes2', data => { this.computeNodes = data })
   }
 }
 </script>
@@ -483,6 +674,10 @@ svg {
   display: block;
 }
 
+.links line {
+  stroke-opacity: 0.6;
+}
+
 .column {
   float: left;
   margin: 0 10px;

frontend/src/components/FeatureSpace4.vue

@@ -13,11 +13,17 @@ import * as d3Base from 'd3'
 const d3 = Object.assign(d3Base)
 
 export default {
-  name: 'FeatureSpace4',
+  name: 'FeatureSpace1',
   data () {
     return {
       dataFS4: [],
+      dataFS4Trans: [],
       jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
+      computeNodes: 0
     }
   },
   methods: {
@@ -25,9 +31,125 @@ export default {
         
         var listofNodes = this.dataFS4[0]
         var dataLoc = JSON.parse(this.dataFS4[5])
+        var pushEachFinal = []
+        var pushEach
+        var oldVal
+        var newVal
+        var outcome
+        var countLoc
+
+        var corrMatrixCombLoc =[]
+        var corrMatrixCombTotalLoc = []
+        var VIFRemainingLoc = []
+        var MIRemainingLoc = []
+
+        this.dataFS4Trans.forEach(function(element, index) {
+          var round = element.round
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[7])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[11]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[15]))[0])
+          MIRemainingLoc.push(JSON.parse(round[19]))
+          round = JSON.parse(round[3])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          pushEach = []
+          Object.entries(round).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "round", valueIns: outcome})
+
+          var roundLogE = element.roundLogE
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[7])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[11]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[15]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[19]))
+          roundLogE = JSON.parse(roundLogE[3])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLogE).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLogE", valueIns: outcome})
+
+          var roundLog2 = element.roundLog2
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[7])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[11]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[15]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[19]))
+          roundLog2 = JSON.parse(roundLog2[3])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog2).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog2", valueIns: outcome})
+
+          var roundLog10 = element.roundLog10
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[7])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[11]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[15]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[19]))
+          roundLog10 = JSON.parse(roundLog10[3])
+          oldVal = 0
+          newVal = 0
+          outcome = 0
+          countLoc = 0
+          Object.entries(roundLog10).forEach(
+          function ([feature, value]) {
+            var key = Object.keys(value)
+            var search = Object.values(dataLoc[key])
+            oldVal = Math.abs(search[countLoc]) + oldVal
+            newVal = Math.abs(Object.values(value)[0]) + newVal
+            countLoc++
+          })
+          oldVal = oldVal / listofNodes.length
+          newVal = newVal / listofNodes.length
+          outcome = oldVal - newVal
+          pushEach.push({keyIns: "roundLog10", valueIns: outcome})
+          pushEachFinal.push({key: listofNodes[index], value: pushEach})
+          })
+
+        this.corrMatrixComb = [...corrMatrixCombLoc]
+        this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc]
+        this.VIFRemaining = [...VIFRemainingLoc]
+        this.MIRemaining = [...MIRemainingLoc]
 
         var nodes = []
-        listofNodes.forEach(element => nodes.push({"name": element}))
+        var groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push({"name": element, "group": groupID+"_root"})
+        })
 
         var links = []
 
@@ -36,14 +158,35 @@ export default {
               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})
+                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"})
-                  } else {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
                   }
                 }   
               })
         })
 
+        groupID = 0
+        listofNodes.forEach( function(element) {
+          groupID++
+          nodes.push(
+            {"name": element+"_r", "group": groupID},
+            {"name": element+"_r_E", "group": groupID},
+            {"name": element+"_r_2", "group": groupID},
+            {"name": element+"_r_10", "group": groupID},
+          )
+        })
+
+        Object.entries(pushEachFinal).forEach(
+            function ([index, feature]) {
+              feature.value.forEach(function (element, indexIns) {
+                if (element.valueIns > 0) {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"})
+                }
+                else {
+                  links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
+                }
+              })
+        })
+
         this.jsonData = {"nodes": nodes, "links": links};
 
         this.graphVizualization()
@@ -51,13 +194,15 @@ export default {
       },
       graphVizualization () {
 
+        var computeNodesVar = this.computeNodes
+
         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])
-
+        MIVar = MIVar.concat(this.MIRemaining)
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
         var corrTargetFormatted = []
@@ -71,6 +216,16 @@ export default {
           corrTargetFormatted.push(corrTargetFormattedLoc) 
         }
 
+        for (let j = 0; j < uniqueTarget.length; j++) {
+          for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) {
+            if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) {
+              corrTargetFormatted[j].push(0)
+            } else {
+              corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100))
+            }
+          }
+        }
+
         var corrGlobFormatted = []
         for (let i = 0; i < Object.keys(corrGlob).length; i++) {
           if (i != 0) {
@@ -78,6 +233,10 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.corrMatrixCombTotal.length; i++) {
+            corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i]))
+        }
+
         var VIFVarFormatted = []
         for (let i = 0; i < Object.keys(VIFVar).length; i++) {
           if (i != 0) {
@@ -91,6 +250,16 @@ export default {
           }
         }
 
+        for (let i = 0; i < this.VIFRemaining.length; i++) {
+            if (this.VIFRemaining[i] > 10) {
+              VIFVarFormatted.push(4)
+            } else if (this.VIFRemaining[i] > 5) {
+              VIFVarFormatted.push(2)
+            } else {
+              VIFVarFormatted.push(0)
+            }
+          }
+
         function min(input) {
             if (toString.call(input) !== "[object Array]")  
               return false;
@@ -115,14 +284,14 @@ export default {
 
         MIVar = MIVar.map(normalize(MIMin, MIMax))
 
-        var colorsScaleNodes = d3.scaleLinear()
+        var colorsScaleNodes = d3.scaleOrdinal()
-          .domain([MIMin, MIMax])
+          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
+          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
 
         var svg = d3.select("#FeatureGraph4");
         svg.selectAll("*").remove();
 
-        var width = 800;
+        var width = 1000;
         var height = 500;
 
         var numTicks = 200;
@@ -143,13 +312,26 @@ export default {
           .selectAll('line')
           .data(graph.links)
           .enter().append('line')
+          .attr("stroke", function(d) { return d.lin_color; })
           .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')
+          .on("click", function(id, index) { 
+            var groupLoc = index + 1
+            var items = document.getElementsByClassName(groupLoc)
+            items.forEach( function (it) {
+              if (it.style.visibility == "hidden") {
+                it.style.visibility = "visible";
+              } else {
+                it.style.visibility = "hidden";
+              }
+            })
+          });
 
         var paramGroups = [
           {name: 'chargeStrength', values: [-30, -80]},
@@ -215,27 +397,23 @@ export default {
             var arcSize = (6 * widthLoc / 100);
             var innerRadius = arcSize * 2; 
 
-            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
+            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (listofNodes.length*3+i); })
+              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
 
             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 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,7 +436,9 @@ export default {
                   var pie = d3.pie().sort(null).value(function (d) {
                       return d.value;
                   });
-                  var id = listofNodes.length*3+indexNode
+                  
+                  var id = indexNode + computeNodesVar
+
                   var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
                       .append('g')
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
@@ -267,7 +447,6 @@ export default {
                       .classed('textClass', true)
                       .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
 
-
                   g.selectAll('path').data(function (d) {
                       return pie(d);
                   }).enter().append('path')
@@ -346,6 +525,15 @@ export default {
 
                 drawGraph();
 
+                for (let i = 0; i < listofNodes.length; i++) {
+                  var numb = graph.nodes[i]['group'].match(/\d/g)
+                  numb = parseInt(numb.join(""))
+                  var items = document.getElementsByClassName(numb)
+                  items.forEach( function (it) {
+                    it.style.visibility = "hidden";
+                  })
+                }
+
                 //Zoom functions 
                 function zoom_actions(){
                     svg.attr("transform", d3.event.transform)
@@ -383,7 +571,7 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("id", function(d, i) { return "g" + (listofNodes.length*3+i); })
+            .attr("id", function(d, i) { return "g" + (i+computeNodesVar); })
             .attr("transform", function(d, i) {
               d.x = d.x - 50
               d.y = d.y - 50
@@ -467,8 +655,10 @@ export default {
       },
     },
   mounted () {
+    EventBus.$on('quadTrans4', data => { this.dataFS4Trans = data })
     EventBus.$on('quad4', data => { this.dataFS4 = data })
     EventBus.$on('quad4', this.initializeNetwork)
+    EventBus.$on('countNodes3', data => { this.computeNodes = data })
   }
 }
 </script>
@@ -483,6 +673,10 @@ svg {
   display: block;
 }
 
+.links line {
+  stroke-opacity: 0.6;
+}
+
 .column {
   float: left;
   margin: 0 10px;