diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 62ad408..53c0ae2 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 b136b70..b5c59ab 100644 --- a/frontend/src/components/DataSetSlider.vue +++ b/frontend/src/components/DataSetSlider.vue @@ -7,7 +7,7 @@
diff --git a/frontend/src/components/DataSpace.vue b/frontend/src/components/DataSpace.vue index 84598a5..c82eb6b 100644 --- a/frontend/src/components/DataSpace.vue +++ b/frontend/src/components/DataSpace.vue @@ -1,10 +1,7 @@ @@ -26,20 +23,18 @@ export default { initializeBeeSwarm () { var svg = d3.select("#BeeSwarm"); svg.selectAll("*").remove(); - var svg = d3.select("#tooltip"); - svg.selectAll("*").remove(); var tooltip = d3.select("#tooltip") - var width = 2500 - var height = 125 + var width = 2525 + var height = 150 var rectWidth = 20 var rectHeight = 10 var nodeR = 6 var nodeStrokeW = 1.5 - var scale = 0.8 + var scale = 1 var predictions = JSON.parse(this.dataInstances[2]) @@ -80,27 +75,31 @@ export default { var colorX = function(d) { return d.col } var extent = d3.extent(data, dx) - + // the range is set in such a way that portions of nodes are not drawn outside the g var xScale = d3.scale.linear() .domain(extent) - .range([50, width-50]) + .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 chart = d3.select("#BeeSwarm").append("svg") - .attr("width", 2500) - .attr("height", 125) + .attr("width", width) + .attr("height", height) .attr("pointer-events", "all") .append("g") .attr("transform", "translate(0,0)") - .on("mousemove", function() { - var x = d3.event.pageX - 24 // subtract translation - followMe.transition() - .duration(10) - .attr("x1", x).attr("x2", x) - }) - .call(d3.behavior.zoom().x(xScale).scaleExtent([0.8, 10]).on("zoom", zoom)) + // .on("mousemove", function() { + // var x = d3.event.pageX - 24 // subtract translation + // followMe.transition() + // .duration(10) + // .attr("x1", x).attr("x2", x) + // }) + // .call(d3.behavior.zoom().x(xScale).scaleExtent([1, 10]).on("zoom", zoom)) .append('g'); // append a background rectangle to receive the pointer events @@ -112,26 +111,40 @@ export default { var axis = d3.svg.axis().scale(xScale) chart.append("g").attr("class", "xAxis").call(axis) - - var followMe = chart.append("line") - .attr("x1", 0).attr("x2", 0) - .attr("y1", 0).attr("y2", 400) - .style("stroke", "yellow") - .style("stroke-width", '3px') - - function zoom() { - chart.select(".xAxis").call(axis); + + // chart.append("line") + // .attr("x1", width/4-25).attr("x2", width/4-25) + // .attr("y1", 25).attr("y2", height) + // .style("stroke", "yellow") + // .style("stroke-width", '3px') + // .call(drag); + + // chart.append("line") + // .attr("x1", width/2-25).attr("x2", width/2-25) + // .attr("y1", 25).attr("y2", height) + // .style("stroke", "#D3D3D3") + // .style("stroke-width", '3px') + + // chart.append("line") + // .attr("x1", width*3/4-25).attr("x2", width*3/4-25) + // .attr("y1", 25).attr("y2", height) + // .style("stroke", "yellow") + // .style("stroke-width", '3px') + // .call(drag); + + // function zoom() { + // chart.select(".xAxis").call(axis); - if(scale != d3.event.scale) - beeswarm() - scale = d3.event.scale + // if(scale != d3.event.scale) + // beeswarm() + // scale = d3.event.scale + + // chart.selectAll("circle.node") + // .transition(10) + // .attr("cx", function(d) { return xScale(d.x) }) + // .attr("cy", dy) + // } - chart.selectAll("circle.node") - .transition(10) - .attr("cx", function(d) { return xScale(d.x) }) - .attr("cy", dy) - } - var nodes = chart.selectAll("circle.node") .data(data) @@ -196,10 +209,165 @@ export default { || y2 < ny1 } } + + var activeClassName = 'active-d3-item'; + + var svgLines = d3.select('#Sliders').append('svg'); + svgLines.attr('width', width); + svgLines.attr('height', height); + + //The data for our lines and endpoints + var data = [ + { + 'id': 1, + 'x1': width/4-25, + 'y1': 25, + 'x2': width/4-25, + 'y2': height, + 'stroke': '#D3D3D3', + 'strokeW': '4px' + }, + { + 'id': 2, + 'x1': width/2-25, + 'y1': 25, + 'x2': width/2-25, + 'y2': height, + 'stroke': 'black', + 'strokeW': '4px' + }, + { + 'id': 3, + 'x1': width*3/4-25, + 'y1': 25, + 'x2': width*3/4-25, + 'y2': height, + 'stroke': '#D3D3D3', + 'strokeW': '4px', + } + ]; + + // Generating the svg lines attributes + var lineAttributes = { + 'id': function(d) { + return d.id; + }, + 'x1': function(d) { + return d.x1; + }, + 'y1': function(d) { + return d.y1; + }, + 'x2': function(d) { + return d.x2; + }, + 'y2': function(d) { + return d.y2; + }, + 'stroke': function(d) { + return d.stroke + }, + 'stroke-width': function(d) { + return d.strokeW + } + }; + + var drag = d3.behavior.drag() + .origin(function(d) { return d; }) + .on('dragstart', dragstarted) + .on('drag', dragged) + .on('dragend', dragended); + + // Pointer to the d3 lines + var lines = svgLines + .selectAll('line') + .data(data) + .enter() + .append('line') + .attr(lineAttributes) + .call(drag); + + function dragstarted() { + if (d3.select(this)[0][0].id == 2) { + d3.select(this).classed(activeClassName, false); + } else { + d3.select(this).classed(activeClassName, true); + } + + } + + function dragged() { + var x = d3.event.dx; + var y = d3.event.dy; + + var line = d3.select(this); + var lineID = parseInt(line.attr('id')) + if (lineID == 2) { + var attributes = { + x1: parseInt(line.attr('x1')), + y1: parseInt(line.attr('y1')), + + x2: parseInt(line.attr('x2')), + y2: parseInt(line.attr('y2')), + }; + } else { + var attributes = { + x1: parseInt(line.attr('x1')) + x, + y1: parseInt(line.attr('y1')), + + x2: parseInt(line.attr('x2')) + x, + y2: parseInt(line.attr('y2')), + }; + } + if (lineID == 1) { + if (attributes.x1 > 1105) { + attributes.x1 = 1105 + attributes.x2 = 1105 + return line.attr(attributes); + } else if (attributes.x1 < 115) { + attributes.x1 = 115 + attributes.x2 = 115 + return line.attr(attributes); + } else { + return line.attr(attributes); + } + } else if (lineID == 3) { + if (attributes.x1 > 2380) { + attributes.x1 = 2380 + attributes.x2 = 2380 + return line.attr(attributes); + } else if (attributes.x1 < 1360) { + attributes.x1 = 1360 + attributes.x2 = 1360 + return line.attr(attributes); + } else { + return line.attr(attributes); + } + } 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); + } + + }, reset () { var svg = d3.select("#BeeSwarm"); svg.selectAll("*").remove(); + var svg = d3.select("#Sliders"); + svg.selectAll("*").remove(); }, }, mounted () { @@ -214,17 +382,18 @@ export default { \ No newline at end of file diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue index 7fa069f..a79f1e6 100644 --- a/frontend/src/components/FeatureSpaceDetail.vue +++ b/frontend/src/components/FeatureSpaceDetail.vue @@ -3,14 +3,19 @@
-
+
- - - - + + + +
+
+

Correl. (>)

+
+
+
@@ -35,6 +40,7 @@ export default { dataFS: [], dataFSTrans: [], quadrantNumber: 4, + threshold: 0.4, jsonData: [], corrMatrixComb: [], corrMatrixCombTotal: [], @@ -45,6 +51,33 @@ export default { } }, methods: { + InitSlider () { + var dataCorrect = [0, 0.2, 0.4, 0.6, 0.8, 1]; + + var sliderStepPos = d3 + .sliderBottom() + .min(d3.min(dataCorrect)) + .max(d3.max(dataCorrect)) + .width(180) + .tickFormat(d3.format(".1f")) + .ticks(6) + .step(0.2) + .default(0.4) + .on('onchange', val => { + EventBus.$emit('CorrThres', d3.format(".1f")(val)) + }); + + var gStepPos = d3 + .select('div#thres') + .append('svg') + .attr('width', 230) + .attr('height', 80) + .append('g') + .attr('transform', 'translate(30,30)'); + + gStepPos.call(sliderStepPos); + + }, setLayerExplore() { this.mode = 0 this.graphVizualization() @@ -167,7 +200,9 @@ export default { }, initializeNetwork () { - + this.jsonData = [] + var threshLoc = this.threshold + this.corrMatrixComb = [] this.corrMatrixCombTotal = [] this.VIFRemaining = [] @@ -302,8 +337,10 @@ export default { function ([feature, value]) { Object.entries(value).forEach( function ([featureInside, value]) { if (feature != featureInside) { - if (value >= 0) { + if (value >= threshLoc) { links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": Math.abs(value) * 30, "lin_color": "#D3D3D3"}) + } else { + links.push({"source": listofNodes.indexOf(feature), "target": listofNodes.indexOf(featureInside), "value": 0, "lin_color": "#D3D3D3"}) } } }) @@ -327,8 +364,7 @@ export default { feature.value.forEach(function (element, indexIns) { if (element.valueIns > 0) { links.push({"source": index, "target": (index*feature.value.length+feature.value.length+indexIns)-lengthFeatureAddRem, "value": Math.abs(element.valueIns) * 30, "lin_color": "#33a02c"}) - } - else { + } else { links.push({"source": index, "target": (index*feature.value.length+feature.value.length+indexIns)-lengthFeatureAddRem, "value": Math.abs(element.valueIns) * 30, "lin_color": "#e31a1c"}) } }) @@ -386,22 +422,26 @@ export default { for (let i = 0; i < Object.keys(VIFVar).length; i++) { if (i != 0) { if (Object.values(VIFVar)[i] > 10) { - VIFVarFormatted.push(4) + VIFVarFormatted.push(100) } else if (Object.values(VIFVar)[i] > 5) { - VIFVarFormatted.push(2) + VIFVarFormatted.push(75) + } else if (Object.values(VIFVar)[i] > 2.5) { + VIFVarFormatted.push(50) } else { - VIFVarFormatted.push(0) + VIFVarFormatted.push(25) } } } for (let i = 0; i < this.VIFRemaining.length; i++) { - if (this.VIFRemaining[i] > 10) { - VIFVarFormatted.push(4) - } else if (this.VIFRemaining[i] > 5) { - VIFVarFormatted.push(2) + if (Object.values(VIFVar)[i] > 10) { + VIFVarFormatted.push(100) + } else if (Object.values(VIFVar)[i] > 5) { + VIFVarFormatted.push(75) + } else if (Object.values(VIFVar)[i] > 2.5) { + VIFVarFormatted.push(50) } else { - VIFVarFormatted.push(0) + VIFVarFormatted.push(25) } } @@ -474,22 +514,32 @@ export default { var numb = graph.nodes[i]['group'].match(/\d/g) numb = parseInt(numb.join("")) var items = document.getElementsByClassName(numb) + console.log(items) items.forEach( function (it) { - it.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].childNodes[0].style.fill = "#D3D3D3"; + it.childNodes[2].style.visibility = "hidden"; }) } var groupLoc = index + 1 var items = document.getElementsByClassName(groupLoc) items.forEach( function (it) { - if (it.style.visibility == "hidden") { - it.style.visibility = "visible"; + if (it.childNodes[0].style.visibility == "hidden") { + it.childNodes[0].style.visibility = "visible"; + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(1) rotate(180)"); + it.childNodes[1].childNodes[0].style.fill = "none"; + it.childNodes[2].style.visibility = "visible"; } else { - it.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].childNodes[0].style.fill = "#D3D3D3"; + it.childNodes[2].style.visibility = "hidden"; } }) EventBus.$emit('brushLink', groupLoc-1) } else { - var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[3].childNodes[0] + var groupsColor = d3.select('#svg'+index)._groups['0'][0].childNodes[0].childNodes[1] if (groupsColor.getAttribute('fill') == "black") { if (selectionCounter < 3) { // add here the different states of comparison! (=2 and =3) @@ -508,7 +558,10 @@ export default { numb = parseInt(numb.join("")) var items = document.getElementsByClassName(numb) items.forEach( function (it) { - it.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].childNodes[0].style.fill = "white"; + it.childNodes[2].style.visibility = "hidden"; }) } EventBus.$emit('brushLink', -1) @@ -576,7 +629,9 @@ export default { var widthLoc = 100; var arcSize = (6 * widthLoc / 100); - var innerRadius = arcSize * 2; + var arcSizeBlack = (10.2 * widthLoc / 100); + var innerRadius = arcSize * 4.95; + var innerRadiusBlack = arcSize * 3.7 var svgLoc = node.append('svg').attr('width', widthLoc).attr('height', widthLoc).attr("class", function(d, i) { return d.group; }) .attr("id", function(d, i) { return "svg" + (i); }) @@ -584,19 +639,25 @@ export default { graph.nodes.forEach(function(itemVal, indexNode) { var data = [] + var barchartData = [] + + data.push({value: VIFVarFormatted[indexNode], color: 'black'}) + data.push({value: corrGlobFormatted[indexNode], color: colorsScaleNodes(MIVar[indexNode])}) for(let k = 0; k < uniqueTarget.length; k++) { - data.push({value: corrTargetFormatted[k][indexNode], label: '', color: colorCateg(uniqueTarget[k]), lcolor: ''}) + barchartData.push({value: corrTargetFormatted[k][indexNode], class: k, color: colorCateg(uniqueTarget[k])}) } var length = data.length - data.push({value: 100, label: corrGlobFormatted[indexNode], color: 'black', lcolor: colorsScaleNodes(MIVar[indexNode])}) + //data.push({value: 100, label: corrGlobFormatted[indexNode], color: 'black', lcolor: colorsScaleNodes(MIVar[indexNode])}) - var border = VIFVarFormatted[indexNode] + //var border = VIFVarFormatted[indexNode] var arcs = data.map(function (obj, i) { if (i == length) { - return d3.arc().innerRadius(i * arcSize + innerRadius).outerRadius((i + 1) * arcSize - (widthLoc / 100) + innerRadius + border); + 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); } @@ -620,12 +681,27 @@ export default { var id = indexNode var g = d3.select('#svg'+id).selectAll('g').data(pieData).enter() .append('g') - .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); + .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)' + } + }); + + g.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 gText = d3.select('#svg'+id).selectAll('g.textClass').data([{}]).enter() .append('g') .classed('textClass', true) - .attr('transform', 'translate(' + widthLoc / 2 + ',' + widthLoc / 2 + ') rotate(180)'); - + .attr('transform', 'translate(' + 27.5 + ',' + 27.5 + ') rotate(0)'); + var insideRadius = 0 g.selectAll('path').data(function (d) { return pie(d); }).enter().append('path') @@ -636,44 +712,96 @@ export default { }) .attr('d', function (d) { return d.data.arc(d); - }).attr('fill', function (d, i) { - return i == 0 ? d.data.object.color : i == 1 ? '#D3D3D3' : 'none'; + }).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; g.each(function (d, index) { - - var el = d3.select(this); - var path = el.selectAll('path').each(function (r, i) { - if (i === 1) { - var centroid = r.data.arc.centroid({ - startAngle: r.startAngle + 0.05, - endAngle: r.startAngle + 0.001 + 0.05 - }); - var lableObj = r.data.object; - g.append('text') - .attr('font-size', ((2 * width) / 100)) - .attr('dominant-baseline', 'central') - .append("textPath") - .attr("textLength", function (d, i) { - return 0; - }) - .attr("startOffset", '5') - .attr("dy", '-3em') - .text(lableObj.value + '%'); - } - if (i === 0) { - var centroidText = r.data.arc.centroid({ - startAngle: r.startAngle, - endAngle: r.startAngle - }); - var lableObj = r.data.object; - gText.append('text') - .attr('font-size', ((2 * width) / 100)) - .text(lableObj.label) - .style('fill', lableObj.lcolor) - .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")")) - .attr('dominant-baseline', 'central'); - } + var el = d3.select(this); + var path = el.selectAll('path').each(function (r, i) { + if (i === 1) { + + gText.append('svg') + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + + + gText.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(barchartData.map(function(d) { return d.class; })) + .padding(.0); + //Bars + gText.selectAll("myRect") + .data(barchartData) + .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}) + } + + // if (i == 0) { + // // set the dimensions and margins of the graph + // var margin = {top: 30, right: 30, bottom: 70, left: 60}, + // width = 460 - margin.left - margin.right, + // height = 400 - margin.top - margin.bottom; + + // // append the svg object to the body of the page + // var svg = d3.select("#my_dataviz") + + + // if (i === 1) { + // var centroid = r.data.arc.centroid({ + // startAngle: r.startAngle + 0.05, + // endAngle: r.startAngle + 0.001 + 0.05 + // }); + // var lableObj = r.data.object; + // g.append('text') + // .attr('font-size', ((2 * width) / 100)) + // .attr('dominant-baseline', 'central') + // .append("textPath") + // .attr("textLength", function (d, i) { + // return 0; + // }) + // .attr("startOffset", '5') + // .attr("dy", '-3em') + // .text(lableObj.value + '%'); + // } + // if (i === 0) { + // var centroidText = r.data.arc.centroid({ + // startAngle: r.startAngle, + // endAngle: r.startAngle + // }); + // var lableObj = r.data.object; + // gText.append('text') + // .attr('font-size', ((2 * width) / 100)) + // .text(lableObj.label) + // .style('fill', lableObj.lcolor) + // .attr('transform', "translate(" + (10) + "," + (0 + ") rotate(" + (180) + ")")) + // .attr('dominant-baseline', 'central'); + // } }); }); @@ -709,7 +837,10 @@ export default { numb = parseInt(numb.join("")) var items = document.getElementsByClassName(numb) items.forEach( function (it) { - it.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].childNodes[0].style.fill = "#D3D3D3"; + it.childNodes[2].style.visibility = "hidden"; }) } @@ -834,6 +965,11 @@ export default { }, }, mounted () { + + this.InitSlider() + EventBus.$on('CorrThres', data => { this.threshold = data }) + EventBus.$on('CorrThres', this.initializeNetwork) + EventBus.$on('updateSlice', data => { this.quadrantNumber = data }) EventBus.$on('updateSlice', data => { document.getElementById("initButton").click() diff --git a/frontend/src/components/Results.vue b/frontend/src/components/Results.vue index 4e80ed8..d8bd3e1 100644 --- a/frontend/src/components/Results.vue +++ b/frontend/src/components/Results.vue @@ -316,7 +316,7 @@ export default { color: "rgb(0,255,255)" }, name: "Current", - type: "bar" + type: "bar", } var trace2 = { diff --git a/run.py b/run.py index d741fc5..b00274d 100644 --- a/run.py +++ b/run.py @@ -207,12 +207,19 @@ def retrieveFileName(): data = json.loads(fileName) if data['fileName'] == 'HeartC': CollectionDB = mongo.db.HeartC.find() - elif data['fileName'] == 'StanceC': + names_labels.append('Healthy') + names_labels.append('Diseased') + elif data['fileName'] == 'BiodegC': StanceTest = True - CollectionDB = mongo.db.StanceC.find() - CollectionDBTest = mongo.db.StanceCTest.find() - elif data['fileName'] == 'DiabetesC': - CollectionDB = mongo.db.DiabetesC.find() + CollectionDB = mongo.db.biodegC.find() + CollectionDBTest = mongo.db.biodegCTest.find() + CollectionDBExternal = mongo.db.biodegCExt.find() + names_labels.append('Non-biodegradable') + names_labels.append('Biodegradable') + elif data['fileName'] == 'BreastC': + CollectionDB = mongo.db.diabetesC.find() + names_labels.append('Malignant') + names_labels.append('Benign') else: CollectionDB = mongo.db.IrisC.find() DataResultsRaw = []