new

frontend/src/components/FeatureSpace2.vue

@@ -22,8 +22,9 @@ export default {
   },
   methods: {
       initializeNetwork () {   
-        var dataLoc = JSON.parse(this.dataFS2[3])
+        
         var listofNodes = this.dataFS2[0]
+        var dataLoc = JSON.parse(this.dataFS2[3])
 
         var nodes = []
         listofNodes.forEach(element => nodes.push({"name": element}))
@@ -50,11 +51,79 @@ export default {
       },
       graphVizualization () {
 
+        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(2)
+            } else if (Object.values(VIFVar)[i] > 5) {
+              VIFVarFormatted.push(1)
+            } 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(d3.ticks(MIMin, MIMax, 5))
+          .range(['#fb6a4a','#ef3b2c','#cb181d','#a50f15','#67000d']);
+
         var svg = d3.select("#FeatureGraph2");
         svg.selectAll("*").remove();
 
-        var width = 600;
+        var marginSVG = { top: 0, right: 50, bottom: 0, left: 50}
-        var height = 500;
+        var width = 800;
+        var height = 600;
 
         var numTicks = 200;
 
@@ -64,8 +133,8 @@ export default {
         var dispatch = d3.dispatch('layoutend');
 
         svg = d3.select("#FeatureGraph2").append("svg")
-          .attr("width", width)
+          .attr("width", width + marginSVG.left + marginSVG.right)
-          .attr("height", height);
+          .attr("height", height + marginSVG.top + marginSVG.bottom);
 
         var graph = this.jsonData
 
@@ -133,68 +202,174 @@ export default {
 
           p.graphReadability = greadability.greadability(graph.nodes, graph.links);
           p.graphReadability = (p.graphReadability.crossing + p.graphReadability.crossingAngle +
-            p.graphReadability.angularResolutionMin + p.graphReadability.angularResolutionDev) / 4
+          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) {
+          if (i >= paramList.length) { 
-
+
-            var circles = node.append("circle")
+              // var data = [[
-              .attr("r", 5);
+              //     {value: 70, label: "", color: '#ff0000', lcolor: ''},
-
+              //     {value: 33, label: "", color: '#00ff00', lcolor: ''},
-            var drag_handler = d3.drag()
+              //     {value: 100, label: "44.5", color: '#000000', lcolor: 'black'}
-              .on("start", drag_start)
+              // ];]
-              .on("drag", drag_drag)
+
-              .on("end", drag_end);	
+                var data = []
-              
+                for(let k = 0; k < uniqueTarget.length; k++) {
-            drag_handler(node);
+                  data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
-
+                }
-            var labels = node.append("text")
+                data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])})
-              .text(function(d) {
+
-                return d.name;
+                var length = data.length
-              })
+                var border = VIFVarFormatted[0]
-              .attr('x', 6)
+
-              .attr('y', 3);
+                var widthLoc = 100;
-        
+                var arcSize = (6 * widthLoc / 100);
-            node.append('title').text(function (d) { return d.name; });
+                var innerRadius = arcSize * 2;   
-
+
-            //add zoom capabilities 
+                var svgNodes = node.append('svg').attr('width', widthLoc).attr('height', widthLoc);
-            var zoom_handler = d3.zoom()
+
-                .on("zoom", zoom_actions);
+                    var arcs = data.map(function (obj, i) {
-
+                      var data = []
-            zoom_handler(svg); 
+                      for(let k = 0; k < uniqueTarget.length; k++) {
+                        data.push({value: corrTargetFormatted[k][0], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''})
+                      }
+                      data.push({value: 100, label: corrGlobFormatted[0], color: '#000000', lcolor: colorsScaleNodes(MIVar[0])})
+                      var length = data.length
+                      var border = VIFVarFormatted[i]
+                      if (i == length - 1) {
+                        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 g = svgNodes.select('g').data(pieData).enter()
+                        .append('g')
+                        .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)');
+                    var gText = svgNodes.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';
+                    });
+
+                    svgNodes.selectAll('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(" + (6) + "," + (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', 15);
+            
+                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;
+                  }
 
-            drawGraph();
+                  //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();
+                  }
 
-            //Zoom functions 
+                  function drag_end(d) {
-            function zoom_actions(){
+                    if (!d3.event.active) forceSim.alphaTarget(0);
-                svg.attr("transform", d3.event.transform)
+                    d.fx = null;
-            }
+                    d.fy = null;
+                  }
 
-            function drag_start(d) {
+                stepper.stop();
-              console.log(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();
           }
 
         });
@@ -207,7 +382,9 @@ export default {
             .attr('y2', function (d) { return d.target.y; });
 
           node
-            .attr("transform", function(d) {
+            .attr("transform", function(d, i) {
+              d.x = d.x - 50
+              d.y = d.y - 50
               return "translate(" + d.x + "," + d.y + ")";
             })
         };
@@ -298,7 +475,6 @@ export default {
 
 text {
   font-family: sans-serif;
-  font-size: 10px;
 }
 
 svg {

run.py

@@ -509,9 +509,13 @@ def Seperation():
     DataRows4 = XData.iloc[quadrant4, :]
     
     corrMatrix1 = DataRows1.corr()
+    corrMatrix1 = corrMatrix1.abs()
     corrMatrix2 = DataRows2.corr()
+    corrMatrix2 = corrMatrix2.abs()
     corrMatrix3 = DataRows3.corr()
+    corrMatrix3 = corrMatrix3.abs()
     corrMatrix4 = DataRows4.corr()
+    corrMatrix4 = corrMatrix4.abs()
 
     DataRows1 = DataRows1.reset_index(drop=True)
     DataRows2 = DataRows2.reset_index(drop=True)
@@ -540,6 +544,7 @@ def Seperation():
         hotEncoderDF1 = pd.DataFrame(onehotEncoder1)
         concatDF1 = pd.concat([DataRows1, hotEncoderDF1], axis=1)
         corrMatrixComb1 = concatDF1.corr()
+        corrMatrixComb1 = corrMatrixComb1.abs()
         corrMatrixComb1 = corrMatrixComb1.iloc[:,-len(uniqueTarget1):]
         X1 = add_constant(DataRows1.dropna())
         VIF1 = pd.Series([variance_inflation_factor(X1.values, i) 
@@ -562,6 +567,7 @@ def Seperation():
         hotEncoderDF2 = pd.DataFrame(onehotEncoder2)
         concatDF2 = pd.concat([DataRows2, hotEncoderDF2], axis=1)
         corrMatrixComb2 = concatDF2.corr()
+        corrMatrixComb2 = corrMatrixComb2.abs()
         corrMatrixComb2 = corrMatrixComb2.iloc[:,-len(uniqueTarget2):]
         X2 = add_constant(DataRows2.dropna())
         VIF2 = pd.Series([variance_inflation_factor(X2.values, i) 
@@ -584,14 +590,13 @@ def Seperation():
         hotEncoderDF3 = pd.DataFrame(onehotEncoder3)
         concatDF3 = pd.concat([DataRows3, hotEncoderDF3], axis=1)
         corrMatrixComb3 = concatDF3.corr()
+        corrMatrixComb3 = corrMatrixComb3.abs()
         corrMatrixComb3 = corrMatrixComb3.iloc[:,-len(uniqueTarget3):]
         X3 = add_constant(DataRows3.dropna())
         VIF3 = pd.Series([variance_inflation_factor(X3.values, i) 
                 for i in range(X3.shape[1])], 
                 index=X3.columns)
         if (len(targetRows3Arr) > 2):
-            print(DataRows3)
-            print(targetRows3Arr)
             MI3 = mutual_info_classif(DataRows3, targetRows3Arr)
             MI3List = MI3.tolist()
         else:
@@ -608,6 +613,7 @@ def Seperation():
         hotEncoderDF4 = pd.DataFrame(onehotEncoder4)
         concatDF4 = pd.concat([DataRows4, hotEncoderDF4], axis=1)
         corrMatrixComb4 = concatDF4.corr()
+        corrMatrixComb4 = corrMatrixComb4.abs()
         corrMatrixComb4 = corrMatrixComb4.iloc[:,-len(uniqueTarget4):]
         X4 = add_constant(DataRows4.dropna())
         VIF4 = pd.Series([variance_inflation_factor(X4.values, i) 
@@ -634,9 +640,13 @@ def Seperation():
     concatAllDF4 = pd.concat([DataRows4, targetRows4ArrDF], axis=1)
 
     corrMatrixCombTotal1 = concatAllDF1.corr()
+    corrMatrixCombTotal1 = corrMatrixCombTotal1.abs()
     corrMatrixCombTotal2 = concatAllDF2.corr()
+    corrMatrixCombTotal2 = corrMatrixCombTotal2.abs()
     corrMatrixCombTotal3 = concatAllDF3.corr()
+    corrMatrixCombTotal3 = corrMatrixCombTotal3.abs()
     corrMatrixCombTotal4 = concatAllDF4.corr()
+    corrMatrixCombTotal4 = corrMatrixCombTotal4.abs()
 
     corrMatrixCombTotal1 = pd.concat([corrMatrixCombTotal1.tail(1)])
     corrMatrixCombTotal2 = pd.concat([corrMatrixCombTotal2.tail(1)])
@@ -653,7 +663,7 @@ def Seperation():
     packCorr.append(corrMatrix2.to_json())
     packCorr.append(corrMatrix3.to_json())
     packCorr.append(corrMatrix4.to_json())
-
+    
     packCorr.append(corrMatrixComb1.to_json())
     packCorr.append(corrMatrixComb2.to_json())
     packCorr.append(corrMatrixComb3.to_json())