From e4080bcb2555189001d063faabb154ff1d62a7f8 Mon Sep 17 00:00:00 2001
From: Angelos Chatzimparmpas <angelos.chatzimparmpas@gmail.com>
Date: Thu, 13 Aug 2020 14:20:46 +0200
Subject: [PATCH] new

---
 .../src/components/FeatureSpace2 copy.vue     | 489 ------------------
 1 file changed, 489 deletions(-)
 delete mode 100644 frontend/src/components/FeatureSpace2 copy.vue

diff --git a/frontend/src/components/FeatureSpace2 copy.vue b/frontend/src/components/FeatureSpace2 copy.vue
deleted file mode 100644
index 35329be..0000000
--- a/frontend/src/components/FeatureSpace2 copy.vue	
+++ /dev/null
@@ -1,489 +0,0 @@
-<template>
-  <div class="column">
-    <div id="FeatureGraph2"></div>
-  </div>
-</template>
-
-<script>
-import { EventBus } from '../main.js'
-import * as greadability from '../greadability.js'
-import * as d3Base from 'd3'
-
-// attach all d3 plugins to the d3 library
-const d3 = Object.assign(d3Base)
-
-export default {
-  name: 'FeatureSpace2',
-  data () {
-    return {
-      dataFS2: [],
-      jsonData: [],
-    }
-  },
-  methods: {
-      initializeNetwork () {   
-        
-        var listofNodes = this.dataFS2[0]
-        var dataLoc = JSON.parse(this.dataFS2[3])
-
-        var nodes = []
-        listofNodes.forEach(element => nodes.push({"name": element}))
-
-        var links = []
-
-        Object.entries(dataLoc).forEach(
-            function ([feature, value]) {
-              Object.entries(value).forEach( function ([featureInside, value]) {
-                if (feature != featureInside) { 
-                  if (value >= 0) {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1})
-                  } else {
-                    links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2})
-                  }
-                }   
-              })
-        })
-
-        this.jsonData = {"nodes": nodes, "links": links};
-
-        this.graphVizualization()
-
-      },
-      graphVizualization () {
-
-        var listofNodes = this.dataFS2[0]
-        var uniqueTarget = JSON.parse(this.dataFS2[15])
-        var corrTarget = JSON.parse(this.dataFS2[7])
-        var corrGlob = JSON.parse(this.dataFS2[11])
-        var VIFVar = JSON.parse(this.dataFS2[19])
-        var MIVar = JSON.parse(this.dataFS2[23])
-
-        var colorCateg = d3.scaleOrdinal(d3.schemeAccent)
-
-        var corrTargetFormatted = []
-        for (let i = 0; i < Object.keys(corrTarget).length; i++) {
-          var corrTargetFormattedLoc = []
-          for (let j = 0; j < Object.keys(corrTarget[i]).length; j++) {
-            if (j > uniqueTarget.length - 1) {
-              corrTargetFormattedLoc.push(Math.round(Object.values(corrTarget[i])[j] * 100))
-            }
-          }
-          corrTargetFormatted.push(corrTargetFormattedLoc) 
-        }
-
-        var corrGlobFormatted = []
-        for (let i = 0; i < Object.keys(corrGlob).length; i++) {
-          if (i != 0) {
-            corrGlobFormatted.push(Math.round(Object.values(corrGlob)[i]['0'] * 100))
-          }
-        }
-
-        var VIFVarFormatted = []
-        for (let i = 0; i < Object.keys(VIFVar).length; i++) {
-          if (i != 0) {
-            if (Object.values(VIFVar)[i] > 10) {
-              VIFVarFormatted.push(4)
-            } else if (Object.values(VIFVar)[i] > 5) {
-              VIFVarFormatted.push(2)
-            } else {
-              VIFVarFormatted.push(0)
-            }
-          }
-        }
-
-        function min(input) {
-            if (toString.call(input) !== "[object Array]")  
-              return false;
-          return Math.min.apply(null, input);
-        }
-
-        function max(input) {
-            if (toString.call(input) !== "[object Array]")  
-              return false;
-          return Math.max.apply(null, input);
-        }
-
-        function normalize(min, max) {
-            var delta = max - min;
-            return function (val) {
-                return (val - min) / delta;
-            };
-        }
-
-        var MIMin = min(MIVar)
-        var MIMax = max(MIVar)
-
-        MIVar = MIVar.map(normalize(MIMin, MIMax))
-
-        var colorsScaleNodes = d3.scaleLinear()
-          .domain([MIMin, MIMax])
-          .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']);
-
-        var svg = d3.select("#FeatureGraph2");
-        svg.selectAll("*").remove();
-
-        var width = 800;
-        var height = 500;
-
-        var numTicks = 200;
-
-        var selectedParams;
-        var bestParams;
-
-        var dispatch = d3.dispatch('layoutend');
-
-        svg = d3.select("#FeatureGraph2").append("svg")
-          .attr("width", width)
-          .attr("height", height);
-
-        var graph = this.jsonData
-
-        var link = svg.append('g')
-          .attr('class', 'links')
-          .selectAll('line')
-          .data(graph.links)
-          .enter().append('line')
-          .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
-
-        var node = svg.append('g')
-          .attr('class', 'nodes')
-          .selectAll('g')
-          .data(graph.nodes)
-          .enter().append('g')
-
-        var paramGroups = [
-          {name: 'chargeStrength', values: [-30, -80]},
-          {name: 'linkDistance', values: [30, -80]},
-          {name: 'linkStrength', values: [0, 1]},
-          {name: 'gravity', values: [0, 0.5]},
-          {name: 'iterations', values: [1, 2]},
-          {name: 'alphaDecay', values: [0, 0.0228, 0.05]},
-          {name: 'velocityDecay', values: [0.4, 0.8]}
-        ];
-
-        var paramList = generateParams(paramGroups);
-
-        var bestSoFar = d3.select('.best').selectAll('li')
-          .data(paramGroups.map(function (d) { return d.name; }))
-          .enter().append('li')
-          .text(function (d) { return d; });
-
-        dispatch.on('layoutend', function (params, i) {
-          if (!bestParams || params.graphReadability > bestParams.graphReadability) {
-            bestParams = params;
-            selectedParams = bestParams;
-
-            bestSoFar
-              .data(d3.map(bestParams).keys().filter(function (d) { return d !== 'positions' && d !== 'graphReadability'; }))
-              .text(function (d) { return d + ' = ' + bestParams[d]; });
-          }
-
-        });
-
-        var i = 0;
-        var stepper = d3.timer(function () {
-          var p = paramList[i];
-          var forceSim = getForceSimFromParams(p);
-
-          // Reset node attributes.
-          graph.nodes.forEach(function (n) {
-            n.x = n.y = n.vx = n.vy = 0;
-          });
-
-          forceSim.nodes(graph.nodes)
-            .stop();
-
-          forceSim.force('link')
-            .links(graph.links);
-
-          for (var t = 0; t < numTicks; ++t) {
-            forceSim.tick();
-          }
-
-          p.graphReadability = greadability.greadability(graph.nodes, graph.links);
-          p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
-          p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
-
-          p.positions = graph.nodes.map(function (n) { return {x: n.x, y: n.y}; });
-
-          dispatch.call('layoutend', forceSim, p, i);
-
-          ++i;
-          if (i >= paramList.length) {
-            
-            var widthLoc = 100;
-            var arcSize = (6 * widthLoc / 100);
-            var innerRadius = arcSize * 2; 
-
-            var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc)
-              .attr("id", function(d, i) { return "svg" + (i+listofNodes.length); })
-
-            graph.nodes.forEach(function(itemVal, indexNode) {
-              
-              // var data = [[
-              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
-              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
-              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
-              // ];]
-              
-              var data = []
-
-              for(let k = 0; k < uniqueTarget.length; k++) {
-                data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
-              }
-              var length = data.length
-              data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])})
-              var border = VIFVarFormatted[indexNode]
-
-                  var arcs = data.map(function (obj, i) {
-                    if (i == length) {
-                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border);
-                    } else {
-                      return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
-                    }
-                  });
-                  
-                  var arcsGrey = data.map(function (obj, i) {
-                      return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
-                  });
-
-                  var pieData = data.map(function (obj, i) {
-                      return [
-                          {value: obj.value, arc: arcs[i], object: obj},
-                          {value: (100 - obj.value), arc: arcsGrey[i], object: obj},
-                          {value: 0, arc: arcs[i], object: obj}];
-                  });
-
-                  var pie = d3.pie().sort(null).value(function (d) {
-                      return d.value;
-                  });
-                  var id = indexNode+listofNodes.length
-                  var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter()
-                      .append('g')
-                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
-                  var gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter()
-                      .append('g')
-                      .classed('textClass', true)
-                      .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
-
-                  g.selectAll('path').data(function (d) {
-                      return pie(d);
-                  }).enter().append('path')
-                      .attr('id', function (d, i) {
-                          if (i == 1) {
-                              return "Text" + d.data.object.label
-                          }
-                      })
-                      .attr('d', function (d) {
-                          return d.data.arc(d);
-                      }).attr('fill', function (d, i) {
-                      return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none';
-                  });
-
-                  g.each(function (d, index) {
-
-                      var el = d3.select(this);
-                      var path = el.selectAll('path').each(function (r, i) {
-                          if (i === 1) {
-                              var centroid = r.data.arc.centroid({
-                                  startAngle: r.startAngle + 0.05,
-                                  endAngle: r.startAngle + 0.001 + 0.05
-                              });
-                              var lableObj = r.data.object;
-                              g.append('text')
-                                  .attr('font-size', ((2 * width) / 100))
-                                  .attr('dominant-baseline', 'central')
-                                  .append("textPath")
-                                  .attr("textLength", function (d, i) {
-                                      return 0;
-                                  })
-                                  .attr("startOffset", '5')
-                                  .attr("dy", '-3em')
-                                  .text(lableObj.value + '%');
-                          }
-                          if (i === 0) {
-                              var centroidText = r.data.arc.centroid({
-                                  startAngle: r.startAngle,
-                                  endAngle: r.startAngle
-                              });
-                              var lableObj = r.data.object;
-                              gText.append('text')
-                                  .attr('font-size', ((2 * width) / 100))
-                                  .text(lableObj.label)
-                                  .style('fill', lableObj.lcolor)
-                                  .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")"))
-                                  .attr('dominant-baseline', 'central');
-                          }
-                      });
-
-                  });
-
-                })
-
-                var drag_handler = d3.drag()
-                  .on("start", drag_start)
-                  .on("drag", drag_drag)
-                  .on("end", drag_end);	
-                  
-                drag_handler(node);
-
-                var labels = node.append("text")
-                  .text(function(d) {
-                    return d.name;
-                  })
-                  .attr('x', 20)
-                  .attr('y', 8);
-            
-                node.append('title').text(function (d) { return d.name; });
-
-                //add zoom capabilities 
-                var zoom_handler = d3.zoom()
-                    .on("zoom", zoom_actions);
-
-                zoom_handler(svg); 
-
-                drawGraph();
-
-                //Zoom functions 
-                function zoom_actions(){
-                    svg.attr("transform", d3.event.transform)
-                }
-
-                function drag_start(d) {
-                  if (!d3.event.active) forceSim.alphaTarget(0.3).restart();
-                      d.fx = d.x;
-                      d.fy = d.y;
-                  }
-
-                  //make sure you can't drag the circle outside the box
-                  function drag_drag(d) {
-                    d.fx = d3.event.x;
-                    d.fy = d3.event.y;
-                    tickActions();
-                  }
-
-                  function drag_end(d) {
-                    if (!d3.event.active) forceSim.alphaTarget(0);
-                    d.fx = null;
-                    d.fy = null;
-                  }
-
-                stepper.stop();
-          }
-
-        });
-
-        function tickActions() {
-          link
-            .attr('x1', function (d) { return d.source.x; })
-            .attr('x2', function (d) { return d.target.x; })
-            .attr('y1', function (d) { return d.source.y; })
-            .attr('y2', function (d) { return d.target.y; });
-
-          node
-            .attr("id", function(d, i) { return "g" + (i+listofNodes.length); })
-            .attr("transform", function(d, i) {
-              d.x = d.x - 50
-              d.y = d.y - 50
-              return "translate(" + d.x + "," + d.y + ")";
-            })
-        };
-
-        function drawGraph () {
-          graph.nodes.forEach(function (n, i) {
-            n.x = selectedParams.positions[i].x;
-            n.y = selectedParams.positions[i].y;
-          });
-
-          var xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
-          var xMin = xDistance[0];
-          xDistance = xDistance[1] - xDistance[0];
-
-          var yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
-          var yMin = yDistance[0];
-          yDistance = yDistance[1] - yDistance[0];
-
-          graph.nodes.forEach(function (n, i) {
-            n.x = (height - 10) * (n.x - xMin) / Math.max(xDistance, yDistance);
-            n.y = (height - 10) * (n.y - yMin) / Math.max(xDistance, yDistance);
-          });
-
-          xDistance = d3.extent(graph.nodes, function (n) { return n.x; });
-          var xMid = (xDistance[1] + xDistance[0]) / 2;
-          yDistance = d3.extent(graph.nodes, function (n) { return n.y; });
-          var yMid = (yDistance[1] - yDistance[0]) / 2;
-
-          graph.nodes.forEach(function (n, i) {
-            n.x = n.x + width/2 - xMid;
-            n.y = n.y + height/2 - yMid;
-          });
-
-          tickActions();
-        }
-
-        function generateParams (paramGroups, paramList, currParam) {
-          var p = paramGroups[0];
-
-          if (!paramList) paramList = [];
-
-          if (!currParam) currParam = {};
-
-          p.values.forEach(function (v) {
-            var setting = {};
-            setting[p.name] = v;
-            if (paramGroups.length === 1) {
-              paramList.push(Object.assign(setting, currParam));
-            } else {
-              generateParams(paramGroups.slice(1), paramList, Object.assign(setting, currParam));
-            }
-          });
-
-          return paramList;
-        }
-
-        function getForceSimFromParams (params) {
-          var forceSim = d3.forceSimulation()
-            .force('link', d3.forceLink().iterations(params.iterations))
-            .force('charge', d3.forceManyBody().strength(params.chargeStrength))
-            .force('x', d3.forceX(0).strength(params.gravity))
-            .force('y', d3.forceY(0).strength(params.gravity))
-            .force('center', d3.forceCenter(0, 0))
-            .alphaDecay(params.alphaDecay)
-            .velocityDecay(params.velocityDecay);
-
-          if (params.linkStrength !== null) {
-            forceSim.force('link').strength(params.linkStrength);
-          }
-
-          return forceSim;
-        }
-
-      },
-      reset () {
-        var svg = d3.select("#FeatureGraph2");
-        svg.selectAll("*").remove();
-      },
-    },
-  mounted () {
-    EventBus.$on('quad2', data => { this.dataFS2 = data })
-    EventBus.$on('quad2', this.initializeNetwork)
-  }
-}
-</script>
-
-<style>
-
-text {
-  font-family: sans-serif;
-}
-
-svg {
-  display: block;
-}
-
-.column {
-  float: left;
-  margin: 0 10px;
-}
-
-</style>
\ No newline at end of file