From bb7976a5b5774461500d04c999e3d4b265a20d67 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Thu, 13 Aug 2020 14:20:32 +0200 Subject: [PATCH] new --- __pycache__/run.cpython-37.pyc | Bin 18497 -> 18497 bytes frontend/src/components/FeatureSpace1.vue | 5 + ...Space1 copy.vue => FeatureSpace2 copy.vue} | 238 +++-------------- frontend/src/components/FeatureSpace2.vue | 239 ++++++++++++++++-- frontend/src/components/FeatureSpace3.vue | 239 ++++++++++++++++-- frontend/src/components/FeatureSpace4.vue | 238 +++++++++++++++-- 6 files changed, 691 insertions(+), 268 deletions(-) rename frontend/src/components/{FeatureSpace1 copy.vue => FeatureSpace2 copy.vue} (65%) diff --git a/__pycache__/run.cpython-37.pyc b/__pycache__/run.cpython-37.pyc index f6f80ee809710f0693d7c6f40e3c0cbba89ef98a..d40c844963b8ee19a88e95b669d8b1c3d368b0a9 100644 GIT binary patch delta 22 ccmX>&f$`u3Ms6owUM>b8xT<2hk=x7z07k|IegFUf delta 22 ccmX>&f$`u3Ms6owUM>b8nCYgwk=x7z07b?HTmS$7 diff --git a/frontend/src/components/FeatureSpace1.vue b/frontend/src/components/FeatureSpace1.vue index 6bd91df..fa38b2c 100644 --- a/frontend/src/components/FeatureSpace1.vue +++ b/frontend/src/components/FeatureSpace1.vue @@ -23,6 +23,7 @@ export default { corrMatrixCombTotal: [], VIFRemaining: [], MIRemaining: [], + computeNodes: 0 } }, methods: { @@ -145,6 +146,7 @@ export default { var nodes = [] var groupID = 0 + listofNodes.forEach( function(element) { groupID++ nodes.push({"name": element, "group": groupID+"_root"}) @@ -173,6 +175,9 @@ export default { {"name": element+"_r_10", "group": groupID}, ) }) + + this.computeNodes = nodes.length + EventBus.$emit('countNodes1', this.computeNodes) Object.entries(pushEachFinal).forEach( function ([index, feature]) { diff --git a/frontend/src/components/FeatureSpace1 copy.vue b/frontend/src/components/FeatureSpace2 copy.vue similarity index 65% rename from frontend/src/components/FeatureSpace1 copy.vue rename to frontend/src/components/FeatureSpace2 copy.vue index 2a39d61..35329be 100644 --- a/frontend/src/components/FeatureSpace1 copy.vue +++ b/frontend/src/components/FeatureSpace2 copy.vue @@ -1,6 +1,6 @@ @@ -13,142 +13,21 @@ import * as d3Base from 'd3' const d3 = Object.assign(d3Base) export default { - name: 'FeatureSpace1', + name: 'FeatureSpace2', data () { return { - dataFS1: [], - dataFS1Trans: [], + dataFS2: [], jsonData: [], - corrMatrixComb: [], - corrMatrixCombTotal: [], - VIFRemaining: [], - MIRemaining: [], } }, methods: { initializeNetwork () { - var listofNodes = this.dataFS1[0] - var dataLoc = JSON.parse(this.dataFS1[2]) - var pushEachFinal = [] - var pushEach - var oldVal - var newVal - var outcome - var countLoc - - var corrMatrixCombLoc =[] - var corrMatrixCombTotalLoc = [] - var VIFRemainingLoc = [] - var MIRemainingLoc = [] - - this.dataFS1Trans.forEach(function(element, index) { - var round = element.round - corrMatrixCombLoc.push(Object.values(JSON.parse(round[4]))) - corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[8]))[0] * 100) - VIFRemainingLoc.push(Object.values(JSON.parse(round[12]))[0]) - MIRemainingLoc.push(JSON.parse(round[16])) - round = JSON.parse(round[0]) - oldVal = 0 - newVal = 0 - outcome = 0 - countLoc = 0 - pushEach = [] - Object.entries(round).forEach( - function ([feature, value]) { - var key = Object.keys(value) - var search = Object.values(dataLoc[key]) - oldVal = Math.abs(search[countLoc]) + oldVal - newVal = Math.abs(Object.values(value)[0]) + newVal - countLoc++ - }) - oldVal = oldVal / listofNodes.length - newVal = newVal / listofNodes.length - outcome = oldVal - newVal - pushEach.push({keyIns: "round", valueIns: outcome}) - - var roundLogE = element.roundLogE - corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[4]))) - corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[8]))[0] * 100) - VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[12]))[0]) - MIRemainingLoc.push(JSON.parse(roundLogE[16])) - roundLogE = JSON.parse(roundLogE[0]) - oldVal = 0 - newVal = 0 - outcome = 0 - countLoc = 0 - Object.entries(roundLogE).forEach( - function ([feature, value]) { - var key = Object.keys(value) - var search = Object.values(dataLoc[key]) - oldVal = Math.abs(search[countLoc]) + oldVal - newVal = Math.abs(Object.values(value)[0]) + newVal - countLoc++ - }) - oldVal = oldVal / listofNodes.length - newVal = newVal / listofNodes.length - outcome = oldVal - newVal - pushEach.push({keyIns: "roundLogE", valueIns: outcome}) - - var roundLog2 = element.roundLog2 - corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[4]))) - corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[8]))[0] * 100) - VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[12]))[0]) - MIRemainingLoc.push(JSON.parse(roundLog2[16])) - roundLog2 = JSON.parse(roundLog2[0]) - oldVal = 0 - newVal = 0 - outcome = 0 - countLoc = 0 - Object.entries(roundLog2).forEach( - function ([feature, value]) { - var key = Object.keys(value) - var search = Object.values(dataLoc[key]) - oldVal = Math.abs(search[countLoc]) + oldVal - newVal = Math.abs(Object.values(value)[0]) + newVal - countLoc++ - }) - oldVal = oldVal / listofNodes.length - newVal = newVal / listofNodes.length - outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog2", valueIns: outcome}) - - var roundLog10 = element.roundLog10 - corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[4]))) - corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[8]))[0] * 100) - VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[12]))[0]) - MIRemainingLoc.push(JSON.parse(roundLog10[16])) - roundLog10 = JSON.parse(roundLog10[0]) - oldVal = 0 - newVal = 0 - outcome = 0 - countLoc = 0 - Object.entries(roundLog10).forEach( - function ([feature, value]) { - var key = Object.keys(value) - var search = Object.values(dataLoc[key]) - oldVal = Math.abs(search[countLoc]) + oldVal - newVal = Math.abs(Object.values(value)[0]) + newVal - countLoc++ - }) - oldVal = oldVal / listofNodes.length - newVal = newVal / listofNodes.length - outcome = oldVal - newVal - pushEach.push({keyIns: "roundLog10", valueIns: outcome}) - pushEachFinal.push({key: listofNodes[index], value: pushEach}) - }) - - this.corrMatrixComb = [...corrMatrixCombLoc] - this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc] - this.VIFRemaining = [...VIFRemainingLoc] - this.MIRemaining = [...MIRemainingLoc] + var listofNodes = this.dataFS2[0] + var dataLoc = JSON.parse(this.dataFS2[3]) var nodes = [] - var groupID = 0 - listofNodes.forEach( function(element) { - groupID++ - nodes.push({"name": element, "group": groupID}) - }) + listofNodes.forEach(element => nodes.push({"name": element})) var links = [] @@ -157,35 +36,14 @@ export default { Object.entries(value).forEach( function ([featureInside, value]) { if (feature != featureInside) { if (value >= 0) { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"}) + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1}) + } else { + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2}) } } }) }) - groupID = 0 - listofNodes.forEach( function(element) { - groupID++ - nodes.push( - {"name": element+"_r", "group": groupID}, - {"name": element+"_r_E", "group": groupID}, - {"name": element+"_r_2", "group": groupID}, - {"name": element+"_r_10", "group": groupID}, - ) - }) - - Object.entries(pushEachFinal).forEach( - function ([index, feature]) { - feature.value.forEach(function (element, indexIns) { - if (element.valueIns > 0) { - links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"}) - } - else { - links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"}) - } - }) - }) - this.jsonData = {"nodes": nodes, "links": links}; this.graphVizualization() @@ -193,13 +51,13 @@ export default { }, graphVizualization () { - var listofNodes = this.dataFS1[0] - var uniqueTarget = JSON.parse(this.dataFS1[14]) - var corrTarget = JSON.parse(this.dataFS1[6]) - var corrGlob = JSON.parse(this.dataFS1[10]) - var VIFVar = JSON.parse(this.dataFS1[18]) - var MIVar = JSON.parse(this.dataFS1[22]) - MIVar = MIVar.concat(this.MIRemaining) + var 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 = [] @@ -213,16 +71,6 @@ export default { corrTargetFormatted.push(corrTargetFormattedLoc) } - for (let j = 0; j < uniqueTarget.length; j++) { - for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) { - if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) { - corrTargetFormatted[j].push(0) - } else { - corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100)) - } - } - } - var corrGlobFormatted = [] for (let i = 0; i < Object.keys(corrGlob).length; i++) { if (i != 0) { @@ -230,10 +78,6 @@ export default { } } - for (let i = 0; i < this.corrMatrixCombTotal.length; i++) { - corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i])) - } - var VIFVarFormatted = [] for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { @@ -247,16 +91,6 @@ export default { } } - for (let i = 0; i < this.VIFRemaining.length; i++) { - if (this.VIFRemaining[i] > 10) { - VIFVarFormatted.push(4) - } else if (this.VIFRemaining[i] > 5) { - VIFVarFormatted.push(2) - } else { - VIFVarFormatted.push(0) - } - } - function min(input) { if (toString.call(input) !== "[object Array]") return false; @@ -281,14 +115,14 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) - var colorsScaleNodes = d3.scaleOrdinal() - .domain(d3.ticks([MIMin, MIMax, 10])) - .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']); + var colorsScaleNodes = d3.scaleLinear() + .domain([MIMin, MIMax]) + .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']); - var svg = d3.select("#FeatureGraph1"); + var svg = d3.select("#FeatureGraph2"); svg.selectAll("*").remove(); - var width = 1000; + var width = 800; var height = 500; var numTicks = 200; @@ -298,7 +132,7 @@ export default { var dispatch = d3.dispatch('layoutend'); - svg = d3.select("#FeatureGraph1").append("svg") + svg = d3.select("#FeatureGraph2").append("svg") .attr("width", width) .attr("height", height); @@ -309,9 +143,7 @@ export default { .selectAll('line') .data(graph.links) .enter().append('line') - .attr("stroke", function(d) { return d.lin_color; }) .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); - var node = svg.append('g') .attr('class', 'nodes') @@ -384,20 +216,23 @@ export default { var innerRadius = arcSize * 2; var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc) - .attr("id", function(d, i) { return "svg" + (i); }) + .attr("id", function(d, i) { return "svg" + (i+listofNodes.length); }) graph.nodes.forEach(function(itemVal, indexNode) { + // var data = [[ + // {value: 70, label: "", color: '#ff0000', lcolor: ''}, + // {value: 33, label: "", color: '#00ff00', lcolor: ''}, + // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} + // ];] + var data = [] for(let k = 0; k < uniqueTarget.length; k++) { data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) } - var length = data.length data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])}) - - var border = VIFVarFormatted[indexNode] var arcs = data.map(function (obj, i) { @@ -422,7 +257,7 @@ export default { var pie = d3.pie().sort(null).value(function (d) { return d.value; }); - var id = indexNode + var id = indexNode+listofNodes.length var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter() .append('g') .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); @@ -546,7 +381,7 @@ export default { .attr('y2', function (d) { return d.target.y; }); node - .attr("id", function(d, i) { return "g" + (i); }) + .attr("id", function(d, i) { return "g" + (i+listofNodes.length); }) .attr("transform", function(d, i) { d.x = d.x - 50 d.y = d.y - 50 @@ -625,14 +460,13 @@ export default { }, reset () { - var svg = d3.select("#FeatureGraph1"); + var svg = d3.select("#FeatureGraph2"); svg.selectAll("*").remove(); }, }, mounted () { - EventBus.$on('quadTrans1', data => { this.dataFS1Trans = data }) - EventBus.$on('quad1', data => { this.dataFS1 = data }) - EventBus.$on('quad1', this.initializeNetwork) + EventBus.$on('quad2', data => { this.dataFS2 = data }) + EventBus.$on('quad2', this.initializeNetwork) } } @@ -647,10 +481,6 @@ svg { display: block; } -.links line { - stroke-opacity: 0.6; -} - .column { float: left; margin: 0 10px; diff --git a/frontend/src/components/FeatureSpace2.vue b/frontend/src/components/FeatureSpace2.vue index 35329be..2c400a9 100644 --- a/frontend/src/components/FeatureSpace2.vue +++ b/frontend/src/components/FeatureSpace2.vue @@ -13,11 +13,17 @@ import * as d3Base from 'd3' const d3 = Object.assign(d3Base) export default { - name: 'FeatureSpace2', + name: 'FeatureSpace1', data () { return { dataFS2: [], + dataFS2Trans: [], jsonData: [], + corrMatrixComb: [], + corrMatrixCombTotal: [], + VIFRemaining: [], + MIRemaining: [], + computeNodes: 0 } }, methods: { @@ -25,9 +31,125 @@ export default { var listofNodes = this.dataFS2[0] var dataLoc = JSON.parse(this.dataFS2[3]) + var pushEachFinal = [] + var pushEach + var oldVal + var newVal + var outcome + var countLoc + + var corrMatrixCombLoc =[] + var corrMatrixCombTotalLoc = [] + var VIFRemainingLoc = [] + var MIRemainingLoc = [] + + this.dataFS2Trans.forEach(function(element, index) { + var round = element.round + corrMatrixCombLoc.push(Object.values(JSON.parse(round[5]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[9]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(round[13]))[0]) + MIRemainingLoc.push(JSON.parse(round[17])) + round = JSON.parse(round[1]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + pushEach = [] + Object.entries(round).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "round", valueIns: outcome}) + + var roundLogE = element.roundLogE + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[9]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[13]))[0]) + MIRemainingLoc.push(JSON.parse(roundLogE[17])) + roundLogE = JSON.parse(roundLogE[1]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLogE).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLogE", valueIns: outcome}) + + var roundLog2 = element.roundLog2 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[9]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[13]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog2[17])) + roundLog2 = JSON.parse(roundLog2[1]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog2).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog2", valueIns: outcome}) + + var roundLog10 = element.roundLog10 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[9]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[13]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog10[17])) + roundLog10 = JSON.parse(roundLog10[1]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog10).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog10", valueIns: outcome}) + pushEachFinal.push({key: listofNodes[index], value: pushEach}) + }) + + this.corrMatrixComb = [...corrMatrixCombLoc] + this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc] + this.VIFRemaining = [...VIFRemainingLoc] + this.MIRemaining = [...MIRemainingLoc] var nodes = [] - listofNodes.forEach(element => nodes.push({"name": element})) + var groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push({"name": element, "group": groupID+"_root"}) + }) var links = [] @@ -36,20 +158,43 @@ export default { Object.entries(value).forEach( function ([featureInside, value]) { if (feature != featureInside) { if (value >= 0) { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1}) - } else { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2}) + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"}) } } }) }) + groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push( + {"name": element+"_r", "group": groupID}, + {"name": element+"_r_E", "group": groupID}, + {"name": element+"_r_2", "group": groupID}, + {"name": element+"_r_10", "group": groupID}, + ) + }) + + Object.entries(pushEachFinal).forEach( + function ([index, feature]) { + feature.value.forEach(function (element, indexIns) { + if (element.valueIns > 0) { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"}) + } + else { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"}) + } + }) + }) + this.jsonData = {"nodes": nodes, "links": links}; this.graphVizualization() }, graphVizualization () { + + var computeNodesVar = this.computeNodes var listofNodes = this.dataFS2[0] var uniqueTarget = JSON.parse(this.dataFS2[15]) @@ -57,7 +202,7 @@ export default { var corrGlob = JSON.parse(this.dataFS2[11]) var VIFVar = JSON.parse(this.dataFS2[19]) var MIVar = JSON.parse(this.dataFS2[23]) - + MIVar = MIVar.concat(this.MIRemaining) var colorCateg = d3.scaleOrdinal(d3.schemeAccent) var corrTargetFormatted = [] @@ -71,6 +216,16 @@ export default { corrTargetFormatted.push(corrTargetFormattedLoc) } + for (let j = 0; j < uniqueTarget.length; j++) { + for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) { + if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) { + corrTargetFormatted[j].push(0) + } else { + corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100)) + } + } + } + var corrGlobFormatted = [] for (let i = 0; i < Object.keys(corrGlob).length; i++) { if (i != 0) { @@ -78,6 +233,10 @@ export default { } } + for (let i = 0; i < this.corrMatrixCombTotal.length; i++) { + corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i])) + } + var VIFVarFormatted = [] for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { @@ -91,6 +250,16 @@ export default { } } + for (let i = 0; i < this.VIFRemaining.length; i++) { + if (this.VIFRemaining[i] > 10) { + VIFVarFormatted.push(4) + } else if (this.VIFRemaining[i] > 5) { + VIFVarFormatted.push(2) + } else { + VIFVarFormatted.push(0) + } + } + function min(input) { if (toString.call(input) !== "[object Array]") return false; @@ -115,14 +284,14 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) - var colorsScaleNodes = d3.scaleLinear() - .domain([MIMin, MIMax]) - .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']); + var colorsScaleNodes = d3.scaleOrdinal() + .domain(d3.ticks([MIMin, MIMax, 10])) + .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']); var svg = d3.select("#FeatureGraph2"); svg.selectAll("*").remove(); - var width = 800; + var width = 1000; var height = 500; var numTicks = 200; @@ -143,13 +312,26 @@ export default { .selectAll('line') .data(graph.links) .enter().append('line') + .attr("stroke", function(d) { return d.lin_color; }) .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); + var node = svg.append('g') .attr('class', 'nodes') .selectAll('g') .data(graph.nodes) .enter().append('g') + .on("click", function(id, index) { + var groupLoc = index + 1 + var items = document.getElementsByClassName(groupLoc) + items.forEach( function (it) { + if (it.style.visibility == "hidden") { + it.style.visibility = "visible"; + } else { + it.style.visibility = "hidden"; + } + }) + }); var paramGroups = [ {name: 'chargeStrength', values: [-30, -80]}, @@ -215,24 +397,21 @@ export default { var arcSize = (6 * widthLoc / 100); var innerRadius = arcSize * 2; - var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc) - .attr("id", function(d, i) { return "svg" + (i+listofNodes.length); }) + var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; }) + .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); }) graph.nodes.forEach(function(itemVal, indexNode) { - // var data = [[ - // {value: 70, label: "", color: '#ff0000', lcolor: ''}, - // {value: 33, label: "", color: '#00ff00', lcolor: ''}, - // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} - // ];] - var data = [] for(let k = 0; k < uniqueTarget.length; k++) { data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) } + var length = data.length data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])}) + + var border = VIFVarFormatted[indexNode] var arcs = data.map(function (obj, i) { @@ -257,7 +436,8 @@ export default { var pie = d3.pie().sort(null).value(function (d) { return d.value; }); - var id = indexNode+listofNodes.length + + var id = indexNode + computeNodesVar var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter() .append('g') .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); @@ -344,6 +524,15 @@ export default { drawGraph(); + for (let i = 0; i < listofNodes.length; i++) { + var numb = graph.nodes[i]['group'].match(/\d/g) + numb = parseInt(numb.join("")) + var items = document.getElementsByClassName(numb) + items.forEach( function (it) { + it.style.visibility = "hidden"; + }) + } + //Zoom functions function zoom_actions(){ svg.attr("transform", d3.event.transform) @@ -381,7 +570,7 @@ export default { .attr('y2', function (d) { return d.target.y; }); node - .attr("id", function(d, i) { return "g" + (i+listofNodes.length); }) + .attr("id", function(d, i) { return "g" + (i+computeNodesVar); }) .attr("transform", function(d, i) { d.x = d.x - 50 d.y = d.y - 50 @@ -458,6 +647,10 @@ export default { return forceSim; } + this.computeNodes = this.computeNodes + graph.nodes.length + + EventBus.$emit('countNodes2', this.computeNodes) + }, reset () { var svg = d3.select("#FeatureGraph2"); @@ -465,8 +658,10 @@ export default { }, }, mounted () { + EventBus.$on('quadTrans2', data => { this.dataFS2Trans = data }) EventBus.$on('quad2', data => { this.dataFS2 = data }) EventBus.$on('quad2', this.initializeNetwork) + EventBus.$on('countNodes1', data => { this.computeNodes = data }) } } @@ -481,6 +676,10 @@ svg { display: block; } +.links line { + stroke-opacity: 0.6; +} + .column { float: left; margin: 0 10px; diff --git a/frontend/src/components/FeatureSpace3.vue b/frontend/src/components/FeatureSpace3.vue index 3570a9a..80d10db 100644 --- a/frontend/src/components/FeatureSpace3.vue +++ b/frontend/src/components/FeatureSpace3.vue @@ -13,11 +13,17 @@ import * as d3Base from 'd3' const d3 = Object.assign(d3Base) export default { - name: 'FeatureSpace3', + name: 'FeatureSpace1', data () { return { dataFS3: [], + dataFS3Trans: [], jsonData: [], + corrMatrixComb: [], + corrMatrixCombTotal: [], + VIFRemaining: [], + MIRemaining: [], + computeNodes: 0 } }, methods: { @@ -25,9 +31,125 @@ export default { var listofNodes = this.dataFS3[0] var dataLoc = JSON.parse(this.dataFS3[4]) + var pushEachFinal = [] + var pushEach + var oldVal + var newVal + var outcome + var countLoc + + var corrMatrixCombLoc =[] + var corrMatrixCombTotalLoc = [] + var VIFRemainingLoc = [] + var MIRemainingLoc = [] + + this.dataFS3Trans.forEach(function(element, index) { + var round = element.round + corrMatrixCombLoc.push(Object.values(JSON.parse(round[6]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[10]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(round[14]))[0]) + MIRemainingLoc.push(JSON.parse(round[18])) + round = JSON.parse(round[2]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + pushEach = [] + Object.entries(round).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "round", valueIns: outcome}) + + var roundLogE = element.roundLogE + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[6]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[10]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[14]))[0]) + MIRemainingLoc.push(JSON.parse(roundLogE[18])) + roundLogE = JSON.parse(roundLogE[2]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLogE).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLogE", valueIns: outcome}) + + var roundLog2 = element.roundLog2 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[6]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[10]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[14]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog2[18])) + roundLog2 = JSON.parse(roundLog2[2]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog2).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog2", valueIns: outcome}) + + var roundLog10 = element.roundLog10 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[6]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[10]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[14]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog10[18])) + roundLog10 = JSON.parse(roundLog10[2]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog10).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog10", valueIns: outcome}) + pushEachFinal.push({key: listofNodes[index], value: pushEach}) + }) + + this.corrMatrixComb = [...corrMatrixCombLoc] + this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc] + this.VIFRemaining = [...VIFRemainingLoc] + this.MIRemaining = [...MIRemainingLoc] var nodes = [] - listofNodes.forEach(element => nodes.push({"name": element})) + var groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push({"name": element, "group": groupID+"_root"}) + }) var links = [] @@ -36,14 +158,35 @@ export default { Object.entries(value).forEach( function ([featureInside, value]) { if (feature != featureInside) { if (value >= 0) { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1}) - } else { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2}) + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"}) } } }) }) + groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push( + {"name": element+"_r", "group": groupID}, + {"name": element+"_r_E", "group": groupID}, + {"name": element+"_r_2", "group": groupID}, + {"name": element+"_r_10", "group": groupID}, + ) + }) + + Object.entries(pushEachFinal).forEach( + function ([index, feature]) { + feature.value.forEach(function (element, indexIns) { + if (element.valueIns > 0) { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"}) + } + else { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"}) + } + }) + }) + this.jsonData = {"nodes": nodes, "links": links}; this.graphVizualization() @@ -51,13 +194,15 @@ export default { }, graphVizualization () { + var computeNodesVar = this.computeNodes + var listofNodes = this.dataFS3[0] var uniqueTarget = JSON.parse(this.dataFS3[16]) var corrTarget = JSON.parse(this.dataFS3[8]) var corrGlob = JSON.parse(this.dataFS3[12]) var VIFVar = JSON.parse(this.dataFS3[20]) var MIVar = JSON.parse(this.dataFS3[24]) - + MIVar = MIVar.concat(this.MIRemaining) var colorCateg = d3.scaleOrdinal(d3.schemeAccent) var corrTargetFormatted = [] @@ -71,6 +216,16 @@ export default { corrTargetFormatted.push(corrTargetFormattedLoc) } + for (let j = 0; j < uniqueTarget.length; j++) { + for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) { + if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) { + corrTargetFormatted[j].push(0) + } else { + corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100)) + } + } + } + var corrGlobFormatted = [] for (let i = 0; i < Object.keys(corrGlob).length; i++) { if (i != 0) { @@ -78,6 +233,10 @@ export default { } } + for (let i = 0; i < this.corrMatrixCombTotal.length; i++) { + corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i])) + } + var VIFVarFormatted = [] for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { @@ -91,6 +250,16 @@ export default { } } + for (let i = 0; i < this.VIFRemaining.length; i++) { + if (this.VIFRemaining[i] > 10) { + VIFVarFormatted.push(4) + } else if (this.VIFRemaining[i] > 5) { + VIFVarFormatted.push(2) + } else { + VIFVarFormatted.push(0) + } + } + function min(input) { if (toString.call(input) !== "[object Array]") return false; @@ -115,14 +284,14 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) - var colorsScaleNodes = d3.scaleLinear() - .domain([MIMin, MIMax]) - .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']); + var colorsScaleNodes = d3.scaleOrdinal() + .domain(d3.ticks([MIMin, MIMax, 10])) + .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']); var svg = d3.select("#FeatureGraph3"); svg.selectAll("*").remove(); - var width = 800; + var width = 1000; var height = 500; var numTicks = 200; @@ -143,13 +312,26 @@ export default { .selectAll('line') .data(graph.links) .enter().append('line') + .attr("stroke", function(d) { return d.lin_color; }) .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); + var node = svg.append('g') .attr('class', 'nodes') .selectAll('g') .data(graph.nodes) .enter().append('g') + .on("click", function(id, index) { + var groupLoc = index + 1 + var items = document.getElementsByClassName(groupLoc) + items.forEach( function (it) { + if (it.style.visibility == "hidden") { + it.style.visibility = "visible"; + } else { + it.style.visibility = "hidden"; + } + }) + }); var paramGroups = [ {name: 'chargeStrength', values: [-30, -80]}, @@ -215,27 +397,23 @@ export default { var arcSize = (6 * widthLoc / 100); var innerRadius = arcSize * 2; - var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc) - .attr("id", function(d, i) { return "svg" + (listofNodes.length*2+i); }) + var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; }) + .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); }) graph.nodes.forEach(function(itemVal, indexNode) { - - // var data = [[ - // {value: 70, label: "", color: '#ff0000', lcolor: ''}, - // {value: 33, label: "", color: '#00ff00', lcolor: ''}, - // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} - // ];] var data = [] for(let k = 0; k < uniqueTarget.length; k++) { data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) } + var length = data.length data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])}) - var border = VIFVarFormatted[indexNode] + var border = VIFVarFormatted[indexNode] + var arcs = data.map(function (obj, i) { if (i == length) { return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); @@ -258,7 +436,7 @@ export default { var pie = d3.pie().sort(null).value(function (d) { return d.value; }); - var id = listofNodes.length*2+indexNode + var id = indexNode + computeNodesVar var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter() .append('g') .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); @@ -267,7 +445,6 @@ export default { .classed('textClass', true) .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); - g.selectAll('path').data(function (d) { return pie(d); }).enter().append('path') @@ -346,6 +523,15 @@ export default { drawGraph(); + for (let i = 0; i < listofNodes.length; i++) { + var numb = graph.nodes[i]['group'].match(/\d/g) + numb = parseInt(numb.join("")) + var items = document.getElementsByClassName(numb) + items.forEach( function (it) { + it.style.visibility = "hidden"; + }) + } + //Zoom functions function zoom_actions(){ svg.attr("transform", d3.event.transform) @@ -383,7 +569,7 @@ export default { .attr('y2', function (d) { return d.target.y; }); node - .attr("id", function(d, i) { return "g" + (listofNodes.length*2+i); }) + .attr("id", function(d, i) { return "g" + (i+computeNodesVar); }) .attr("transform", function(d, i) { d.x = d.x - 50 d.y = d.y - 50 @@ -460,6 +646,9 @@ export default { return forceSim; } + this.computeNodes = this.computeNodes + graph.nodes.length + EventBus.$emit('countNodes3', this.computeNodes) + }, reset () { var svg = d3.select("#FeatureGraph3"); @@ -467,8 +656,10 @@ export default { }, }, mounted () { + EventBus.$on('quadTrans3', data => { this.dataFS3Trans = data }) EventBus.$on('quad3', data => { this.dataFS3 = data }) EventBus.$on('quad3', this.initializeNetwork) + EventBus.$on('countNodes2', data => { this.computeNodes = data }) } } @@ -483,6 +674,10 @@ svg { display: block; } +.links line { + stroke-opacity: 0.6; +} + .column { float: left; margin: 0 10px; diff --git a/frontend/src/components/FeatureSpace4.vue b/frontend/src/components/FeatureSpace4.vue index 923505f..21a836c 100644 --- a/frontend/src/components/FeatureSpace4.vue +++ b/frontend/src/components/FeatureSpace4.vue @@ -13,11 +13,17 @@ import * as d3Base from 'd3' const d3 = Object.assign(d3Base) export default { - name: 'FeatureSpace4', + name: 'FeatureSpace1', data () { return { dataFS4: [], + dataFS4Trans: [], jsonData: [], + corrMatrixComb: [], + corrMatrixCombTotal: [], + VIFRemaining: [], + MIRemaining: [], + computeNodes: 0 } }, methods: { @@ -25,9 +31,125 @@ export default { var listofNodes = this.dataFS4[0] var dataLoc = JSON.parse(this.dataFS4[5]) + var pushEachFinal = [] + var pushEach + var oldVal + var newVal + var outcome + var countLoc + + var corrMatrixCombLoc =[] + var corrMatrixCombTotalLoc = [] + var VIFRemainingLoc = [] + var MIRemainingLoc = [] + + this.dataFS4Trans.forEach(function(element, index) { + var round = element.round + corrMatrixCombLoc.push(Object.values(JSON.parse(round[7]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(round[11]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(round[15]))[0]) + MIRemainingLoc.push(JSON.parse(round[19])) + round = JSON.parse(round[3]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + pushEach = [] + Object.entries(round).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "round", valueIns: outcome}) + + var roundLogE = element.roundLogE + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[7]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLogE[11]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLogE[15]))[0]) + MIRemainingLoc.push(JSON.parse(roundLogE[19])) + roundLogE = JSON.parse(roundLogE[3]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLogE).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLogE", valueIns: outcome}) + + var roundLog2 = element.roundLog2 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[7]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog2[11]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog2[15]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog2[19])) + roundLog2 = JSON.parse(roundLog2[3]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog2).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog2", valueIns: outcome}) + + var roundLog10 = element.roundLog10 + corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[7]))) + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(roundLog10[11]))[0] * 100) + VIFRemainingLoc.push(Object.values(JSON.parse(roundLog10[15]))[0]) + MIRemainingLoc.push(JSON.parse(roundLog10[19])) + roundLog10 = JSON.parse(roundLog10[3]) + oldVal = 0 + newVal = 0 + outcome = 0 + countLoc = 0 + Object.entries(roundLog10).forEach( + function ([feature, value]) { + var key = Object.keys(value) + var search = Object.values(dataLoc[key]) + oldVal = Math.abs(search[countLoc]) + oldVal + newVal = Math.abs(Object.values(value)[0]) + newVal + countLoc++ + }) + oldVal = oldVal / listofNodes.length + newVal = newVal / listofNodes.length + outcome = oldVal - newVal + pushEach.push({keyIns: "roundLog10", valueIns: outcome}) + pushEachFinal.push({key: listofNodes[index], value: pushEach}) + }) + + this.corrMatrixComb = [...corrMatrixCombLoc] + this.corrMatrixCombTotal = [...corrMatrixCombTotalLoc] + this.VIFRemaining = [...VIFRemainingLoc] + this.MIRemaining = [...MIRemainingLoc] var nodes = [] - listofNodes.forEach(element => nodes.push({"name": element})) + var groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push({"name": element, "group": groupID+"_root"}) + }) var links = [] @@ -36,14 +158,35 @@ export default { Object.entries(value).forEach( function ([featureInside, value]) { if (feature != featureInside) { if (value >= 0) { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 1}) - } else { - links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "group": 2}) + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"}) } } }) }) + groupID = 0 + listofNodes.forEach( function(element) { + groupID++ + nodes.push( + {"name": element+"_r", "group": groupID}, + {"name": element+"_r_E", "group": groupID}, + {"name": element+"_r_2", "group": groupID}, + {"name": element+"_r_10", "group": groupID}, + ) + }) + + Object.entries(pushEachFinal).forEach( + function ([index, feature]) { + feature.value.forEach(function (element, indexIns) { + if (element.valueIns > 0) { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#4393c3"}) + } + else { + links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"}) + } + }) + }) + this.jsonData = {"nodes": nodes, "links": links}; this.graphVizualization() @@ -51,13 +194,15 @@ export default { }, graphVizualization () { + var computeNodesVar = this.computeNodes + var listofNodes = this.dataFS4[0] var uniqueTarget = JSON.parse(this.dataFS4[17]) var corrTarget = JSON.parse(this.dataFS4[9]) var corrGlob = JSON.parse(this.dataFS4[13]) var VIFVar = JSON.parse(this.dataFS4[21]) var MIVar = JSON.parse(this.dataFS4[25]) - + MIVar = MIVar.concat(this.MIRemaining) var colorCateg = d3.scaleOrdinal(d3.schemeAccent) var corrTargetFormatted = [] @@ -71,6 +216,16 @@ export default { corrTargetFormatted.push(corrTargetFormattedLoc) } + for (let j = 0; j < uniqueTarget.length; j++) { + for (let i = 0; i < Object.keys(this.corrMatrixComb).length; i++) { + if (Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100) == null) { + corrTargetFormatted[j].push(0) + } else { + corrTargetFormatted[j].push(Math.round(Object.values((Object.values(this.corrMatrixComb[i])[j]))[0] * 100)) + } + } + } + var corrGlobFormatted = [] for (let i = 0; i < Object.keys(corrGlob).length; i++) { if (i != 0) { @@ -78,6 +233,10 @@ export default { } } + for (let i = 0; i < this.corrMatrixCombTotal.length; i++) { + corrGlobFormatted.push(Math.round(this.corrMatrixCombTotal[i])) + } + var VIFVarFormatted = [] for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { @@ -91,6 +250,16 @@ export default { } } + for (let i = 0; i < this.VIFRemaining.length; i++) { + if (this.VIFRemaining[i] > 10) { + VIFVarFormatted.push(4) + } else if (this.VIFRemaining[i] > 5) { + VIFVarFormatted.push(2) + } else { + VIFVarFormatted.push(0) + } + } + function min(input) { if (toString.call(input) !== "[object Array]") return false; @@ -115,14 +284,14 @@ export default { MIVar = MIVar.map(normalize(MIMin, MIMax)) - var colorsScaleNodes = d3.scaleLinear() - .domain([MIMin, MIMax]) - .range(['#a6bddb','#74a9cf','#3690c0','#0570b0','#045a8d','#023858']); + var colorsScaleNodes = d3.scaleOrdinal() + .domain(d3.ticks([MIMin, MIMax, 10])) + .range(['#67001f','#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0','#92c5de','#4393c3','#2166ac','#053061']); var svg = d3.select("#FeatureGraph4"); svg.selectAll("*").remove(); - var width = 800; + var width = 1000; var height = 500; var numTicks = 200; @@ -143,13 +312,26 @@ export default { .selectAll('line') .data(graph.links) .enter().append('line') + .attr("stroke", function(d) { return d.lin_color; }) .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); + var node = svg.append('g') .attr('class', 'nodes') .selectAll('g') .data(graph.nodes) .enter().append('g') + .on("click", function(id, index) { + var groupLoc = index + 1 + var items = document.getElementsByClassName(groupLoc) + items.forEach( function (it) { + if (it.style.visibility == "hidden") { + it.style.visibility = "visible"; + } else { + it.style.visibility = "hidden"; + } + }) + }); var paramGroups = [ {name: 'chargeStrength', values: [-30, -80]}, @@ -215,27 +397,23 @@ export default { var arcSize = (6 * widthLoc / 100); var innerRadius = arcSize * 2; - var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc) - .attr("id", function(d, i) { return "svg" + (listofNodes.length*3+i); }) + var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; }) + .attr("id", function(d, i) { return "svg" + (i+computeNodesVar); }) graph.nodes.forEach(function(itemVal, indexNode) { - - // var data = [[ - // {value: 70, label: "", color: '#ff0000', lcolor: ''}, - // {value: 33, label: "", color: '#00ff00', lcolor: ''}, - // {value: 100, label: "44.5", color: '#000000', lcolor: 'black'} - // ];] var data = [] for(let k = 0; k < uniqueTarget.length; k++) { data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) } + var length = data.length data.push({value: 100, label: corrGlobFormatted[indexNode], color: '#000000', lcolor: colorsScaleNodes(MIVar[indexNode])}) - var border = VIFVarFormatted[indexNode] + var border = VIFVarFormatted[indexNode] + var arcs = data.map(function (obj, i) { if (i == length) { return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); @@ -258,7 +436,9 @@ export default { var pie = d3.pie().sort(null).value(function (d) { return d.value; }); - var id = listofNodes.length*3+indexNode + + var id = indexNode + computeNodesVar + var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter() .append('g') .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); @@ -267,7 +447,6 @@ export default { .classed('textClass', true) .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); - g.selectAll('path').data(function (d) { return pie(d); }).enter().append('path') @@ -346,6 +525,15 @@ export default { drawGraph(); + for (let i = 0; i < listofNodes.length; i++) { + var numb = graph.nodes[i]['group'].match(/\d/g) + numb = parseInt(numb.join("")) + var items = document.getElementsByClassName(numb) + items.forEach( function (it) { + it.style.visibility = "hidden"; + }) + } + //Zoom functions function zoom_actions(){ svg.attr("transform", d3.event.transform) @@ -383,7 +571,7 @@ export default { .attr('y2', function (d) { return d.target.y; }); node - .attr("id", function(d, i) { return "g" + (listofNodes.length*3+i); }) + .attr("id", function(d, i) { return "g" + (i+computeNodesVar); }) .attr("transform", function(d, i) { d.x = d.x - 50 d.y = d.y - 50 @@ -467,8 +655,10 @@ export default { }, }, mounted () { + EventBus.$on('quadTrans4', data => { this.dataFS4Trans = data }) EventBus.$on('quad4', data => { this.dataFS4 = data }) EventBus.$on('quad4', this.initializeNetwork) + EventBus.$on('countNodes3', data => { this.computeNodes = data }) } } @@ -483,6 +673,10 @@ svg { display: block; } +.links line { + stroke-opacity: 0.6; +} + .column { float: left; margin: 0 10px;