parent fbf14e0c71
commit bb7976a5b5
  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

Binary file not shown.

@ -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) {

@ -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,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,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;

@ -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,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.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;

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

@ -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;

Loading…
Cancel
Save