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

push

Browse Source
master
Angelos Chatzimparmpas 4 years ago
parent 6df76138a2
commit 5014768fcb
9 changed files with 342 additions and 144 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. 84
      frontend/src/components/DataSetSlider.vue
  3. 82
      frontend/src/components/DataSpace.vue
  4. 245
      frontend/src/components/FeatureSpaceDetail.vue
  5. 2
      frontend/src/components/Heatmap.vue
  6. 41
      frontend/src/components/Main.vue
  7. 26
      frontend/src/components/Results.vue
  8. 4
      frontend/src/main.js
  9. 2
      run.py

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

Binary file not shown.

84
frontend/src/components/DataSetSlider.vue
Unescape View File

@ -1,20 +1,21 @@
<template> <template>
<div> <b-row style="padding-top: 5px;">
<div class="row align-items-center"> <b-col cols="2" style="margin-left: -35px">
<div class="col-lg-1"><p>Separate classified incorrectly (predict %)</p></div>
<div class="col-lg-2"><div id="slider-stepNeg"></div></div>
<div class="col-lg-1"><p id="value-stepNeg"></p></div>
<div class="col-lg-4">
<label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label> <label id="data" for="param-dataset" data-toggle="tooltip" data-placement="right" title="Tip: use one of the data sets already provided or upload a new file.">{{ dataset }}</label>
<select id="selectFile" @change="selectDataSet()"> <select id="selectFile" @change="selectDataSet()">
<option value="BiodegC.csv">Biodegradation</option> <option value="BiodegC.csv">Biodegradation</option>
<option value="IrisC.csv" selected>Iris flower</option> <option value="IrisC.csv" selected>Iris flower</option>
<option value="local">Upload file</option> <option value="local">Upload file</option>
</select> </select>
</b-col>
<b-col cols="8">
Data Space (Sorted by Predicted Probability)
</b-col>
<b-col cols="2">
<button class="btn-outline-success" <button class="btn-outline-success"
id="initializeID" id="initializeID"
v-on:click="initialize"> v-on:click="initialize">
<font-awesome-icon icon="play-circle" /> <font-awesome-icon icon="search" />
{{ searchText }} {{ searchText }}
</button> </button>
<button class="btn-outline-danger" <button class="btn-outline-danger"
@ -23,12 +24,8 @@
<font-awesome-icon icon="trash" /> <font-awesome-icon icon="trash" />
{{ resetText }} {{ resetText }}
</button> </button>
</div> </b-col>
<div class="col-lg-1"><p>Separate classified correctly (predict %)</p></div> </b-row>
<div class="col-lg-2"><div id="slider-stepPos"></div></div>
<div class="col-lg-1"><p id="value-stepPos"></p></div>
</div>
</div>
</template> </template>
<script> <script>
@ -46,7 +43,7 @@ export default {
data () { data () {
return { return {
defaultDataSet: 'IrisC', // default value for the first data set defaultDataSet: 'IrisC', // default value for the first data set
searchText: 'Feature engineering', searchText: 'Feature exploration',
resetText: 'Factory reset', resetText: 'Factory reset',
dataset: 'Data set' dataset: 'Data set'
} }
@ -57,7 +54,7 @@ export default {
this.defaultDataSet = fileName.options[fileName.selectedIndex].value this.defaultDataSet = fileName.options[fileName.selectedIndex].value
this.defaultDataSet = this.defaultDataSet.split('.')[0] this.defaultDataSet = this.defaultDataSet.split('.')[0]
if (this.defaultDataSet == "DiabetesC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "StanceC") { // This is a function that handles a new file, which users can upload. if (this.defaultDataSet == "BreastC" || this.defaultDataSet == "HeartC" || this.defaultDataSet == "IrisC" || this.defaultDataSet == "BiodegC") { // This is a function that handles a new file, which users can upload.
this.dataset = "Data set" this.dataset = "Data set"
d3.select("#data").select("input").remove(); // Remove the selection field. d3.select("#data").select("input").remove(); // Remove the selection field.
EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet) EventBus.$emit('SendToServerDataSetConfirmation', this.defaultDataSet)
@ -92,65 +89,8 @@ export default {
initialize () { initialize () {
EventBus.$emit('ConfirmDataSet') EventBus.$emit('ConfirmDataSet')
}, },
InitSliders () {
var dataCorrect = [55.0, 60.0, 65.0, 70.0, 75.0, 80.0, 85.0, 90.0, 95.0];
var dataWrong = [5.0, 10.0, 15.0, 20.0, 25.0, 30.0, 35.0, 40.0, 45.0];
var sliderStepPos = d3
.sliderBottom()
.min(d3.min(dataCorrect))
.max(d3.max(dataCorrect))
.width(300)
.tickFormat(d3.format(".0f"))
.ticks(9)
.step(5)
.default(75.0)
.on('onchange', val => {
d3.select('p#value-stepPos').text(d3.format(".0f")(val));
EventBus.$emit('SendtheChangeinRangePos', d3.format(".0f")(val))
});
var gStepPos = d3
.select('div#slider-stepPos')
.append('svg')
.attr('width', 400)
.attr('height', 80)
.append('g')
.attr('transform', 'translate(30,30)');
gStepPos.call(sliderStepPos);
d3.select('p#value-stepPos').text(d3.format(".0f")(sliderStepPos.value()));
var sliderStepNeg = d3
.sliderBottom()
.min(d3.min(dataWrong))
.max(d3.max(dataWrong))
.width(300)
.tickFormat(d3.format(".0f"))
.ticks(9)
.step(5)
.default(25.0)
.on('onchange', val => {
d3.select('p#value-stepNeg').text(d3.format(".0f")(val));
EventBus.$emit('SendtheChangeinRangeNeg', d3.format(".0f")(val))
});
var gStepNeg = d3
.select('div#slider-stepNeg')
.append('svg')
.attr('width', 400)
.attr('height', 80)
.append('g')
.attr('transform', 'translate(30,30)');
gStepNeg.call(sliderStepNeg);
d3.select('p#value-stepNeg').text(d3.format(".0f")(sliderStepNeg.value()));
},
}, },
mounted () { mounted () {
this.InitSliders()
}, },
} }
</script> </script>

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

@ -2,6 +2,7 @@
<div id="AllClass"> <div id="AllClass">
<div id="BeeSwarm"></div> <div id="BeeSwarm"></div>
<div id="Sliders"></div> <div id="Sliders"></div>
<div id="NoAction" style="width: 2525px !important; height: 225px !important;"></div>
</div> </div>
</template> </template>
@ -27,7 +28,7 @@ export default {
var tooltip = d3.select("#tooltip") var tooltip = d3.select("#tooltip")
var width = 2525 var width = 2525
var height = 150 var height = 225
var rectWidth = 20 var rectWidth = 20
var rectHeight = 10 var rectHeight = 10
@ -80,10 +81,6 @@ export default {
var xScale = d3.scale.linear() var xScale = d3.scale.linear()
.domain(extent) .domain(extent)
.range([25, width-25]) .range([25, width-25])
var xScaleOp = d3.scale.linear()
.domain([0, width-50])
.range([0, 100])
var norm = d3.random.normal(0, 4.0) var norm = d3.random.normal(0, 4.0)
@ -209,6 +206,18 @@ export default {
|| y2 < ny1 || y2 < ny1
} }
} }
},
InitSliders() {
var svg = d3.select("#Sliders");
svg.selectAll("*").remove();
var width = 2525
var height = 225
var xScaleOp = d3.scale.linear()
.domain([0, width-50])
.range([0, 100])
var activeClassName = 'active-d3-item'; var activeClassName = 'active-d3-item';
@ -225,7 +234,7 @@ export default {
'x2': width/4-25, 'x2': width/4-25,
'y2': height, 'y2': height,
'stroke': '#D3D3D3', 'stroke': '#D3D3D3',
'strokeW': '4px' 'strokeW': '5px'
}, },
{ {
'id': 2, 'id': 2,
@ -234,7 +243,7 @@ export default {
'x2': width/2-25, 'x2': width/2-25,
'y2': height, 'y2': height,
'stroke': 'black', 'stroke': 'black',
'strokeW': '4px' 'strokeW': '3px'
}, },
{ {
'id': 3, 'id': 3,
@ -243,7 +252,7 @@ export default {
'x2': width*3/4-25, 'x2': width*3/4-25,
'y2': height, 'y2': height,
'stroke': '#D3D3D3', 'stroke': '#D3D3D3',
'strokeW': '4px', 'strokeW': '5px',
} }
]; ];
@ -320,9 +329,9 @@ export default {
}; };
} }
if (lineID == 1) { if (lineID == 1) {
if (attributes.x1 > 1105) { if (attributes.x1 > 1110) {
attributes.x1 = 1105 attributes.x1 = 1110
attributes.x2 = 1105 attributes.x2 = 1110
return line.attr(attributes); return line.attr(attributes);
} else if (attributes.x1 < 115) { } else if (attributes.x1 < 115) {
attributes.x1 = 115 attributes.x1 = 115
@ -332,13 +341,13 @@ export default {
return line.attr(attributes); return line.attr(attributes);
} }
} else if (lineID == 3) { } else if (lineID == 3) {
if (attributes.x1 > 2380) { if (attributes.x1 > 2370) {
attributes.x1 = 2380 attributes.x1 = 2370
attributes.x2 = 2380 attributes.x2 = 2370
return line.attr(attributes); return line.attr(attributes);
} else if (attributes.x1 < 1360) { } else if (attributes.x1 < 1370) {
attributes.x1 = 1360 attributes.x1 = 1370
attributes.x2 = 1360 attributes.x2 = 1370
return line.attr(attributes); return line.attr(attributes);
} else { } else {
return line.attr(attributes); return line.attr(attributes);
@ -346,22 +355,19 @@ export default {
} else { } else {
return line.attr(attributes); return line.attr(attributes);
} }
}
function dragended() {
if (d3.select(this)[0][0].d1 == 3) {
EventBus.$emit('SendtheChangeinRangePos', Math.round(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else if (d3.select(this)[0][0].d1 == 1) {
EventBus.$emit('SendtheChangeinRangeNeg', Math.round(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else {
} }
console.log(Math.round(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
d3.select(this).classed(activeClassName, false);
}
function dragended() {
if (d3.select(this)[0][0].getAttribute('id') == 3) {
EventBus.$emit('SendtheChangeinRangePos', Math.floor(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else if (d3.select(this)[0][0].getAttribute('id') == 1) {
EventBus.$emit('SendtheChangeinRangeNeg', Math.ceil(xScaleOp(d3.select(this)[0][0].x1.baseVal.value)))
} else {
}
d3.select(this).classed(activeClassName, false);
}
}, },
reset () { reset () {
var svg = d3.select("#BeeSwarm"); var svg = d3.select("#BeeSwarm");
@ -373,8 +379,13 @@ export default {
mounted () { mounted () {
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('quad', data => { this.dataInstances = data }) EventBus.$on('dataSpace', data => { this.dataInstances = data })
EventBus.$on('quad', this.initializeBeeSwarm) EventBus.$on('dataSpace', this.initializeBeeSwarm)
EventBus.$on('SlidersCall', this.InitSliders)
EventBus.$on('ConfirmDataSet', function () {
document.getElementById("NoAction").style.zIndex = "3";
})
EventBus.$on('reset', this.reset) EventBus.$on('reset', this.reset)
} }
@ -388,8 +399,9 @@ text {
} }
#AllClass { position: relative} #AllClass { position: relative}
#BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1 !important} #BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1}
#Sliders { position: absolute; top: 0; left: 0; z-index: 3 !important} #Sliders { position: absolute; top: 0; left: 0; z-index: 2}
#NoAction { position: absolute; top: 0; left: 0; z-index: -1}
.active-d3-item { .active-d3-item {
cursor: pointer; cursor: pointer;

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

@ -7,13 +7,18 @@
<table class="table table-borderless centerTable" > <table class="table table-borderless centerTable" >
<tbody> <tbody>
<tr> <tr>
<td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="search" style="margin-right: 5px"/>Exploration</button></td> <td scope="row"><button class="btn btn-primary active" id="initButton" v-on:click="setLayerExplore" style="margin-left: -1px !important" ><font-awesome-icon icon="wrench" style="margin-right: 5px"/>Transformation</button></td>
<td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale-left" style="margin-right: 5px" />Generation</button></td> <td><button class="btn btn-primary" v-on:click="setLayerCompare" style="margin-left: -1.4px"><font-awesome-icon icon="balance-scale" style="margin-right: 5px" />Generation</button></td>
<td scope="row"><button class="btn btn-primary" v-on:click="setLayerEngineer" style="margin-left: -2px !important"><font-awesome-icon icon="wrench" style="margin-right: 5px" />Transformation</button></td> <td>
<div id="buildLegend" style="min-width: 160px;">
<div id="legend"></div>
<div id="legendText"></div>
</div>
</td>
<td> <td>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-lg-4"><p>Correl. (>)</p></div> <div class="col-lg-4"><p>Collinear (>)</p></div>
<div class="col-lg-8"><div id="thres"></div></div> <div class="col-lg-7"><div id="thres"></div></div>
</div> </div>
</td> </td>
</tr> </tr>
@ -29,6 +34,7 @@
import { EventBus } from '../main.js' import { EventBus } from '../main.js'
import * as greadability from '../greadability.js' import * as greadability from '../greadability.js'
import * as d3Base from 'd3' import * as d3Base from 'd3'
import $ from 'jquery'
// attach all d3 plugins to the d3 library // attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base) const d3 = Object.assign(d3Base)
@ -38,6 +44,7 @@ export default {
data () { data () {
return { return {
dataFS: [], dataFS: [],
legendOnlyOnce: true,
dataFSTrans: [], dataFSTrans: [],
quadrantNumber: 4, quadrantNumber: 4,
threshold: 0.4, threshold: 0.4,
@ -58,7 +65,7 @@ export default {
.sliderBottom() .sliderBottom()
.min(d3.min(dataCorrect)) .min(d3.min(dataCorrect))
.max(d3.max(dataCorrect)) .max(d3.max(dataCorrect))
.width(180) .width(150)
.tickFormat(d3.format(".1f")) .tickFormat(d3.format(".1f"))
.ticks(6) .ticks(6)
.step(0.2) .step(0.2)
@ -70,7 +77,7 @@ export default {
var gStepPos = d3 var gStepPos = d3
.select('div#thres') .select('div#thres')
.append('svg') .append('svg')
.attr('width', 230) .attr('width', 200)
.attr('height', 80) .attr('height', 80)
.append('g') .append('g')
.attr('transform', 'translate(30,30)'); .attr('transform', 'translate(30,30)');
@ -86,9 +93,6 @@ export default {
this.mode = 1 this.mode = 1
this.graphVizualization() this.graphVizualization()
}, },
setLayerEngineer() {
this.mode = 2
},
computeOnce () { computeOnce () {
var listofNodes = this.dataFS[0] var listofNodes = this.dataFS[0]
var dataLocOnce = [] var dataLocOnce = []
@ -376,6 +380,9 @@ export default {
}, },
graphVizualization () { graphVizualization () {
var legendCall = this.legendOnlyOnce
var listofNodes = this.dataFS[0] var listofNodes = this.dataFS[0]
var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber]) var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber])
@ -755,11 +762,28 @@ export default {
.data(barchartData) .data(barchartData)
.enter() .enter()
.append("rect") .append("rect")
.attr("class", function(d){ return "bar"+d.class})
.attr("x", x(0) ) .attr("x", x(0) )
.attr("y", function(d) { return y(d.class); }) .attr("y", function(d) { return y(d.class); })
.attr("width", function(d) { return x(d.value); }) .attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() ) .attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color}) .attr("fill", function(d) { return d.color})
.on("mouseover", function(d) {
document.getElementsByClassName("bar"+d.class).forEach (function (element) {
console.log(element)
element.setAttribute("fill", "yellow")
})
d3.select(this)
.attr("fill", "yellow");
})
.on("mouseout", function(d, i) {
var colorPrevious = d.color
document.getElementsByClassName("bar"+d.class).forEach (function (element) {
element.setAttribute("fill", colorPrevious)
})
});
} }
// if (i == 0) { // if (i == 0) {
@ -869,6 +893,192 @@ export default {
} }
stepper.stop(); stepper.stop();
if (legendCall) {
var svgLegend = d3.select("#legend").append("svg")
.attr("width", 160)
.attr("height", 90)
.attr("id", "legendNode")
var dataLegend = []
var binaryBarLegend = []
var exemplaryValues = [25, 75]
dataLegend.push({value: 25, color: 'black'})
dataLegend.push({value: 50, color: '#6baed6'})
for(let k = 0; k < 2; k++) {
binaryBarLegend.push({value: exemplaryValues[k], class: k, color: colorCateg(k)})
}
var lengthLeg = dataLegend.length
var arcsLegend = dataLegend.map(function (obj, i) {
if (i == lengthLeg) {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
} else if (i == 0) {
return d3.arc().innerRadius(i * arcSizeBlack + innerRadiusBlack).outerRadius((i + 1) * arcSizeBlack - (widthLoc / 100) + innerRadiusBlack);
} else {
return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius);
}
});
var arcsGreyLegend = dataLegend.map(function (obj, i) {
return d3.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2))).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius));
});
var pieDataLegend = dataLegend.map(function (obj, i) {
return [
{value: obj.value, arc: arcsLegend[i], object: obj},
{value: (100 - obj.value), arc: arcsGreyLegend[i], object: obj},
{value: 0, arc: arcsLegend[i], object: obj}];
});
var pieLegend = d3.pie().sort(null).value(function (d) {
return d.value;
});
var gLegend = d3.select('#legendNode').selectAll('g').data(pieDataLegend).enter()
.append('g')
.attr('transform', function(d, i) {
if (i == 0) {
return 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(225)'
} else {
return 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'
}
});
gLegend.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 38).attr("fill", function(d, i) {
if (i == 0) {
return "white"
} else {
return "none"
}
});
var gTextLegend = d3.select('#legendNode').selectAll('g.textClass').data([{}]).enter()
.append('g')
.classed('textClass', true)
.attr('transform', 'translate(' + 27.5 + ',' + 27.5 + ') rotate(0)');
var insideRadius = 0
gLegend.selectAll('path').data(function (d) {
return pieLegend(d);
}).enter().append('path')
.attr('id', function (d, i) {
if (i == 1) {
return "Text" + d.data.object.label
}
})
.attr('d', function (d) {
return d.data.arc(d);
}).attr('fill', function (d, i, j) {
if (i == 0) {
return d.data.object.color
} else if (i == 1 && insideRadius != 0) {
return '#D3D3D3'
} else {
insideRadius = 1
return 'none'
}
});
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 45 - margin.left - margin.right,
height = 45 - margin.top - margin.bottom;
gLegend.each(function (d, index) {
var el = d3.select(this);
var path = el.selectAll('path').each(function (r, i) {
if (i === 1) {
gTextLegend.append('svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
gTextLegend.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "white");
// Add X axis
var x = d3.scaleLinear()
.domain([0, 100])
.range([ 0, width]);
// Y axis
var y = d3.scaleBand()
.range([ 0, height ])
.domain(binaryBarLegend.map(function(d) { return d.class; }))
.padding(.0);
//Bars
gTextLegend.selectAll("myRect")
.data(binaryBarLegend)
.enter()
.append("rect")
.attr("x", x(0) )
.attr("y", function(d) { return y(d.class); })
.attr("width", function(d) { return x(d.value); })
.attr("height", y.bandwidth() )
.attr("fill", function(d) { return d.color})
}
})
});
var textLine = d3.select('#legendText').append("svg").attr('width', 160).attr('height', 90)
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 35)
.attr("y1", 50)
.attr("x2", 74)
.attr("y2", 50)
textLine.append("text")
.attr("dx", "75")
.attr("dy", "55")
.text("VIF")
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 42)
.attr("y1", 33)
.attr("x2", 53)
.attr("y2", 33)
textLine.append("text")
.attr("dx", "54")
.attr("dy", "38")
.text("Per class COR")
textLine.append('line')
.style("stroke", "black")
.style("stroke-width", 3)
.attr("x1", 32)
.attr("y1", 67)
.attr("x2", 74)
.attr("y2", 67)
textLine.append("text")
.attr("dx", "75")
.attr("dy", "72")
.text("Target COR")
textLine.append('line')
.style("stroke", "#6baed6")
.style("stroke-width", 3)
.attr("x1", 18)
.attr("y1", 50)
.attr("x2", 26)
.attr("y2", 50)
textLine.append("text")
.attr("dx", "0")
.attr("dy", "55")
.style("fill", "#6baed6")
.text("MI")
}
} }
}); });
@ -958,6 +1168,8 @@ export default {
return forceSim; return forceSim;
} }
this.legendOnlyOnce = false
}, },
reset () { reset () {
var svg = d3.select("#FeatureGraph"); var svg = d3.select("#FeatureGraph");
@ -1004,8 +1216,21 @@ export default {
<style> <style>
#buildLegend { position: relative}
#legend { position: absolute; top: 0; left: 0; z-index: 1}
#legendText { position: absolute; top: 0; left: 0; z-index: 2}
#legend {
transform: translateY(-47px) scale(0.8) !important
}
#legendText {
transform: translateY(-47px) !important
}
text { text {
font-family: sans-serif; font-family: sans-serif;
font-size: 16px
} }
svg { svg {

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

@ -397,7 +397,7 @@ export default {
}) })
.attr("y", viewerPosTop + cellSize); .attr("y", viewerPosTop + cellSize);
svgLeg.append("text").attr("x", 75).attr("y", 55).text("Normalized feature importance (FI)").style("font-size", "16px").attr("alignment-baseline","top") svgLeg.append("text").attr("x", 85).attr("y", 55).text("Normalized feature importance").style("font-size", "16px").attr("alignment-baseline","top")
//================================================== //==================================================
// Change ordering of cells // Change ordering of cells

41
frontend/src/components/Main.vue
Unescape View File

@ -6,10 +6,9 @@
<b-row class="md-3"> <b-row class="md-3">
<b-col cols="12"> <b-col cols="12">
<mdb-card> <mdb-card>
<mdb-card-header color="primary-color" tag="h5" class="text-center">Data Space (Sorted by Predicted Probability)</mdb-card-header> <mdb-card-header color="primary-color" tag="h5" class="text-center"><DataSetSlider/></mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 232px"> <mdb-card-text class="text-left" style="font-size: 18.5px; min-height: 220px">
<DataSetSlider/>
<DataSpace/> <DataSpace/>
</mdb-card-text> </mdb-card-text>
</mdb-card-body> </mdb-card-body>
@ -19,7 +18,7 @@
<b-row class="md-3"> <b-row class="md-3">
<b-col> <b-col>
<mdb-card style="margin-top: 15px;"> <mdb-card style="margin-top: 15px;">
<mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Selection (FS) Techniques <mdb-card-header color="primary-color" tag="h5" class="text-center">Feature Selection Techniques
</mdb-card-header> </mdb-card-header>
<mdb-card-body> <mdb-card-body>
<mdb-card-text class="text-center" style="min-height: 920px"> <mdb-card-text class="text-center" style="min-height: 920px">
@ -105,6 +104,8 @@ export default Vue.extend({
}, },
data () { data () {
return { return {
initAuto: true,
keySlider: true,
featureAddRem: [], featureAddRem: [],
ValidResults: [], ValidResults: [],
correlResulTranformed: [], correlResulTranformed: [],
@ -316,6 +317,7 @@ export default Vue.extend({
console.log('The server side was reset! Done.') console.log('The server side was reset! Done.')
this.reset = false this.reset = false
EventBus.$emit('resetViews') EventBus.$emit('resetViews')
this.fileNameSend()
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
@ -418,12 +420,22 @@ export default Vue.extend({
.then(response => { .then(response => {
console.log('Server successfully send the correlation matrices!') console.log('Server successfully send the correlation matrices!')
this.correlResul = response.data.correlResul this.correlResul = response.data.correlResul
EventBus.$emit('quad', this.correlResul) if (this.initAuto) {
if (this.keyImp) { EventBus.$emit('dataSpace', this.correlResul)
this.returnImportance() if (this.keySlider) {
this.keyImp = false EventBus.$emit('SlidersCall')
this.keySlider = false
}
//EventBus.$emit('ConfirmDataSet') // REMOVE THAT!
} else { } else {
this.returnResults() EventBus.$emit('dataSpace', this.correlResul)
EventBus.$emit('quad', this.correlResul)
if (this.keyImp) {
this.returnImportance()
this.keyImp = false
} else {
this.returnResults()
}
} }
}) })
.catch(error => { .catch(error => {
@ -432,7 +444,7 @@ export default Vue.extend({
}, },
returnImportance () { returnImportance () {
const path = `http://127.0.0.1:5000/data/sendFeatImp` const path = `http://127.0.0.1:5000/data/sendFeatImp`
const axiosConfig = { const axiosConfig = {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -529,7 +541,10 @@ export default Vue.extend({
EventBus.$on('ReturningBrushedPointsIDs', data => { this.modelsUpdate = data }) EventBus.$on('ReturningBrushedPointsIDs', data => { this.modelsUpdate = data })
//EventBus.$on('ReturningBrushedPointsIDs', this.UpdateBarChartFeatures ) //EventBus.$on('ReturningBrushedPointsIDs', this.UpdateBarChartFeatures )
EventBus.$on('ConfirmDataSet', this.fileNameSend)
EventBus.$on('ConfirmDataSet', data => { this.initAuto = false })
EventBus.$on('ConfirmDataSet', this.threshold)
EventBus.$on('reset', this.Reset) EventBus.$on('reset', this.Reset)
EventBus.$on('ReturningAlgorithms', data => { this.selectedAlgorithms = data }) EventBus.$on('ReturningAlgorithms', data => { this.selectedAlgorithms = data })
EventBus.$on('ReturningBrushedPointsParams', data => { this.parametersofModels = data; }) EventBus.$on('ReturningBrushedPointsParams', data => { this.parametersofModels = data; })
@ -549,7 +564,10 @@ export default Vue.extend({
EventBus.$on('SendSelectedDataPointsToServerEvent', this.SendSelectedDataPointsToServer) EventBus.$on('SendSelectedDataPointsToServerEvent', this.SendSelectedDataPointsToServer)
EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data }) EventBus.$on('SendSelectedFeaturesEvent', data => { this.SelectedFeaturesPerClassifier = data })
EventBus.$on('sendToServerFeatures', this.UpdateBasedonFeatures) EventBus.$on('sendToServerFeatures', this.UpdateBasedonFeatures)
EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveValueFile = data }) EventBus.$on('SendToServerDataSetConfirmation', data => { this.RetrieveValueFile = data })
EventBus.$on('SendToServerDataSetConfirmation', this.fileNameSend)
EventBus.$on('SendToServerLocalFile', data => { this.localFile = data }) EventBus.$on('SendToServerLocalFile', data => { this.localFile = data })
EventBus.$on('SendToServerLocalFile', this.SendToServerData) EventBus.$on('SendToServerLocalFile', this.SendToServerData)
EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data }) EventBus.$on('PCPCall', data => { this.selectedAlgorithm = data })
@ -586,6 +604,7 @@ export default Vue.extend({
event.preventDefault(); event.preventDefault();
} }
}, false); }, false);
}, },
}) })
</script> </script>

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

@ -47,7 +47,7 @@ export default {
.attr('width', width + margin.left + margin.right) .attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom) .attr('height', height + margin.top + margin.bottom)
.append('g') .append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') .attr('transform', 'translate(' + -5 + ',' + 0 + ')')
var border = chart.append('rect') var border = chart.append('rect')
.attr('x', yLabelWidth) .attr('x', yLabelWidth)
@ -60,7 +60,7 @@ export default {
var color = JSON.parse(this.ValidResultsVar[12]) var color = JSON.parse(this.ValidResultsVar[12])
var data = [] var data = []
var features = this.featuresReceived[0] 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({
@ -73,18 +73,18 @@ export default {
var maxWidth = d3.max(data.map(function(d) { return d.values.length })) var maxWidth = d3.max(data.map(function(d) { return d.values.length }))
var maxR = d3.min([(width - yLabelWidth) / maxWidth, (height - xLabelHeight) / data.length]) / 2 var maxR = d3.min([(width - yLabelWidth) / maxWidth, (height - xLabelHeight) / data.length]) / 2
var r = function(d) { // var r = function(d) {
var f = d3.scale.sqrt() // var f = d3.scale.sqrt()
.domain([d3.min(allValues), d3.max(allValues)]) // .domain([d3.min(allValues), d3.max(allValues)])
.rangeRound([0, maxR - padding]) // .rangeRound([0, maxR - padding])
return f(d) // return f(d)
} // }
var c = d3.scale.ordinal() var c = d3.scale.ordinal()
.domain([0, 1]) .domain([0, 1])
.range(["#D3D3D3", "#e76bf3"]); .range(["#D3D3D3", "#b15928"]);
var rows = chart.selectAll('.row') var rows = chart.selectAll('.row')
.data(data, function(d){ return d.label }) .data(data, function(d){ return d.label })
@ -123,7 +123,7 @@ export default {
dots.transition() dots.transition()
.duration(duration) .duration(duration)
.attr('r', function(d){ return r(d) }) .attr('r', function(d){ return d*2 })
.attr('cx', function(d, i){ return i * maxR * 2 + maxR }) .attr('cx', function(d, i){ return i * maxR * 2 + maxR })
.style('fill', function(d){ .style('fill', function(d){
if (testLoc) { if (testLoc) {
@ -172,7 +172,7 @@ export default {
dotLabels dotLabels
.attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' }) .attr('transform', function(d, i){ return 'translate(' + (i * maxR * 2) + ',' + (-maxR) + ')' })
.select('text') .select('text')
.text(function(d){ return d }) .text(function(d){ return 'Step: '+d })
.attr('y', maxR + 4) .attr('y', maxR + 4)
.attr('x', maxR) .attr('x', maxR)
@ -313,7 +313,7 @@ export default {
visible: true visible: true
}, },
marker: { marker: {
color: "rgb(0,255,255)" color: "rgb(64,224,208)"
}, },
name: "Current", name: "Current",
type: "bar", type: "bar",
@ -328,7 +328,7 @@ export default {
visible: true visible: true
}, },
marker: { marker: {
color: "rgb(231,107,243)" color: "rgb(177,89,40)"
}, },
name: "Best", name: "Best",
type: "bar" type: "bar"

4
frontend/src/main.js
Unescape View File

@ -6,10 +6,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
import router from './router' import router from './router'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faDna, faSearch, faTrash, faBalanceScaleLeft , faWrench, faPlayCircle } from '@fortawesome/free-solid-svg-icons' import { faDna, faSearch, faTrash, faBalanceScale , faWrench } from '@fortawesome/free-solid-svg-icons'
import bFormSlider from 'vue-bootstrap-slider' import bFormSlider from 'vue-bootstrap-slider'
library.add(faDna, faSearch, faTrash, faBalanceScaleLeft, faWrench, faPlayCircle) library.add(faDna, faSearch, faTrash, faBalanceScale, faWrench)
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

2
run.py
Unescape View File

@ -1100,6 +1100,8 @@ def Seperation():
packCorr.append(json.dumps(MI4List)) packCorr.append(json.dumps(MI4List))
packCorr.append(json.dumps(MI5List)) packCorr.append(json.dumps(MI5List))
packCorr.append(list(XDataStored.columns.values.tolist()))
return 'Everything Okay' return 'Everything Okay'
@app.route('/data/returnCorrelationsTransformed', methods=["GET", "POST"]) @app.route('/data/returnCorrelationsTransformed', methods=["GET", "POST"])

Write Preview
Loading…
Cancel
Save