ISOVIS
/
FeatureEnVi
3
0
Fork 0
Code Issues Pull Requests Releases 1 Wiki Activity

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent fbf14e0c71
commit bb7976a5b5
6 changed files with 691 additions and 268 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      __pycache__/run.cpython-37.pyc
  2. 5
      frontend/src/components/FeatureSpace1.vue
  3. 238
      frontend/src/components/FeatureSpace2 copy.vue
  4. 239
      frontend/src/components/FeatureSpace2.vue
  5. 239
      frontend/src/components/FeatureSpace3.vue
  6. 238
      frontend/src/components/FeatureSpace4.vue

BIN
__pycache__/run.cpython-37.pyc
View File

Binary file not shown.

5
frontend/src/components/FeatureSpace1.vue
Unescape View File

@ -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"})
@ -174,6 +176,9 @@ export default {
)
})
this.computeNodes = nodes.length
EventBus.$emit('countNodes1', this.computeNodes)
Object.entries(pushEachFinal).forEach(
function ([index, feature]) {
feature.value.forEach(function (element, indexIns) {

238
frontend/src/components/FeatureSpace1 copy.vue → frontend/src/components/FeatureSpace2 copy.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<div class="column">
<div id="FeatureGraph1"></div>
<div id="FeatureGraph2"></div>
</div>
</template>
@ -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,31 +36,10 @@ 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"})
}
}
})
})
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"})
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})
}
else {
links.push({"source": index, "target": index*feature.value.length+feature.value.length+indexIns, "value": Math.abs(element.valueIns) * 30, "lin_color": "#d6604d"})
}
})
})
@ -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,10 +143,8 @@ 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')
@ -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)
}
}
</script>
@ -647,10 +481,6 @@ svg {
display: block;
}
.links line {
stroke-opacity: 0.6;
}
.column {
float: left;
margin: 0 10px;

239
frontend/src/components/FeatureSpace2.vue
Unescape View File

@ -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,10 +158,31 @@ 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"})
}
})
})
@ -51,13 +194,15 @@ export default {
},
graphVizualization () {
var computeNodesVar = this.computeNodes
var listofNodes = this.dataFS2[0]
var uniqueTarget = JSON.parse(this.dataFS2[15])
var corrTarget = JSON.parse(this.dataFS2[7])
var corrGlob = JSON.parse(this.dataFS2[11])
var VIFVar = JSON.parse(this.dataFS2[19])
var MIVar = JSON.parse(this.dataFS2[23])
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 })
}
}
</script>
@ -481,6 +676,10 @@ svg {
display: block;
}
.links line {
stroke-opacity: 0.6;
}
.column {
float: left;
margin: 0 10px;

239
frontend/src/components/FeatureSpace3.vue
Unescape View File

@ -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,10 +158,31 @@ 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"})
}
})
})
@ -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 })
}
}
</script>
@ -483,6 +674,10 @@ svg {
display: block;
}
.links line {
stroke-opacity: 0.6;
}
.column {
float: left;
margin: 0 10px;

238
frontend/src/components/FeatureSpace4.vue
Unescape View File

@ -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 })
}
}
</script>
@ -483,6 +673,10 @@ svg {
display: block;
}
.links line {
stroke-opacity: 0.6;
}
.column {
float: left;
margin: 0 10px;

Write Preview
Loading…
Cancel
Save