diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc
index 53c0ae2..cc836d4 100644
Binary files a/__pycache__/run.cpython-38.pyc and b/__pycache__/run.cpython-38.pyc differ
diff --git a/frontend/src/components/DataSetSlider.vue b/frontend/src/components/DataSetSlider.vue
index b5c59ab..e5ad225 100644
--- a/frontend/src/components/DataSetSlider.vue
+++ b/frontend/src/components/DataSetSlider.vue
@@ -1,20 +1,21 @@
-
-
-
Separate classified incorrectly (predict %)
-
-
-
+
+
+
+
+ Data Space (Sorted by Predicted Probability)
+
+
{{ resetText }}
-
-
Separate classified correctly (predict %)
-
-
-
-
+
+
diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue
index c82eb6b..7b572ee 100644
--- a/frontend/src/components/DataSpace.vue
+++ b/frontend/src/components/DataSpace.vue
@@ -2,6 +2,7 @@
@@ -27,7 +28,7 @@ export default {
var tooltip = d3.select("#tooltip")
var width = 2525
- var height = 150
+ var height = 225
var rectWidth = 20
var rectHeight = 10
@@ -80,10 +81,6 @@ export default {
var xScale = d3.scale.linear()
.domain(extent)
.range([25, width-25])
-
- var xScaleOp = d3.scale.linear()
- .domain([0, width-50])
- .range([0, 100])
var norm = d3.random.normal(0, 4.0)
@@ -209,6 +206,18 @@ export default {
|| 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';
@@ -225,7 +234,7 @@ export default {
'x2': width/4-25,
'y2': height,
'stroke': '#D3D3D3',
- 'strokeW': '4px'
+ 'strokeW': '5px'
},
{
'id': 2,
@@ -234,7 +243,7 @@ export default {
'x2': width/2-25,
'y2': height,
'stroke': 'black',
- 'strokeW': '4px'
+ 'strokeW': '3px'
},
{
'id': 3,
@@ -243,7 +252,7 @@ export default {
'x2': width*3/4-25,
'y2': height,
'stroke': '#D3D3D3',
- 'strokeW': '4px',
+ 'strokeW': '5px',
}
];
@@ -320,9 +329,9 @@ export default {
};
}
if (lineID == 1) {
- if (attributes.x1 > 1105) {
- attributes.x1 = 1105
- attributes.x2 = 1105
+ if (attributes.x1 > 1110) {
+ attributes.x1 = 1110
+ attributes.x2 = 1110
return line.attr(attributes);
} else if (attributes.x1 < 115) {
attributes.x1 = 115
@@ -332,13 +341,13 @@ export default {
return line.attr(attributes);
}
} else if (lineID == 3) {
- if (attributes.x1 > 2380) {
- attributes.x1 = 2380
- attributes.x2 = 2380
+ if (attributes.x1 > 2370) {
+ attributes.x1 = 2370
+ attributes.x2 = 2370
return line.attr(attributes);
- } else if (attributes.x1 < 1360) {
- attributes.x1 = 1360
- attributes.x2 = 1360
+ } else if (attributes.x1 < 1370) {
+ attributes.x1 = 1370
+ attributes.x2 = 1370
return line.attr(attributes);
} else {
return line.attr(attributes);
@@ -346,22 +355,19 @@ export default {
} else {
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 () {
var svg = d3.select("#BeeSwarm");
@@ -373,8 +379,13 @@ export default {
mounted () {
EventBus.$on('SendtheChangeinRangePos', data => {this.PositiveValue = data})
EventBus.$on('SendtheChangeinRangeNeg', data => {this.NegativeValue = data})
- EventBus.$on('quad', data => { this.dataInstances = data })
- EventBus.$on('quad', this.initializeBeeSwarm)
+ EventBus.$on('dataSpace', data => { this.dataInstances = data })
+ 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)
}
@@ -388,8 +399,9 @@ text {
}
#AllClass { position: relative}
-#BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1 !important}
-#Sliders { position: absolute; top: 0; left: 0; z-index: 3 !important}
+#BeeSwarm { position: absolute; top: 0; left: 0; z-index: 1}
+#Sliders { position: absolute; top: 0; left: 0; z-index: 2}
+#NoAction { position: absolute; top: 0; left: 0; z-index: -1}
.active-d3-item {
cursor: pointer;
diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue
index a79f1e6..17a84e6 100644
--- a/frontend/src/components/FeatureSpaceDetail.vue
+++ b/frontend/src/components/FeatureSpaceDetail.vue
@@ -7,13 +7,18 @@
- |
- |
- |
+ |
+ |
+
+
+ |
|
@@ -29,6 +34,7 @@
import { EventBus } from '../main.js'
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
+import $ from 'jquery'
// attach all d3 plugins to the d3 library
const d3 = Object.assign(d3Base)
@@ -38,6 +44,7 @@ export default {
data () {
return {
dataFS: [],
+ legendOnlyOnce: true,
dataFSTrans: [],
quadrantNumber: 4,
threshold: 0.4,
@@ -58,7 +65,7 @@ export default {
.sliderBottom()
.min(d3.min(dataCorrect))
.max(d3.max(dataCorrect))
- .width(180)
+ .width(150)
.tickFormat(d3.format(".1f"))
.ticks(6)
.step(0.2)
@@ -70,7 +77,7 @@ export default {
var gStepPos = d3
.select('div#thres')
.append('svg')
- .attr('width', 230)
+ .attr('width', 200)
.attr('height', 80)
.append('g')
.attr('transform', 'translate(30,30)');
@@ -86,9 +93,6 @@ export default {
this.mode = 1
this.graphVizualization()
},
- setLayerEngineer() {
- this.mode = 2
- },
computeOnce () {
var listofNodes = this.dataFS[0]
var dataLocOnce = []
@@ -376,6 +380,9 @@ export default {
},
graphVizualization () {
+
+ var legendCall = this.legendOnlyOnce
+
var listofNodes = this.dataFS[0]
var corrTarget = JSON.parse(this.dataFS[8+this.quadrantNumber])
@@ -755,11 +762,28 @@ export default {
.data(barchartData)
.enter()
.append("rect")
+ .attr("class", function(d){ return "bar"+d.class})
.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})
+ .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) {
@@ -869,6 +893,192 @@ export default {
}
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;
}
+ this.legendOnlyOnce = false
+
},
reset () {
var svg = d3.select("#FeatureGraph");
@@ -1004,8 +1216,21 @@ export default {