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

new

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 793a424ea8
commit f8d144c060
7 changed files with 298 additions and 108 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-38.pyc
  2. 82
      frontend/src/components/DataSpace.vue
  3. 158
      frontend/src/components/FeatureSpaceDetail.vue
  4. 102
      frontend/src/components/FeatureSpaceOverview.vue
  5. 15
      frontend/src/components/Heatmap.vue
  6. 9
      frontend/src/components/Results.vue
  7. 34
      run.py

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

Binary file not shown.

82
frontend/src/components/DataSpace.vue
Unescape View File

@ -18,6 +18,8 @@ export default {
dataInstances: '', dataInstances: '',
PositiveValue: 75, PositiveValue: 75,
NegativeValue: 25, NegativeValue: 25,
storeColor: [],
status: true
} }
}, },
methods: { methods: {
@ -47,16 +49,23 @@ export default {
predictions.sort() predictions.sort()
var colorInstances = [] var colorInstances = []
for (let i = 0; i < predictions.length; i++) {
if (predictions[i] > 50 && predictions[i] > this.PositiveValue) { if (this.status) {
colorInstances.push("#33a02c") this.storeColor = []
} else if (predictions[i] > 50 && predictions[i] <= this.PositiveValue) { for (let i = 0; i < predictions.length; i++) {
colorInstances.push("#b2df8a") if (predictions[i] > 50 && predictions[i] > this.PositiveValue) {
} else if (predictions[i] <= 50 && predictions[i] > this.NegativeValue) { colorInstances.push("#33a02c")
colorInstances.push("#fb9a99") } else if (predictions[i] > 50 && predictions[i] <= this.PositiveValue) {
} else { colorInstances.push("#b2df8a")
colorInstances.push("#e31a1c") } else if (predictions[i] <= 50 && predictions[i] > this.NegativeValue) {
colorInstances.push("#fb9a99")
} else {
colorInstances.push("#e31a1c")
}
} }
this.storeColor = colorInstances
} else {
colorInstances = this.storeColor
} }
var data = d3.range(instances.length).map(function(d, i) { var data = d3.range(instances.length).map(function(d, i) {
@ -79,7 +88,7 @@ export default {
// the range is set in such a way that portions of nodes are not drawn outside the g // the range is set in such a way that portions of nodes are not drawn outside the g
var xScale = d3.scale.linear() var xScale = d3.scale.linear()
.domain(extent) .domain([0,100])
.range([25, width-25]) .range([25, width-25])
var norm = d3.random.normal(0, 4.0) var norm = d3.random.normal(0, 4.0)
@ -229,27 +238,27 @@ export default {
var data = [ var data = [
{ {
'id': 1, 'id': 1,
'x1': width/4-25, 'x1': width/4,
'y1': 25, 'y1': 25,
'x2': width/4-25, 'x2': width/4,
'y2': height, 'y2': height,
'stroke': '#D3D3D3', 'stroke': '#D3D3D3',
'strokeW': '5px' 'strokeW': '5px'
}, },
{ {
'id': 2, 'id': 2,
'x1': width/2-25, 'x1': width/2,
'y1': 25, 'y1': 25,
'x2': width/2-25, 'x2': width/2,
'y2': height, 'y2': height,
'stroke': 'black', 'stroke': 'black',
'strokeW': '3px' 'strokeW': '3px'
}, },
{ {
'id': 3, 'id': 3,
'x1': width*3/4-25, 'x1': width*3/4,
'y1': 25, 'y1': 25,
'x2': width*3/4-25, 'x2': width*3/4,
'y2': height, 'y2': height,
'stroke': '#D3D3D3', 'stroke': '#D3D3D3',
'strokeW': '5px', 'strokeW': '5px',
@ -296,6 +305,30 @@ export default {
.attr(lineAttributes) .attr(lineAttributes)
.call(drag); .call(drag);
svgLines
.append("text")
.attr("x", 0.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Worst");
svgLines
.append("text")
.attr("x", 1.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Bad");
svgLines
.append("text")
.attr("x", 2.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Good");
svgLines
.append("text")
.attr("x", 3.5*width/4).attr("y", 210)
.style("text-anchor", "middle")
.style("font-size", "16px").text("Best");
function dragstarted() { function dragstarted() {
if (d3.select(this)[0][0].id == 2) { if (d3.select(this)[0][0].id == 2) {
d3.select(this).classed(activeClassName, false); d3.select(this).classed(activeClassName, false);
@ -329,13 +362,13 @@ export default {
}; };
} }
if (lineID == 1) { if (lineID == 1) {
if (attributes.x1 > 1110) { if (attributes.x1 > 1125) {
attributes.x1 = 1110 attributes.x1 = 1125
attributes.x2 = 1110 attributes.x2 = 1125
return line.attr(attributes); return line.attr(attributes);
} else if (attributes.x1 < 115) { } else if (attributes.x1 < 125) {
attributes.x1 = 115 attributes.x1 = 125
attributes.x2 = 115 attributes.x2 = 125
return line.attr(attributes); return line.attr(attributes);
} else { } else {
return line.attr(attributes); return line.attr(attributes);
@ -362,7 +395,7 @@ export default {
if (d3.select(this)[0][0].getAttribute('id') == 3) { if (d3.select(this)[0][0].getAttribute('id') == 3) {
EventBus.$emit('SendtheChangeinRangePos', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value))) EventBus.$emit('SendtheChangeinRangePos', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else if (d3.select(this)[0][0].getAttribute('id') == 1) { } else if (d3.select(this)[0][0].getAttribute('id') == 1) {
EventBus.$emit('SendtheChangeinRangeNeg', Math.ceil(xScaleOp(d3.select(this)[0][0].x1.baseVal.value))) EventBus.$emit('SendtheChangeinRangeNeg', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else { } else {
} }
@ -374,9 +407,12 @@ export default {
svg.selectAll("*").remove(); svg.selectAll("*").remove();
var svg = d3.select("#Sliders"); var svg = d3.select("#Sliders");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
this.status = true
}, },
}, },
mounted () { mounted () {
EventBus.$on('ConfirmDataSet', data => {this.status = false})
EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data}) EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data})
EventBus.$on('SendtheChangeinRangeNeg', data => {this.NegativeValue = data}) EventBus.$on('SendtheChangeinRangeNeg', data => {this.NegativeValue = data})
EventBus.$on('dataSpace', data => { this.dataInstances = data }) EventBus.$on('dataSpace', data => { this.dataInstances = data })

158
frontend/src/components/FeatureSpaceDetail.vue
Unescape View File

@ -55,6 +55,8 @@ export default {
MIRemaining: [], MIRemaining: [],
featureAddRemCount: [], featureAddRemCount: [],
mode: 0, // this should be 0 mode: 0, // this should be 0
KeepIDs: [],
keepNumberOfCompareNodes: 0
} }
}, },
methods: { methods: {
@ -87,6 +89,8 @@ export default {
}, },
setLayerExplore() { setLayerExplore() {
this.mode = 0 this.mode = 0
this.KeepIDs = []
this.keepNumberOfCompareNodes = 0
this.graphVizualization() this.graphVizualization()
}, },
setLayerCompare() { setLayerCompare() {
@ -94,7 +98,8 @@ export default {
this.graphVizualization() this.graphVizualization()
}, },
computeOnce () { computeOnce () {
var listofNodes = this.dataFS[0]
var listofNodes = this.dataFS[34]
var dataLocOnce = [] var dataLocOnce = []
for (let loop=1; loop<=5; loop++) { for (let loop=1; loop<=5; loop++) {
dataLocOnce.push(JSON.parse(this.dataFS[loop+2])) dataLocOnce.push(JSON.parse(this.dataFS[loop+2]))
@ -133,7 +138,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "round", valueIns: outcome}) pushEach.push({keyIns: "r", valueIns: outcome})
var roundLogE = element.roundLogE var roundLogE = element.roundLogE
roundLogE = JSON.parse(roundLogE[loop-1]) roundLogE = JSON.parse(roundLogE[loop-1])
@ -153,7 +158,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLogE", valueIns: outcome}) pushEach.push({keyIns: "r_E", valueIns: outcome})
var roundLog2 = element.roundLog2 var roundLog2 = element.roundLog2
roundLog2 = JSON.parse(roundLog2[loop-1]) roundLog2 = JSON.parse(roundLog2[loop-1])
@ -173,7 +178,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLog2", valueIns: outcome}) pushEach.push({keyIns: "r_2", valueIns: outcome})
var roundLog10 = element.roundLog10 var roundLog10 = element.roundLog10
roundLog10 = JSON.parse(roundLog10[loop-1]) roundLog10 = JSON.parse(roundLog10[loop-1])
@ -193,13 +198,12 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLog10", valueIns: outcome}) pushEach.push({keyIns: "r_10", valueIns: outcome})
pushEachFinal.push({key: listofNodes[index], value: pushEach}) pushEachFinal.push({key: listofNodes[index], value: pushEach})
}) })
pushEachFinalFinal.push(pushEachFinal) pushEachFinalFinal.push(pushEachFinal)
} }
EventBus.$emit('overviewCall', pushEachFinalFinal) EventBus.$emit('overviewCall', pushEachFinalFinal)
}, },
@ -213,7 +217,7 @@ export default {
this.MIRemaining = [] this.MIRemaining = []
var quadrantNumberLocal = this.quadrantNumber var quadrantNumberLocal = this.quadrantNumber
var listofNodes = this.dataFS[0] var listofNodes = this.dataFS[34]
var dataLoc = JSON.parse(this.dataFS[3+quadrantNumberLocal]) var dataLoc = JSON.parse(this.dataFS[3+quadrantNumberLocal])
var pushEachFinal = [] var pushEachFinal = []
@ -251,7 +255,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "round", valueIns: outcome}) pushEach.push({keyIns: "r", valueIns: outcome})
var roundLogE = element.roundLogE var roundLogE = element.roundLogE
corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5+quadrantNumberLocal]))) corrMatrixCombLoc.push(Object.values(JSON.parse(roundLogE[5+quadrantNumberLocal])))
@ -274,7 +278,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLogE", valueIns: outcome}) pushEach.push({keyIns: "r_E", valueIns: outcome})
var roundLog2 = element.roundLog2 var roundLog2 = element.roundLog2
corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5+quadrantNumberLocal]))) corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog2[5+quadrantNumberLocal])))
@ -297,7 +301,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLog2", valueIns: outcome}) pushEach.push({keyIns: "r_2", valueIns: outcome})
var roundLog10 = element.roundLog10 var roundLog10 = element.roundLog10
corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5+quadrantNumberLocal]))) corrMatrixCombLoc.push(Object.values(JSON.parse(roundLog10[5+quadrantNumberLocal])))
@ -320,7 +324,7 @@ export default {
oldVal = oldVal / listofNodes.length oldVal = oldVal / listofNodes.length
newVal = newVal / listofNodes.length newVal = newVal / listofNodes.length
outcome = oldVal - newVal outcome = oldVal - newVal
pushEach.push({keyIns: "roundLog10", valueIns: outcome}) pushEach.push({keyIns: "r_10", valueIns: outcome})
pushEachFinal.push({key: listofNodes[index], value: pushEach}) pushEachFinal.push({key: listofNodes[index], value: pushEach})
}) })
@ -333,7 +337,7 @@ export default {
var groupID = 0 var groupID = 0
listofNodes.forEach( function(element) { listofNodes.forEach( function(element) {
groupID++ groupID++
nodes.push({"name": element, "group": groupID+"_root"}) nodes.push({"name": element, "group": groupID+"_root", "active": true})
}) })
var links = [] var links = []
@ -354,10 +358,10 @@ export default {
listofNodes.forEach( function(element) { listofNodes.forEach( function(element) {
groupID++ groupID++
nodes.push( nodes.push(
{"name": element+"_r", "group": groupID}, {"name": "r", "group": groupID, "active": false},
{"name": element+"_r_E", "group": groupID}, {"name": "r_E", "group": groupID, "active": false},
{"name": element+"_r_2", "group": groupID}, {"name": "r_2", "group": groupID, "active": false},
{"name": element+"_r_10", "group": groupID}, {"name": "r_10", "group": groupID, "active": false},
) )
}) })
@ -375,7 +379,6 @@ export default {
}) })
this.jsonData = {"nodes": nodes, "links": links}; this.jsonData = {"nodes": nodes, "links": links};
this.graphVizualization() this.graphVizualization()
}, },
@ -383,7 +386,7 @@ export default {
var legendCall = this.legendOnlyOnce var legendCall = this.legendOnlyOnce
var listofNodes = this.dataFS[0] var listofNodes = this.dataFS[34]
var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber]) var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber])
var corrGlob = JSON.parse(this.dataFS[13+this.quadrantNumber]) var corrGlob = JSON.parse(this.dataFS[13+this.quadrantNumber])
@ -508,8 +511,8 @@ export default {
.attr("stroke-width", function(d) { return Math.sqrt(d.value); }); .attr("stroke-width", function(d) { return Math.sqrt(d.value); });
var modeLoc = this.mode var modeLoc = this.mode
var selectionCounter = 0 var selectionCounter = this.keepNumberOfCompareNodes
var IDsGather = [] var IDsGather = this.KeepIDs
var node = svg.append('g') var node = svg.append('g')
.attr('class', 'nodes') .attr('class', 'nodes')
@ -524,11 +527,35 @@ export default {
var items = document.getElementsByClassName(numb) var items = document.getElementsByClassName(numb)
items.forEach( function (it) { items.forEach( function (it) {
it.childNodes[0].style.visibility = "hidden"; it.childNodes[0].style.visibility = "hidden";
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.3) rotate(180)"); it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)");
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[1].childNodes[0].style.fill = "#D3D3D3";
it.childNodes[2].style.visibility = "hidden"; it.childNodes[2].style.visibility = "hidden";
}) })
} }
for (let i = 0; i < graph.nodes.length; i++) {
var str = String(graph.nodes[i].group)
if (!str.includes("root")) {
graph.nodes[i].active = false
}
}
node.selectAll('text').remove();
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 39)
.attr('y', function(d) {
if(d.active)
return 8
else
return 35
});
node.append('title').text(function (d) { return d.name; });
var groupLoc = index + 1 var groupLoc = index + 1
var items = document.getElementsByClassName(groupLoc) var items = document.getElementsByClassName(groupLoc)
items.forEach( function (it) { items.forEach( function (it) {
@ -539,11 +566,37 @@ export default {
it.childNodes[2].style.visibility = "visible"; it.childNodes[2].style.visibility = "visible";
} else { } else {
it.childNodes[0].style.visibility = "hidden"; it.childNodes[0].style.visibility = "hidden";
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.3) rotate(180)"); it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)");
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[1].childNodes[0].style.fill = "#D3D3D3";
it.childNodes[2].style.visibility = "hidden"; it.childNodes[2].style.visibility = "hidden";
} }
}) })
var regex = /\d+/g
var string = id.group
var matches = parseInt(string.match(regex)[0])
for (let i = 0; i < graph.nodes.length; i++) {
if (graph.nodes[i].group == matches) {
graph.nodes[i].active = true
}
}
node.selectAll('text').remove();
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 39)
.attr('y', function(d) {
if(d.active)
return 8
else
return 35
});
node.append('title').text(function (d) { return d.name; });
EventBus.$emit('brushLink', groupLoc-1) EventBus.$emit('brushLink', groupLoc-1)
} else { } else {
var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1] var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1]
@ -554,10 +607,13 @@ export default {
// add here the different states of comparison! (=2 and =3) // add here the different states of comparison! (=2 and =3)
groupsColor.setAttribute('fill', 'yellow') groupsColor.setAttribute('fill', 'yellow')
selectionCounter = selectionCounter + 1 selectionCounter = selectionCounter + 1
EventBus.$emit('Counter', selectionCounter)
IDsGather.push(idLocal); IDsGather.push(idLocal);
if (selectionCounter == 2) { if (selectionCounter == 2) {
EventBus.$emit('UpdateIDs', IDsGather)
EventBus.$emit('CompareTwo', IDsGather) EventBus.$emit('CompareTwo', IDsGather)
} else if (selectionCounter == 3) { } else if (selectionCounter == 3) {
EventBus.$emit('UpdateIDs', IDsGather)
EventBus.$emit('CompareThree', IDsGather) EventBus.$emit('CompareThree', IDsGather)
} else { } else {
@ -566,10 +622,12 @@ export default {
} else { } else {
groupsColor.setAttribute('fill', 'black') groupsColor.setAttribute('fill', 'black')
selectionCounter = selectionCounter - 1 selectionCounter = selectionCounter - 1
EventBus.$emit('Counter', selectionCounter)
var index = IDsGather.indexOf(idLocal); var index = IDsGather.indexOf(idLocal);
if (index > -1) { if (index > -1) {
IDsGather.splice(index, 1); IDsGather.splice(index, 1);
} }
EventBus.$emit('UpdateIDs', IDsGather)
if (selectionCounter == 1) { if (selectionCounter == 1) {
EventBus.$emit('Default') EventBus.$emit('Default')
} }
@ -583,11 +641,37 @@ export default {
var items = document.getElementsByClassName(numb) var items = document.getElementsByClassName(numb)
items.forEach( function (it) { items.forEach( function (it) {
it.childNodes[0].style.visibility = "hidden"; it.childNodes[0].style.visibility = "hidden";
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.3) rotate(180)"); it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)");
it.childNodes[1].childNodes[0].style.fill = "white"; it.childNodes[1].childNodes[0].style.fill = "white";
it.childNodes[2].style.visibility = "hidden"; it.childNodes[2].style.visibility = "hidden";
}) })
} }
var regex = /\d+/g
var string = id.group
var matches = parseInt(string.match(regex)[0])
for (let i = 0; i < graph.nodes.length; i++) {
if (graph.nodes[i].group == matches) {
graph.nodes[i].active = false
}
}
node.selectAll('text').remove();
var labels = node.append("text")
.text(function(d) {
return d.name;
})
.attr('x', 39)
.attr('y', function(d) {
if(d.active)
return 8
else
return 35
});
node.append('title').text(function (d) { return d.name; });
EventBus.$emit('brushLink', -1) EventBus.$emit('brushLink', -1)
}); });
@ -649,6 +733,7 @@ export default {
dispatch.call('layoutend', forceSim, p, i); dispatch.call('layoutend', forceSim, p, i);
++i; ++i;
if (i >= paramList.length) { if (i >= paramList.length) {
var widthLoc = 100; var widthLoc = 100;
@ -664,8 +749,11 @@ export default {
var data = [] var data = []
var barchartData = [] var barchartData = []
if (IDsGather.includes(indexNode)) {
data.push({value: VIFVarFormatted[indexNode], color: 'black'}) data.push({value: VIFVarFormatted[indexNode], color: 'yellow'})
} else {
data.push({value: VIFVarFormatted[indexNode], color: 'black'})
}
data.push({value: corrGlobFormatted[indexNode], color: colorsScaleNodes(MIVar[indexNode])}) data.push({value: corrGlobFormatted[indexNode], color: colorsScaleNodes(MIVar[indexNode])})
for(let k = 0; k < uniqueTarget.length; k++) { for(let k = 0; k < uniqueTarget.length; k++) {
@ -859,8 +947,13 @@ export default {
.text(function(d) { .text(function(d) {
return d.name; return d.name;
}) })
.attr('x', 20) .attr('x', 39)
.attr('y', 8); .attr('y', function(d) {
if(d.active)
return 8
else
return 35
});
node.append('title').text(function (d) { return d.name; }); node.append('title').text(function (d) { return d.name; });
@ -878,7 +971,7 @@ export default {
var items = document.getElementsByClassName(numb) var items = document.getElementsByClassName(numb)
items.forEach( function (it) { items.forEach( function (it) {
it.childNodes[0].style.visibility = "hidden"; it.childNodes[0].style.visibility = "hidden";
it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.3) rotate(180)"); it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)");
it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[1].childNodes[0].style.fill = "#D3D3D3";
it.childNodes[2].style.visibility = "hidden"; it.childNodes[2].style.visibility = "hidden";
}) })
@ -1059,13 +1152,13 @@ export default {
.style("stroke", "black") .style("stroke", "black")
.style("stroke-width", 3) .style("stroke-width", 3)
.attr("x1", 42) .attr("x1", 42)
.attr("y1", 33) .attr("y1", 31)
.attr("x2", 53) .attr("x2", 53)
.attr("y2", 33) .attr("y2", 31)
textLine.append("text") textLine.append("text")
.attr("dx", "54") .attr("dx", "54")
.attr("dy", "38") .attr("dy", "36")
.text("Per class COR") .text("Per class COR")
textLine.append('line') textLine.append('line')
@ -1194,6 +1287,9 @@ export default {
}, },
mounted () { mounted () {
EventBus.$on('Counter', data => { this.keepNumberOfCompareNodes = data })
EventBus.$on('UpdateIDs', data => { this.KeepIDs = data })
this.InitSlider() this.InitSlider()
EventBus.$on('CorrThres', data => { this.threshold = data }) EventBus.$on('CorrThres', data => { this.threshold = data })
EventBus.$on('CorrThres', this.initializeNetwork) EventBus.$on('CorrThres', this.initializeNetwork)

102
frontend/src/components/FeatureSpaceOverview.vue
Unescape View File

@ -38,6 +38,10 @@
<div class="button" data-key="191" title="Toggle Root">/</div> <div class="button" data-key="191" title="Toggle Root">/</div>
</div> </div>
</div> </div>
<div class="tool">
<div id="help">Labels</div>
<div id="legendTarget" style="min-width: 130px; min-height: 50px; margin-top:-10px"></div>
</div>
<div class="tool"> <div class="tool">
<div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div> <div class="tlabel" style="text-align:left" title="Change Root">&nbsp;Navigate</div>
<div id="selection" class="tlabel"></div> <div id="selection" class="tlabel"></div>
@ -59,6 +63,11 @@
import { EventBus } from '../main.js' import { EventBus } from '../main.js'
import * as greadability from '../greadability.js' import * as greadability from '../greadability.js'
import * as Plotly from 'plotly.js' import * as Plotly from 'plotly.js'
import * as d3Base from 'd3'
import $ from 'jquery'
// attach all d3 plugins to the d3 library
const d3v5 = Object.assign(d3Base)
export default { export default {
name: 'FeatureSpaceOverview', name: 'FeatureSpaceOverview',
@ -74,10 +83,13 @@ export default {
reset () { reset () {
var svg = d3.select("#tree-container"); var svg = d3.select("#tree-container");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
var svg = d3.select("#legendTarget")
svg.selectAll("*").remove();
}, },
// Get JSON data // Get JSON data
initializeRadialTree() { initializeRadialTree() {
var svg = d3.select("#legendTarget")
svg.selectAll("*").remove();
var svg = d3.select("#tree-container"); var svg = d3.select("#tree-container");
svg.selectAll("*").remove(); svg.selectAll("*").remove();
@ -94,46 +106,46 @@ export default {
for (let i = 0; i < features[4].length; i++) { for (let i = 0; i < features[4].length; i++) {
featuresQuad1.push({"name": features[0][i].key, featuresQuad1.push({"name": features[0][i].key,
"children": [ "children": [
{"name": "Round", "lin_color": features[0][i].value[0].valueIns}, {"name": "r", "lin_color": features[0][i].value[0].valueIns},
{"name": "Round logE", "lin_color": features[0][i].value[1].valueIns}, {"name": "r_E", "lin_color": features[0][i].value[1].valueIns},
{"name": "Round log2", "lin_color": features[0][i].value[2].valueIns}, {"name": "r_2", "lin_color": features[0][i].value[2].valueIns},
{"name": "Round log10", "lin_color": features[0][i].value[3].valueIns}, {"name": "r_10", "lin_color": features[0][i].value[3].valueIns},
], ],
"lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[3].valueIns+features[0][i].value[3].valueIns "lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[3].valueIns+features[0][i].value[3].valueIns
}) })
featuresQuad2.push({"name": features[1][i].key, featuresQuad2.push({"name": features[1][i].key,
"children": [ "children": [
{"name": "Round", "lin_color": features[1][i].value[0].valueIns}, {"name": "r", "lin_color": features[1][i].value[0].valueIns},
{"name": "Round logE", "lin_color": features[1][i].value[1].valueIns}, {"name": "r_E", "lin_color": features[1][i].value[1].valueIns},
{"name": "Round log2", "lin_color": features[1][i].value[2].valueIns}, {"name": "r_2", "lin_color": features[1][i].value[2].valueIns},
{"name": "Round log10", "lin_color": features[1][i].value[3].valueIns}, {"name": "r_10", "lin_color": features[1][i].value[3].valueIns},
], ],
"lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[3].valueIns+features[1][i].value[3].valueIns "lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[3].valueIns+features[1][i].value[3].valueIns
}) })
featuresQuad3.push({"name": features[2][i].key, featuresQuad3.push({"name": features[2][i].key,
"children": [ "children": [
{"name": "Round", "lin_color": features[2][i].value[0].valueIns}, {"name": "r", "lin_color": features[2][i].value[0].valueIns},
{"name": "Round logE", "lin_color": features[2][i].value[1].valueIns}, {"name": "r_E", "lin_color": features[2][i].value[1].valueIns},
{"name": "Round log2", "lin_color": features[2][i].value[2].valueIns}, {"name": "r_2", "lin_color": features[2][i].value[2].valueIns},
{"name": "Round log10", "lin_color": features[2][i].value[3].valueIns}, {"name": "r_10", "lin_color": features[2][i].value[3].valueIns},
], ],
"lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[3].valueIns+features[2][i].value[3].valueIns "lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[3].valueIns+features[2][i].value[3].valueIns
}) })
featuresQuad4.push({"name": features[3][i].key, featuresQuad4.push({"name": features[3][i].key,
"children": [ "children": [
{"name": "Round", "lin_color": features[3][i].value[0].valueIns}, {"name": "r", "lin_color": features[3][i].value[0].valueIns},
{"name": "Round logE", "lin_color": features[3][i].value[1].valueIns}, {"name": "r_E", "lin_color": features[3][i].value[1].valueIns},
{"name": "Round log2", "lin_color": features[3][i].value[2].valueIns}, {"name": "r_2", "lin_color": features[3][i].value[2].valueIns},
{"name": "Round log10", "lin_color": features[3][i].value[3].valueIns}, {"name": "r_10", "lin_color": features[3][i].value[3].valueIns},
], ],
"lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[3].valueIns+features[3][i].value[3].valueIns "lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[3].valueIns+features[3][i].value[3].valueIns
}) })
featuresQuad5.push({"name": features[4][i].key, featuresQuad5.push({"name": features[4][i].key,
"children": [ "children": [
{"name": "Round", "lin_color": features[4][i].value[0].valueIns}, {"name": "r", "lin_color": features[4][i].value[0].valueIns},
{"name": "Round logE", "lin_color": features[4][i].value[1].valueIns}, {"name": "r_E", "lin_color": features[4][i].value[1].valueIns},
{"name": "Round log2", "lin_color": features[4][i].value[2].valueIns}, {"name": "r_2", "lin_color": features[4][i].value[2].valueIns},
{"name": "Round log10", "lin_color": features[4][i].value[3].valueIns}, {"name": "r_10", "lin_color": features[4][i].value[3].valueIns},
], ],
"lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[3].valueIns+features[4][i].value[3].valueIns "lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[3].valueIns+features[4][i].value[3].valueIns
}) })
@ -182,7 +194,7 @@ export default {
var DURATION = 700; // d3 animation duration var DURATION = 700; // d3 animation duration
var STAGGERN = 4; // delay for each node var STAGGERN = 4; // delay for each node
var STAGGERD = 200; // delay for each depth var STAGGERD = 200; // delay for each depth
var NODE_DIAMETER = 6; // diameter of circular nodes var NODE_DIAMETER = 8; // diameter of circular nodes
var MIN_ZOOM = 0.5; // minimum zoom allowed var MIN_ZOOM = 0.5; // minimum zoom allowed
var MAX_ZOOM = 10; // maximum zoom allowed var MAX_ZOOM = 10; // maximum zoom allowed
var HAS_CHILDREN_COLOR = 'lightsteelblue'; var HAS_CHILDREN_COLOR = 'lightsteelblue';
@ -202,7 +214,7 @@ export default {
// current pan, zoom, and rotation // current pan, zoom, and rotation
var curX = width / 2; var curX = width / 2;
var curY = height / 2; var curY = height / 2;
var curZ = 1.14; // current zoom var curZ = 1.28; // current zoom
var curR = 270; // current rotation var curR = 270; // current rotation
// keyboard key codes // keyboard key codes
@ -916,6 +928,39 @@ export default {
}); });
svgGroup.selectAll('circle').attr('r', NODE_DIAMETER * reduceZ()); svgGroup.selectAll('circle').attr('r', NODE_DIAMETER * reduceZ());
} }
var legendRectSize = 14;
var legendSpacing = 3;
var color = d3v5.scaleOrdinal(d3v5.schemeDark2)
var labelsData = JSON.parse(this.overallData[1])
var svgLegend = d3v5.select('#legendTarget').append('svg')
.attr('width', 130)
.attr('height', 60)
var legend = svgLegend.selectAll('.legend') // NEW
.data(labelsData) // NEW
.enter() // NEW
.append('g') // NEW
.attr('class', 'legend') // NEW
.attr('transform', function(d, i) { // NEW
var height = legendRectSize + legendSpacing; // NEW
var offset = height * color.domain().length / 2;
var horz = 25 // NEW
var vert = i * height - offset; // NEW
return 'translate(' + horz + ',' + vert + ')'; // NEW
}); // NEW
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', function (d) { return color(d) });
legend.append('text')
.attr('class', 'legendLab')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; });
} }
}, },
mounted () { mounted () {
@ -1029,12 +1074,15 @@ svg {
} }
#help { #help {
position: relative; position: relative;
bottom: -1.8em; bottom: -1.7em;
transform: rotate(270deg); transform: rotate(270deg);
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg);
-o-transform: rotate(270deg); -o-transform: rotate(270deg);
width: 1.2em; width: 100px;
text-align: center;
margin-top: -10px;
margin-left: -38px;
} }
#help a { #help a {
color: black; color: black;
@ -1072,4 +1120,8 @@ svg {
stroke: #D3D3D3; stroke: #D3D3D3;
} }
.legendLab {
font-size: 14px !important;
}
</style> </style>

15
frontend/src/components/Heatmap.vue
Unescape View File

@ -84,6 +84,7 @@ export default {
if (Object.entries(this.generKey).length == 0) { if (Object.entries(this.generKey).length == 0) {
var Features = this.featureData[0] var Features = this.featureData[0]
} else { } else {
console.log(this.generKey)
var Features = this.generKey var Features = this.generKey
} }
@ -145,6 +146,7 @@ export default {
}, },
heatmap_display(data, heatmapId) { heatmap_display(data, heatmapId) {
var featuresAddRem = [] var featuresAddRem = []
var featuresGen = []
var cellSize = this.cellSize var cellSize = this.cellSize
//########################################################################## //##########################################################################
// Patrick.Brockmann@lsce.ipsl.fr // Patrick.Brockmann@lsce.ipsl.fr
@ -367,12 +369,13 @@ export default {
} else if (d == -3) { } else if (d == -3) {
return 'white' return 'white'
} else if (d == -4) { } else if (d == -4) {
svg.selectAll("rect").each(function(d){ // svg.selectAll("rect").each(function(d){
if (d == -4) { // if (d == -4) {
d3.select(this).style("fill", "url(#diagonalHatch)") // d3.select(this).style("fill", "url(#diagonalHatch)")
} // }
}) // })
EventBus.$emit('addFeatureGen', [k]) featuresGen.push(k)
EventBus.$emit('addFeatureGen', featuresGen)
return 'yellow' return 'yellow'
} else { } else {
return colorScale(d) return colorScale(d)

9
frontend/src/components/Results.vue
Unescape View File

@ -40,7 +40,7 @@ export default {
var padding = 3 var padding = 3
var xLabelHeight = 30 var xLabelHeight = 30
var yLabelWidth = 80 var yLabelWidth = 80
var borderWidth = 2 var borderWidth = 0
var duration = 50 var duration = 50
var chart = d3.select('#HistoryPlot').append('svg') var chart = d3.select('#HistoryPlot').append('svg')
@ -60,7 +60,8 @@ export default {
var color = JSON.parse(this.ValidResultsVar[12]) var color = JSON.parse(this.ValidResultsVar[12])
var data = [] var data = []
var features = this.featuresReceived[35]
var features = this.featuresReceived[33]
var labelsX = ['Add', 'Remove', 'Combine', 'Round'] var labelsX = ['Add', 'Remove', 'Combine', 'Round']
for (let i=0; i< features.length; i++) { for (let i=0; i< features.length; i++) {
data.push({ data.push({
@ -200,7 +201,7 @@ export default {
xLabels.transition() xLabels.transition()
.text(function (d) { return d }) .text(function (d) { return d })
.duration(duration) .duration(duration)
.attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth }) .attr('x', function(d, i){ return maxR * i * 2 + maxR + yLabelWidth - 2})
.style('fill-opacity', 1) .style('fill-opacity', 1)
var yLabels = chart.selectAll('.yLabel') var yLabels = chart.selectAll('.yLabel')
@ -221,7 +222,7 @@ export default {
yLabels.transition() yLabels.transition()
.duration(duration) .duration(duration)
.attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight }) .attr('y', function(d, i){ return maxR * i * 2 + maxR + xLabelHeight - 9 })
.attr('transform', 'translate(-6,' + maxR / 2.5 + ')') .attr('transform', 'translate(-6,' + maxR / 2.5 + ')')
.style('fill-opacity', 1) .style('fill-opacity', 1)

34
run.py
Unescape View File

@ -65,6 +65,9 @@ def reset():
global keyData global keyData
keyData = 0 keyData = 0
global keepOriginalFeatures
keepOriginalFeatures = []
global XData global XData
XData = [] XData = []
global yData global yData
@ -144,6 +147,9 @@ def retrieveFileName():
global keyData global keyData
keyData = 0 keyData = 0
global keepOriginalFeatures
keepOriginalFeatures = []
global XData global XData
XData = [] XData = []
@ -390,7 +396,11 @@ def dataSetSelection():
global XData, yData, RANDOM_SEED global XData, yData, RANDOM_SEED
XData, yData = ArrayDataResults, AllTargetsFloatValues XData, yData = ArrayDataResults, AllTargetsFloatValues
XData.columns = [str(col) + ' (F'+str(idx+1)+')' for idx, col in enumerate(XData.columns)] global keepOriginalFeatures
keepOriginalFeatures = XData.copy()
keepOriginalFeatures.columns = [str(col) + ' (F'+str(idx+1)+')' for idx, col in enumerate(keepOriginalFeatures.columns)]
XData.columns = ['F'+str(idx+1) for idx, col in enumerate(XData.columns)]
global XDataStored, yDataStored global XDataStored, yDataStored
XDataStored = XData.copy() XDataStored = XData.copy()
@ -1094,17 +1104,7 @@ def Seperation():
global packCorr global packCorr
packCorr = [] packCorr = []
AbbreviatedFeatures = [] packCorr.append(list(keepOriginalFeatures.columns.values.tolist()))
for index, value in enumerate(XData.columns.values.tolist()):
realIndex = index + 1
AbbreviatedFeatures.append('F'+str(realIndex))
AbbreviatedFeaturesOriginal = []
for index, value in enumerate(XDataStored.columns.values.tolist()):
realIndex = index + 1
AbbreviatedFeaturesOriginal.append('F'+str(realIndex))
packCorr.append(list(XData.columns.values.tolist()))
packCorr.append(json.dumps(target_names)) packCorr.append(json.dumps(target_names))
packCorr.append(json.dumps(probabilityPredictions)) packCorr.append(json.dumps(probabilityPredictions))
@ -1145,8 +1145,7 @@ def Seperation():
packCorr.append(json.dumps(MI5List)) packCorr.append(json.dumps(MI5List))
packCorr.append(list(XDataStored.columns.values.tolist())) packCorr.append(list(XDataStored.columns.values.tolist()))
packCorr.append(AbbreviatedFeatures) packCorr.append(list(XData.columns.values.tolist()))
packCorr.append(AbbreviatedFeaturesOriginal)
return 'Everything Okay' return 'Everything Okay'
@ -1212,14 +1211,17 @@ def CompareFunPy():
IDsToCompare = retrieveComparison['getIDs'] IDsToCompare = retrieveComparison['getIDs']
XDataGen = XDataStored.copy() XDataGen = XDataStored.copy()
columns = XData.columns.values.tolist() columns = XData.columns.values.tolist()
columnsOriganl = keepOriginalFeatures.columns.values.tolist()
columnsKeep = [] columnsKeep = []
columnsKeepNonOrig = []
columnsKeepID = [] columnsKeepID = []
for indx, col in enumerate(columns): for indx, col in enumerate(columns):
if indx in IDsToCompare: if indx in IDsToCompare:
columnsKeep.append(col) columnsKeepNonOrig.append(col)
columnsKeep.append(columnsOriganl[indx])
columnsKeepID.append(str(indx+1)) columnsKeepID.append(str(indx+1))
if (compareMode == 1): if (compareMode == 1):
XDataGen = XData[columnsKeep] XDataGen = XData[columnsKeepNonOrig]
feat1 = XDataGen.iloc[:,0] feat1 = XDataGen.iloc[:,0]
feat2 = XDataGen.iloc[:,1] feat2 = XDataGen.iloc[:,1]
XDataGen['F'+columnsKeepID[0]+'+F'+columnsKeepID[1]] = feat1 + feat2 XDataGen['F'+columnsKeepID[0]+'+F'+columnsKeepID[1]] = feat1 + feat2

Write Preview
Loading…
Cancel
Save