diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc
index d40c844..59db408 100644
Binary files a/__pycache__/run.cpython-37.pyc and b/__pycache__/run.cpython-37.pyc differ
diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc
new file mode 100644
index 0000000..1c754bd
Binary files /dev/null and b/__pycache__/run.cpython-38.pyc differ
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0eb70ec..1423208 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2942,6 +2942,15 @@
       "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.8.4.tgz",
       "integrity": "sha512-Kg/da0pQSIvEChGL96fYOSzguDc+2zbz061BWnnskq2viZvPnacFIDC2Z+dEZHH+DBMnnLAt2pqLEulxauSQhA=="
     },
+    "@internetarchive/radial-tree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@internetarchive/radial-tree/-/radial-tree-1.0.0.tgz",
+      "integrity": "sha512-BdyszClUwBkDCz+Fl3SehGqFYPk03C0yi6VrT0ssEuWmbeYhMNeqe7hIgrNqUncqCYVNZZn5sqAMfedvk7EIeg==",
+      "requires": {
+        "d3": "^5.5.0",
+        "lodash": "^4.17.10"
+      }
+    },
     "@mapbox/geojson-area": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 177bb3f..7842f06 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/vue-fontawesome": "^0.1.9",
+    "@internetarchive/radial-tree": "^1.0.0",
     "@statnett/vue-plotly": "^0.3.2",
     "@types/d3-drag": "^1.2.3",
     "@types/node": "^13.7.4",
diff --git a/frontend/src/components/DataSetExecController.vue b/frontend/src/components/DataSetExecController.vue
deleted file mode 100644
index c428197..0000000
--- a/frontend/src/components/DataSetExecController.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<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">Heart Disease</option>
-        <option value="IrisC.csv" selected>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>
-</template>
-
-<script>
-import Papa from 'papaparse'
-import { EventBus } from '../main.js'
-import {$,jQuery} from 'jquery';
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base)
-
-export default {
-  name: 'DataSetExecController',
-  data () {
-    return {
-      defaultDataSet: 'IrisC', // default value for the first data set
-      searchText: 'Exploration of Features',
-      resetText: 'Reset',
-      dataset: 'Data set'
-    }
-  },
-  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)
-                }
-              });
-          })
-      }
-    },
-    reset () {
-      EventBus.$emit('reset')
-      EventBus.$emit('alternateFlagLock')
-    },
-    initialize () {
-      EventBus.$emit('ConfirmDataSet')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/DataSetSlider.vue b/frontend/src/components/DataSetSlider.vue
new file mode 100644
index 0000000..95bdb37
--- /dev/null
+++ b/frontend/src/components/DataSetSlider.vue
@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="row align-items-center">
+      <div class="col-lg-1"><p>Separate classified incorrectly (predict %)</p></div>
+      <div class="col-lg-2"><div id="slider-stepNeg"></div></div>
+      <div class="col-lg-1"><p id="value-stepNeg"></p></div>
+      <div class="col-lg-4">
+        <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">Heart disease</option>
+            <option value="IrisC.csv" selected>Iris flower</option>
+            <option value="local">Upload 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>
+      <div class="col-lg-1"><p>Separate classified correctly (predict %)</p></div>
+      <div class="col-lg-2"><div id="slider-stepPos"></div></div>
+      <div class="col-lg-1"><p id="value-stepPos"></p></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Papa from 'papaparse'
+import { EventBus } from '../main.js'
+import {$,jQuery} from 'jquery';
+import * as d3Base from 'd3'
+import { sliderBottom } from 'd3-simple-slider'
+
+// attach all d3 plugins to the d3 library
+const d3 = Object.assign(d3Base, { sliderBottom })
+
+export default {
+  name: 'DataSetSlider',
+  data () {
+    return {
+      defaultDataSet: 'IrisC', // default value for the first data set
+      searchText: 'Feature exploration',
+      resetText: 'Factory reset',
+      dataset: 'Data set'
+    }
+  },
+  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)
+                }
+              });
+          })
+      }
+    },
+    reset () {
+      EventBus.$emit('reset')
+      EventBus.$emit('alternateFlagLock')
+    },
+    initialize () {
+      EventBus.$emit('ConfirmDataSet')
+    },
+    InitSliders () {  
+      var dataCorrect = [55.0, 60.0, 65.0, 70.0, 75.0, 80.0, 85.0, 90.0, 95.0];
+      var dataWrong = [5.0, 10.0, 15.0, 20.0, 25.0, 30.0, 35.0, 40.0, 45.0];
+
+        var sliderStepPos = d3
+          .sliderBottom()
+          .min(d3.min(dataCorrect))
+          .max(d3.max(dataCorrect))
+          .width(300)
+          .tickFormat(d3.format(".0f"))
+          .ticks(9)
+          .step(5)
+          .default(75.0)
+          .on('onchange', val => {
+            d3.select('p#value-stepPos').text(d3.format(".0f")(val));
+            EventBus.$emit('SendtheChangeinRangePos', d3.format(".0f")(val))
+          });
+
+        var gStepPos = d3
+          .select('div#slider-stepPos')
+          .append('svg')
+          .attr('width', 400)
+          .attr('height', 80)
+          .append('g')
+          .attr('transform', 'translate(30,30)');
+
+        gStepPos.call(sliderStepPos);
+
+        d3.select('p#value-stepPos').text(d3.format(".0f")(sliderStepPos.value()));
+
+        var sliderStepNeg = d3
+          .sliderBottom()
+          .min(d3.min(dataWrong))
+          .max(d3.max(dataWrong))
+          .width(300)
+          .tickFormat(d3.format(".0f"))
+          .ticks(9)
+          .step(5)
+          .default(25.0)
+          .on('onchange', val => {
+            d3.select('p#value-stepNeg').text(d3.format(".0f")(val));
+            EventBus.$emit('SendtheChangeinRangeNeg', d3.format(".0f")(val))
+          });
+
+        var gStepNeg = d3
+          .select('div#slider-stepNeg')
+          .append('svg')
+          .attr('width', 400)
+          .attr('height', 80)
+          .append('g')
+          .attr('transform', 'translate(30,30)');
+
+        gStepNeg.call(sliderStepNeg);
+
+        d3.select('p#value-stepNeg').text(d3.format(".0f")(sliderStepNeg.value()));
+    },
+  },
+  mounted () {
+    this.InitSliders()
+  },
+}
+</script>
diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue
new file mode 100644
index 0000000..82b1ba9
--- /dev/null
+++ b/frontend/src/components/DataSpace.vue
@@ -0,0 +1,226 @@
+<template>
+<div>
+  	<div id="BeeSwarm"></div>
+    <div id="tooltip">
+		<strong class="system">&nbsp;</strong>
+		<span class="label">&nbsp;</span>
+	</div>
+</div> 
+</template>
+
+<script>
+
+import { EventBus } from '../main.js'
+import * as Plotly from 'plotly.js'
+
+export default {
+  name: 'DataSpace',
+  data () {
+    return {
+      dataInstances: '',
+      PositiveValue: 75,
+      NegativeValue: 25,
+    }
+  },
+  methods: {
+    initializeBeeSwarm () {   
+      var tooltip = d3.select("#tooltip")
+
+      var width = 2500
+      var height = 125
+      var rectWidth = 20
+      var rectHeight = 10
+      
+      var nodeR = 8
+      var nodeStrokeW = 1.5
+      
+      var scale = 1
+
+      var predictions = JSON.parse(this.dataInstances[2])
+
+      var len = predictions.length;
+      var instances = new Array(len);
+      for (var i = 0; i < len; ++i) instances[i] = i
+      instances.sort(function (a, b) { return predictions[a] < predictions[b] ? -1 : predictions[a] > predictions[b] ? 1 : 0; })
+      console.log(instances)
+
+      predictions.sort()
+      console.log(predictions)
+
+      var colorInstances = []
+      for (let i = 0; i < predictions.length; i++) {
+        if (predictions[i] > 50 && predictions[i] > this.PositiveValue) {
+          colorInstances.push("#33a02c")
+        } else if (predictions[i] > 50 && predictions[i] <= this.PositiveValue) {
+          colorInstances.push("#b2df8a")
+        } else if (predictions[i] <= 50 && predictions[i] > this.NegativeValue) {
+          colorInstances.push("#fb9a99")
+        } else {
+          colorInstances.push("#e31a1c")
+        }
+      }
+  
+      var data = d3.range(instances.length).map(function(d, i) {
+        return {
+          x : predictions[i],
+          y : 0, // doesn't matter, will be reset before it matters
+          r : nodeR,
+          col: colorInstances[i],
+          system : 'Predicted Probability',
+          label : '(%)'
+        }
+      })
+      
+      var dx = function(d) { return d.x }
+      var dy = function(d) { return d.y }
+      var dr = function(d) { return d.r }
+      var colorX = function(d) { return d.col }
+      
+      var extent = d3.extent(data, dx)
+      
+      // the range is set in such a way that portions of nodes are not drawn outside the g
+      var xScale = d3.scale.linear()
+        .domain(extent)
+        .range([0, width])
+        
+      var norm = d3.random.normal(0, 4.0)
+      
+      var chart = d3.select("#BeeSwarm").append("svg")
+          .attr("width", 2500)
+          .attr("height", 125)
+          .attr("pointer-events", "all")		
+        .append("g")
+          .attr("transform", "translate(0,0)")
+          .on("mousemove", function() {
+            var x = d3.event.pageX - 24 // subtract translation
+            followMe.transition()
+              .duration(10)
+              .attr("x1", x).attr("x2", x)
+          })
+          .call(d3.behavior.zoom().x(xScale).scaleExtent([0.8, 10]).on("zoom", zoom))
+        .append('g');
+      
+      // append a background rectangle to receive the pointer events
+      // (otherwise zoom only works when the pointer is over a node)
+      chart.append('rect')
+        .attr('width', width)
+        .attr('height', height)
+        .attr('fill', 'white');
+      
+      var axis = d3.svg.axis().scale(xScale)
+      chart.append("g").attr("class", "xAxis").call(axis)
+      
+      var followMe = chart.append("line")
+        .attr("x1", 0).attr("x2", 0)
+        .attr("y1", 0).attr("y2", 400)
+        .style("stroke", "red")
+
+      function zoom() {
+        chart.select(".xAxis").call(axis);
+        
+        if(scale != d3.event.scale)
+          beeswarm()
+        scale = d3.event.scale
+
+        chart.selectAll("circle.node")
+          .transition(10)
+          .attr("cx", function(d) { return xScale(d.x) })
+          .attr("cy", dy)
+      }
+      
+      var nodes = chart.selectAll("circle.node")
+        .data(data)
+      
+      beeswarm()
+        
+      nodes.enter().append("circle")
+          .attr("class", "node")
+          .attr("cx", function(d) { return xScale(d.x) })
+          .attr("cy", dy)
+          .attr("r", dr)
+          .attr("fill", colorX)
+          .style("stroke", "black")
+          .style("stroke-width", 4)
+          .on("mouseover", function(d) {
+            tooltip.select(".system").html(d.system)
+            return tooltip.select(".label").html(d.label)
+          })
+          .on("mouseout", function(d) {
+            tooltip.select(".system").html("&nbsp;")
+            return tooltip.select(".label").html("&nbsp;")
+          })
+          .on("click", function(d, i) {
+            var inRange = function(dPrime, iPrime) {
+              return Math.pow(i-iPrime, 2) <= 4
+            }
+          
+            d3.selectAll("circle.node").filter(inRange).style("stroke", "yellow")
+            d3.selectAll("circle.node").filter(function(dPrime, iPrime) { return !inRange(dPrime, iPrime) })
+              .style("stroke", "black")
+          })
+      
+      function beeswarm() {
+        // reset vertical position
+        data.map(function(d) {
+          d.y = height / 2
+        })
+        for(var iter = 0; iter < 10; iter++) {
+          var q = d3.geom.quadtree(data)
+          for(var i = 0; i < data.length; i++)
+            q.visit(collide(data[i]))
+        }		
+      }
+        
+      function collide(node) {
+        var r = node.r + 16,
+            nx1 = xScale(node.x) - r,
+            nx2 = xScale(node.x) + r,
+            ny1 = node.y - r,
+            ny2 = node.y + r;
+        return function(quad, x1, y1, x2, y2) {
+          if (quad.point && (quad.point !== node)) {
+            var x = xScale(node.x) - xScale(quad.point.x),
+                y = node.y - quad.point.y,
+                l = Math.sqrt(x * x + y * y),
+                r = node.r + quad.point.r;
+            if (l < r)
+              node.y += norm()
+          }
+          return xScale(x1) > nx2
+              || xScale(x2) < nx1
+              || y1 > ny2
+              || y2 < ny1	
+        }
+      }
+    },
+    reset () {
+      var svg = d3.select("#BeeSwarm");
+      svg.selectAll("*").remove();
+    },
+  },
+  mounted () {
+    EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data})
+    EventBus.$on('SendtheChangeinRangeNeg', data => {this.NegativeValue = data})
+    EventBus.$on('quad', data => { this.dataInstances = data })
+    EventBus.$on('quad', this.initializeBeeSwarm)
+
+    EventBus.$on('reset', this.reset)
+  }
+}
+</script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.nodeHighlighted {
+  stroke: 'orange'
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpace1.vue b/frontend/src/components/FeatureSpace1.vue
deleted file mode 100644
index fa38b2c..0000000
--- a/frontend/src/components/FeatureSpace1.vue
+++ /dev/null
@@ -1,684 +0,0 @@
-<template>
-  <div class="column">
-    <div id="FeatureGraph1"></div>
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../main.js'
-import * as greadability from '../greadability.js'
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base)
-
-export default {
-  name: 'FeatureSpace1',
-  data () {
-    return {
-      dataFS1: [],
-      dataFS1Trans: [],
-      jsonData: [],
-      corrMatrixComb: [],
-      corrMatrixCombTotal: [],
-      VIFRemaining: [],
-      MIRemaining: [],
-      computeNodes: 0
-    }
-  },
-  methods: {
-      initializeNetwork () {   
-        
-        var listofNodes = this.dataFS1[0]
-        var dataLoc = JSON.parse(this.dataFS1[2])
-        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( function(element) {
-          groupID++
-          nodes.push({"name": element, "group": groupID+"_root"})
-        })
-
-        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, "lin_color": "#D3D3D3"})
-                  }
-                }   
-              })
-        })
-
-        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},
-          )
-        })
-        
-        this.computeNodes = nodes.length
-        EventBus.$emit('countNodes1', this.computeNodes)
-
-        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 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])
-        MIVar = MIVar.concat(this.MIRemaining)
-        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) 
-        }
-
-        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) {
-            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
-          }
-        }
-
-        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) {
-            if (Object.values(VIFVar)[i] > 10) {
-              VIFVarFormatted.push(4)
-            } else if (Object.values(VIFVar)[i] > 5) {
-              VIFVarFormatted.push(2)
-            } else {
-              VIFVarFormatted.push(0)
-            }
-          }
-        }
-
-        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;
-          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.scaleOrdinal()
-          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
-
-        var svg = d3.select("#FeatureGraph1");
-        svg.selectAll("*").remove();
-
-        var width = 1000;
-        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", 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]},
-          {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("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (i); })
-
-            graph.nodes.forEach(function(itemVal, indexNode) {
-              
-              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();
-
-                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)
-                }
-
-                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();
-      },
-    },
-  mounted () {
-    EventBus.$on('quadTrans1', data => { this.dataFS1Trans = data })
-    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-opacity: 0.6;
-}
-
-.column {
-  float: left;
-  margin: 0 10px;
-}
-
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/FeatureSpace3.vue b/frontend/src/components/FeatureSpace3.vue
deleted file mode 100644
index 80d10db..0000000
--- a/frontend/src/components/FeatureSpace3.vue
+++ /dev/null
@@ -1,686 +0,0 @@
-<template>
-  <div class="column">
-    <div id="FeatureGraph3"></div>
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../main.js'
-import * as greadability from '../greadability.js'
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base)
-
-export default {
-  name: 'FeatureSpace1',
-  data () {
-    return {
-      dataFS3: [],
-      dataFS3Trans: [],
-      jsonData: [],
-      corrMatrixComb: [],
-      corrMatrixCombTotal: [],
-      VIFRemaining: [],
-      MIRemaining: [],
-      computeNodes: 0
-    }
-  },
-  methods: {
-      initializeNetwork () {   
-        
-        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 = []
-        var groupID = 0
-        listofNodes.forEach( function(element) {
-          groupID++
-          nodes.push({"name": element, "group": groupID+"_root"})
-        })
-
-        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, "lin_color": "#D3D3D3"})
-                  }
-                }   
-              })
-        })
-
-        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.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 = []
-        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) 
-        }
-
-        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) {
-            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
-          }
-        }
-
-        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) {
-            if (Object.values(VIFVar)[i] > 10) {
-              VIFVarFormatted.push(4)
-            } else if (Object.values(VIFVar)[i] > 5) {
-              VIFVarFormatted.push(2)
-            } else {
-              VIFVarFormatted.push(0)
-            }
-          }
-        }
-
-        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;
-          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.scaleOrdinal()
-          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
-
-        var svg = d3.select("#FeatureGraph3");
-        svg.selectAll("*").remove();
-
-        var width = 1000;
-        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", 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]},
-          {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("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
-
-            graph.nodes.forEach(function(itemVal, indexNode) {
-              
-              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 + computeNodesVar
-                  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();
-
-                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)
-                }
-
-                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+computeNodesVar); })
-            .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;
-        }
-
-        this.computeNodes = this.computeNodes + graph.nodes.length
-        EventBus.$emit('countNodes3', this.computeNodes)
-
-      },
-      reset () {
-        var svg = d3.select("#FeatureGraph3");
-        svg.selectAll("*").remove();
-      },
-    },
-  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>
-
-<style>
-
-text {
-  font-family: sans-serif;
-}
-
-svg {
-  display: block;
-}
-
-.links line {
-  stroke-opacity: 0.6;
-}
-
-.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
deleted file mode 100644
index 21a836c..0000000
--- a/frontend/src/components/FeatureSpace4.vue
+++ /dev/null
@@ -1,685 +0,0 @@
-<template>
-  <div class="column">
-    <div id="FeatureGraph4"></div>
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../main.js'
-import * as greadability from '../greadability.js'
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base)
-
-export default {
-  name: 'FeatureSpace1',
-  data () {
-    return {
-      dataFS4: [],
-      dataFS4Trans: [],
-      jsonData: [],
-      corrMatrixComb: [],
-      corrMatrixCombTotal: [],
-      VIFRemaining: [],
-      MIRemaining: [],
-      computeNodes: 0
-    }
-  },
-  methods: {
-      initializeNetwork () {   
-        
-        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 = []
-        var groupID = 0
-        listofNodes.forEach( function(element) {
-          groupID++
-          nodes.push({"name": element, "group": groupID+"_root"})
-        })
-
-        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, "lin_color": "#D3D3D3"})
-                  }
-                }   
-              })
-        })
-
-        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.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 = []
-        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) 
-        }
-
-        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) {
-            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
-          }
-        }
-
-        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) {
-            if (Object.values(VIFVar)[i] > 10) {
-              VIFVarFormatted.push(4)
-            } else if (Object.values(VIFVar)[i] > 5) {
-              VIFVarFormatted.push(2)
-            } else {
-              VIFVarFormatted.push(0)
-            }
-          }
-        }
-
-        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;
-          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.scaleOrdinal()
-          .domain(d3.ticks([MIMin, MIMax, 10]))
-          .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
-
-        var svg = d3.select("#FeatureGraph4");
-        svg.selectAll("*").remove();
-
-        var width = 1000;
-        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", 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]},
-          {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("class", function(d, i) { return d.group; })
-              .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); })
-
-            graph.nodes.forEach(function(itemVal, indexNode) {
-              
-              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 + computeNodesVar
-
-                  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();
-
-                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)
-                }
-
-                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+computeNodesVar); })
-            .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();
-      },
-    },
-  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>
-
-<style>
-
-text {
-  font-family: sans-serif;
-}
-
-svg {
-  display: block;
-}
-
-.links line {
-  stroke-opacity: 0.6;
-}
-
-.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/FeatureSpaceDetail.vue
similarity index 91%
rename from frontend/src/components/FeatureSpace2.vue
rename to frontend/src/components/FeatureSpaceDetail.vue
index 2c400a9..8a4274d 100644
--- a/frontend/src/components/FeatureSpace2.vue
+++ b/frontend/src/components/FeatureSpaceDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="column">
-    <div id="FeatureGraph2"></div>
+    <div id="FeatureGraph"></div>
   </div>
 </template>
 
@@ -13,11 +13,12 @@ import * as d3Base from 'd3'
 const d3 = Object.assign(d3Base)
 
 export default {
-  name: 'FeatureSpace1',
+  name: 'FeatureSpaceDetail',
   data () {
     return {
-      dataFS2: [],
-      dataFS2Trans: [],
+      dataFS: [],
+      dataFSTrans: [],
+      quadrantNumber: 5,
       jsonData: [],
       corrMatrixComb: [],
       corrMatrixCombTotal: [],
@@ -29,8 +30,9 @@ export default {
   methods: {
       initializeNetwork () {   
         
-        var listofNodes = this.dataFS2[0]
-        var dataLoc = JSON.parse(this.dataFS2[3])
+        var quadrantNumberLocal = this.quadrantNumber
+        var listofNodes = this.dataFS[0]
+        var dataLoc = JSON.parse(this.dataFS[quadrantNumberLocal+2])
         var pushEachFinal = []
         var pushEach
         var oldVal
@@ -43,13 +45,13 @@ export default {
         var VIFRemainingLoc = []
         var MIRemainingLoc = []
 
-        this.dataFS2Trans.forEach(function(element, index) {
+        this.dataFSTrans.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])
+          corrMatrixCombLoc.push(Object.values(JSON.parse(round[quadrantNumberLocal*2-1])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[quadrantNumberLocal*3-1]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(round[quadrantNumberLocal*4-1]))[0])
+          MIRemainingLoc.push(JSON.parse(round[quadrantNumberLocal*5-1]))
+          round = JSON.parse(round[quadrantNumberLocal-1])
           oldVal = 0
           newVal = 0
           outcome = 0
@@ -69,11 +71,11 @@ export default {
           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])
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[quadrantNumberLocal*2-1])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[quadrantNumberLocal*3-1]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[quadrantNumberLocal*4-1]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLogE[quadrantNumberLocal*5-1]))
+          roundLogE = JSON.parse(roundLogE[quadrantNumberLocal-1])
           oldVal = 0
           newVal = 0
           outcome = 0
@@ -92,11 +94,11 @@ export default {
           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])
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[quadrantNumberLocal*2-1])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[quadrantNumberLocal*3-1]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[quadrantNumberLocal*4-1]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog2[quadrantNumberLocal*5-1]))
+          roundLog2 = JSON.parse(roundLog2[quadrantNumberLocal-1])
           oldVal = 0
           newVal = 0
           outcome = 0
@@ -115,11 +117,11 @@ export default {
           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])
+          corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[quadrantNumberLocal*2-1])))
+          corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[quadrantNumberLocal*3-1]))[0] * 100)
+          VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[quadrantNumberLocal*4-1]))[0])
+          MIRemainingLoc.push(JSON.parse(roundLog10[quadrantNumberLocal*5-1]))
+          roundLog10 = JSON.parse(roundLog10[quadrantNumberLocal-1])
           oldVal = 0
           newVal = 0
           outcome = 0
@@ -195,13 +197,12 @@ export default {
       graphVizualization () {
         
         var computeNodesVar = this.computeNodes
-
-        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])
-        var VIFVar = JSON.parse(this.dataFS2[19])
-        var MIVar = JSON.parse(this.dataFS2[23])
+        var listofNodes = this.dataFS[0]
+        var corrTarget = JSON.parse(this.dataFS[this.quadrantNumber*2+2])
+        var corrGlob = JSON.parse(this.dataFS[this.quadrantNumber*3+2])
+        var uniqueTarget = JSON.parse(this.dataFS[this.quadrantNumber*4+2])
+        var VIFVar = JSON.parse(this.dataFS[this.quadrantNumber*5+2])
+        var MIVar = JSON.parse(this.dataFS[this.quadrantNumber*6+2])
         MIVar = MIVar.concat(this.MIRemaining)
         var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
 
@@ -288,7 +289,7 @@ export default {
           .domain(d3.ticks([MIMin, MIMax, 10]))
           .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']);
 
-        var svg = d3.select("#FeatureGraph2");
+        var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
 
         var width = 1000;
@@ -301,7 +302,7 @@ export default {
 
         var dispatch = d3.dispatch('layoutend');
 
-        svg = d3.select("#FeatureGraph2").append("svg")
+        svg = d3.select("#FeatureGraph").append("svg")
           .attr("width", width)
           .attr("height", height);
 
@@ -653,15 +654,17 @@ export default {
 
       },
       reset () {
-        var svg = d3.select("#FeatureGraph2");
+        var svg = d3.select("#FeatureGraph");
         svg.selectAll("*").remove();
       },
     },
   mounted () {
-    EventBus.$on('quadTrans2', data => { this.dataFS2Trans = data })
-    EventBus.$on('quad2', data => { this.dataFS2 = data })
-    EventBus.$on('quad2', this.initializeNetwork)
+    EventBus.$on('quadTrans', data => { this.dataFSTrans = data })
+    EventBus.$on('quad', data => { this.dataFS = data })
+    EventBus.$on('quad', this.initializeNetwork)
     EventBus.$on('countNodes1', data => { this.computeNodes = data })
+
+    EventBus.$on('reset', this.reset)
   }
 }
 </script>
diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue
new file mode 100644
index 0000000..298a600
--- /dev/null
+++ b/frontend/src/components/FeatureSpaceOverview.vue
@@ -0,0 +1,1048 @@
+<template>
+<div>
+  <div id="tree-container"></div>
+  <div id="toolbar">
+    <div class="tool">
+      <div class="tlabel">Zoom</div>
+      <div class="tbuttons">
+        <div class="button" data-key="187" title="Zoom In (+ OR scrollwheel)">+</div>
+        <div class="button" data-key="189" title="Zoom Out (&minus; OR scrollwheel)">&minus;</div>
+      </div>
+    </div>
+    <div class="tool">
+      <div class="tlabel">Rotate</div>
+      <div class="tbuttons">
+        <div class="button" data-key="33" title="Rotate CCW (Page Up OR &#8679;scrollwheel)" style="font-size:0.9em">&#8634;</div>
+        <div class="button" data-key="34" title="Rotate CW (Page Down OR &#8679;scrollwheel)" style="font-size:0.9em">&#8635;</div>
+      </div>
+    </div>
+    <div class="tool">
+      <div class="tlabel">Select</div>
+      <div class="tbuttons">
+        <div class="button" data-key="-38" title="Select Previous (&#8679;&uarr;)" style="font-size:0.9em">&#8613;</div>
+        <div class="button" data-key="-40" title="Select Next (&#8679;&darr;)" style="font-size:0.9em">&#8615;</div>
+      </div>
+    </div>
+    <div class="tool">
+      <div class="tlabel">View</div>
+      <div class="tbuttons">
+        <div class="button" data-key="36" title="Center Root (Home)">&#8962;</div>
+        <div class="button" data-key="35" title="Center Selected (End)" style="font-size:0.8em">&#9673;</div>
+      </div>
+    </div>
+    <div class="tool">
+      <div class="tlabel">Toggle</div>
+      <div class="tbuttons">
+        <div class="button" data-key="32" title="Toggle Node (Space OR double-click)">1</div>
+        <div class="button" data-key="13" title="Toggle Level (Return OR &#8679;double-click)">&oplus;</div>
+        <div class="button" data-key="191" title="Toggle Root (/)">/</div>
+      </div>
+    </div>
+    <div class="tool">
+      <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigation</div>
+      <div id="selection" class="tlabel"></div>
+    </div>
+  </div>
+
+  <div id="contextmenu">
+    <div data-key="32"><span class="expcol">Expand</span> Node</div>
+    <div data-key="13">Expand 1 Level</div>
+    <div data-key="-13">Expand Full Tree</div>
+    <div data-key="35">Center This Node</div>
+    <div data-key="36">Center Root</div>
+    <div data-key="191">Set Root</div>
+  </div>
+</div>
+</template>
+
+<script>
+import { EventBus } from '../main.js'
+import * as greadability from '../greadability.js'
+import * as Plotly from 'plotly.js'
+
+export default {
+  name: 'FeatureSpaceOverview',
+  data () {
+    return {
+      dataFS1: [],
+      dataFS1Trans: [],
+      jsonData: [],
+      corrMatrixComb: [],
+      corrMatrixCombTotal: [],
+      VIFRemaining: [],
+      MIRemaining: [],
+      computeNodes: 0
+    }
+  },
+  methods: {
+      initializeRadialTree() {  
+         
+      },
+      reset () {
+        var svg = d3.select("#FeatureTree");
+        svg.selectAll("*").remove();
+      },
+      // Get JSON data
+      radialTree() {
+          
+        var treeData = {
+          "name": "All predictions",
+           "children": [  
+              {"name": "Worst predictions",
+                "children": [  
+                {"name": "Feature 1",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 2",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 3",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 4",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+              ]},
+              {"name": "Best predictions",
+              "children": [  
+                {"name": "Feature 1",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 2",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 3",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 4",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+              ]},
+              {"name": "Good predictions",
+              "children": [  
+                {"name": "Feature 1",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 2",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 3",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 4",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+              ]},
+              {"name": "Bad predictions",
+              "children": [  
+                {"name": "Feature 1",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 2",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 3",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+                {"name": "Feature 4",
+                "children": [  
+                  {"name": "Round"},
+                  {"name": "Round logE"},
+                  {"name": "Round log2"},
+                  {"name": "Round log10"},
+                ]},
+              ]},
+            ]
+        }
+        
+        var DURATION = 700; // d3 animation duration
+        var STAGGERN = 4; // delay for each node
+        var STAGGERD = 200; // delay for each depth
+        var NODE_DIAMETER = 4; // diameter of circular nodes
+        var MIN_ZOOM = 0.5; // minimum zoom allowed
+        var MAX_ZOOM = 10;  // maximum zoom allowed
+        var HAS_CHILDREN_COLOR = 'lightsteelblue';
+        var SELECTED_COLOR = '#a00';  // color of selected node
+        var ZOOM_INC = 0.04;  // zoom factor per animation frame
+        var PAN_INC = 3;  //  pan per animation frame
+        var ROT_INC = 0.3;  // rotation per animation frame
+
+        var counter = 0;  // node ids
+        var curNode;  // currently selected node
+        var curPath;  // array of nodes in the path to the currently selected node
+
+        // size of the diagram
+        var width = 1250;
+        var height = 500;
+
+        // current pan, zoom, and rotation
+        var curX = width / 2;
+        var curY = height / 2;
+        var curZ = 1.0; // current zoom
+        var curR = 270; // current rotation
+
+        // keyboard key codes
+        var KEY_PLUS = 187;     // + (zoom in)
+        var KEY_MINUS = 189;    // - (zoom out)
+        var KEY_SLASH = 191;    // / (slash)
+        var KEY_PAGEUP = 33;    // (rotate CCW)
+        var KEY_PAGEDOWN = 34;  // (rotate CW)
+        var KEY_LEFT = 37;      // left arrow
+        var KEY_UP = 38;        // up arrow
+        var KEY_RIGHT = 39;     // right arrow
+        var KEY_DOWN = 40;      // down arrow
+        var KEY_SPACE = 32;     // (expand node)
+        var KEY_RETURN = 13;    // (expand tree)
+        var KEY_HOME = 36;      // (center root)
+        var KEY_END = 35;       // (center selection)
+
+        // d3 diagonal projection for use by the node paths
+        var diagonal= d3.svg.diagonal.radial()
+          .projection(function(d) {
+              return [d.y, d.x / 180 * Math.PI];
+          });
+
+        // d3 tree layout
+        var tree = d3.layout.tree()
+          // .nodeSize([4.5, 120])
+          .size([360, Math.min(width, height) / 2 - 120])
+          .separation(function(a, b) {
+            return a.depth === 0 ? 1 : (a.parent === b.parent ? 1 : 2) / a.depth;
+        });
+
+        // define the svgBase, attaching a class for styling and the zoomListener
+        var svgBase = d3.select('#tree-container').append('svg')
+          .attr('width', width)
+          .attr('height', height)
+          .on('mousedown', mousedown);
+
+        // Group which holds all nodes and manages pan, zoom, rotate
+        var svgGroup = svgBase.append('g')
+          .attr('transform', 'translate(' + curX + ',' + curY + ')');
+
+        d3.select(document) // set up document events
+          .on('wheel', wheel)  // zoom, rotate
+          .on('keydown', keydown)
+          .on('keyup', keyup);
+        d3.select(window).on('resize', resize);
+        d3.selectAll('.button')
+          .on('mousedown', tooldown)
+          .on('mouseup', toolup);
+        d3.select('#selection').on('mousedown', switchroot);
+        d3.select('#contextmenu').on('mouseup', menuSelection);
+
+        // Define the data root
+        var root = treeData;
+        root.x0 = curY;
+        root.y0 = 0;
+        selectNode(root); // current selected node
+
+        // Collapse all children of root's children before rendering
+        // if (root.children) {
+        //   root.children.forEach(function(child) {
+        //       collapseTree(child);
+        //   });
+        // }
+
+        update(root, true); // Layout the tree initially and center on the root node
+
+        // update the tree
+        // source - source node of the update
+        // transition - whether to do a transition
+        function update(source, transition) {
+
+          var duration = transition ?
+            (d3.event && d3.event.altKey ? DURATION * 4 : DURATION) : 0;
+
+          // Compute the new tree layout.
+          var nodes = tree.nodes(root);
+          var links = tree.links(nodes);
+
+          // Update the view
+          svgGroup.transition().duration(duration)
+            .attr('transform',
+              'rotate(' + curR + ' ' + curX + ' ' + curY +
+              ')translate(' + curX + ' ' + curY +
+              ')scale(' + curZ + ')');
+
+          // Update the nodes…
+          var node = svgGroup.selectAll('g.node')
+            .data(nodes, function(d) {
+              return d.id || (d.id = ++counter);
+            });
+
+          // Enter any new nodes at the parent's previous position
+          var nodeEnter = node.enter().insert('g', ':first-child')
+              .attr('class', 'node')
+              .attr('transform', 'rotate(' + (source.x0 - 90) + ')translate(' + source.y0 + ')')
+              .on('click', click).on('dblclick', dblclick).on('contextmenu', showContextMenu);
+              // .on('mousedown', suppress);
+
+          nodeEnter.append('circle')
+            .attr('r', 1e-6)
+            .style('fill', function(d) {
+              return d._children ? HAS_CHILDREN_COLOR : 'white';
+            });
+
+          nodeEnter.append('text')
+            .text(function(d) {
+              return d.name;
+            })
+            .style('opacity', 0.9)
+            .style('fill-opacity', 0)
+            .attr('transform', function() {
+                return ((source.x0 + curR) % 360 <= 180 ?
+                    'translate(8)scale(' :
+                    'rotate(180)translate(-8)scale('
+                  ) + reduceZ() + ')';
+            });
+
+          // update existing graph nodes
+
+          // Change the circle fill depending on whether it has children and is collapsed
+          node.select('circle')
+            .attr('r', NODE_DIAMETER * reduceZ())
+            .style('fill', function(d) {
+                return d._children ? HAS_CHILDREN_COLOR : 'white';
+            }).attr('stroke', function(d) {
+                return d.selected ? SELECTED_COLOR : 'steelblue';
+            }).attr('stroke-width', function(d) {
+                return d.selected ? 3 : 1.5;
+            });
+
+          node.select('text')
+            .attr('text-anchor', function(d) {
+                return (d.x + curR) % 360 <= 180 ? 'start' : 'end';
+            }).attr('transform', function(d) {
+                return ((d.x + curR) % 360 <= 180 ?
+                    'translate(8)scale(' :
+                    'rotate(180)translate(-8)scale('
+                  ) + reduceZ() +')';
+            }).attr('fill', function(d) {
+                return d.selected ? SELECTED_COLOR : 'black';
+            }).attr('dy', '.35em');
+
+          var nodeUpdate = node.transition().duration(duration)
+            .delay( transition ? function(d, i) {
+                return i * STAGGERN +
+                  Math.abs(d.depth - curNode.depth) * STAGGERD; }  : 0)
+            .attr('transform', function(d) {
+                return 'rotate(' + (d.x - 90) + ')translate(' + d.y + ')';
+            });
+
+          nodeUpdate.select('circle')
+            .attr('r', NODE_DIAMETER * reduceZ());
+            // .style('fill', function(d) {
+            //   return d._children ? HAS_CHILDREN_COLOR : 'white';
+            // });
+
+          nodeUpdate.select('text')
+            .style('fill-opacity', 1);
+
+          // Transition exiting nodes to the parent's new position and remove
+          var nodeExit = node.exit().transition().duration(duration)
+            .delay( transition ? function(d, i) {
+                return i * STAGGERN; } : 0)
+            .attr('transform', function() {
+              return 'rotate(' + (source.x - 90) +')translate(' + source.y + ')';
+          }).remove();
+
+          nodeExit.select('circle').attr('r', 0);
+          nodeExit.select('text').style('fill-opacity', 0);
+
+          // Update the links…
+          var link = svgGroup.selectAll('path.link')
+            .data(links, function(d) {
+              return d.target.id;
+            });
+
+          // Enter any new links at the parent's previous position
+          link.enter().insert('path', 'g')
+              .attr('class', 'link')
+              .attr('d', function() {
+              var o = {
+                  x: source.x0,
+                  y: source.y0
+              };
+              return diagonal({
+                  source: o,
+                  target: o
+              });
+          });
+
+          // Transition links to their new position
+          link.transition().duration(duration)
+            .delay( transition ? function(d, i) {
+                return i * STAGGERN +
+                  Math.abs(d.source.depth - curNode.depth) * STAGGERD;
+                  // Math.max(0, d.source.depth - curNode.depth) * STAGGERD;
+                } : 0)
+            .attr('d', diagonal);
+
+          // Transition exiting nodes to the parent's new position
+          link.exit().transition().duration(duration)
+              .attr('d', function() {
+                var o = {
+                  x: source.x0,
+                  y: source.y0
+                };
+                return diagonal({
+                  source: o,
+                  target: o
+                });
+            }).remove();
+
+          // Stash the old positions for transition
+          nodes.forEach(function(d) {
+            d.x0 = d.x;
+            d.y0 = d.y;
+          });
+        } // end update
+
+        // Helper functions for collapsing and expanding nodes
+
+        // Toggle expand / collapse
+        function toggle(d) {
+          if (d.children) {
+            d._children = d.children;
+            d.children = null;
+          } else if (d._children) {
+            d.children = d._children;
+            d._children = null;
+          }
+        }
+
+        function toggleTree(d) {
+          if (d.children) {
+            collapseTree(d);
+          } else {
+            expandTree(d);
+          }
+        }
+
+        function expand(d) {
+          if (d._children) {
+            d.children = d._children;
+            d._children = null;
+          }
+        }
+
+        // expand all children, whether expanded or collapsed
+        function expandTree(d) {
+          if (d._children) {
+            d.children = d._children;
+            d._children = null;
+          }
+          if (d.children) {
+            d.children.forEach(expandTree);
+          }
+        }
+
+        function collapse(d) {
+          if (d.children) {
+            d._children = d.children;
+            d.children = null;
+          }
+        }
+
+        // collapse all children
+        function collapseTree(d) {
+          if (d.children) {
+            d._children = d.children;
+            d.children = null;
+          }
+          if (d._children) {
+            d._children.forEach(collapseTree);
+          }
+        }
+
+        // expand one level of tree
+        function expand1Level(d) {
+          var q = [d]; // non-recursive
+          var cn;
+          var done = null;
+          while (q.length > 0) {
+            cn = q.shift();
+            if (done !== null && done < cn.depth) { return; }
+            if (cn._children) {
+              done = cn.depth;
+              cn.children = cn._children;
+              cn._children = null;
+              cn.children.forEach(collapse);
+            }
+            if (cn.children) { q = q.concat(cn.children); }
+          }
+          // no nodes to open
+        }
+
+        // highlight selected node
+        function selectNode(node) {
+          if (curNode) {
+            delete curNode.selected;
+          }
+          curNode = node;
+          curNode.selected = true;
+          curPath = []; // filled in by fullpath
+          d3.select('#selection').html(fullpath(node));
+        }
+
+        // for displaying full path of node in tree
+        function fullpath(d, idx) {
+          idx = idx || 0;
+          curPath.push(d);
+          return (d.parent ? fullpath(d.parent, curPath.length) : '') +
+            '/<span class="nodepath'+(d.name === root.name ? ' highlight' : '')+
+            '" data-sel="'+ idx +'" title="Set Root to '+ d.name +'">' +
+            d.name + '</span>';
+        }
+
+        // d3 event handlers
+
+        function switchroot() {
+          d3.event.preventDefault();
+          var pathelms = document.querySelectorAll('#selection .nodepath');
+          for (var i = 0; i < pathelms.length; i++) {
+            pathelms[i].classList.remove('highlight');
+          }
+          var target = d3.event.target;
+          var node = curPath[+target.dataset.sel];
+          if (d3.event.shiftKey) {
+            if (curNode !== node) {
+              selectNode(node);
+            }
+          } else {
+            root = node;
+            target.classList.add('highlight');
+          }
+          update(root, true);
+        }
+
+        function resize() { // window resize
+          var oldwidth = width;
+          var oldheight = height;
+          width = window.innerWidth - 20;
+          height = window.innerHeight - 20;
+          tree.size([360, Math.min(width, height) / 2 - 120]);
+          svgBase.attr('width', width).attr('height', height);
+          curX += (width - oldwidth) / 2;
+          curY += (height - oldheight) / 2;
+          svgGroup.attr('transform', 'rotate(' + curR + ' ' + curX + ' ' + curY +
+              ')translate(' + curX + ' ' + curY + ')scale(' + curZ + ')');
+          update(root);
+        }
+
+        function click(d) { // select node
+          if (d3.event.defaultPrevented || d === curNode) { return; } // suppressed
+          d3.event.preventDefault();
+          selectNode(d);
+          update(d);
+        }
+
+        function dblclick(d) {  // Toggle children of node
+          if (d3.event.defaultPrevented) { return; } // click suppressed
+          d3.event.preventDefault();
+          if (d3.event.shiftKey) {
+            expand1Level(d); // expand node by one level
+          } else {
+            toggle(d);
+          }
+          update(d, true);
+        }
+
+        function tooldown(d) {  // tool button pressed
+          d3.event.preventDefault();
+          d3.select(d3.event.target).on('mouseout', toolup);
+          var key = +d3.event.target.dataset.key;
+          keydown(Math.abs(key), key < 0 || d3.event.shiftKey);
+        }
+
+        function toolup() {  // tool button released
+          d3.event.preventDefault();
+          d3.select(d3.event.target).on('mouseout', null);
+          keyup(Math.abs(+d3.event.target.dataset.key));
+        }
+
+        // right click, show context menu and select this node
+        function showContextMenu(d) {
+          d3.event.preventDefault();
+          d3.selectAll('.expcol').text(d.children ? 'Collapse' : 'Expand');
+          d3.select('#contextmenu').style({
+            left: (d3.event.pageX + 3) + 'px',
+            top: (d3.event.pageY + 8) + 'px',
+            display: 'block'
+          });
+          d3.select(document).on('mouseup', hideContextMenu);
+          selectNode(d);
+          update(d);
+        }
+
+        function hideContextMenu() {
+          d3.select('#contextmenu').style('display', 'none');
+          d3.select(document).on('mouseup', null);
+        }
+
+        function menuSelection() {
+          d3.event.preventDefault();
+          var key = +d3.event.target.dataset.key;
+          keydown(Math.abs(key), key < 0 || d3.event.shiftKey);
+        }
+
+        var startposX, startposY; // initial position on mouse button down for pan
+
+        function mousedown() {  // pan
+          d3.event.preventDefault();
+          if (d3.event.which !== 1 || d3.event.ctrlKey) { return; } // ingore other mouse buttons
+          startposX = curX - d3.event.clientX;
+          startposY = curY - d3.event.clientY;
+          d3.select(document).on('mousemove', mousemove, true);
+          d3.select(document).on('mouseup', mouseup, true);
+        }
+
+        function mousemove() {
+          d3.event.preventDefault();
+          curX = startposX + d3.event.clientX;
+          curY = startposY + d3.event.clientY;
+          setview();
+        }
+
+        function mouseup() {
+          d3.select(document).on('mousemove', null);
+          d3.select(document).on('mouseup', null);
+        }
+
+        var keysdown = [];  // which keys are currently down
+        var moveX = 0, moveY = 0, moveZ = 0, moveR = 0; // animations
+        var aniRequest = null;
+
+        function wheel() {  // mousewheel
+          var dz, newZ;
+          var slow = d3.event.altKey ? 0.25 : 1;
+          if (d3.event.wheelDeltaY !== 0) {  // up-down
+            dz = Math.pow(1.2, d3.event.wheelDeltaY * 0.001 * slow);
+            newZ = limitZ(curZ * dz);
+            dz = newZ / curZ;
+            curZ = newZ;
+
+            curX -= (d3.event.clientX - curX) * (dz - 1);
+            curY -= (d3.event.clientY - curY) * (dz - 1);
+            setview();
+          }
+          if (d3.event.wheelDeltaX !== 0) {  // left-right
+            curR = limitR(curR + d3.event.wheelDeltaX * 0.01 * slow);
+            update(root);
+          }
+        }
+
+        // keyboard shortcuts
+        function keydown(key, shift) {
+          if (!key) {
+            key = d3.event.which;  // fake key
+            shift = d3.event.shiftKey;
+          }
+          var parch; // parent's children
+          var slow = d3.event.altKey ? 0.25 : 1;
+          if (keysdown.indexOf(key) >= 0) { return; } // defeat auto repeat
+          switch (key) {
+            case KEY_PLUS: // zoom in
+              moveZ = ZOOM_INC * slow;
+              break;
+            case KEY_MINUS: // zoom out
+              moveZ = -ZOOM_INC * slow;
+              break;
+            case KEY_SLASH: // toggle root to selection
+              root = root === curNode ? treeData : curNode;
+              update(root, true);
+              curPath = []; // filled in by fullpath
+              d3.select('#selection').html(fullpath(curNode));
+              return;
+            case KEY_PAGEUP: // rotate counterclockwise
+              moveR = -ROT_INC * slow;
+              break;
+            case KEY_PAGEDOWN: // zoom out
+              moveR = ROT_INC * slow; // rotate clockwise
+              break;
+            case KEY_LEFT: // left arrow
+              if (shift) { // move selection to parent
+                if (!curNode) {
+                  selectNode(root);
+                } else if (curNode.parent) {
+                  selectNode(curNode.parent);
+                }
+                update(curNode);
+                return;
+              }
+              moveX = -PAN_INC * slow;
+              break;
+            case KEY_UP: // up arrow
+              if (shift) { // move selection to previous child
+                if (!curNode) {
+                  selectNode(root);
+                } else if (curNode.parent) {
+                  parch = curNode.parent.children;
+                  selectNode(parch[(parch.indexOf(curNode) +
+                      parch.length - 1) % parch.length]);
+                }
+                update(curNode);
+                return;
+              }
+              moveY = -PAN_INC * slow;
+              break;
+            case KEY_RIGHT: // right arrow
+              if (shift) { // move selection to first/last child
+                if (!curNode) {
+                  selectNode(root);
+                } else {
+                  if (curNode.children) {
+                    selectNode(curNode.children[d3.event.altKey ?
+                        curNode.children.length - 1 : 0]);
+                  }
+                }
+                update(curNode);
+                return;
+              }
+              moveX = PAN_INC * slow;
+              break;
+            case KEY_DOWN: // down arrow
+              if (shift) { // move selection to next child
+                if (!curNode) {
+                  selectNode(root);
+                } else if (curNode.parent) {
+                  parch = curNode.parent.children;
+                  selectNode(parch[(parch.indexOf(curNode) + 1) % parch.length]);
+                }
+                update(curNode);
+                return;
+              }
+              moveY = PAN_INC * slow;
+              break;
+            case KEY_SPACE: // expand/collapse node
+              if (!curNode) {
+                selectNode(root);
+              }
+              toggle(curNode);
+              update(curNode, true);
+              return;
+            case KEY_RETURN: // expand/collapse tree
+              if (!curNode) {
+                selectNode(root);
+              }
+              if (shift) {
+                expandTree(curNode);
+              } else {
+                expand1Level(curNode);
+              }
+              update(curNode, true);
+              return;
+            case KEY_HOME: // reset transform
+              if (shift) {
+                root = treeData;
+              }
+              curX = width / 2;
+              curY = height / 2;
+              curR = limitR(90 - root.x);
+              curZ = 1;
+              update(root, true);
+              return;
+            case KEY_END: // zoom to selection
+              if (!curNode) { return; }
+              curX = width / 2 - curNode.y * curZ;
+              curY = height / 2;
+              curR = limitR(90 - curNode.x);
+              update(curNode, true);
+              return;
+            default: return;  // ignore other keys
+          } // break jumps to here
+          keysdown.push(key);
+          // start animation if anything happening
+          if (keysdown.length > 0 && aniRequest === null) {
+            aniRequest = requestAnimationFrame(frame);
+          }
+        }
+
+        function keyup(key) {
+          key = key || d3.event.which;
+          var pos = keysdown.indexOf(key);
+          if (pos < 0) { return; }
+
+          switch (key) {
+            case KEY_PLUS: // zoom out
+            case KEY_MINUS: // zoom in
+              moveZ = 0;
+              break;
+            case KEY_PAGEUP: // rotate CCW
+            case KEY_PAGEDOWN: // rotate CW
+              moveR = 0;
+              break;
+            case KEY_LEFT: // left arrow
+            case KEY_RIGHT: // right arrow
+              moveX = 0;
+              break;
+            case KEY_UP: // up arrow
+            case KEY_DOWN: // down arrow
+              moveY = 0;
+              break;
+          }
+          keysdown.splice(pos, 1);  // remove key
+          if (keysdown.length > 0 || aniRequest === null) { return; }
+          cancelAnimationFrame(aniRequest);
+          aniRequest = aniTime = null;
+        }
+
+        var aniTime = null;
+
+        // update animation frame
+        function frame(frametime) {
+          var diff = aniTime ? (frametime - aniTime) / 16 : 0;
+          aniTime = frametime;
+
+          var dz = Math.pow(1.2, diff * moveZ);
+          var newZ = limitZ(curZ * dz);
+          dz = newZ / curZ;
+          curZ = newZ;
+          curX += diff * moveX - (width / 2- curX) * (dz - 1);
+          curY += diff * moveY - (height / 2 - curY) * (dz - 1);
+          curR = limitR(curR + diff * moveR);
+          setview();
+          aniRequest = requestAnimationFrame(frame);
+        }
+
+        // enforce zoom extent
+        function limitZ(z) {
+          return Math.max(Math.min(z, MAX_ZOOM), MIN_ZOOM);
+        }
+
+        // keep rotation between 0 and 360
+        function limitR(r) {
+          return (r + 360) % 360;
+        }
+
+        // limit size of text and nodes as scale increases
+        function reduceZ() {
+          return Math.pow(1.1, -curZ);
+        }
+
+        // set view with no animation
+        function setview() {
+            svgGroup.attr('transform', 'rotate(' + curR + ' ' + curX + ' ' + curY +
+                ')translate(' + curX + ' ' + curY + ')scale(' + curZ + ')');
+            svgGroup.selectAll('text')
+                .attr('text-anchor', function(d) {
+                    return (d.x + curR) % 360 <= 180 ? 'start' : 'end';
+                })
+                .attr('transform', function(d) {
+                    return ((d.x + curR) % 360 <= 180 ?
+                        'translate(8)scale(' :
+                        'rotate(180)translate(-8)scale('
+                      ) + reduceZ() +')';
+                });
+            svgGroup.selectAll('circle').attr('r', NODE_DIAMETER * reduceZ());
+        }
+      }
+    },
+  mounted () {
+    this.radialTree()
+    EventBus.$on('reset', this.reset)
+  }
+}
+</script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+#toolbar {
+  display: -webkit-box;
+  display: moz-box-flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  flex-wrap: wrap;
+  top: 10px;
+  margin-top: 25px;
+  left: 10px;
+  font-family: sans-serif;
+  box-shadow: 1px 1px 3px;
+  background-color: #ECEFF1;
+}
+.tool {
+  display: flex;
+  flex-direction: column;
+  border: solid black 1px;
+  padding: 1px;
+}
+.tlabel {
+  text-align: center;
+  padding: 3px 2px 1px 2px;
+}
+.tbuttons {
+  display: flex;
+  display: -webkit-box;
+  display: moz-box-flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+.button {
+  border: outset gray 2px;
+	border-radius: 4px;
+	cursor: pointer;
+  padding: 1px 3px;
+  min-width: 12px;
+  text-align: center;
+  margin: 2px;
+  font-family: "Courier New", Courier, monospace;
+  background-color: white;
+}
+.button:hover {
+  background-color: yellow;
+}
+.button:active {
+  border: inset gray 2px;
+}
+#selection {
+  margin: 2px 5px;
+  vertical-align: middle;
+  font-family: "Courier New", Courier, monospace;
+  color: black;
+  background-color: white;
+}
+#selection span.nodepath:hover {
+  background-color: rgba(0, 0, 25, 0.1);
+  cursor: pointer;
+}
+#selection span.nodepath.highlight {
+  font-weight: bold;
+}
+#contextmenu {
+  display: none;
+  position: absolute;
+  border: solid black 1px;
+  box-shadow: 2px 2px 3px gray;
+  padding: 2px;
+  background-color: white;
+  font-family: Roboto, Helvetica, sans-serif;
+  font-size: 0.9em;
+}
+#contextmenu div {
+  padding: 4px 10px;
+  cursor: pointer;
+}
+#contextmenu div:hover {
+  background-color: rgba(0, 0, 25, 0.1);
+}
+#contextmenu span.expcol {
+  pointer-events: none;
+}
+#help {
+  position: relative;
+  bottom: -1.8em;
+  transform: rotate(270deg);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  width: 1.2em;
+}
+#help a {
+  color: black;
+  text-decoration: none;
+  background-color: white;
+}
+#help:hover a {
+  background-color: yellow;
+}
+
+#tree-container, svg {
+  overflow: hidden;
+}
+.node {
+  cursor: pointer;
+}
+.node circle {
+  fill: #fff;
+}
+.node text {
+  font-size: 12px;
+  font-family: Roboto, sans-serif;
+  text-shadow: 4px 4px 3px white, -4px -4px 3px white;
+}
+.node text:hover {
+  font-size: 1.2em;
+  transition: font-size 0.1s;
+}
+.node text:not(:hover) {
+  transition: font-size 1s;
+  transition-delay: 0.5s;
+}
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Heatmap.vue b/frontend/src/components/Heatmap.vue
new file mode 100644
index 0000000..9010d88
--- /dev/null
+++ b/frontend/src/components/Heatmap.vue
@@ -0,0 +1,595 @@
+<template>
+  <div>
+    <div id="Heatmap"></div>
+    <div id="LegendHeat" style="margin-left: 280px"></div>
+  </div>
+</template>
+
+<script>
+import * as d3Base from 'd3'
+import { EventBus } from '../main.js'
+import $ from 'jquery'
+import * as colorbr from 'colorbrewer'
+
+// attach all d3 plugins to the d3 library
+const d3 = Object.assign(d3Base)
+const colorbrewer = Object.assign(colorbr)
+
+export default {
+  name: "Heatmap",
+  data () {
+    return {
+      GetResultsAll: '',
+      Toggles: '',
+      limitation: 0,
+      flag: false,
+      classesNumber: 10,
+      cellSize: 20,
+      ModelsIDHeatStack: [],
+      highlighted: [],
+      responsiveWidthHeight: [],
+      FeaturesAccuracyStore: [],
+      FeaturesStore: [],
+      PermImpEliStore: [],
+      featureUniStore: [],
+      modelIdsStore: [],
+      keyLocal: 0,
+      activeModels: 0,
+      flagLocal: false,
+      smallScreenMode: '0px'
+    }
+  },
+  methods: {
+    Refresh () {
+        if (this.flagLocal) {
+            var tempFeatures = this.FeaturesStore.slice(this.activeModels,this.activeModels+1)[0]
+            var tempFeaturesTable = []
+            var FeatureTemp = []
+            var tempModelIds = this.modelIdsStore.slice(this.activeModels,this.activeModels+1)[0]
+            for (let i = 0; i < tempFeatures.length; i++) {
+                tempFeaturesTable.push(i)
+            }
+            for (let i = 0; i < tempModelIds.length; i++) {
+                FeatureTemp.push(tempFeaturesTable)
+            }
+            EventBus.$emit('SendSelectedFeaturesEvent', FeatureTemp)
+        }
+    },
+    reset () {
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
+      var svgLeg = d3.select("#LegendHeat");
+      svgLeg.selectAll("*").remove();
+    },
+    Heatmap () {
+      // Clear Heatmap first
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
+
+      var dataAll = {"columns":[["R","F1"],["R","F2"],["R","F2"],["R","F1&F2"],["R","F2&F3"],["R","F1&F3"],["R","F1&F2&F3"],["R","F1+F2"],["R","F2+F3"],["R","F1+F3"],["R","F1+F2+F3"],["R","F1-F2"],["R","F2-F3"],["R","F1-F3"],["R","F1-F2-F3"],["R","F1*F2"],["R","F2*F3"],["R","F1*F3"],["R","F1*F2*F3"],["R","F1/F2"],["R","F2/F3"],["R","F1/F3"],["R","F1/F2/F3"]],"index":[["Information Gain"],["Fisher-Score"],["Relative Risk"],["Odds Ratio"]],"data":[[0.1178,0.4834,0.1647,0.1633,0.3355,0.1353,0.0556,0.9388,0.9354,0.8548,0.7037,0.6092,0.3835,0.7285,0.6405,0.424,0.6935,0.5766,0.2275,0.8309,0.972,0.9439,0.9366],[0.0372,-0.09,0.5015,0.5663,0.5126,-0.0274,0.4304,0.9518,0.9499,0.9216,-0.0278,0.6516,0.3019,-0.0936,0.6597,0.2323,-0.0833,0.4921,0.122,0.9275,0.96095,0.955,0.9501],[0.378,0.5514,0.378,0.3929,0.3271,0.3816,0.3647,0.9303,0.9372,0.8356,0.5314,0.4069,0.4288,0.5496,0.4156,0.427,0.5299,0.3454,0.4511,0.88235,0.9705,0.9468,0.9405],[0.4988,0.4149,0.5952,0.0628,-0.1015,0.497,0.58,0.9531,0.9572,0.8494,0.6262,0.3854,0.6904,0.5711,0.346,0.5132,0.583,0.3917,0.5305,0.7074,0.9763,0.9632,0.9582]]}
+      this.heatmap_display(dataAll, "#Heatmap");
+
+    },
+    heatmap_display(data, heatmapId) {
+    var cellSize = this.cellSize
+    //##########################################################################
+    // Patrick.Brockmann@lsce.ipsl.fr
+    //##########################################################################
+    
+    //==================================================
+    // References
+    // http://bl.ocks.org/Soylent/bbff6cc507dca2f48792
+    // http://bost.ocks.org/mike/selection/
+    // http://bost.ocks.org/mike/join/
+    // http://stackoverflow.com/questions/9481497/understanding-how-d3-js-binds-data-to-nodes
+    // http://bost.ocks.org/mike/miserables/
+    // http://bl.ocks.org/ianyfchang/8119685
+
+    //==================================================
+    var tooltip = d3.select(heatmapId)
+        .append("div")
+        .style("position", "absolute")
+        .style("visibility", "hidden");
+    // define the zoomListener which calls the zoom function on the "zoom" event constrained within the scaleExtents
+    const zoom = d3.zoom()
+                        .scaleExtent([0.1, 3]) //zoom limit
+                        .on('zoom', () => {
+                            svg.attr('transform', d3.event.transform) // updated for d3 v4
+                        })
+
+    //==================================================
+    
+
+
+    var viewerWidth = 1250
+    var viewerHeight = 180
+    var widthHeatmap = 1250
+
+    var viewerPosTop = viewerHeight * 0.05;
+    var viewerPosTopHeat = viewerHeight * 0.15;
+    var viewerPosLeft = viewerWidth*0.1;
+
+    var legendElementWidth = cellSize * 3;
+
+    // http://bl.ocks.org/mbostock/5577023
+    var colors = colorbrewer.RdYlGn[this.classesNumber];
+
+    // http://bl.ocks.org/mbostock/3680999
+    var svg;
+
+    //==================================================
+      var arr = data.data;
+      var row_number = arr.length;
+      var col_number = arr[0].length;
+
+      var colorScale = d3.scaleQuantize()
+          .domain([0.0, 1.0])
+          .range(colors);
+
+      svg = d3.select(heatmapId).append("svg")
+          .attr("width", viewerWidth)
+          .attr("height", viewerHeight)
+          .call(zoom)
+            //.call(zoom.transform, d3.zoomIdentity.translate(200, 20).scale(0.25)) //initial size
+            .append('svg:g')
+            .attr("transform", "translate(" + viewerPosLeft + "," + viewerPosTopHeat + ")");
+
+      svg.append('defs')
+          .append('pattern')
+          .attr('id', 'diagonalHatch')
+          .attr('patternUnits', 'userSpaceOnUse')
+          .attr('width', 4)
+          .attr('height', 4)
+          .append('path')
+          .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
+          .attr('stroke', '#000000')
+          .attr('stroke-width', 1);
+
+      var rowSortOrder = false;
+      var colSortOrder = false;
+ 
+      var rowLabels = svg.append("g")
+          .attr("class", "rowLabels")
+          .selectAll(".rowLabel")
+          .data(data.index)
+          .enter().append("text")
+          .text(function(d) {
+              return d.count > 1 ? d.join("/") : d;
+          })
+          .attr("x", 0)
+          .attr("y", function(d, i) {
+              return (i * cellSize);
+          })
+          .style("text-anchor", "end")
+          .attr("transform", function(d, i) {
+              return "translate(-3," + cellSize / 1.5 + ")";
+          })
+          .attr("class", "rowLabel mono")
+          .attr("id", function(d, i) {
+              return "rowLabel_" + i;
+          })
+          .on('mouseover', function(d, i) {
+              d3.select('#rowLabel_' + i).classed("hover", true);
+          })
+          .on('mouseout', function(d, i) {
+              d3.select('#rowLabel_' + i).classed("hover", false);
+          })
+          .on("click", function(d, i) {
+              rowSortOrder = !rowSortOrder;
+              sortByValues("r", i, rowSortOrder);
+              d3.select("#order").property("selectedIndex", 0);
+              //$("#order").jqxComboBox({selectedIndex: 0});
+          });
+
+      var colLabels = svg.append("g")
+          .attr("class", "colLabels")
+          .selectAll(".colLabel")
+          .data(data.columns)
+          .enter().append("text")
+          .text(function(d) {
+              d.shift();
+              return d.count > 1 ? d.reverse().join("/") : d.reverse();
+          })
+          .attr("x", 0)
+          .attr("y", function(d, i) {
+              return (i * cellSize);
+          })
+          .style("text-anchor", "left")
+          .style('font-weight',function(d,i){
+              /*if (d[0] === "Average") {
+                return "bold"
+              }*/
+          })
+          .attr("transform", function(d, i) {
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+          })
+          .attr("class", "colLabel mono")
+          .attr("id", function(d, i) {
+              return "colLabel_" + i;
+          })
+          .on('mouseover', function(d, i) {
+              d3.select('#colLabel_' + i).classed("hover", true);
+          })
+          .on('mouseout', function(d, i) {
+              d3.select('#colLabel_' + i).classed("hover", false);
+          })
+          .on("click", function(d, i) {
+              colSortOrder = !colSortOrder;
+              sortByValues("c", i, colSortOrder);
+              d3.select("#order").property("selectedIndex", 0);
+          });
+
+      var row = svg.selectAll(".row")
+          .data(data.data)
+          .enter().append("g")
+          .attr("id", function(d) {
+            return d.idx;
+          })
+          .attr("class", "row");
+          svg.append("text").attr("x", 150).attr("y", -40).text("Feature combination").style("font-size", "16px").attr("alignment-baseline","top")
+          svg.append("text").attr("transform", "rotate(-90)").attr("x", -42).attr("y", -90).style("text-anchor", "middle").style("font-size", "16px").text("Algorithm"); // -130 before for HeartC
+          var heatMap = row.selectAll(".cell")
+          .data(function(d) {
+              return d;
+          })
+          .enter().append("svg:rect")
+          .attr("id", function(d, i, j){
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              return k.toString()+i.toString();
+          })
+          .attr("x", function(d, i) {
+              return i * cellSize;
+          })
+          .attr("y", function(d, i, j) {
+            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              return k * cellSize;
+          })
+          .attr("rx", 4)
+          .attr("ry", 4)
+          .attr("class", function(d, i, j) {
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              return "cell bordered cr" + k + " cc" + i;
+          })
+          .attr("row", function(d, i, j) {
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              return k;
+          })
+          .attr("col", function(d, i, j) {
+              return i;
+          })
+          .attr("width", cellSize)
+          .attr("height", cellSize)
+          .style("fill", function(d) {
+              if (d != null) return colorScale(d);
+              else return "url(#diagonalHatch)";
+          })
+          .on('mouseover', function(d, i, j) {
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              d3.select('#colLabel_' + i).classed("hover", true);
+              d3.select('#rowLabel_' + k).classed("hover", true);
+              if (d != null) {
+                  tooltip.style("visibility", "visible");
+                  tooltip.html('<div class="heatmap_tooltip">' + d.toFixed(2) + '</div>');
+              } else
+                  tooltip.style("visibility", "hidden");
+          })
+          .on('mouseout', function(d, i, j) {
+              var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+              d3.select('#colLabel_' + i).classed("hover", false);
+              d3.select('#rowLabel_' + k).classed("hover", false);
+              tooltip.style("visibility", "hidden");
+          })
+          .on("mousemove", function(d, i) {
+              tooltip.style("top", (d3.mouse(this)[1] + 55) + "px").style("left", (d3.mouse(this)[0]) + "px");
+          })
+          .on('click', function(d, i, j) {
+            var rowsExtracted = svg.selectAll(".row")._groups[0]
+            var k = Array.prototype.indexOf.call(j[i].parentNode.parentNode.childNodes,j[i].parentNode) - 3;
+            d3.select(this).style("fill", function(d) {
+            if (d3.select(this).style("fill") === "url(\"#diagonalHatch\")"){
+                return colorScale(d)
+            } else {
+                return "url(#diagonalHatch)"
+            }
+            })
+            if (i+1 === j.length) {
+                if(d3.select(this).style("fill") === "url(\"#diagonalHatch\")") {
+                    row.selectAll(".cr"+k).style("fill", "url(#diagonalHatch)")
+                } else {
+                    row.selectAll(".cr"+k).style("fill", function(d) {
+                        return colorScale(d)
+                    })
+                }
+            }
+            var finalresults = []
+            for (let i = 0; i < rowsExtracted[0].childNodes.length - 1; i++) {
+                var results = []
+                for (let j = 0; j < rowsExtracted.length; j++) {
+                    if (rowsExtracted[j].childNodes[i].style.fill === "url(\"#diagonalHatch\")") {
+                    } else {
+                        results.push(j)
+                    }
+                }
+                finalresults.push(results)
+            }
+            EventBus.$emit('flagLocal', true)
+            EventBus.$emit('sendSelectedFeaturestoPickle', finalresults)
+            EventBus.$emit('SendSelectedFeaturesEvent', finalresults)
+          });
+
+      var svgLeg = d3.select("#LegendHeat");
+      svgLeg.selectAll("*").remove();
+        
+      var svgLeg = d3.select("#LegendHeat").append("svg")
+        .attr("width", widthHeatmap)
+        .attr("height", viewerHeight*0.3)
+
+      var legend = svgLeg.append('g')
+          .attr("class", "legend")
+          .attr("transform", "translate(0,0)")
+          .selectAll(".legendElement")
+          .data([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9])
+          .enter().append("g")
+          .attr("class", "legendElement");
+
+      legend.append("svg:rect")
+          .attr("x", function(d, i) {
+              return legendElementWidth * i;
+          })
+          .attr("y", viewerPosTop)
+          .attr("class", "cellLegend bordered")
+          .attr("width", legendElementWidth)
+          .attr("height", cellSize / 2)
+          .style("fill", function(d, i) {
+              return colors[i];
+          });
+
+      legend.append("text")
+          .attr("class", "mono legendElement")
+          .text(function(d) {
+              return "≥" + Math.round(d * 100) / 100;
+          })
+          .attr("x", function(d, i) {
+              return legendElementWidth * i;
+          })
+          .attr("y", viewerPosTop + cellSize);
+
+      svgLeg.append("text").attr("x", 200).attr("y", 50).text("Normalized feature importance").style("font-size", "16px").attr("alignment-baseline","top")
+
+      //==================================================
+      // Change ordering of cells
+      function sortByValues(rORc, i, sortOrder) {
+          var t = svg.transition().duration(1000);
+          var values = [];
+          var sorted;
+          d3.selectAll(".c" + rORc + i)
+              .filter(function(d) {
+                  if (d != null) values.push(d);
+                  else values.push(-999); // to handle NaN
+              });
+          if (rORc == "r") { // sort on cols
+              sorted = d3.range(col_number).sort(function(a, b) {
+                  if (sortOrder) {
+                      return values[b] - values[a];
+                  } else {
+                      return values[a] - values[b];
+                  }
+              });
+              t.selectAll(".cell")
+                  .attr("x", function(d) {
+                      var col = parseInt(d3.select(this).attr("col"));
+                      return sorted.indexOf(col) * cellSize;
+                  });
+              t.selectAll(".colLabel")
+                  .attr("y", function(d, i) {
+                      return sorted.indexOf(i) * cellSize;
+                  })
+                  .attr("transform", function(d, i) {
+                      return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (sorted.indexOf(i) * cellSize) + ")";
+                  });
+          } else { // sort on rows
+              sorted = d3.range(row_number).sort(function(a, b) {
+                  if (sortOrder) {
+                      return values[b] - values[a];
+                  } else {
+                      return values[a] - values[b];
+                  }
+              });
+              t.selectAll(".cell")
+                  .attr("y", function(d) {
+                      var row = parseInt(d3.select(this).attr("row"));
+                      return sorted.indexOf(row) * cellSize;
+                  });
+              t.selectAll(".rowLabel")
+                  .attr("y", function(d, i) {
+                      return sorted.indexOf(i) * cellSize;
+                  })
+                  .attr("transform", function(d, i) {
+                      return "translate(-3," + cellSize / 1.5 + ")";
+                  });
+              }
+          }
+
+          //==================================================
+          d3.select("#order").on("change", function() {
+            var newOrder = d3.select("#order").property("value");	
+            this.changeOrder(newOrder, heatmapId);
+          });
+
+          //==================================================
+          d3.select("#palette")
+            .on("keyup", function() {
+              var newPalette = d3.select("#palette").property("value");
+              if (newPalette != null)						// when interfaced with jQwidget, the ComboBox handles keyup event but value is then not available ?
+                this.changePalette(newPalette, heatmapId);
+            })
+            .on("change", function() {
+            var newPalette = d3.select("#palette").property("value");
+              this.changePalette(newPalette, heatmapId);
+            });
+
+        //==================================================
+    },
+    changeOrder(newOrder, heatmapId) {
+  var svg = d3.select(heatmapId);
+  var cellSize = this.cellSize
+  var t = svg.transition().duration(1000);
+  if (newOrder == "sortinit_col") { // initial sort on cols (alphabetically if produced like this)
+      t.selectAll(".cell")
+          .attr("x", function(d) {
+              var col = parseInt(d3.select(this).attr("col"));
+              return col * cellSize;
+          });
+      t.selectAll(".colLabel")
+          .attr("y", function(d, i) {
+              return i * cellSize;
+          })
+          .attr("transform", function(d, i) {
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+          });
+  } else if (newOrder == "sortinit_row") { // initial sort on rows (alphabetically if produced like this)
+      t.selectAll(".cell")
+          .attr("y", function(d) {
+              var row = parseInt(d3.select(this).attr("row"));
+              return row * cellSize;
+          });
+      t.selectAll(".rowLabel")
+          .attr("y", function(d, i) {
+              return i * cellSize;
+          })
+          .attr("transform", function(d, i) {
+              return "translate(-3," + cellSize / 1.5 + ")";
+          });
+  } else if (newOrder == "sortinit_col_row") { // initial sort on rows and cols (alphabetically if produced like this)
+      t.selectAll(".cell")
+          .attr("x", function(d) {
+              var col = parseInt(d3.select(this).attr("col"));
+              return col * cellSize;
+          })
+          .attr("y", function(d) {
+              var row = parseInt(d3.select(this).attr("row"));
+              return row * cellSize;
+          });
+      t.selectAll(".colLabel")
+          .attr("y", function(d, i) {
+              return i * cellSize;
+          })
+          .attr("transform", function(d, i) {
+              return "translate(" + cellSize / 2 + ", -3) rotate(-90) rotate(45, 0, " + (i * cellSize) + ")";
+          });
+      t.selectAll(".rowLabel")
+          .attr("y", function(d, i) {
+              return i * cellSize;
+          })
+          .attr("transform", function(d, i) {
+              return "translate(-3," + cellSize / 1.5 + ")";
+          });
+        }
+    },
+    reset () {
+      var svg = d3.select("#Heatmap");
+      svg.selectAll("*").remove();
+    },
+    brush () {
+      var columnLabels = document.getElementsByClassName('colLabels')[0];
+      var modelIds = JSON.parse(this.GetResultsAll[13])
+
+      var selectedIds = []
+      for (let i = 0; i < this.highlighted.length; i++) {
+          let looping = this.highlighted[i]
+          selectedIds.push(looping)
+      }
+      for (let i = 0; i < modelIds.length; i++) {
+          columnLabels.childNodes[i].style.fill = "#000";
+      }
+      for (let i = 0; i < selectedIds.length; i++) {
+          let index = modelIds.indexOf(selectedIds[i])
+          columnLabels.childNodes[index].style.fill = "#AF4427";
+      }
+    }
+  },
+  mounted () {
+    this.Heatmap()
+    EventBus.$on('reset', this.reset)
+  }
+}
+</script>
+
+<style>
+.heatmap {
+  font-size: 8px;
+  font-family: monospace;
+}
+rect.bordered {
+  stroke: #E6E6E6;
+  stroke-width:2px;   
+}
+text.mono {
+  font-size: 8px;
+  font-family: monospace;
+  fill: #000;
+}
+text.legendElement {
+  font-size: 10px;
+}
+text.hover {
+  font-weight: bold;
+  fill: #66F;
+  font-background: #000;
+}
+.heatmap_tooltip {
+  text-align: center;
+  font-family: monospace;
+  font-size: 14pt;
+  color: #000;
+  position: relative;
+  background: rgba(255, 255, 255, 0.8);
+  border: 4px solid #66F;
+  padding: 5px;
+  border-radius: 8px ;
+  -webkit-border-top-left-radius: 8px;
+  -webkit-border-top-right-radius: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  -webkit-border-bottom-left-radius: 8px;
+  -khtml-border-top-left-radius: 8px;
+  -khtml-border-top-right-radius: 8px;
+  -khtml-border-bottom-right-radius: 8px;
+  -khtml-border-bottom-left-radius: 8px;
+  -moz-border-radius-topleft: 8px;
+  -moz-border-radius-topright: 8px;
+  -moz-border-radius-bottomright: 8px;
+  -moz-border-radius-bottomleft: 8px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  width: 100px;
+  z-index:10000;
+  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
+}
+.heatmap_tooltip:after, .heatmap_tooltip:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.heatmap_tooltip:after {
+  border-color: rgba(236, 240, 241, 0);
+  border-top-color: #FFFFF;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+.heatmap_tooltip:before {
+  border-color: rgba(44, 62, 80, 0);
+  border-top-color: #66F;
+  border-width: 16px;
+  left: 50%;
+  margin-left: -16px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index 80e77a6..7b05b14 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -4,165 +4,66 @@
 <body>
     <b-container fluid class="bv-example-row">
       <b-row class="md-3">
-        <b-col cols="3" >
+        <b-col cols="12">
           <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Sets Manager</mdb-card-header>
-              <mdb-card-body>
-                <mdb-card-text class="text-left" style="font-size: 18.5px;">
-                  <DataSetExecController/>
-                  <Slider/>
-                </mdb-card-text>
-              </mdb-card-body>
-          </mdb-card>
-        </b-col>
-        <b-col cols="6">
-          <mdb-card>
-            <mdb-card-header color="primary-color" tag="h5" class="text-center">Provenance</mdb-card-header>
+            <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space (Sorted by Predicted Probability)</mdb-card-header>
             <mdb-card-body>
-              <mdb-card-text class="text-left" style="font-size: 18.5px;">
+              <mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 232px">
+                <DataSetSlider/>
+                <DataSpace/>
               </mdb-card-text>
             </mdb-card-body>
           </mdb-card>
         </b-col>
-        <b-col cols="3">
-            <mdb-card >
-              <mdb-card-header color="primary-color" tag="h5" class="text-center">Results</mdb-card-header>
+      </b-row>
+      <b-row class="md-3">
+          <b-col cols="6">
+            <mdb-card style="margin-top: 15px;">
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Space Overview
+                </mdb-card-header>
+                <mdb-card-body>
+                  <mdb-card-text class="text-center"  style="min-height: 600px">
+                    <FeatureSpaceOverview/>
+                  </mdb-card-text>
+                </mdb-card-body>
+            </mdb-card>
+          </b-col>
+          <b-col cols="6">
+            <mdb-card style="margin-top: 15px;">
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Space Detail
+              </mdb-card-header>
               <mdb-card-body>
-                <mdb-card-text class="text-left" style="font-size: 18.5px;">
+                <mdb-card-text class="text-center"  style="min-height: 600px">
+                  <FeatureSpaceDetail/>
                 </mdb-card-text>
               </mdb-card-body>
             </mdb-card>
-        </b-col>
-      </b-row>
-      <!--
-      <hr/>
-      <ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-top: 15px">
-      <li class="nav-item">
-        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Algorithms' Exploration</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Data Wrangling</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Models' Exploration</a>
-      </li>
-      </ul>
-      <div class="tab-content" id="myTabContent">
-        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-          <b-row class="md-3">
-            <b-col cols="3">
-              <mdb-card style="margin-top: 15px">
-                <mdb-card-header color="primary-color" tag="h5" class="text-center">Overview of the Algorithms' Space</mdb-card-header>
-                <mdb-card-body class="text-center">
-                  <Parameters/>
-                </mdb-card-body>
-              </mdb-card>
-            </b-col>
-            <b-col cols="9">
-              <mdb-card style="margin-top: 15px;">
-                <mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Performance of the Algorithms [Sel: {{valueSel}} / All: {{valueAll}}]<small class="float-right" style="font-size:85% !important"><Controller/></small></mdb-card-header>
-                  <mdb-card-body>
-                      <Algorithms :width="width" :height="height"/>
-                  </mdb-card-body>
-              </mdb-card>
-            </b-col>
-          </b-row>
-          <b-row class="md-3">
-            <b-col cols="3">
-              <mdb-card style="margin-top: 15px">
-                <mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;">Metrics Support: [All]</small>Parameters Manipulation for Each Algorithm</mdb-card-header>
-                <mdb-card-body>
-                  <AlgorithmHyperParam/>
-                </mdb-card-body>
-              </mdb-card>
-            </b-col>
-            <b-col cols="9">
-              <mdb-card style="margin-top: 15px;">
-                <mdb-card-header color="primary-color" tag="h5" class="text-center"><small class="float-left" style="padding-top: 3px;"><font-awesome-icon class="fa-lg" icon="dice-three"/>&nbsp;Metrics Support: [M3*, M4*, M5* (F1 Score)]</small>Performance of the Algorithms for Each Class<small class="float-right"><ResetClass/></small></mdb-card-header>
+          </b-col>
+        </b-row>
+      <b-row class="md-3">
+          <b-col cols="6">
+            <mdb-card style="margin-top: 15px;">
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Selection Algorithms
+                </mdb-card-header>
                 <mdb-card-body>
-                    <BarChart/>
+                  <mdb-card-text class="text-center"  style="min-height: 234px">
+                    <Heatmap/>
+                  </mdb-card-text>
                 </mdb-card-body>
-              </mdb-card>
-            </b-col>
-          </b-row>
-        </div>
-        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-          <b-row class="md-3">
-              <b-col cols="6">
-              <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space<small class="float-right"><saveStack/></small></mdb-card-header>
-                  <mdb-card-body>
-                    <mdb-card-text class="text-center" style="min-height: 822px">
-                      <DataSpace/>
-                      <PCPData/>
-                    </mdb-card-text>
-                  </mdb-card-body>
-                </mdb-card>
-              </b-col>
-              <b-col cols="6">
-                <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">Features Selection for Each Model<small class="float-right"><active/></small></mdb-card-header>
-                    <mdb-card-body>
-                      <mdb-card-text class="text-center" style="min-height: 822px">
-                        <ToggleSelection/>
-                        <br/>
-                        <Heatmap/>
-                      </mdb-card-text>
-                    </mdb-card-body>
-                </mdb-card>    
-              </b-col>
-            </b-row>
-        </div>
-        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-          -->
-          <b-row class="md-3">
-              <b-col cols="6">
-                <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">I. Feature Space - Highly Correct Prediction Probability
-                    </mdb-card-header>
-                    <mdb-card-body>
-                      <mdb-card-text class="text-center"  style="min-height: 400px">
-                        <FeatureSpace1/>
-                      </mdb-card-text>
-                    </mdb-card-body>
-                </mdb-card>
-              </b-col>
-              <b-col cols="6">
-                <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">II. Feature Space - Slightly Correct Prediction Probability
-                  </mdb-card-header>
-                  <mdb-card-body>
-                    <mdb-card-text class="text-center"  style="min-height: 400px">
-                      <FeatureSpace2/>
-                    </mdb-card-text>
-                  </mdb-card-body>
-                </mdb-card>
-              </b-col>
-            </b-row>
-            <b-row class="md-3">
-              <b-col cols="6">
-                <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">III. Feature Space - Slightly Wrong Prediction Probability
-                    </mdb-card-header>
-                    <mdb-card-body>
-                      <mdb-card-text class="text-center"  style="min-height: 400px">
-                        <FeatureSpace3/>
-                      </mdb-card-text>
-                    </mdb-card-body>
-                </mdb-card>
-              </b-col>
-              <b-col cols="6">
-                <mdb-card style="margin-top: 15px;">
-                  <mdb-card-header color="primary-color" tag="h5" class="text-center">IV. Feature Space - Highly Wrong Prediction Probability
-                  </mdb-card-header>
-                  <mdb-card-body>
-                    <mdb-card-text class="text-center"  style="min-height: 400px">
-                      <FeatureSpace4/>
-                    </mdb-card-text>
-                  </mdb-card-body>
-                </mdb-card>
-              </b-col>
-            </b-row>
+            </mdb-card>
+          </b-col>
+          <b-col cols="6">
+            <mdb-card style="margin-top: 15px;">
+              <mdb-card-header color="primary-color" tag="h5" class="text-center">Final Predictive Results
+              </mdb-card-header>
+              <mdb-card-body>
+                <mdb-card-text class="text-center"  style="min-height: 234px">
+                  <Results/>
+                </mdb-card-text>
+              </mdb-card-body>
+            </mdb-card>
+          </b-col>
+        </b-row>
     </b-container>
   </body>
 </template>
@@ -170,12 +71,12 @@
 <script>
 
 import Vue from 'vue'
-import DataSetExecController from './DataSetExecController.vue'
-import Slider from './Slider.vue'
-import FeatureSpace1 from './FeatureSpace1.vue'
-import FeatureSpace2 from './FeatureSpace2.vue'
-import FeatureSpace3 from './FeatureSpace3.vue'
-import FeatureSpace4 from './FeatureSpace4.vue'
+import DataSetSlider from './DataSetSlider.vue'
+import DataSpace from './DataSpace.vue'
+import FeatureSpaceOverview from './FeatureSpaceOverview.vue'
+import FeatureSpaceDetail from './FeatureSpaceDetail.vue'
+import Heatmap from './Heatmap.vue'
+import Results from './Results.vue'
 import axios from 'axios'
 import { loadProgressBar } from 'axios-progress-bar'
 import 'axios-progress-bar/dist/nprogress.css'
@@ -193,12 +94,12 @@ const d3 = Object.assign(d3Base)
 export default Vue.extend({
   name: 'Main',
   components: {
-    DataSetExecController,
-    Slider,
-    FeatureSpace1,
-    FeatureSpace2,
-    FeatureSpace3,
-    FeatureSpace4,
+    DataSetSlider,
+    DataSpace,
+    FeatureSpaceOverview,
+    FeatureSpaceDetail,
+    Heatmap,
+    Results,
     mdbCard,
     mdbCardBody,
     mdbCardHeader,
@@ -496,10 +397,7 @@ export default Vue.extend({
         .then(response => {
           console.log('Server successfully send the correlation matrices!')
           this.correlResul = response.data.correlResul
-          EventBus.$emit('quad1', this.correlResul)
-          EventBus.$emit('quad2', this.correlResul)
-          EventBus.$emit('quad3', this.correlResul)
-          EventBus.$emit('quad4', this.correlResul)
+          EventBus.$emit('quad', this.correlResul)
         })
         .catch(error => {
           console.log(error)
@@ -520,10 +418,7 @@ export default Vue.extend({
       .then(response => {
         console.log('Server successfully send the correlation matrices!')
         this.correlResulTranformed = response.data.correlResulTranformed
-        EventBus.$emit('quadTrans1', this.correlResulTranformed)
-        EventBus.$emit('quadTrans2', this.correlResulTranformed)
-        EventBus.$emit('quadTrans3', this.correlResulTranformed)
-        EventBus.$emit('quadTrans4', this.correlResulTranformed)
+        EventBus.$emit('quadTrans', this.correlResulTranformed)
         this.returnCorrel()
       })
       .catch(error => {
@@ -646,7 +541,7 @@ body {
   top: 0px;
   bottom: 0px;
   margin-top: -4px !important;
-  //overflow: hidden !important;
+  //overflow: hidden !important; # remove scrolling
 }
 
 .modal-backdrop {
diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue
new file mode 100644
index 0000000..bfc42cd
--- /dev/null
+++ b/frontend/src/components/Results.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="LinePlot"></div>
+</template>
+
+<script>
+
+import { EventBus } from '../main.js'
+import * as Plotly from 'plotly.js'
+
+export default {
+  name: 'Results',
+  data () {
+    return {
+      dataInstances: '',
+      PositiveValue: 75,
+      NegativeValue: 25,
+    }
+  },
+  methods: {
+    initializeLinePLot () { 
+
+      Plotly.purge('LinePlot')  
+
+      var trace1 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
+        y: [12, 22, 32, 45, 56, 67, 77, 89, 98, 100, 99, 88, 78, 66, 55, 44, 33, 23, 18, 8], 
+        fill: "tozerox", 
+        fillcolor: "rgba(0,100,80,0.2)", 
+        line: {color: "transparent"}, 
+        name: "Accuracy", 
+        showlegend: false, 
+        type: "scatter"
+      };
+      var trace2 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
+        y: [55, 29, 63, 79, 59, 29, 79, 48, 58, 53, 50, 40, 40, 70, 24, 50, 77, 60, 25, 47], 
+        fill: "tozerox", 
+        fillcolor: "rgba(0,176,246,0.2)", 
+        line: {color: "transparent"}, 
+        name: "Precision", 
+        showlegend: false, 
+        type: "scatter"
+      };
+      var trace3 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
+        y: [100, 85, 68, 46, 25, 30, 29, 49, 27, 94, 87, 18, 30, 25, 25, 17, 30, 55, 77, 77], 
+        fill: "tozerox", 
+        fillcolor: "rgba(231,107,243,0.2)", 
+        line: {color: "transparent"}, 
+        name: "Recall", 
+        showlegend: false, 
+        type: "scatter"
+      };
+      var trace4 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
+        y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100], 
+        line: {color: "rgb(0,100,80)"}, 
+        mode: "lines", 
+        name: "Accuracy", 
+        type: "scatter"
+      };
+      var trace5 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
+        y: [50, 26, 59, 75, 50, 25, 75, 45, 55, 50], 
+        line: {color: "rgb(0,176,246)"}, 
+        mode: "lines", 
+        name: "Precision", 
+        type: "scatter"
+      };
+      var trace6 = {
+        x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
+        y: [100, 80, 60, 40, 20, 28, 20, 40, 20, 90], 
+        line: {color: "rgb(231,107,243)"}, 
+        mode: "lines", 
+        name: "Recall", 
+        type: "scatter"
+      };
+      var data = [trace1, trace2, trace3, trace4, trace5, trace6];
+      var layout = {
+        height: '235',
+        margin: {
+          l: 55,
+          r: 20,
+          b: 45,
+          t: 5,
+          pad: 5
+        },
+        xaxis: {
+          title: "Execution step",
+          gridcolor: "rgb(230,230,230)", 
+          range: [1, 10], 
+          showgrid: true, 
+          showline: false, 
+          showticklabels: true, 
+          tickcolor: "rgb(230,230,230)", 
+          ticks: "outside", 
+          zeroline: false
+        }, 
+        yaxis: {
+          title: "Performance (%)",
+          gridcolor: "rgb(230,230,230)", 
+          showgrid: true, 
+          showline: false, 
+          showticklabels: true, 
+          tickcolor: "rgb(230,230,230)", 
+          ticks: "outside", 
+          zeroline: false
+        }
+      };
+      Plotly.newPlot('LinePlot', data, layout);
+    },
+    reset () {
+      Plotly.purge('LinePlot')
+    },
+  },
+  mounted () {
+    this.initializeLinePLot()
+    EventBus.$on('reset', this.reset)
+  }
+}
+</script>
+
+<style>
+
+text {
+  font-family: sans-serif;
+}
+
+svg {
+  display: block;
+}
+
+.nodeHighlighted {
+  stroke: 'orange'
+}
+
+.modebar{
+  display: none !important;
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Slider.vue b/frontend/src/components/Slider.vue
deleted file mode 100644
index 53411ad..0000000
--- a/frontend/src/components/Slider.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div>
-    <div class="row align-items-center">
-      <div class="col-lg-2"><p>Positive</p></div>
-      <div class="col-lg-8"><div id="slider-stepPos"></div></div>
-      <div class="col-lg-2"><p id="value-stepPos"></p></div>
-    </div>
-    <div class="row align-items-center">
-      <div class="col-lg-2"><p>Negative</p></div>
-      <div class="col-lg-8"><div id="slider-stepNeg"></div></div>
-      <div class="col-lg-2"><p id="value-stepNeg"></p></div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../main.js'
-import { sliderBottom } from 'd3-simple-slider'
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base, { sliderBottom })
-
-export default {
-  name: 'Slider',
-  data () {
-    return {
-    }
-  },
-  methods: {
-    InitSliders () {  
-      var dataCorrect = [55.0, 60.0, 65.0, 70.0, 75.0, 80.0, 85.0, 90.0, 95.0];
-      var dataWrong = [5.0, 10.0, 15.0, 20.0, 25.0, 30.0, 35.0, 40.0, 45.0];
-
-        var sliderStepPos = d3
-          .sliderBottom()
-          .min(d3.min(dataCorrect))
-          .max(d3.max(dataCorrect))
-          .width(300)
-          .tickFormat(d3.format(".0f"))
-          .ticks(9)
-          .step(5)
-          .default(75.0)
-          .on('onchange', val => {
-            d3.select('p#value-stepPos').text(d3.format(".0f")(val));
-            EventBus.$emit('SendtheChangeinRangePos', d3.format(".0f")(val))
-          });
-
-        var gStepPos = d3
-          .select('div#slider-stepPos')
-          .append('svg')
-          .attr('width', 500)
-          .attr('height', 100)
-          .append('g')
-          .attr('transform', 'translate(30,30)');
-
-        gStepPos.call(sliderStepPos);
-
-        d3.select('p#value-stepPos').text(d3.format(".0f")(sliderStepPos.value()));
-
-        var sliderStepNeg = d3
-          .sliderBottom()
-          .min(d3.min(dataWrong))
-          .max(d3.max(dataWrong))
-          .width(300)
-          .tickFormat(d3.format(".0f"))
-          .ticks(9)
-          .step(5)
-          .default(25.0)
-          .on('onchange', val => {
-            d3.select('p#value-stepNeg').text(d3.format(".0f")(val));
-            EventBus.$emit('SendtheChangeinRangeNeg', d3.format(".0f")(val))
-          });
-
-        var gStepNeg = d3
-          .select('div#slider-stepNeg')
-          .append('svg')
-          .attr('width', 500)
-          .attr('height', 100)
-          .append('g')
-          .attr('transform', 'translate(30,30)');
-
-        gStepNeg.call(sliderStepNeg);
-
-        d3.select('p#value-stepNeg').text(d3.format(".0f")(sliderStepNeg.value()));
-    },
-    reset () {
-      EventBus.$emit('reset')
-      EventBus.$emit('alternateFlagLock')
-    },
-    initialize () {
-      EventBus.$emit('ConfirmDataSet')
-    }
-  },
-  mounted () {
-    this.InitSliders()
-  },
-}
-</script>
diff --git a/run.py b/run.py
index 0a4dc4d..22d5790 100644
--- a/run.py
+++ b/run.py
@@ -456,7 +456,7 @@ def create_global_function():
         # result is mean of test_score
         return np.mean(result['test_score'])
 
-# check this issue later because we are getting the same results
+# check this issue later because we are not getting the same results
 def executeModel():
 
     create_global_function()
@@ -474,12 +474,10 @@ def executeModel():
     
     return 'Everything Okay'
 
-def Transformation(quadrant1, quadrant2, quadrant3, quadrant4):
+def Transformation(quadrant1, quadrant2, quadrant3, quadrant4, quadrant5):
 
     XDataNumeric = XData.select_dtypes(include='number')
-    numberOfColumns = len(XDataNumeric.columns)
-    columns = list(XDataNumeric) 
-    decimals = 0   
+    columns = list(XDataNumeric)   
 
     global packCorrTransformed
     packCorrTransformed = []
@@ -491,49 +489,48 @@ def Transformation(quadrant1, quadrant2, quadrant3, quadrant4):
         d={}
         XDataNumericCopy = XDataNumeric.copy()
         XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,5):
+        for number in range(1,6):
             quadrantVariable = str('quadrant%s' % number)
             illusion = locals()[quadrantVariable]
             d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["round"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], quadrant1, quadrant2, quadrant3, quadrant4, i, count)
+        dicTransf["round"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
 
         d={}
         XDataNumericCopy = XDataNumeric.copy()
         XDataNumericCopy[i] = np.log(XDataNumericCopy[i])
         XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,5):
+        for number in range(1,6):
             quadrantVariable = str('quadrant%s' % number)
             illusion = locals()[quadrantVariable]
             d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLogE"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], quadrant1, quadrant2, quadrant3, quadrant4, i, count)
+        dicTransf["roundLogE"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
 
         d={}
         XDataNumericCopy = XDataNumeric.copy()
         XDataNumericCopy[i] = np.log2(XDataNumericCopy[i])
         XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,5):
+        for number in range(1,6):
             quadrantVariable = str('quadrant%s' % number)
             illusion = locals()[quadrantVariable]
             d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLog2"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], quadrant1, quadrant2, quadrant3, quadrant4, i, count)
+        dicTransf["roundLog2"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
 
         d={}
         XDataNumericCopy = XDataNumeric.copy()
         XDataNumericCopy[i] = np.log10(XDataNumericCopy[i])
         XDataNumericCopy[i] = XDataNumericCopy[i].round()
-        for number in range(1,5):
+        for number in range(1,6):
             quadrantVariable = str('quadrant%s' % number)
             illusion = locals()[quadrantVariable]
             d["DataRows{0}".format(number)] = XDataNumericCopy.iloc[illusion, :]
-        dicTransf["roundLog10"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], quadrant1, quadrant2, quadrant3, quadrant4, i, count)
+        dicTransf["roundLog10"] = NewComputationTransf(d['DataRows1'], d['DataRows2'], d['DataRows3'], d['DataRows4'], d['DataRows5'], quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, i, count)
     
         packCorrTransformed.append(dicTransf)
 
     return 'Everything Okay'
 
-def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1, quadrant2, quadrant3, quadrant4, feature, count):
+def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, DataRows5, quadrant1, quadrant2, quadrant3, quadrant4, quadrant5, feature, count):
 
-    # Main Features
     corrMatrix1 = DataRows1.corr()
     corrMatrix1 = corrMatrix1.abs()
     corrMatrix2 = DataRows2.corr()
@@ -542,31 +539,38 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
     corrMatrix3 = corrMatrix3.abs()
     corrMatrix4 = DataRows4.corr()
     corrMatrix4 = corrMatrix4.abs()
+    corrMatrix5 = DataRows5.corr()
+    corrMatrix5 = corrMatrix5.abs()
 
     corrMatrix1 = corrMatrix1.loc[[feature]]
     corrMatrix2 = corrMatrix2.loc[[feature]]
     corrMatrix3  = corrMatrix3.loc[[feature]]
     corrMatrix4 = corrMatrix4.loc[[feature]]
+    corrMatrix5 = corrMatrix5.loc[[feature]]
 
     DataRows1 = DataRows1.reset_index(drop=True)
     DataRows2 = DataRows2.reset_index(drop=True)
     DataRows3 = DataRows3.reset_index(drop=True)
     DataRows4 = DataRows4.reset_index(drop=True)
+    DataRows5 = DataRows5.reset_index(drop=True)
 
     targetRows1 = [yData[i] for i in quadrant1] 
     targetRows2 = [yData[i] for i in quadrant2] 
     targetRows3 = [yData[i] for i in quadrant3] 
     targetRows4 = [yData[i] for i in quadrant4] 
+    targetRows5 = [yData[i] for i in quadrant5] 
 
     targetRows1Arr = np.array(targetRows1)
     targetRows2Arr = np.array(targetRows2)
     targetRows3Arr = np.array(targetRows3)
     targetRows4Arr = np.array(targetRows4)
+    targetRows5Arr = np.array(targetRows5)
 
     uniqueTarget1 = unique(targetRows1)
     uniqueTarget2 = unique(targetRows2)
     uniqueTarget3 = unique(targetRows3)
     uniqueTarget4 = unique(targetRows4)
+    uniqueTarget5 = unique(targetRows5)
 
     if (len(targetRows1Arr) > 0):
         onehotEncoder1 = OneHotEncoder(sparse=False)
@@ -668,21 +672,48 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
         VIF4 = pd.Series()
         MI4List = []
 
-    corrMatrixComb1 = corrMatrixComb1.loc[[feature]]
+    if (len(targetRows5Arr) > 0):
+        onehotEncoder5 = OneHotEncoder(sparse=False)
+        targetRows5Arr = targetRows5Arr.reshape(len(targetRows5Arr), 1)
+        onehotEncoder5 = onehotEncoder5.fit_transform(targetRows5Arr)
+        hotEncoderDF5 = pd.DataFrame(onehotEncoder5)
+        concatDF5 = pd.concat([DataRows5, hotEncoderDF5], axis=1)
+        corrMatrixComb5 = concatDF5.corr()
+        corrMatrixComb5 = corrMatrixComb5.abs()
+        corrMatrixComb5 = corrMatrixComb5.iloc[:,-len(uniqueTarget5):]
+        X5 = add_constant(DataRows5.dropna())
+        VIF5 = pd.Series([variance_inflation_factor(X5.values, i) 
+                for i in range(X5.shape[1])], 
+                index=X5.columns)
+        VIF5 = VIF5.loc[[feature]]
+        if (len(targetRows5Arr) > 2):
+            MI5 = mutual_info_classif(DataRows5, targetRows5Arr)
+            MI5List = MI5.tolist()
+            MI5List = MI5List[count]
+        else:
+            MI5List = []
+    else:
+        corrMatrixComb5 = pd.DataFrame()
+        VIF5 = pd.Series()
+        MI5List = []
 
+    corrMatrixComb1 = corrMatrixComb1.loc[[feature]]
     corrMatrixComb2 = corrMatrixComb2.loc[[feature]]
     corrMatrixComb3 = corrMatrixComb3.loc[[feature]]
     corrMatrixComb4 = corrMatrixComb4.loc[[feature]]
+    corrMatrixComb5 = corrMatrixComb5.loc[[feature]]
 
     targetRows1ArrDF = pd.DataFrame(targetRows1Arr)
     targetRows2ArrDF = pd.DataFrame(targetRows2Arr)
     targetRows3ArrDF = pd.DataFrame(targetRows3Arr)
     targetRows4ArrDF = pd.DataFrame(targetRows4Arr)
+    targetRows5ArrDF = pd.DataFrame(targetRows5Arr)
 
     concatAllDF1 = pd.concat([DataRows1, targetRows1ArrDF], axis=1)
     concatAllDF2 = pd.concat([DataRows2, targetRows2ArrDF], axis=1)
     concatAllDF3 = pd.concat([DataRows3, targetRows3ArrDF], axis=1)
     concatAllDF4 = pd.concat([DataRows4, targetRows4ArrDF], axis=1)
+    concatAllDF5 = pd.concat([DataRows5, targetRows5ArrDF], axis=1)
 
     corrMatrixCombTotal1 = concatAllDF1.corr()
     corrMatrixCombTotal1 = corrMatrixCombTotal1.abs()
@@ -692,6 +723,8 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
     corrMatrixCombTotal3 = corrMatrixCombTotal3.abs()
     corrMatrixCombTotal4 = concatAllDF4.corr()
     corrMatrixCombTotal4 = corrMatrixCombTotal4.abs()
+    corrMatrixCombTotal5 = concatAllDF5.corr()
+    corrMatrixCombTotal5 = corrMatrixCombTotal5.abs()
 
     corrMatrixCombTotal1 = corrMatrixCombTotal1.loc[[feature]]
     corrMatrixCombTotal1 = corrMatrixCombTotal1.iloc[:,-1]
@@ -701,11 +734,14 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
     corrMatrixCombTotal3 = corrMatrixCombTotal3.iloc[:,-1]
     corrMatrixCombTotal4 = corrMatrixCombTotal4.loc[[feature]]
     corrMatrixCombTotal4 = corrMatrixCombTotal4.iloc[:,-1]
+    corrMatrixCombTotal5 = corrMatrixCombTotal5.loc[[feature]]
+    corrMatrixCombTotal5 = corrMatrixCombTotal5.iloc[:,-1]
 
     corrMatrixCombTotal1 = pd.concat([corrMatrixCombTotal1.tail(1)])
     corrMatrixCombTotal2 = pd.concat([corrMatrixCombTotal2.tail(1)])
     corrMatrixCombTotal3 = pd.concat([corrMatrixCombTotal3.tail(1)])
     corrMatrixCombTotal4 = pd.concat([corrMatrixCombTotal4.tail(1)])
+    corrMatrixCombTotal5 = pd.concat([corrMatrixCombTotal5.tail(1)])
 
     packCorrLoc = []
 
@@ -713,26 +749,31 @@ def NewComputationTransf(DataRows1, DataRows2, DataRows3, DataRows4, quadrant1,
     packCorrLoc.append(corrMatrix2.to_json())
     packCorrLoc.append(corrMatrix3.to_json())
     packCorrLoc.append(corrMatrix4.to_json())
+    packCorrLoc.append(corrMatrix5.to_json())
 
     packCorrLoc.append(corrMatrixComb1.to_json())
     packCorrLoc.append(corrMatrixComb2.to_json())
     packCorrLoc.append(corrMatrixComb3.to_json())
     packCorrLoc.append(corrMatrixComb4.to_json())
+    packCorrLoc.append(corrMatrixComb5.to_json())
 
     packCorrLoc.append(corrMatrixCombTotal1.to_json())
     packCorrLoc.append(corrMatrixCombTotal2.to_json())
     packCorrLoc.append(corrMatrixCombTotal3.to_json())
     packCorrLoc.append(corrMatrixCombTotal4.to_json())
+    packCorrLoc.append(corrMatrixCombTotal5.to_json())
 
     packCorrLoc.append(VIF1.to_json())
     packCorrLoc.append(VIF2.to_json())
     packCorrLoc.append(VIF3.to_json())
     packCorrLoc.append(VIF4.to_json())
+    packCorrLoc.append(VIF5.to_json())
 
     packCorrLoc.append(json.dumps(MI1List))
     packCorrLoc.append(json.dumps(MI2List))
     packCorrLoc.append(json.dumps(MI3List))
     packCorrLoc.append(json.dumps(MI4List))
+    packCorrLoc.append(json.dumps(MI5List))
 
     return packCorrLoc
 
@@ -754,6 +795,9 @@ def Seperation():
     quadrant2 = []
     quadrant3 = []
     quadrant4 = []
+    quadrant5 = []
+
+    probabilityPredictions = []
 
     for index, value in enumerate(getCorrectPrediction):
         if (value > 50 and value > thresholdsPos):
@@ -764,15 +808,18 @@ def Seperation():
             quadrant3.append(index)
         else:
             quadrant4.append(index)
+        quadrant5.append(index)
+        probabilityPredictions.append(value)
 
-    Transformation(quadrant1, quadrant2, quadrant3, quadrant4)
+    Transformation(quadrant1, quadrant2, quadrant3, quadrant4, quadrant5)
 
+    # Main Features
     DataRows1 = XData.iloc[quadrant1, :]
     DataRows2 = XData.iloc[quadrant2, :]
     DataRows3 = XData.iloc[quadrant3, :]
     DataRows4 = XData.iloc[quadrant4, :]
+    DataRows5 = XData.iloc[quadrant5, :]
     
-    # Main Features
     corrMatrix1 = DataRows1.corr()
     corrMatrix1 = corrMatrix1.abs()
     corrMatrix2 = DataRows2.corr()
@@ -781,27 +828,33 @@ def Seperation():
     corrMatrix3 = corrMatrix3.abs()
     corrMatrix4 = DataRows4.corr()
     corrMatrix4 = corrMatrix4.abs()
+    corrMatrix5 = DataRows5.corr()
+    corrMatrix5 = corrMatrix5.abs()
 
     DataRows1 = DataRows1.reset_index(drop=True)
     DataRows2 = DataRows2.reset_index(drop=True)
     DataRows3 = DataRows3.reset_index(drop=True)
     DataRows4 = DataRows4.reset_index(drop=True)
+    DataRows5 = DataRows5.reset_index(drop=True)
 
     targetRows1 = [yData[i] for i in quadrant1] 
     targetRows2 = [yData[i] for i in quadrant2] 
     targetRows3 = [yData[i] for i in quadrant3] 
     targetRows4 = [yData[i] for i in quadrant4] 
+    targetRows5 = [yData[i] for i in quadrant5] 
 
     targetRows1Arr = np.array(targetRows1)
     targetRows2Arr = np.array(targetRows2)
     targetRows3Arr = np.array(targetRows3)
     targetRows4Arr = np.array(targetRows4)
+    targetRows5Arr = np.array(targetRows5)
 
     uniqueTarget1 = unique(targetRows1)
     uniqueTarget2 = unique(targetRows2)
     uniqueTarget3 = unique(targetRows3)
     uniqueTarget4 = unique(targetRows4)
-    
+    uniqueTarget5 = unique(targetRows5)
+
     if (len(targetRows1Arr) > 0):
         onehotEncoder1 = OneHotEncoder(sparse=False)
         targetRows1Arr = targetRows1Arr.reshape(len(targetRows1Arr), 1)
@@ -894,15 +947,40 @@ def Seperation():
         VIF4 = pd.Series()
         MI4List = []
 
+    if (len(targetRows5Arr) > 0):
+        onehotEncoder5 = OneHotEncoder(sparse=False)
+        targetRows5Arr = targetRows5Arr.reshape(len(targetRows5Arr), 1)
+        onehotEncoder5 = onehotEncoder5.fit_transform(targetRows5Arr)
+        hotEncoderDF5 = pd.DataFrame(onehotEncoder5)
+        concatDF5 = pd.concat([DataRows5, hotEncoderDF5], axis=1)
+        corrMatrixComb5 = concatDF5.corr()
+        corrMatrixComb5 = corrMatrixComb5.abs()
+        corrMatrixComb5 = corrMatrixComb5.iloc[:,-len(uniqueTarget5):]
+        X5 = add_constant(DataRows5.dropna())
+        VIF5 = pd.Series([variance_inflation_factor(X5.values, i) 
+                for i in range(X5.shape[1])], 
+                index=X5.columns)
+        if (len(targetRows5Arr) > 2):
+            MI5 = mutual_info_classif(DataRows5, targetRows5Arr)
+            MI5List = MI5.tolist()
+        else:
+            MI5List = []
+    else:
+        corrMatrixComb5 = pd.DataFrame()
+        VIF5 = pd.Series()
+        MI5List = []
+
     targetRows1ArrDF = pd.DataFrame(targetRows1Arr)
     targetRows2ArrDF = pd.DataFrame(targetRows2Arr)
     targetRows3ArrDF = pd.DataFrame(targetRows3Arr)
     targetRows4ArrDF = pd.DataFrame(targetRows4Arr)
+    targetRows5ArrDF = pd.DataFrame(targetRows5Arr)
 
     concatAllDF1 = pd.concat([DataRows1, targetRows1ArrDF], axis=1)
     concatAllDF2 = pd.concat([DataRows2, targetRows2ArrDF], axis=1)
     concatAllDF3 = pd.concat([DataRows3, targetRows3ArrDF], axis=1)
     concatAllDF4 = pd.concat([DataRows4, targetRows4ArrDF], axis=1)
+    concatAllDF5 = pd.concat([DataRows5, targetRows5ArrDF], axis=1)
 
     corrMatrixCombTotal1 = concatAllDF1.corr()
     corrMatrixCombTotal1 = corrMatrixCombTotal1.abs()
@@ -912,47 +990,57 @@ def Seperation():
     corrMatrixCombTotal3 = corrMatrixCombTotal3.abs()
     corrMatrixCombTotal4 = concatAllDF4.corr()
     corrMatrixCombTotal4 = corrMatrixCombTotal4.abs()
+    corrMatrixCombTotal5 = concatAllDF5.corr()
+    corrMatrixCombTotal5 = corrMatrixCombTotal5.abs()
 
     corrMatrixCombTotal1 = pd.concat([corrMatrixCombTotal1.tail(1)])
     corrMatrixCombTotal2 = pd.concat([corrMatrixCombTotal2.tail(1)])
     corrMatrixCombTotal3 = pd.concat([corrMatrixCombTotal3.tail(1)])
     corrMatrixCombTotal4 = pd.concat([corrMatrixCombTotal4.tail(1)])
+    corrMatrixCombTotal5 = pd.concat([corrMatrixCombTotal5.tail(1)])
 
     global packCorr
     packCorr = []
 
     packCorr.append(list(XData.columns.values.tolist()))
     packCorr.append(json.dumps(target_names))
+    packCorr.append(json.dumps(probabilityPredictions))
 
     packCorr.append(corrMatrix1.to_json())
     packCorr.append(corrMatrix2.to_json())
     packCorr.append(corrMatrix3.to_json())
     packCorr.append(corrMatrix4.to_json())
-    
+    packCorr.append(corrMatrix5.to_json())
+
     packCorr.append(corrMatrixComb1.to_json())
     packCorr.append(corrMatrixComb2.to_json())
     packCorr.append(corrMatrixComb3.to_json())
     packCorr.append(corrMatrixComb4.to_json())
+    packCorr.append(corrMatrixComb5.to_json())
 
     packCorr.append(corrMatrixCombTotal1.to_json())
     packCorr.append(corrMatrixCombTotal2.to_json())
     packCorr.append(corrMatrixCombTotal3.to_json())
     packCorr.append(corrMatrixCombTotal4.to_json())
+    packCorr.append(corrMatrixCombTotal5.to_json())
 
     packCorr.append(json.dumps(uniqueTarget1))
     packCorr.append(json.dumps(uniqueTarget2))
     packCorr.append(json.dumps(uniqueTarget3))
     packCorr.append(json.dumps(uniqueTarget4))
+    packCorr.append(json.dumps(uniqueTarget5))
 
     packCorr.append(VIF1.to_json())
     packCorr.append(VIF2.to_json())
     packCorr.append(VIF3.to_json())
     packCorr.append(VIF4.to_json())
+    packCorr.append(VIF5.to_json())
 
     packCorr.append(json.dumps(MI1List))
     packCorr.append(json.dumps(MI2List))
     packCorr.append(json.dumps(MI3List))
     packCorr.append(json.dumps(MI4List))
+    packCorr.append(json.dumps(MI5List))
 
     return 'Everything Okay'