diff --git a/cachedir/joblib/run/randomSearch/27a2cfe3ccd1c8af73f4e7bc6238df2a/metadata.json b/cachedir/joblib/run/randomSearch/27a2cfe3ccd1c8af73f4e7bc6238df2a/metadata.json
new file mode 100644
index 0000000..6b2ec68
--- /dev/null
+++ b/cachedir/joblib/run/randomSearch/27a2cfe3ccd1c8af73f4e7bc6238df2a/metadata.json
@@ -0,0 +1 @@
+{"duration": 62.07993197441101, "input_args": {"XData": "     Fbs  Slope  Trestbps  Exang  Thalach  Age  Chol  Sex  Oldpeak  Restecg  Cp  Ca  Thal\n0      1      0       145      0      150   63   233    1      2.3        0   3   0     1\n1      0      0       130      0      187   37   250    1      3.5        1   2   0     2\n2      0      2       130      0      172   41   204    0      1.4        0   1   0     2\n3      0      2       120      0      178   56   236    1      0.8        1   1   0     2\n4      0      2       120      1      163   57   354    0      0.6        1   0   0     2\n..   ...    ...       ...    ...      ...  ...   ...  ...      ...      ...  ..  ..   ...\n298    0      1       140      1      123   57   241    0      0.2        1   0   0     3\n299    0      1       110      0      132   45   264    1      1.2        1   3   0     3\n300    1      1       144      0      141   68   193    1      3.4        1   0   2     3\n301    0      1       130      1      115   57   131    1      1.2        1   0   1     3\n302    0      1       130      0      174   57   236    0      0.0        0   1   1     2\n\n[303 rows x 13 columns]", "yData": "[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]", "clf": "KNeighborsClassifier(algorithm='ball_tree', metric='chebyshev', n_neighbors=61,\n                     weights='distance')", "params": "{'n_neighbors': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99], 'metric': ['chebyshev', 'manhattan', 'euclidean', 'minkowski'], 'algorithm': ['brute', 'kd_tree', 'ball_tree'], 'weights': ['uniform', 'distance']}", "eachAlgor": "'KNN'", "AlgorithmsIDsEnd": "700"}}
\ No newline at end of file
diff --git a/cachedir/joblib/run/randomSearch/32ca191ced3e3ea351d4805ae2631119/output.pkl b/cachedir/joblib/run/randomSearch/32ca191ced3e3ea351d4805ae2631119/output.pkl
new file mode 100644
index 0000000..3893109
Binary files /dev/null and b/cachedir/joblib/run/randomSearch/32ca191ced3e3ea351d4805ae2631119/output.pkl differ
diff --git a/frontend/src/components/AlgorithmsController.vue b/frontend/src/components/AlgorithmsController.vue
index 90b198f..76f9add 100644
--- a/frontend/src/components/AlgorithmsController.vue
+++ b/frontend/src/components/AlgorithmsController.vue
@@ -1,5 +1,8 @@
 <template>
-  <div id="Bees" class="chart-wrapper" style="min-height: 357px;"></div>
+  <div id="containerForAllAlg">
+    <div id="Bees" class="chart-wrapper" style="min-height: 357px;"></div>
+    <div id="MainPlot"></div>
+  </div>
 </template>
 
 <script>
@@ -27,6 +30,8 @@ export default {
     reset () {
       var svg = d3.select("#Bees");
       svg.selectAll("*").remove();
+      var svg = d3.select("#MainPlot");
+      svg.selectAll("*").remove();
       this.PerF = []
       this.PerFCM = []
       this.storedEnsem = []
@@ -37,6 +42,8 @@ export default {
     BeesFun () {
       var svg = d3.select("#Bees");
       svg.selectAll("*").remove();
+      var svg = d3.select("#MainPlot");
+      svg.selectAll("*").remove();
       var chart1
       var data = []
 
@@ -121,16 +128,101 @@ export default {
         }   
       }
 
-      chart1 = makeDistroChart({
-            data:data,
-            xName:'Algorithm',
-            yName:'value',
-            axisLabels: {xAxis: 'Algorithhm', yAxis: '# Performance (%) #'},
-            selector:"#Bees",
-            constrainExtremes:true});
-        chart1.renderDataPlots({showPlot:true,plotType:'beeswarm',showBeanLines:false, colors:null});
-        chart1.renderNotchBoxes({showNotchBox:false});
-        chart1.renderViolinPlot({showViolinPlot:false});
+        var widthChr = 589;
+        var heightChr = 330;
+
+        let svgAlg = d3v5
+          .select("#MainPlot")
+          .append("svg")
+          .attr("height", heightChr)
+          .attr("width", widthChr);
+
+        let sectors = Array.from(new Set(data.map((d) => d.Algorithm)));
+        let xCoords = sectors.map((d, i) => 95 + i * 108);
+        let xScale = d3v5.scaleOrdinal().domain(sectors).range(xCoords);
+
+        let yScale = d3v5
+          .scaleLinear()
+          .domain(d3v5.extent(data.map((d) => d.value)))
+          .range([heightChr-30, 30]);
+
+        var colorsF = d3.scale.ordinal().range(['#ff7f00','#fdbf6f','#fb9a99','#b15928','#a6cee3'])
+
+        svgAlg
+          .selectAll(".circ")
+          .data(data)
+          .enter()
+          .append("circle")
+          .attr("class", "circ")
+          .attr("stroke", "black")
+          .attr("fill", function (d) {
+            if (d.sw) { return "#000000" } 
+            else { return colorsF(d.Algorithm) }
+          })
+          .attr("r", (d) => d.size)
+          .attr("cx", (d) => xScale(d.Algorithm))
+          .attr("cy", (d) => yScale(d.value));
+
+        let simulation = d3v5
+          .forceSimulation(data)
+          .force(
+            "x",
+            d3v5
+              .forceX((d) => {
+                return xScale(d.Algorithm);
+              })
+              .strength(1)
+          )
+          .force(
+            "y",
+            d3v5
+              .forceY(function (d) {
+                return yScale(d.value);
+              })
+              .strength(1)
+          )
+          .force(
+            "collide",
+            d3v5.forceCollide((d) => {
+              return d.size;
+            })
+          )
+          .alphaDecay(0)
+          .alpha(1)
+          //.on("tick", tick);
+
+        function tick() {
+          d3v5.selectAll(".circ")
+            .attr("cx", (d) => {
+              return d.x;
+            })
+            .attr("cy", (d) => d.y);
+        }
+
+        function first() {
+          simulation.alphaDecay(0.1);
+          second()
+          setTimeout(function () {
+            tick();
+          }, 5000);
+        }
+
+      function second() {
+        chart1 = makeDistroChart({
+          data:data,
+          xName:'Algorithm',
+          yName:'value',
+          axisLabels: {xAxis: 'Algorithhm', yAxis: '# Performance (%) #'},
+          selector:"#Bees",
+          constrainExtremes:true});
+          
+        //chart1.renderDataPlots({showPlot:true,plotType:'beeswarm',showBeanLines:false, colors:null});
+      }
+      first()
+      
+      
+
+
       /**
        * Creates a box plot, violin plot, and or notched box plot
        * @param settings Configuration options for the base plot
@@ -509,552 +601,6 @@ export default {
               chart.update();
           }();
 
-          /**
-           * Render a violin plot on the current chart
-           * @param options
-           * @param [options.showViolinPlot=true] True or False, show the violin plot
-           * @param [options.resolution=100 default]
-           * @param [options.bandwidth=10 default] May need higher bandwidth for larger data sets
-           * @param [options.width=50] The max percent of the group rangeBand that the violin can be
-           * @param [options.interpolation=''] How to render the violin
-           * @param [options.clamp=0 default]
-           *   0 = keep data within chart min and max, clamp once data = 0. May extend beyond data set min and max
-           *   1 = clamp at min and max of data set. Possibly no tails
-           *  -1 = extend chart axis to make room for data to interpolate to 0. May extend axis and data set min and max
-           * @param [options.colors=chart default] The color mapping for the violin plot
-           * @returns {*} The chart object
-           */
-          chart.renderViolinPlot = function (options) {
-              chart.violinPlots = {};
-
-              var defaultOptions = {
-                  show: true,
-                  showViolinPlot: true,
-                  resolution: 100,
-                  bandwidth: 20,
-                  width: 50,
-                  interpolation: 'cardinal',
-                  clamp: 1,
-                  colors: chart.colorFunct,
-                  _yDomainVP: null // If the Violin plot is set to close all violin plots, it may need to extend the domain, that extended domain is stored here
-              };
-              chart.violinPlots.options = shallowCopy(defaultOptions);
-              for (var option in options) {
-                  chart.violinPlots.options[option] = options[option]
-              }
-              var vOpts = chart.violinPlots.options;
-
-              // Create violin plot objects
-              for (var cName in chart.groupObjs) {
-                  chart.groupObjs[cName].violin = {};
-                  chart.groupObjs[cName].violin.objs = {};
-              }
-
-              /**
-               * Take a new set of options and redraw the violin
-               * @param updateOptions
-               */
-              chart.violinPlots.change = function (updateOptions) {
-                  if (updateOptions) {
-                      for (var key in updateOptions) {
-                          vOpts[key] = updateOptions[key]
-                      }
-                  }
-
-                  for (var cName in chart.groupObjs) {
-                      chart.groupObjs[cName].violin.objs.g.remove()
-                  }
-
-                  chart.violinPlots.prepareViolin();
-                  chart.violinPlots.update();
-              };
-
-              chart.violinPlots.reset = function () {
-                  chart.violinPlots.change(defaultOptions)
-              };
-              chart.violinPlots.show = function (opts) {
-                  if (opts !== undefined) {
-                      opts.show = true;
-                      if (opts.reset) {
-                          chart.violinPlots.reset()
-                      }
-                  } else {
-                      opts = {show: true};
-                  }
-                  chart.violinPlots.change(opts);
-
-              };
-
-              chart.violinPlots.hide = function (opts) {
-                  if (opts !== undefined) {
-                      opts.show = false;
-                      if (opts.reset) {
-                          chart.violinPlots.reset()
-                      }
-                  } else {
-                      opts = {show: false};
-                  }
-                  chart.violinPlots.change(opts);
-
-              };
-
-              /**
-               * Update the violin obj values
-               */
-              chart.violinPlots.update = function () {
-                  var cName, cViolinPlot;
-
-                  for (cName in chart.groupObjs) {
-                      cViolinPlot = chart.groupObjs[cName].violin;
-
-                      // Build the violins sideways, so use the yScale for the xScale and make a new yScale
-                      var xVScale = chart.yScale.copy();
-
-
-                      // Create the Kernel Density Estimator Function
-                      cViolinPlot.kde = kernelDensityEstimator(eKernel(vOpts.bandwidth), xVScale.ticks(vOpts.resolution));
-                      cViolinPlot.kdedata = cViolinPlot.kde(chart.groupObjs[cName].values);
-
-                      var interpolateMax = chart.groupObjs[cName].metrics.max,
-                          interpolateMin = chart.groupObjs[cName].metrics.min;
-
-                      if (vOpts.clamp == 0 || vOpts.clamp == -1) { //
-                          // When clamp is 0, calculate the min and max that is needed to bring the violin plot to a point
-                          // interpolateMax = the Minimum value greater than the max where y = 0
-                          interpolateMax = d3.min(cViolinPlot.kdedata.filter(function (d) {
-                              return (d.x > chart.groupObjs[cName].metrics.max && d.y == 0)
-                          }), function (d) {
-                              return d.x;
-                          });
-                          // interpolateMin = the Maximum value less than the min where y = 0
-                          interpolateMin = d3.max(cViolinPlot.kdedata.filter(function (d) {
-                              return (d.x < chart.groupObjs[cName].metrics.min && d.y == 0)
-                          }), function (d) {
-                              return d.x;
-                          });
-                          // If clamp is -1 we need to extend the axises so that the violins come to a point
-                          if (vOpts.clamp == -1) {
-                              kdeTester = eKernelTest(eKernel(vOpts.bandwidth), chart.groupObjs[cName].values);
-                              if (!interpolateMax) {
-                                  var interMaxY = kdeTester(chart.groupObjs[cName].metrics.max);
-                                  var interMaxX = chart.groupObjs[cName].metrics.max;
-                                  var count = 25; // Arbitrary limit to make sure we don't get an infinite loop
-                                  while (count > 0 && interMaxY != 0) {
-                                      interMaxY = kdeTester(interMaxX);
-                                      interMaxX += 1;
-                                      count -= 1;
-                                  }
-                                  interpolateMax = interMaxX;
-                              }
-                              if (!interpolateMin) {
-                                  var interMinY = kdeTester(chart.groupObjs[cName].metrics.min);
-                                  var interMinX = chart.groupObjs[cName].metrics.min;
-                                  var count = 25;  // Arbitrary limit to make sure we don't get an infinite loop
-                                  while (count > 0 && interMinY != 0) {
-                                      interMinY = kdeTester(interMinX);
-                                      interMinX -= 1;
-                                      count -= 1;
-                                  }
-                                  interpolateMin = interMinX;
-                              }
-
-                          }
-                          // Check to see if the new values are outside the existing chart range
-                          //   If they are assign them to the master _yDomainVP
-                          if (!vOpts._yDomainVP) vOpts._yDomainVP = chart.range.slice(0);
-                          if (interpolateMin && interpolateMin < vOpts._yDomainVP[0]) {
-                              vOpts._yDomainVP[0] = interpolateMin;
-                          }
-                          if (interpolateMax && interpolateMax > vOpts._yDomainVP[1]) {
-                              vOpts._yDomainVP[1] = interpolateMax;
-                          }
-
-
-                      }
-
-
-                      if (vOpts.showViolinPlot) {
-                          chart.update();
-                          xVScale = chart.yScale.copy();
-
-                          // Need to recalculate the KDE because the xVScale changed
-                          cViolinPlot.kde = kernelDensityEstimator(eKernel(vOpts.bandwidth), xVScale.ticks(vOpts.resolution));
-                          cViolinPlot.kdedata = cViolinPlot.kde(chart.groupObjs[cName].values);
-                      }
-
-                      cViolinPlot.kdedata = cViolinPlot.kdedata
-                          .filter(function (d) {
-                              return (!interpolateMin || d.x >= interpolateMin)
-                          })
-                          .filter(function (d) {
-                              return (!interpolateMax || d.x <= interpolateMax)
-                          });
-                  }
-                  for (cName in chart.groupObjs) {
-                      cViolinPlot = chart.groupObjs[cName].violin;
-
-                      // Get the violin width
-                      var objBounds = getObjWidth(vOpts.width, cName);
-                      var width = (objBounds.right - objBounds.left) / 2;
-
-                      var yVScale = d3.scale.linear()
-                          .range([width, 0])
-                          .domain([0, d3.max(cViolinPlot.kdedata, function (d) {return d.y;})])
-                          .clamp(true);
-
-                      var area = d3.svg.area()
-                          .interpolate(vOpts.interpolation)
-                          .x(function (d) {return xVScale(d.x);})
-                          .y0(width)
-                          .y1(function (d) {return yVScale(d.y);});
-
-                      var line = d3.svg.line()
-                          .interpolate(vOpts.interpolation)
-                          .x(function (d) {return xVScale(d.x);})
-                          .y(function (d) {return yVScale(d.y)});
-
-                      if (cViolinPlot.objs.left.area) {
-                          cViolinPlot.objs.left.area
-                              .datum(cViolinPlot.kdedata)
-                              .attr("d", area);
-                          cViolinPlot.objs.left.line
-                              .datum(cViolinPlot.kdedata)
-                              .attr("d", line);
-
-                          cViolinPlot.objs.right.area
-                              .datum(cViolinPlot.kdedata)
-                              .attr("d", area);
-                          cViolinPlot.objs.right.line
-                              .datum(cViolinPlot.kdedata)
-                              .attr("d", line);
-                      }
-
-                      // Rotate the violins
-                      cViolinPlot.objs.left.g.attr("transform", "rotate(90,0,0)   translate(0,-" + objBounds.left + ")  scale(1,-1)");
-                      cViolinPlot.objs.right.g.attr("transform", "rotate(90,0,0)  translate(0,-" + objBounds.right + ")");
-                  }
-              };
-
-              /**
-              * Create the svg elements for the violin plot
-              */
-              chart.violinPlots.prepareViolin = function () {
-                  var cName, cViolinPlot;
-
-                  if (vOpts.colors) {
-                      chart.violinPlots.color = getColorFunct(vOpts.colors);
-                  } else {
-                      chart.violinPlots.color = chart.colorFunct
-                  }
-
-                  if (vOpts.show == false) {return}
-
-                  for (cName in chart.groupObjs) {
-                      cViolinPlot = chart.groupObjs[cName].violin;
-
-                      cViolinPlot.objs.g = chart.groupObjs[cName].g.append("g").attr("class", "violin-plot");
-                      cViolinPlot.objs.left = {area: null, line: null, g: null};
-                      cViolinPlot.objs.right = {area: null, line: null, g: null};
-
-                      cViolinPlot.objs.left.g = cViolinPlot.objs.g.append("g");
-                      cViolinPlot.objs.right.g = cViolinPlot.objs.g.append("g");
-
-                      if (vOpts.showViolinPlot !== false) {
-                          //Area
-                          cViolinPlot.objs.left.area = cViolinPlot.objs.left.g.append("path")
-                              .attr("class", "area")
-                              .style("fill", chart.violinPlots.color(cName));
-                          cViolinPlot.objs.right.area = cViolinPlot.objs.right.g.append("path")
-                              .attr("class", "area")
-                              .style("fill", chart.violinPlots.color(cName));
-
-                          //Lines
-                          cViolinPlot.objs.left.line = cViolinPlot.objs.left.g.append("path")
-                              .attr("class", "line")
-                              .attr("fill", 'none')
-                              .style("stroke", chart.violinPlots.color(cName));
-                          cViolinPlot.objs.right.line = cViolinPlot.objs.right.g.append("path")
-                              .attr("class", "line")
-                              .attr("fill", 'none')
-                              .style("stroke", chart.violinPlots.color(cName));
-                      }
-
-                  }
-
-              };
-
-
-              function kernelDensityEstimator(kernel, x) {
-                  return function (sample) {
-                      return x.map(function (x) {
-                          return {x:x, y:d3.mean(sample, function (v) {return kernel(x - v);})};
-                      });
-                  };
-              }
-
-              function eKernel(scale) {
-                  return function (u) {
-                      return Math.abs(u /= scale) <= 1 ? .75 * (1 - u * u) / scale : 0;
-                  };
-              }
-
-              // Used to find the roots for adjusting violin axis
-              // Given an array, find the value for a single point, even if it is not in the domain
-              function eKernelTest(kernel, array) {
-                  return function (testX) {
-                      return d3.mean(array, function (v) {return kernel(testX - v);})
-                  }
-              }
-
-              chart.violinPlots.prepareViolin();
-
-              d3.select(window).on('resize.' + chart.selector + '.violinPlot', chart.violinPlots.update);
-              chart.violinPlots.update();
-              return chart;
-          };
-
-          /**
-          * Render a notched box on the current chart
-          * @param options
-          * @param [options.show=true] Toggle the whole plot on and off
-          * @param [options.showNotchBox=true] Show the notch box
-          * @param [options.showLines=false] Show lines at the confidence intervals
-          * @param [options.boxWidth=35] The width of the widest part of the box
-          * @param [options.medianWidth=20] The width of the narrowist part of the box
-          * @param [options.lineWidth=50] The width of the confidence interval lines
-          * @param [options.notchStyle=null] null=traditional style, 'box' cuts out the whole notch in right angles
-          * @param [options.colors=chart default] The color mapping for the notch boxes
-          * @returns {*} The chart object
-          */
-          chart.renderNotchBoxes = function (options) {
-              chart.notchBoxes = {};
-
-              //Defaults
-              var defaultOptions = {
-                  show: true,
-                  showNotchBox: true,
-                  showLines: false,
-                  boxWidth: 35,
-                  medianWidth: 20,
-                  lineWidth: 50,
-                  notchStyle: null,
-                  colors: null
-              };
-              chart.notchBoxes.options = shallowCopy(defaultOptions);
-              for (var option in options) {
-                  chart.notchBoxes.options[option] = options[option]
-              }
-              var nOpts = chart.notchBoxes.options;
-
-              //Create notch objects
-              for (var cName in chart.groupObjs) {
-                  chart.groupObjs[cName].notchBox = {};
-                  chart.groupObjs[cName].notchBox.objs = {};
-              }
-
-              /**
-              * Makes the svg path string for a notched box
-              * @param cNotch Current notch box object
-              * @param notchBounds objBound object
-              * @returns {string} A string in the proper format for a svg polygon
-              */
-              function makeNotchBox(cNotch, notchBounds) {
-                  var scaledValues = [];
-                  if (nOpts.notchStyle == 'box') {
-                      scaledValues = [
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile1)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.medianLeft, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.medianLeft, chart.yScale(cNotch.metrics.median)],
-                          [notchBounds.medianLeft, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile3)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile3)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.medianRight, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.medianRight, chart.yScale(cNotch.metrics.median)],
-                          [notchBounds.medianRight, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile1)]
-                      ];
-                  } else {
-                      scaledValues = [
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile1)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.medianLeft, chart.yScale(cNotch.metrics.median)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.boxLeft, chart.yScale(cNotch.metrics.quartile3)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile3)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.upperNotch)],
-                          [notchBounds.medianRight, chart.yScale(cNotch.metrics.median)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.lowerNotch)],
-                          [notchBounds.boxRight, chart.yScale(cNotch.metrics.quartile1)]
-                      ];
-                  }
-                  return scaledValues.map(function (d) {
-                      return [d[0], d[1]].join(",");
-                  }).join(" ");
-              }
-
-              /**
-              * Calculate the confidence intervals
-              */
-              !function calcNotches() {
-                  var cNotch, modifier;
-                  for (var cName in chart.groupObjs) {
-                      cNotch = chart.groupObjs[cName];
-                      modifier = (1.57 * (cNotch.metrics.iqr / Math.sqrt(cNotch.values.length)));
-                      cNotch.metrics.upperNotch = cNotch.metrics.median + modifier;
-                      cNotch.metrics.lowerNotch = cNotch.metrics.median - modifier;
-                  }
-              }();
-
-              /**
-              * Take a new set of options and redraw the notch boxes
-              * @param updateOptions
-              */
-              chart.notchBoxes.change = function (updateOptions) {
-                  if (updateOptions) {
-                      for (var key in updateOptions) {
-                          nOpts[key] = updateOptions[key]
-                      }
-                  }
-
-                  for (var cName in chart.groupObjs) {
-                      chart.groupObjs[cName].notchBox.objs.g.remove()
-                  }
-                  chart.notchBoxes.prepareNotchBoxes();
-                  chart.notchBoxes.update();
-              };
-
-              chart.notchBoxes.reset = function () {
-                  chart.notchBoxes.change(defaultOptions)
-              };
-              chart.notchBoxes.show = function (opts) {
-                  if (opts !== undefined) {
-                      opts.show = true;
-                      if (opts.reset) {
-                          chart.notchBoxes.reset()
-                      }
-                  } else {
-                      opts = {show: true};
-                  }
-                  chart.notchBoxes.change(opts)
-              };
-              chart.notchBoxes.hide = function (opts) {
-                  if (opts !== undefined) {
-                      opts.show = false;
-                      if (opts.reset) {
-                          chart.notchBoxes.reset()
-                      }
-                  } else {
-                      opts = {show: false};
-                  }
-                  chart.notchBoxes.change(opts)
-              };
-
-              /**
-              * Update the notch box obj values
-              */
-              chart.notchBoxes.update = function () {
-                  var cName, cGroup;
-
-                  for (cName in chart.groupObjs) {
-                      cGroup = chart.groupObjs[cName];
-
-                      // Get the box size
-                      var boxBounds = getObjWidth(nOpts.boxWidth, cName);
-                      var medianBounds = getObjWidth(nOpts.medianWidth, cName);
-
-                      var notchBounds = {
-                          boxLeft: boxBounds.left,
-                          boxRight: boxBounds.right,
-                          middle: boxBounds.middle,
-                          medianLeft: medianBounds.left,
-                          medianRight: medianBounds.right
-                      };
-
-                      // Notch Box
-                      if (cGroup.notchBox.objs.notch) {
-                          cGroup.notchBox.objs.notch
-                              .attr("points", makeNotchBox(cGroup, notchBounds));
-                      }
-                      if (cGroup.notchBox.objs.upperLine) {
-                          var lineBounds = null;
-                          if (nOpts.lineWidth) {
-                              lineBounds = getObjWidth(nOpts.lineWidth, cName)
-                          } else {
-                              lineBounds = objBounds
-                          }
-
-                          var confidenceLines = {
-                              upper: chart.yScale(cGroup.metrics.upperNotch),
-                              lower: chart.yScale(cGroup.metrics.lowerNotch)
-                          };
-                          cGroup.notchBox.objs.upperLine
-                              .attr("x1", lineBounds.left)
-                              .attr("x2", lineBounds.right)
-                              .attr('y1', confidenceLines.upper)
-                              .attr("y2", confidenceLines.upper);
-                          cGroup.notchBox.objs.lowerLine
-                              .attr("x1", lineBounds.left)
-                              .attr("x2", lineBounds.right)
-                              .attr('y1', confidenceLines.lower)
-                              .attr("y2", confidenceLines.lower);
-                      }
-                  }
-              };
-
-              /**
-              * Create the svg elements for the notch boxes
-              */
-              chart.notchBoxes.prepareNotchBoxes = function () {
-                  var cName, cNotch;
-
-                  if (nOpts && nOpts.colors) {
-                      chart.notchBoxes.colorFunct = getColorFunct(nOpts.colors);
-                  } else {
-                      chart.notchBoxes.colorFunct = chart.colorFunct
-                  }
-
-                  if (nOpts.show == false) {
-                      return
-                  }
-
-                  for (cName in chart.groupObjs) {
-                      cNotch = chart.groupObjs[cName].notchBox;
-
-                      cNotch.objs.g = chart.groupObjs[cName].g.append("g").attr("class", "notch-plot");
-
-                      // Plot Box (default show)
-                      if (nOpts.showNotchBox) {
-                          cNotch.objs.notch = cNotch.objs.g.append("polygon")
-                              .attr("class", "notch")
-                              .style("fill", chart.notchBoxes.colorFunct(cName))
-                              .style("stroke", chart.notchBoxes.colorFunct(cName));
-                          //A stroke is added to the notch with the group color, it is
-                          // hidden by default and can be shown through css with stroke-width
-                      }
-
-                      //Plot Confidence Lines (default hide)
-                      if (nOpts.showLines) {
-                          cNotch.objs.upperLine = cNotch.objs.g.append("line")
-                              .attr("class", "upper confidence line")
-                              .style("stroke", chart.notchBoxes.colorFunct(cName));
-
-                          cNotch.objs.lowerLine = cNotch.objs.g.append("line")
-                              .attr("class", "lower confidence line")
-                              .style("stroke", chart.notchBoxes.colorFunct(cName));
-                      }
-                  }
-              };
-              chart.notchBoxes.prepareNotchBoxes();
-
-              d3.select(window).on('resize.' + chart.selector + '.notchBox', chart.notchBoxes.update);
-              chart.notchBoxes.update();
-              return chart;
-          };
-
           /**
           * Render a raw data in various forms
           * @param options
@@ -1171,17 +717,16 @@ export default {
                     if (cPlot.objs.points) {
                     if (dOpts.plotType == 'beeswarm') {
                         var swarmBounds = getObjWidth(100, cName);
-                        console.log(swarmBounds)
                         var yPtScale = chart.yScale.copy()
                             .range([Math.floor(chart.yScale.range()[0] / dOpts.pointSize), 0])
                             //.interpolate(d3.interpolateRound)
                             .domain(chart.yScale.domain());
                         var maxWidth = Math.ceil(chart.xScale.rangeBand() / dOpts.pointSize);
-                        console.log(maxWidth)
+
                         var ptsObj = {};
                         var cYBucket = null;
 
-                        //  Bucket points
+                        // //  Bucket points
                         for (var pt = 0; pt < cGroup.values.length; pt++) {
                             cYBucket = yPtScale(cGroup.values[pt]);
                             if (ptsObj.hasOwnProperty(cYBucket) !== true) {
@@ -1191,7 +736,7 @@ export default {
                                 .attr("cx", swarmBounds.middle)
                                 .attr("cy", yPtScale(cGroup.values[pt]) * dOpts.pointSize));
                         }
-                        //  Plot buckets
+                        // //  Plot buckets
                         var rightMax = Math.min(swarmBounds.right - dOpts.pointSize);
                         for (var row in ptsObj) {
                             var leftMin = swarmBounds.left + (Math.max((maxWidth - ptsObj[row].length) / 2, 0) * dOpts.pointSize);
@@ -1201,35 +746,8 @@ export default {
                                 col++
                             }
                         }
-// FIX THAT!
-                        // let simulation = d3v5.forceSimulation(chart.data)
-    
-                        // .force("x", d3v5.forceX((d) => {
-                        //     return chart.xScale(d.Algorithm);
-                        //     }).strength(0.2))
-                        
-                        // .force("y", d3v5.forceY((d) => {
-                        //     return chart.yScale(d.value);
-                        //     }).strength(1))
-                        
-                        // .force("collide", d3v5.forceCollide((d) => {
-                        //     return d.size;
-                        //     }))
-                        
-                        // .alphaDecay(0)
-                        // .alpha(0.3)
-                        // .on("tick", tick);
-
-                        // function tick() {
-                        //     d3v5.selectAll(".CirclePoint")
-                        //         .attr("cx", (d) => d.x)
-                        //         .attr("cy", (d) => d.y);
-                        //     }
-
-                        // let init_decay = setTimeout(function () {
-                        //     console.log("start alpha decay");
-                        //     simulation.alphaDecay(0.1);
-                        //     }, 3000); // start decay after 3 seconds
+
+
                     } 
                 }
                   }
@@ -1251,36 +769,6 @@ export default {
                       return
                   }
 
-                  // Metrics lines
-                  chart.dataPlots.objs.g = chart.objs.g.append("g").attr("class", "metrics-lines");
-                  if (dOpts.showLines && dOpts.showLines.length > 0) {
-                      chart.dataPlots.objs.lines = {};
-                      var cMetric;
-                      for (var line in dOpts.showLines) {
-                          cMetric = dOpts.showLines[line];
-                          chart.dataPlots.objs.lines[cMetric] = {};
-                          chart.dataPlots.objs.lines[cMetric].values = [];
-                          for (var cGroup in chart.groupObjs) {
-                              chart.dataPlots.objs.lines[cMetric].values.push({
-                                  x: cGroup,
-                                  y: chart.groupObjs[cGroup].metrics[cMetric]
-                              })
-                          }
-                          chart.dataPlots.objs.lines[cMetric].line = d3.svg.line()
-                              .interpolate("cardinal")
-                              .y(function (d) {
-                                  return chart.yScale(d.y)
-                              });
-                          chart.dataPlots.objs.lines[cMetric].g = chart.dataPlots.objs.g.append("path")
-                              .attr("class", "line " + cMetric)
-                              .attr("data-metric", cMetric)
-                              .style("fill", 'none')
-                              .style("stroke", chart.colorFunct(cMetric));
-                      }
-
-                  }
-
-
                   for (cName in chart.groupObjs) {
 
                       cPlot = chart.groupObjs[cName].dataPlots;
@@ -1292,7 +780,7 @@ export default {
                           cPlot.objs.points.g = cPlot.objs.g.append("g").attr("class", "points-plot");
                           for (var pt = 0; pt < chart.groupObjs[cName].values.length; pt++) {
                               cPlot.objs.points.pts.push(cPlot.objs.points.g.append("circle")
-                                  .attr("class", "CirclePoint")
+                                  .attr("class", function () { return "CirclePoint" })
                                   .attr('r', function () {
                                     var dataLoc = data.filter( i => cName.includes( i.Algorithm ) );
                                     return dataLoc[pt].size; 
@@ -1304,12 +792,12 @@ export default {
                                   }));
                           }
                       }
-
-                  }
-
+  
+                }  
               };
-              chart.dataPlots.preparePlots();
 
+              chart.dataPlots.preparePlots();
+ 
               d3.select(window).on('resize.' + chart.selector + '.dataPlot', chart.dataPlots.update);
               chart.dataPlots.update();
               return chart;
@@ -1453,4 +941,19 @@ export default {
 @media (max-width:500px){
     .chart-options p {display: block;}
 }
+
+#containerForAllAlg {
+  height: 100px;
+  position: relative;
+}
+#MainPlot {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+#MainPlot {
+  z-index: 10;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/History.vue b/frontend/src/components/History.vue
index 1cd9925..d774268 100644
--- a/frontend/src/components/History.vue
+++ b/frontend/src/components/History.vue
@@ -317,13 +317,6 @@ export default {
       var numberofModels = 6
       var units = "Models";
       var initialModels = this.RandomSearLoc * 5
-      var months = [{month:"RandSear",value:initialModels,loss:null},
-                    {month:"Crossover_S1",value:250,loss:null},
-                    {month:"Mutate_S1",value:250,loss:null},
-                    {month:"Crossover_S2",value:125,loss:null},
-                    {month:"Mutate_S2",value:125,loss:null},
-                    {month:"Crossover_S2_Prime'",value:125,loss:null},
-                    {month:"Mutate_S2_Prime",value:125,loss:null}];
       //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
       var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var : 
           width = 1250 - margin.left - margin.right,
@@ -336,23 +329,6 @@ export default {
         format = function(d) { return formatNumber(d) + " " + units; }
       var color = d3.scale.category20b()
 
-      var startingAxis = this.RandomSearLoc
-      var axisScale = d3.scale.linear()
-                        .domain([startingAxis*6,0])
-                        .range([0, height]);
-
-      //Create the Axis
-      var yAxis = d3.svg.axis()
-                    .scale(axisScale)
-                    .orient("left")
-                    .ticks(10);
-
-
-
-      // var lossScale = d3.scale.linear()
-      //                   .domain([.95,1,1.05])
-      //                   .range(["red","black","green"]);
-
       // append the svg canvas to the page
       var svg = d3.select("#SankeyInter").append("svg") //will select the id of cahrt from index.html ln:135 --> # looks for the id= from html
           .attr("width", width + margin.left + margin.right)
@@ -369,124 +345,91 @@ export default {
 
       var path = sankey.link(); //sankey.link() is something happening in sankey.js 
 
-      // svg.selectAll("text.values")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return formatNumber(d.value)})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
-
-      // svg.selectAll("text.loss")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return d.loss})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("fill",function(d){ return lossScale(d.loss)})
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
-
-      // svg.selectAll("text.months")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .attr("class", "innerText")
-      //   .text(function(d){return d.month})
-      //   .attr("x",function(d,i){return i*89-margin.left-10})
-      //   .attr("y",20)
-      //   .attr("transform", 
-      //           "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
 
       // load the data
       var graph = {
         "nodes":[
-        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
-        {"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
-        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
-        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
-        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
-        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
-        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
-        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
+        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3",valueN:this.RandomSearLoc},
+        {"name":"RF","node":1,"month":"RandSear","color":"#b15928",valueN:this.RandomSearLoc},
+        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
+        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
+        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
+        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
+        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
+        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
+        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
+        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
+        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
+        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
+        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
+        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
+        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
+        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
+        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
+        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
+        {"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
         ],
 
         "links":[
-        {"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
-        {"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
-        {"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
-        {"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
-        {"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
-        {"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
-        {"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
-        {"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
-        {"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
-        {"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
-        {"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
-        {"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
-        {"source":11,"target":23,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[18]+valuesLoc[19]+valuesLoc[20]+valuesLoc[21]+valuesLoc[22]))},
-        {"source":11,"target":35,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[30]+valuesLoc[31]+valuesLoc[32]+valuesLoc[33]+valuesLoc[34]))},
-        {"source":6,"target":18,"value":valuesLoc[18],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[18]/25)},
-        {"source":6,"target":24,"value":valuesLoc[24],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[24]/25)},
-        {"source":7,"target":19,"value":valuesLoc[19],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[19]/25)},
-        {"source":7,"target":25,"value":valuesLoc[25],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[25]/25)},
-        {"source":8,"target":20,"value":valuesLoc[20],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[20]/25)},
-        {"source":8,"target":26,"value":valuesLoc[26],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[26]/25)},
-        {"source":9,"target":21,"value":valuesLoc[21],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[21]/25)},
-        {"source":9,"target":27,"value":valuesLoc[27],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[27]/25)},
-        {"source":10,"target":22,"value":valuesLoc[22],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[22]/25)},
-        {"source":10,"target":28,"value":valuesLoc[28],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[28]/25)},
-        {"source":17,"target":29,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[24]+valuesLoc[25]+valuesLoc[26]+valuesLoc[27]+valuesLoc[28]))},
-        {"source":17,"target":41,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[36]+valuesLoc[37]+valuesLoc[38]+valuesLoc[39]+valuesLoc[40]))},
-        {"source":12,"target":30,"value":valuesLoc[30],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[30]/25)},
-        {"source":12,"target":36,"value":valuesLoc[36],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[36]/25)},
-        {"source":13,"target":31,"value":valuesLoc[31],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[31]/25)},
-        {"source":13,"target":37,"value":valuesLoc[37],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[37]/25)},
-        {"source":14,"target":32,"value":valuesLoc[32],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[32]/25)},
-        {"source":14,"target":38,"value":valuesLoc[38],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[38]/25)},
-        {"source":15,"target":33,"value":valuesLoc[33],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[33]/25)},
-        {"source":15,"target":39,"value":valuesLoc[39],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[39]/25)},
-        {"source":16,"target":34,"value":valuesLoc[34],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[34]/25)},
-        {"source":16,"target":40,"value":valuesLoc[40],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[40]/25)},
+        {"source":5,"target":11,"value":0},
+        {"source":5,"target":17,"value":0},
+        {"source":0,"target":6,"value":valuesLoc[6]},
+        {"source":0,"target":12,"value":valuesLoc[12]},
+        {"source":1,"target":7,"value":valuesLoc[7]},
+        {"source":1,"target":13,"value":valuesLoc[13]},
+        {"source":2,"target":8,"value":valuesLoc[8]},
+        {"source":2,"target":14,"value":valuesLoc[14]},
+        {"source":3,"target":9,"value":valuesLoc[9]},
+        {"source":3,"target":15,"value":valuesLoc[15]},
+        {"source":4,"target":10,"value":valuesLoc[10]},
+        {"source":4,"target":16,"value":valuesLoc[16]},
+        {"source":11,"target":23,"value":0},
+        {"source":11,"target":35,"value":0},
+        {"source":6,"target":18,"value":valuesLoc[18]},
+        {"source":6,"target":24,"value":valuesLoc[24]},
+        {"source":7,"target":19,"value":valuesLoc[19]},
+        {"source":7,"target":25,"value":valuesLoc[25]},
+        {"source":8,"target":20,"value":valuesLoc[20]},
+        {"source":8,"target":26,"value":valuesLoc[26]},
+        {"source":9,"target":21,"value":valuesLoc[21]},
+        {"source":9,"target":27,"value":valuesLoc[27]},
+        {"source":10,"target":22,"value":valuesLoc[22]},
+        {"source":10,"target":28,"value":valuesLoc[28]},
+        {"source":17,"target":29,"value":0},
+        {"source":17,"target":41,"value":0},
+        {"source":12,"target":30,"value":valuesLoc[30]},
+        {"source":12,"target":36,"value":valuesLoc[36]},
+        {"source":13,"target":31,"value":valuesLoc[31]},
+        {"source":13,"target":37,"value":valuesLoc[37]},
+        {"source":14,"target":32,"value":valuesLoc[32]},
+        {"source":14,"target":38,"value":valuesLoc[38]},
+        {"source":15,"target":33,"value":valuesLoc[33]},
+        {"source":15,"target":39,"value":valuesLoc[39]},
+        {"source":16,"target":34,"value":valuesLoc[34]},
+        {"source":16,"target":40,"value":valuesLoc[40]},
       ]}
 
         sankey.nodes(graph.nodes)
@@ -578,8 +521,8 @@ export default {
                 return "#808080"
               }
             }) 
-            .style("stroke-width", function(d) { return Math.max(.5, d.dh); })   //setting the stroke length by the data . d.dh is defined in sankey.js
-            .sort(function(a, b) { return b.dh - a.dh; })
+            .style("stroke-width", function(d) { return Math.max(.5, d.dy); })   //setting the stroke length by the data . d.dy is defined in sankey.js
+            .sort(function(a, b) { return b.dy - a.dy; })
             .on("mouseover",linkmouseover)
             .on("mouseout",linkmouseout);  
 
@@ -596,15 +539,10 @@ export default {
             .attr("transform", function(d) { 
                 return "translate(" + d.x + "," + d.y + ")";
             });
-          //.call(d3.behavior.drag()   <---------- THIS IS THE DRAG THING TO REMOVE!!
-            //.origin(function(d) { return d; })
-            // .on("dragstart", function() {  //<-------- THIS IS MOUSEOVER DRAG CAPABILITIES .on(mousemove) called pointer events, look it up!
-            // this.parentNode.appendChild(this); }) 
-            // .on("drag", dragmove);
         
       // add the rectangles for the nodes
         node.append("rect")
-            .attr("height", function(d) { return d.dh; })
+            .attr("height", function(d) { return d.dy; })
             .attr("width", sankey.nodeWidth(  ))
             .style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
             // .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@@ -617,11 +555,11 @@ export default {
             .attr("x", -6)
             .attr("y", function(d) {
               if (d.node <= 5) {
-                return d.dh - 81; 
+                return d.dy - 81; 
               } else if (d.node <= 17) {
-                return d.dh - 41; 
+                return d.dy - 41; 
               } else {
-                return d.dh - 21; 
+                return d.dy - 21; 
               }
             })
             .attr("dy", ".35em")
@@ -641,15 +579,6 @@ export default {
           .filter(function(d) { return d.x < width / 2; })//positioning left or right of node
             .attr("x", 6 + sankey.nodeWidth())
             .attr("text-anchor", "start");
-        // // the function for moving the nodes
-        //   function dragmove(d) {
-        //     d3.select(this).attr("transform", 
-        //         "translate(" + d.x + "," + (
-        //                 d.y = Math.max(0, Math.min(height/2 - d.dy, d3.event.y))
-        //             ) + ")");
-        //     sankey.relayout();
-        //     link.attr("d", path);
-        //   }
 
 
       var status=null;
@@ -696,12 +625,6 @@ export default {
         .attr("transform", 
                 "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
 
-      //y axis
-        // svg.append("g")
-        //     .call(yAxis)
-        //     .attr("class", "axis")
-        //     .attr("transform", 
-        //       "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")");
 
     },
     computePerformanceDiff () {
@@ -865,13 +788,6 @@ export default {
       var numberofModels = 6
       var units = "Models";
       var initialModels = this.RandomSearLoc * 5
-      var months = [{month:"RandSear",value:initialModels,loss:null},
-                    {month:"Crossover_S1",value:250,loss:null},
-                    {month:"Mutate_S1",value:250,loss:null},
-                    {month:"Crossover_S2",value:125,loss:null},
-                    {month:"Mutate_S2",value:125,loss:null},
-                    {month:"Crossover_S2_Prime'",value:125,loss:null},
-                    {month:"Mutate_S2_Prime",value:125,loss:null}];
       //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
       var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var : 
           width = 1230 - margin.left - margin.right,
@@ -885,15 +801,15 @@ export default {
       var color = d3.scale.category20b()
 
       var startingAxis = this.RandomSearLoc
-      var axisScale = d3.scale.linear()
-                        .domain([startingAxis*6,0])
-                        .range([0, height]);
+      // var axisScale = d3.scale.linear()
+      //                   .domain([startingAxis*6,0])
+      //                   .range([0, height]);
 
-      //Create the Axis
-      var yAxis = d3.svg.axis()
-                    .scale(axisScale)
-                    .orient("left")
-                    .ticks(10);
+      // //Create the Axis
+      // var yAxis = d3.svg.axis()
+      //               .scale(axisScale)
+      //               .orient("left")
+      //               .ticks(10);
 
 
 
@@ -917,124 +833,90 @@ export default {
 
       var path = sankey.link(); //sankey.link() is something happening in sankey.js 
 
-      // svg.selectAll("text.values")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return formatNumber(d.value)})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
-
-      // svg.selectAll("text.loss")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return d.loss})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("fill",function(d){ return lossScale(d.loss)})
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
-
-      // svg.selectAll("text.months")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .attr("class", "innerText")
-      //   .text(function(d){return d.month})
-      //   .attr("x",function(d,i){return i*89-margin.left-10})
-      //   .attr("y",20)
-      //   .attr("transform", 
-      //           "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
-
       // load the data
       var graph = {
-        "nodes":[
-        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
-        {"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
-        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
-        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
-        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
-        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
-        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
-        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
-        {"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3","dh":height/(numberofModels*(localStep*2))},
-        {"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928","dh":height/(numberofModels*(localStep*2))},
-        {"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99","dh":height/(numberofModels*(localStep*2))},
-        {"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f","dh":height/(numberofModels*(localStep*2))},
-        {"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00","dh":height/(numberofModels*(localStep*2))},
-        {"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff","dh":height/(numberofModels*(localStep*2))},
+      "nodes":[
+        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3",valueN:this.RandomSearLoc},
+        {"name":"RF","node":1,"month":"RandSear","color":"#b15928",valueN:this.RandomSearLoc},
+        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99",valueN:this.RandomSearLoc},
+        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f",valueN:this.RandomSearLoc},
+        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00",valueN:this.RandomSearLoc},
+        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff",valueN:this.RandomSearLoc},
+        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
+        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
+        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
+        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
+        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
+        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
+        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3",valueN:this.RandomSearLoc/2},
+        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928",valueN:this.RandomSearLoc/2},
+        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99",valueN:this.RandomSearLoc/2},
+        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f",valueN:this.RandomSearLoc/2},
+        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00",valueN:this.RandomSearLoc/2},
+        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff",valueN:this.RandomSearLoc/2},
+        {"name":"GradB","node":18,"month":"Crossover_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":19,"month":"Crossover_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":20,"month":"Crossover_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":21,"month":"Crossover_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":22,"month":"Crossover_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Mutate S2 (M)","node":23,"month":"Crossover_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":24,"month":"Mutate_S2","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":25,"month":"Mutate_S2","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":26,"month":"Mutate_S2","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":27,"month":"Mutate_S2","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":28,"month":"Mutate_S2","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Crossover S2 (M)","node":29,"month":"Mutate_S2","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":30,"month":"Crossover_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":31,"month":"Crossover_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":32,"month":"Crossover_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":33,"month":"Crossover_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":34,"month":"Crossover_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Mutate S2 (C)","node":35,"month":"Crossover_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
+        {"name":"GradB","node":36,"month":"Mutate_S2_Prime","color":"#a6cee3",valueN:this.RandomSearLoc/4},
+        {"name":"RF","node":37,"month":"Mutate_S2_Prime","color":"#b15928",valueN:this.RandomSearLoc/4},
+        {"name":"MLP","node":38,"month":"Mutate_S2_Prime","color":"#fb9a99",valueN:this.RandomSearLoc/4},
+        {"name":"LR","node":39,"month":"Mutate_S2_Prime","color":"#fdbf6f",valueN:this.RandomSearLoc/4},
+        {"name":"KNN","node":40,"month":"Mutate_S2_Prime","color":"#ff7f00",valueN:this.RandomSearLoc/4},
+        {"name":"Crossover S2 (C)","node":41,"month":"Mutate_S2_Prime","color":"#ffffff",valueN:this.RandomSearLoc/4},
         ],
 
         "links":[
-        {"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
-        {"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
-        {"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
-        {"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
-        {"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
-        {"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
-        {"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
-        {"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
-        {"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
-        {"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
-        {"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
-        {"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
-        {"source":11,"target":23,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[18]+valuesLoc[19]+valuesLoc[20]+valuesLoc[21]+valuesLoc[22]))},
-        {"source":11,"target":35,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[30]+valuesLoc[31]+valuesLoc[32]+valuesLoc[33]+valuesLoc[34]))},
-        {"source":6,"target":18,"value":valuesLoc[18],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[18]/25)},
-        {"source":6,"target":24,"value":valuesLoc[24],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[24]/25)},
-        {"source":7,"target":19,"value":valuesLoc[19],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[19]/25)},
-        {"source":7,"target":25,"value":valuesLoc[25],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[25]/25)},
-        {"source":8,"target":20,"value":valuesLoc[20],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[20]/25)},
-        {"source":8,"target":26,"value":valuesLoc[26],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[26]/25)},
-        {"source":9,"target":21,"value":valuesLoc[21],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[21]/25)},
-        {"source":9,"target":27,"value":valuesLoc[27],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[27]/25)},
-        {"source":10,"target":22,"value":valuesLoc[22],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[22]/25)},
-        {"source":10,"target":28,"value":valuesLoc[28],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[28]/25)},
-        {"source":17,"target":29,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[24]+valuesLoc[25]+valuesLoc[26]+valuesLoc[27]+valuesLoc[28]))},
-        {"source":17,"target":41,"value":25,"dh":height/(numberofModels*(localStep*2))*(125/(valuesLoc[36]+valuesLoc[37]+valuesLoc[38]+valuesLoc[39]+valuesLoc[40]))},
-        {"source":12,"target":30,"value":valuesLoc[30],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[30]/25)},
-        {"source":12,"target":36,"value":valuesLoc[36],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[36]/25)},
-        {"source":13,"target":31,"value":valuesLoc[31],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[31]/25)},
-        {"source":13,"target":37,"value":valuesLoc[37],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[37]/25)},
-        {"source":14,"target":32,"value":valuesLoc[32],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[32]/25)},
-        {"source":14,"target":38,"value":valuesLoc[38],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[38]/25)},
-        {"source":15,"target":33,"value":valuesLoc[33],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[33]/25)},
-        {"source":15,"target":39,"value":valuesLoc[39],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[39]/25)},
-        {"source":16,"target":34,"value":valuesLoc[34],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[34]/25)},
-        {"source":16,"target":40,"value":valuesLoc[40],"dh":height/(numberofModels*(localStep*2))*(valuesLoc[40]/25)},
+        {"source":5,"target":11,"value":0},
+        {"source":5,"target":17,"value":0},
+        {"source":0,"target":6,"value":valuesLoc[6]},
+        {"source":0,"target":12,"value":valuesLoc[12]},
+        {"source":1,"target":7,"value":valuesLoc[7]},
+        {"source":1,"target":13,"value":valuesLoc[13]},
+        {"source":2,"target":8,"value":valuesLoc[8]},
+        {"source":2,"target":14,"value":valuesLoc[14]},
+        {"source":3,"target":9,"value":valuesLoc[9]},
+        {"source":3,"target":15,"value":valuesLoc[15]},
+        {"source":4,"target":10,"value":valuesLoc[10]},
+        {"source":4,"target":16,"value":valuesLoc[16]},
+        {"source":11,"target":23,"value":0},
+        {"source":11,"target":35,"value":0},
+        {"source":6,"target":18,"value":valuesLoc[18]},
+        {"source":6,"target":24,"value":valuesLoc[24]},
+        {"source":7,"target":19,"value":valuesLoc[19]},
+        {"source":7,"target":25,"value":valuesLoc[25]},
+        {"source":8,"target":20,"value":valuesLoc[20]},
+        {"source":8,"target":26,"value":valuesLoc[26]},
+        {"source":9,"target":21,"value":valuesLoc[21]},
+        {"source":9,"target":27,"value":valuesLoc[27]},
+        {"source":10,"target":22,"value":valuesLoc[22]},
+        {"source":10,"target":28,"value":valuesLoc[28]},
+        {"source":17,"target":29,"value":0},
+        {"source":17,"target":41,"value":0},
+        {"source":12,"target":30,"value":valuesLoc[30]},
+        {"source":12,"target":36,"value":valuesLoc[36]},
+        {"source":13,"target":31,"value":valuesLoc[31]},
+        {"source":13,"target":37,"value":valuesLoc[37]},
+        {"source":14,"target":32,"value":valuesLoc[32]},
+        {"source":14,"target":38,"value":valuesLoc[38]},
+        {"source":15,"target":33,"value":valuesLoc[33]},
+        {"source":15,"target":39,"value":valuesLoc[39]},
+        {"source":16,"target":34,"value":valuesLoc[34]},
+        {"source":16,"target":40,"value":valuesLoc[40]},
       ]}
 
         sankey.nodes(graph.nodes)
@@ -1084,8 +966,8 @@ export default {
                 return "#808080"
               }
             }) 
-            .style("stroke-width", function(d) { return Math.max(.5, d.dh); })   //setting the stroke length by the data . d.dh is defined in sankey.js
-            .sort(function(a, b) { return b.dh - a.dh; })
+            .style("stroke-width", function(d) { return Math.max(.5, d.dy); })   //setting the stroke length by the data . d.dy is defined in sankey.js
+            .sort(function(a, b) { return b.dy - a.dy; })
             .on("mouseover",linkmouseover)
             .on("mouseout",linkmouseout);  
 
@@ -1110,7 +992,7 @@ export default {
         
       // add the rectangles for the nodes
         node.append("rect")
-            .attr("height", function(d) { return d.dh; })
+            .attr("height", function(d) { return d.dy; })
             .attr("width", sankey.nodeWidth(  ))
             .style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
             // .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@@ -1134,7 +1016,7 @@ export default {
 
             $("input[type='number']").change( function(d) {
               valuesLoc[d.target.id] = parseInt(d.target.value)
-              EventBus.$emit('changeValues2', valuesLoc)
+              EventBus.$emit('changeValues2Run', valuesLoc)
             });
         }
             // .append("title")
@@ -1146,11 +1028,11 @@ export default {
             .attr("x", -6)
             .attr("y", function(d) {
               if (d.node <= 5) {
-                return d.dh - 81; 
+                return d.dy - 81; 
               } else if (d.node <= 17) {
-                return d.dh - 41; 
+                return d.dy - 41; 
               } else {
-                return d.dh - 21; 
+                return d.dy - 21; 
               }
             })
             .attr("dy", ".35em")
@@ -1235,13 +1117,11 @@ export default {
     },
     SankeyView () {
       var valuesLoc = this.values
+      var valuesLocSt2 = this.valuesStage2
       var localStep = 2
       var numberofModels = 6
       var units = "Models";
       var initialModels = this.RandomSearLoc * 5
-      var months = [{month:"RandSear",value:initialModels,loss:null},
-                    {month:"Crossover_S1",value:250,loss:null},
-                    {month:"Mutate_S1",value:250,loss:null}];
       //this is the svg canvas attributes: (not buidlign abything just seeting up varaibels)
       var margin = {top: 0, right: 40, bottom: 0, left: 40}, //comma is the equivalent of var : 
           width = 1230 - margin.left - margin.right,
@@ -1287,76 +1167,41 @@ export default {
 
       var path = sankey.link(); //sankey.link() is something happening in sankey.js 
 
-      // svg.selectAll("text.values")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return formatNumber(d.value)})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10+15) + ")";});
-
-      // svg.selectAll("text.loss")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .text(function(d){return d.loss})
-      //   .attr("class", "innerText")
-      //   .attr("x",function(d,i){return i*89-margin.left-5})
-      //   .attr("y",20)
-      //   .attr("fill",function(d){ return lossScale(d.loss)})
-      //   .attr("transform", function(d){ 
-      //           return "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + -(d.value/10-5) + ")";});
-
-      // svg.selectAll("text.months")
-      //   .data(months)
-      //   .enter()
-      //   .append("text")
-      //   .attr("class", "innerText")
-      //   .text(function(d){return d.month})
-      //   .attr("x",function(d,i){return i*89-margin.left-10})
-      //   .attr("y",20)
-      //   .attr("transform", 
-      //           "translate(" + margin.left + "," + margin.top + ") scale(1,-1) translate(" + 0 + "," + margin.bottom + ")");
-
-      // load the data
       var graph = {
         "nodes":[
-        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3","dh":height/numberofModels},
-        {"name":"RF","node":1,"month":"RandSear","color":"#b15928","dh":height/numberofModels},
-        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99","dh":height/numberofModels},
-        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f","dh":height/numberofModels},
-        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00","dh":height/numberofModels},
-        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff","dh":height/numberofModels},
-        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
-        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3","dh":height/(numberofModels*localStep)},
-        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928","dh":height/(numberofModels*localStep)},
-        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99","dh":height/(numberofModels*localStep)},
-        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f","dh":height/(numberofModels*localStep)},
-        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00","dh":height/(numberofModels*localStep)},
-        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff","dh":height/(numberofModels*localStep)},
+        {"name":"GradB","node":0,"month":"RandSear","color":"#a6cee3", valueN: this.RandomSearLoc},
+        {"name":"RF","node":1,"month":"RandSear","color":"#b15928", valueN: this.RandomSearLoc},
+        {"name":"MLP","node":2,"month":"RandSear","color":"#fb9a99", valueN: this.RandomSearLoc},
+        {"name":"LR","node":3,"month":"RandSear","color":"#fdbf6f", valueN: this.RandomSearLoc},
+        {"name":"KNN","node":4,"month":"RandSear","color":"#ff7f00", valueN: this.RandomSearLoc},
+        {"name":"Random search","node":5,"month":"RandSear","color":"#ffffff", valueN: this.RandomSearLoc},
+        {"name":"GradB","node":6,"month":"Crossover_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
+        {"name":"RF","node":7,"month":"Crossover_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
+        {"name":"MLP","node":8,"month":"Crossover_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
+        {"name":"LR","node":9,"month":"Crossover_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
+        {"name":"KNN","node":10,"month":"Crossover_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
+        {"name":"Mutate (M) S1","node":11,"month":"Crossover_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
+        {"name":"GradB","node":12,"month":"Mutate_S1","color":"#a6cee3", valueN: this.RandomSearLoc/2},
+        {"name":"RF","node":13,"month":"Mutate_S1","color":"#b15928", valueN: this.RandomSearLoc/2},
+        {"name":"MLP","node":14,"month":"Mutate_S1","color":"#fb9a99", valueN: this.RandomSearLoc/2},
+        {"name":"LR","node":15,"month":"Mutate_S1","color":"#fdbf6f", valueN: this.RandomSearLoc/2},
+        {"name":"KNN","node":16,"month":"Mutate_S1","color":"#ff7f00", valueN: this.RandomSearLoc/2},
+        {"name":"Crossover (C) S1","node":17,"month":"Mutate_S1","color":"#ffffff", valueN: this.RandomSearLoc/2},
         ],
 
         "links":[
-        {"source":5,"target":11,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[6]+valuesLoc[7]+valuesLoc[8]+valuesLoc[9]+valuesLoc[10]))},
-        {"source":5,"target":17,"value":50,"dh":height/(numberofModels*localStep)*(250/(valuesLoc[12]+valuesLoc[13]+valuesLoc[14]+valuesLoc[15]+valuesLoc[16]))},
-        {"source":0,"target":6,"value":valuesLoc[6],"dh":height/(numberofModels*localStep)*(valuesLoc[6]/50)},
-        {"source":0,"target":12,"value":valuesLoc[12],"dh":height/(numberofModels*localStep)*(valuesLoc[12]/50)},
-        {"source":1,"target":7,"value":valuesLoc[7],"dh":height/(numberofModels*localStep)*(valuesLoc[7]/50)},
-        {"source":1,"target":13,"value":valuesLoc[13],"dh":height/(numberofModels*localStep)*(valuesLoc[13]/50)},
-        {"source":2,"target":8,"value":valuesLoc[8],"dh":height/(numberofModels*localStep)*(valuesLoc[8]/50)},
-        {"source":2,"target":14,"value":valuesLoc[14],"dh":height/(numberofModels*localStep)*(valuesLoc[14]/50)},
-        {"source":3,"target":9,"value":valuesLoc[9],"dh":height/(numberofModels*localStep)*(valuesLoc[9]/50)},
-        {"source":3,"target":15,"value":valuesLoc[15],"dh":height/(numberofModels*localStep)*(valuesLoc[15]/50)},
-        {"source":4,"target":10,"value":valuesLoc[10],"dh":height/(numberofModels*localStep)*(valuesLoc[10]/50)},
-        {"source":4,"target":16,"value":valuesLoc[16],"dh":height/(numberofModels*localStep)*(valuesLoc[16]/50)},
+        {"source":5,"target":11,"value":0},
+        {"source":5,"target":17,"value":0},
+        {"source":0,"target":6,"value":valuesLoc[6]},
+        {"source":0,"target":12,"value":valuesLoc[12]},
+        {"source":1,"target":7,"value":valuesLoc[7]},
+        {"source":1,"target":13,"value":valuesLoc[13]},
+        {"source":2,"target":8,"value":valuesLoc[8]},
+        {"source":2,"target":14,"value":valuesLoc[14]},
+        {"source":3,"target":9,"value":valuesLoc[9]},
+        {"source":3,"target":15,"value":valuesLoc[15]},
+        {"source":4,"target":10,"value":valuesLoc[10]},
+        {"source":4,"target":16,"value":valuesLoc[16]},
       ]}
 
         sankey.nodes(graph.nodes)
@@ -1376,8 +1221,8 @@ export default {
               return "#808080"
             }
             })
-            .style("stroke-width", function(d) { return Math.max(.5, d.dh); })   //setting the stroke length by the data . d.dh is defined in sankey.js
-            .sort(function(a, b) { return b.dh - a.dh; })
+            .style("stroke-width", function(d) { return Math.max(.5, d.dy); })   //setting the stroke length by the data . d.dy is defined in sankey.js
+            .sort(function(a, b) { return b.dy - a.dy; })
             .on("mouseover",linkmouseover)
             .on("mouseout",linkmouseout);  
 
@@ -1402,7 +1247,7 @@ export default {
         
       // add the rectangles for the nodes
         node.append("rect")
-            .attr("height", function(d) { return d.dh; })
+            .attr("height", function(d) { return d.dy; })
             .attr("width", sankey.nodeWidth(  ))
             .style("fill", function(d) { return d.color; }) //matches name with the colors here! inside the replace is some sort of regex
             // .style("stroke",function(d) { return d3.rgb(d.color).darker(1); }) //line around the box formatting
@@ -1426,7 +1271,9 @@ export default {
 
             $("input[type='number']").change( function(d) {
               valuesLoc[d.target.id] = parseInt(d.target.value)
+              valuesLocSt2[d.target.id] = parseInt(d.target.value)
               EventBus.$emit('changeValues', valuesLoc)
+              EventBus.$emit('changeValues2', valuesLocSt2)
             });
         }
             // .append("title")
@@ -1438,9 +1285,9 @@ export default {
             .attr("x", -6)
             .attr("y", function(d) {
               if (d.node <= 5) {
-                return d.dh - 81; 
+                return d.dy - 81; 
               } else {
-                return d.dh - 41; 
+                return d.dy - 41; 
               }
             })
             .attr("dy", ".35em")
@@ -1456,16 +1303,6 @@ export default {
             .attr("x", 6 + sankey.nodeWidth())
             .attr("text-anchor", "start");
 
-        // // the function for moving the nodes
-        //   function dragmove(d) {
-        //     d3.select(this).attr("transform", 
-        //         "translate(" + d.x + "," + (
-        //                 d.y = Math.max(0, Math.min(height/2 - d.dy, d3.event.y))
-        //             ) + ")");
-        //     sankey.relayout();
-        //     link.attr("d", path);
-        //   }
-
 
       var status=null;
       function nodemouseover(d){
@@ -1511,79 +1348,8 @@ export default {
         .attr("transform", 
                 "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ") rotate(-90 150 150)");
 
-      //y axis
-        // svg.append("g")
-        //     .call(yAxis)
-        //     .attr("class", "axis")
-        //     .attr("transform", 
-        //       "translate(" + -45 + "," + 0 + ") scale(1,-1) translate(" + 0 + "," + -(height) + ")");
-
     },
-    // LegendStable() {
-    //   var viewerWidth = this.responsiveWidthHeight[0]*7
-    //   var viewerHeight = this.responsiveWidthHeight[1]*1.6
-    //   var viewerPosTop = viewerWidth * 0.01;
-    //   var cellSizeHeat = 20
-    //   var legendElementWidth = cellSizeHeat * 3;
-
-    //   // http://bl.ocks.org/mbostock/5577023
-    //   var colors = colorbrewer.PRGn[this.classesNumber];
-    //   var svgLeg = d3.select("#LegendHeat");
-    //   svgLeg.selectAll("*").remove();
-        
-    //   var svgLeg = d3.select("#LegendHeat").append("svg")
-    //     .attr("width", viewerWidth/2)
-    //     .attr("height", viewerHeight*0.10)
-    //     .style("margin-top", "12px")
-
-    //   var legend = svgLeg.append('g')
-    //       .attr("class", "legend")
-    //       .attr("transform", "translate(0,0)")
-    //       .selectAll(".legendElement")
-    //       .data([1.00, 0.75, 0.50, 0.25, 0.00, 0.25, 0.50, 0.75, 1.00])
-    //       .enter().append("g")
-    //       .attr("class", "legendElement");
-
-    //   legend.append("svg:rect")
-    //       .attr("x", viewerPosTop)
-    //       .attr("y", function(d, i) {
-    //           return (legendElementWidth * i) + 35;
-    //       })
-    //       .attr("class", "cellLegend bordered")
-    //       .attr("width", legendElementWidth)
-    //       .attr("height", cellSizeHeat / 2)
-    //       .style("fill", function(d, i) {
-    //         console.log(colors[i])
-    //           return colors[i];
-    //       });
-
-    //   legend.append("text")
-    //       .attr("class", "mono legendElement")
-    //       .text(function(d, i) {
-    //         console.log(i)
-    //         if (i < 4) {
-    //           return "-" + (d * 100) + "%";
-    //         } else if (i > 4) {
-    //           return "+" + (d * 100) + "%";
-    //         } else {
-    //           return "" + (d * 100) + "%";
-    //         }
-
-    //       })
-    //       .attr("x", function(d, i) {
-    //         if (i > 4) {
-    //           return (legendElementWidth * i) + 45;
-    //         } else if (i == 4) {
-    //           return (legendElementWidth * i) + 55;
-    //         } else {
-    //           return (legendElementWidth * i) + 40;
-    //         }
-              
-    //       })
-    //       .attr("y", (viewerPosTop + cellSizeHeat) + 5);
-
-    //   svgLeg.append("text").attr("x", 220).attr("y", 32).text("Difference in PD (solution space vs. ensemble").style("font-size", "16px").attr("alignment-baseline","top").attr('transform', 'translate(0,10) rotate(90)')
-    // }
+    
   },
   mounted() {
     //EventBus.$on('emittedEventCallingSankeyLegend', this.LegendStable)
@@ -1591,11 +1357,11 @@ export default {
     EventBus.$on('emittedEventCallingSankeyStage2', this.SankeyViewStage2)
     EventBus.$on('emittedEventCallingSankeyStage3', this.SankeyViewStage3)
 
-    EventBus.$on('changeValues', data => { this.values = data })
+    EventBus.$on('changeValues', data => { this.values = data; })
     EventBus.$on('changeValues', this.SankeyView )
 
     EventBus.$on('changeValues2', data => { this.valuesStage2 = data})
-    EventBus.$on('changeValues2', this.SankeyViewStage2)
+    EventBus.$on('changeValues2Run', this.SankeyViewStage2)
 
     EventBus.$on('SendtheChangeinRangePos', data => { this.RandomSearLoc = data })
 
diff --git a/frontend/src/components/Main.vue b/frontend/src/components/Main.vue
index bf8c1b4..974ea54 100755
--- a/frontend/src/components/Main.vue
+++ b/frontend/src/components/Main.vue
@@ -374,7 +374,6 @@ export default Vue.extend({
             EventBus.$emit('emittedEventCallingScatterPlot', this.OverviewResults)
             EventBus.$emit('emittedEventCallingSankey')
             //EventBus.$emit('emittedEventCallingSankeyLegend')
-            EventBus.$emit('callAlgorithhms')
             EventBus.$emit('callValidationData', this.OverviewResults)
             EventBus.$emit('callValidation')
             EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
@@ -383,6 +382,7 @@ export default Vue.extend({
             EventBus.$emit('LegendPredict')           
             this.storeBothEnsCM[0] = this.OverviewResults
             this.firstTimeExec = false
+            EventBus.$emit('callAlgorithhms')
           } else {   
             var Performance = JSON.parse(this.OverviewResults[1])
             EventBus.$emit('SendStoredEnsembleHist', this.storeEnsemble)
@@ -399,7 +399,6 @@ export default Vue.extend({
               EventBus.$emit('hideCrossMut')
             }
             this.storeBothEnsCM[1] = this.OverviewResults
-            EventBus.$emit('callAlgorithhms')
             this.getFinalResults()
             EventBus.$emit('emittedEventCallingGrid', this.OverviewResults)
             EventBus.$emit('SendSelectedPointsToServerEvent', this.PredictSelEnsem)
@@ -407,6 +406,7 @@ export default Vue.extend({
             EventBus.$emit('callValidationData', this.OverviewResults)
             EventBus.$emit('callValidation')
             EventBus.$emit('LegendPredictEnsem') 
+            EventBus.$emit('callAlgorithhms')
           }
         })
         .catch(error => {
@@ -1130,7 +1130,7 @@ export default Vue.extend({
     EventBus.$on('factorsChanged', data => { this.basicValuesFact = data })
 
     EventBus.$on('changeValues', data => { this.CMNumberofModelsOFFICIAL = data })
-    EventBus.$on('changeValues2', data => { this.CMNumberofModelsOFFICIALS2 = data })
+    EventBus.$on('changeValues2Run', data => { this.CMNumberofModelsOFFICIALS2 = data })
 
     //Prevent double click to search for a word. 
     document.addEventListener('mousedown', function (event) {
diff --git a/frontend/src/components/Predictions.vue b/frontend/src/components/Predictions.vue
index 213ebf6..f115320 100644
--- a/frontend/src/components/Predictions.vue
+++ b/frontend/src/components/Predictions.vue
@@ -195,7 +195,7 @@ export default {
 
 		var t = d3.timer(function(elapsed) {
 			draw();
-			if (elapsed > 2000) t.stop();
+			if (elapsed > 2500) t.stop();
 		}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
 
 
@@ -240,7 +240,7 @@ export default {
 				.transition()
 				.attr('width', 0)
 				.attr('height', 0)
-				.remove();
+        .remove();
 		} // databind()
 
 
@@ -438,7 +438,7 @@ export default {
 		
 		var t = d3.timer(function(elapsed) {
 			draw();
-			if (elapsed > 2000) t.stop();
+			if (elapsed > 2500) t.stop();
 		}); // start a timer that runs the draw function for 500 ms (this needs to be higher than the transition in the databind function)
 
 
@@ -545,11 +545,11 @@ export default {
     var heightText = 180
 
     svgLegGl.append("line")
-      .attr("x1", 614)
+      .attr("x1", 613)
       .attr("y1", 0)
-      .attr("x2", 614)
+      .attr("x2", 613)
       .attr("y2", heightText+30)
-      .style("stroke-width", 1)
+      .style("stroke-width", 2)
       .style("stroke", "black")
       .style("fill", "none");
 
diff --git a/frontend/src/components/ValidationController.vue b/frontend/src/components/ValidationController.vue
index ae5c0ec..ab6cf90 100644
--- a/frontend/src/components/ValidationController.vue
+++ b/frontend/src/components/ValidationController.vue
@@ -155,7 +155,7 @@ export default {
             yName:'value',
             axisLabels: {xAxis: 'Algorithm', yAxis: '# Performance (%) #'},
             selector:"#violin",
-            constrainExtremes:true});
+            constrainExtremes:false});
         chart2.renderBoxPlot({showBox:false});
         chart2.renderDataPlots({showBeanLines:true,beanWidth:15,showPlot:false,showLines:activeLines});
         chart2.renderNotchBoxes({showNotchBox:false});
diff --git a/run.py b/run.py
index 43d643c..6b6c292 100644
--- a/run.py
+++ b/run.py
@@ -806,8 +806,6 @@ def PreprocessingPredEnsemble():
     numberIDRF = []
     numberIDGradB = []
 
-    print(EnsembleActive)
-
     for el in EnsembleActive:
         match = re.match(r"([a-z]+)([0-9]+)", el, re.I)
         if match: