From 5014768fcb8a824b869b628bf8cada3d06913a8e Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Thu, 17 Dec 2020 15:20:31 +0100 Subject: [PATCH] push --- __pycache__/run.cpython-38.pyc | Bin 23054 -> 23083 bytes frontend/src/components/DataSetSlider.vue | 84 +----- frontend/src/components/DataSpace.vue | 82 +++--- .../src/components/FeatureSpaceDetail.vue | 245 +++++++++++++++++- frontend/src/components/Heatmap.vue | 2 +- frontend/src/components/Main.vue | 41 ++- frontend/src/components/Results.vue | 26 +- frontend/src/main.js | 4 +- run.py | 2 + 9 files changed, 342 insertions(+), 144 deletions(-) diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 53c0ae2d8ded819ea53d4b033876747c22cfe833..cc836d493fd072b2329d57abb6bb888a382343c2 100644 GIT binary patch delta 133 zcmeC%!nk@1BVQ;lFBbz4FzeoqSD&+yZ<_;C64&IwFs;oW92B?&OOzLIl&F+wX31x% zE>K*^(7c)3yNrcVYjUB0+~fuRTbPP;HwOlYGclgooEdbMkx^{2X~-(Z;K>g{W-`W1 kt_q#Rn7WxajGK|MaI<9iGbVms0Y)wk5a!_FV-#Qn0Hw4h7ytkO delta 110 zcmZ3zg|Tl7BVQ;lFBbz49F)Bo|9tjFzHJUnK3tRY!n8Jja8Tgdtma+F!l*g9P(W_- zHvcV~^8-Yf7*B0(2|CL-IXGk`W8mb!Au}1HCQlEY#F)HUD~y|wF@LjJ_%kMcZUIIv N4iM(x;bRnF1OO|4A~pa3 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 @@ 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 {
+
+
+
+
+
-

Correl. (>)

-
+

Collinear (>)

+