diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 1032ef9..e884b64 100644 Binary files a/__pycache__/run.cpython-38.pyc and b/__pycache__/run.cpython-38.pyc differ diff --git a/frontend/src/components/FeatureSpaceDetail.vue b/frontend/src/components/FeatureSpaceDetail.vue index 53e2586..9f805a1 100644 --- a/frontend/src/components/FeatureSpaceDetail.vue +++ b/frontend/src/components/FeatureSpaceDetail.vue @@ -108,13 +108,16 @@ export default { }, computeOnce () { var numberOfTransformations = 4 // change that - + var listofNodes = this.dataFS[34] var dataLocOnce = [] for (let loop=1; loop<=5; loop++) { dataLocOnce.push(JSON.parse(this.dataFS[loop+2])) } + var corrMatrixCombTotalLocGather = [] + var MIRemainingLocGather = [] + var featureNames = JSON.parse(this.dataFS[35]) var pushEach var oldVal @@ -128,10 +131,12 @@ export default { var VIFRemainingLoc = [] var MIRemainingLoc = [] var pushEachFinal = [] + var quadrantNumberLocal = loop - 1 this.dataFSTrans.forEach(function(element, index) { - var transf1 = element.transf1 + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf1[10+quadrantNumberLocal]))[0] * 100) + MIRemainingLoc.push(JSON.parse(transf1[20+quadrantNumberLocal])) transf1 = JSON.parse(transf1[loop-1]) oldVal = 0 newVal = 0 @@ -153,6 +158,8 @@ export default { pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+0], valueIns: outcome}) var transf2 = element.transf2 + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf2[10+quadrantNumberLocal]))[0] * 100) + MIRemainingLoc.push(JSON.parse(transf2[20+quadrantNumberLocal])) transf2 = JSON.parse(transf2[loop-1]) oldVal = 0 newVal = 0 @@ -173,6 +180,8 @@ export default { pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+1], valueIns: outcome}) var transf3 = element.transf3 + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf3[10+quadrantNumberLocal]))[0] * 100) + MIRemainingLoc.push(JSON.parse(transf3[20+quadrantNumberLocal])) transf3 = JSON.parse(transf3[loop-1]) oldVal = 0 newVal = 0 @@ -193,6 +202,8 @@ export default { pushEach.push({keyIns: featureNames[(index)*numberOfTransformations+2], valueIns: outcome}) var transf4 = element.transf4 + corrMatrixCombTotalLoc.push(Object.values(JSON.parse(transf4[10+quadrantNumberLocal]))[0] * 100) + MIRemainingLoc.push(JSON.parse(transf4[20+quadrantNumberLocal])) transf4 = JSON.parse(transf4[loop-1]) oldVal = 0 newVal = 0 @@ -214,8 +225,12 @@ export default { pushEachFinal.push({key: listofNodes[index], value: pushEach}) }) pushEachFinalFinal.push(pushEachFinal) + corrMatrixCombTotalLocGather.push(corrMatrixCombTotalLoc) + MIRemainingLocGather.push(MIRemainingLoc) } + EventBus.$emit('overviewCallCorrTotal', corrMatrixCombTotalLocGather) + EventBus.$emit('overviewCallMI', MIRemainingLocGather) EventBus.$emit('overviewCall', pushEachFinalFinal) }, @@ -562,7 +577,7 @@ export default { items.forEach( function (it) { it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[2].style.visibility = "hidden"; }) @@ -604,7 +619,7 @@ export default { it.childNodes[2].style.visibility = "visible"; } else { it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[2].style.visibility = "hidden"; } @@ -686,7 +701,7 @@ export default { var items = document.getElementsByClassName(numb) items.forEach( function (it) { it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[2].style.visibility = "hidden"; }) @@ -1094,7 +1109,7 @@ export default { var items = document.getElementsByClassName(numb) items.forEach( function (it) { it.childNodes[0].style.visibility = "hidden"; - it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.28) rotate(180)"); + it.childNodes[1].setAttribute("transform", "translate(50,50) scale(0.32) rotate(180)"); it.childNodes[1].childNodes[0].style.fill = "#D3D3D3"; it.childNodes[2].style.visibility = "hidden"; }) @@ -1491,7 +1506,7 @@ export default { EventBus.$on('updateSlice', data => { document.getElementById("initButton").click() }) - EventBus.$on('updateSlice', this.setLayerExplore) + //EventBus.$on('updateSlice', this.setLayerExplore) EventBus.$on('updateSlice', this.initializeNetwork) EventBus.$on('quadTrans', data => { this.dataFSTrans = data }) diff --git a/frontend/src/components/FeatureSpaceOverview.vue b/frontend/src/components/FeatureSpaceOverview.vue index a8dfeca..7a2927b 100644 --- a/frontend/src/components/FeatureSpaceOverview.vue +++ b/frontend/src/components/FeatureSpaceOverview.vue @@ -76,6 +76,8 @@ export default { colorsReceive: [], activeLeaf: -1, overallData: [], + overallDataTransfCorr: [], + overallDataTransfMI: [], keepRoot: 1, } }, @@ -94,9 +96,91 @@ export default { svg.selectAll("*").remove(); var features = this.colorsReceive + var activeLeafLoc = this.activeLeaf var listofNodes = this.overallData[34] + var corrGlob1 = JSON.parse(this.overallData[13]) + var corrGlob2 = JSON.parse(this.overallData[14]) + var corrGlob3 = JSON.parse(this.overallData[15]) + var corrGlob4 = JSON.parse(this.overallData[16]) + var corrGlob5 = JSON.parse(this.overallData[17]) + + var MIVar1 = [] + var MIVar2 = [] + var MIVar3 = [] + var MIVar4 = [] + var MIVar5 = [] + + var MIVar1 = JSON.parse(this.overallData[28]) + var MIVar2 = JSON.parse(this.overallData[29]) + var MIVar3 = JSON.parse(this.overallData[30]) + var MIVar4 = JSON.parse(this.overallData[31]) + var MIVar5 = JSON.parse(this.overallData[32]) + + MIVar1 = MIVar1.concat(MIVar1) + MIVar1 = MIVar1.concat(this.overallDataTransfMI[0]) + MIVar2 = MIVar2.concat(MIVar2) + MIVar2 = MIVar2.concat(this.overallDataTransfMI[1]) + MIVar3 = MIVar3.concat(MIVar3) + MIVar3 = MIVar3.concat(this.overallDataTransfMI[2]) + MIVar4 = MIVar4.concat(MIVar4) + MIVar4 = MIVar4.concat(this.overallDataTransfMI[3]) + MIVar5 = MIVar5.concat(MIVar5) + MIVar5 = MIVar5.concat(this.overallDataTransfMI[4]) + + function min(input) { + if (toString.call(input) !== "[object Array]") + return false; + return Math.min.apply(null, input); + } + + function max(input) { + if (toString.call(input) !== "[object Array]") + return false; + return Math.max.apply(null, input); + } + + function normalize(min, max) { + var delta = max - min; + return function (val) { + return (val - min) / delta; + }; + } + + var MIMin1 = min(MIVar1) + var MIMax1 = max(MIVar1) + var MIMin2 = min(MIVar2) + var MIMax2 = max(MIVar2) + var MIMin3 = min(MIVar3) + var MIMax3 = max(MIVar3) + var MIMin4 = min(MIVar4) + var MIMax4 = max(MIVar4) + var MIMin5 = min(MIVar5) + var MIMax5 = max(MIVar5) + + MIVar1 = MIVar1.map(normalize(MIMin1, MIMax1)) + MIVar2 = MIVar2.map(normalize(MIMin2, MIMax2)) + MIVar3 = MIVar3.map(normalize(MIMin3, MIMax3)) + MIVar4 = MIVar4.map(normalize(MIMin4, MIMax4)) + MIVar5 = MIVar5.map(normalize(MIMin5, MIMax5)) + + var colorsScaleNodes1 = d3v5.scaleOrdinal() + .domain(d3v5.ticks([MIMin1, MIMax1, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); + var colorsScaleNodes2 = d3v5.scaleOrdinal() + .domain(d3v5.ticks([MIMin2, MIMax2, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); + var colorsScaleNodes3 = d3v5.scaleOrdinal() + .domain(d3v5.ticks([MIMin3, MIMax3, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); + var colorsScaleNodes4 = d3v5.scaleOrdinal() + .domain(d3v5.ticks([MIMin4, MIMax4, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); + var colorsScaleNodes5 = d3v5.scaleOrdinal() + .domain(d3v5.ticks([MIMin5, MIMax5, 5])) + .range(['#6baed6','#4292c6','#2171b5','#08519c','#08306b']); + var featuresQuad1 = [] var featuresQuad2 = [] var featuresQuad3 = [] @@ -106,51 +190,61 @@ export default { for (let i = 0; i < features[4].length; i++) { featuresQuad1.push({"name": features[0][i].key, "children": [ - {"name": features[0][i].value[0].keyIns, "lin_color": features[0][i].value[0].valueIns}, - {"name": features[0][i].value[1].keyIns, "lin_color": features[0][i].value[1].valueIns}, - {"name": features[0][i].value[2].keyIns, "lin_color": features[0][i].value[2].valueIns}, - {"name": features[0][i].value[3].keyIns, "lin_color": features[0][i].value[3].valueIns}, + {"name": features[0][i].value[0].keyIns, "lin_color": features[0][i].value[0].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[0][i*features[4].length+0]), "MI_pick":colorsScaleNodes1([this.overallDataTransfMI[0][i*features[4].length+0]].map(normalize(MIMin1, MIMax1))[0])}, + {"name": features[0][i].value[1].keyIns, "lin_color": features[0][i].value[1].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[0][i*features[4].length+1]), "MI_pick":colorsScaleNodes1([this.overallDataTransfMI[0][i*features[4].length+1]].map(normalize(MIMin1, MIMax1))[0])}, + {"name": features[0][i].value[2].keyIns, "lin_color": features[0][i].value[2].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[0][i*features[4].length+2]), "MI_pick":colorsScaleNodes1([this.overallDataTransfMI[0][i*features[4].length+2]].map(normalize(MIMin1, MIMax1))[0])}, + {"name": features[0][i].value[3].keyIns, "lin_color": features[0][i].value[3].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[0][i*features[4].length+3]), "MI_pick":colorsScaleNodes1([this.overallDataTransfMI[0][i*features[4].length+3]].map(normalize(MIMin1, MIMax1))[0])}, ], - "lin_color": features[0][i].value[0].valueIns+features[0][i].value[1].valueIns+features[0][i].value[2].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[2].valueIns+features[0][i].value[3].valueIns, + "Corr_pick": Math.round(Object.values(corrGlob1)[i+1]['0'] * 100), + "MI_pick": colorsScaleNodes1([MIVar1[i]].map(normalize(MIMin1, MIMax1))[0]) }) featuresQuad2.push({"name": features[1][i].key, "children": [ - {"name": features[1][i].value[0].keyIns, "lin_color": features[1][i].value[0].valueIns}, - {"name": features[1][i].value[1].keyIns, "lin_color": features[1][i].value[1].valueIns}, - {"name": features[1][i].value[2].keyIns, "lin_color": features[1][i].value[2].valueIns}, - {"name": features[1][i].value[3].keyIns, "lin_color": features[1][i].value[3].valueIns}, + {"name": features[1][i].value[0].keyIns, "lin_color": features[1][i].value[0].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[1][i*4+0]), "MI_pick":colorsScaleNodes2([this.overallDataTransfMI[1][i*4+0]].map(normalize(MIMin2, MIMax2))[0])}, + {"name": features[1][i].value[1].keyIns, "lin_color": features[1][i].value[1].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[1][i*4+1]), "MI_pick":colorsScaleNodes2([this.overallDataTransfMI[1][i*4+1]].map(normalize(MIMin2, MIMax2))[0])}, + {"name": features[1][i].value[2].keyIns, "lin_color": features[1][i].value[2].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[1][i*4+2]), "MI_pick":colorsScaleNodes2([this.overallDataTransfMI[1][i*4+2]].map(normalize(MIMin2, MIMax2))[0])}, + {"name": features[1][i].value[3].keyIns, "lin_color": features[1][i].value[3].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[1][i*4+3]), "MI_pick":colorsScaleNodes2([this.overallDataTransfMI[1][i*4+3]].map(normalize(MIMin2, MIMax2))[0])}, ], - "lin_color": features[1][i].value[0].valueIns+features[1][i].value[1].valueIns+features[1][i].value[2].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[2].valueIns+features[1][i].value[3].valueIns, + "Corr_pick": Math.round(Object.values(corrGlob2)[i+1]['0'] * 100), + "MI_pick": colorsScaleNodes2([MIVar2[i]].map(normalize(MIMin2, MIMax2))[0]) }) featuresQuad3.push({"name": features[2][i].key, "children": [ - {"name": features[2][i].value[0].keyIns, "lin_color": features[2][i].value[0].valueIns}, - {"name": features[2][i].value[1].keyIns, "lin_color": features[2][i].value[1].valueIns}, - {"name": features[2][i].value[2].keyIns, "lin_color": features[2][i].value[2].valueIns}, - {"name": features[2][i].value[3].keyIns, "lin_color": features[2][i].value[3].valueIns}, + {"name": features[2][i].value[0].keyIns, "lin_color": features[2][i].value[0].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[2][i*4+0]), "MI_pick":colorsScaleNodes3([this.overallDataTransfMI[2][i*4+0]].map(normalize(MIMin3, MIMax3))[0])}, + {"name": features[2][i].value[1].keyIns, "lin_color": features[2][i].value[1].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[2][i*4+1]), "MI_pick":colorsScaleNodes3([this.overallDataTransfMI[2][i*4+1]].map(normalize(MIMin3, MIMax3))[0])}, + {"name": features[2][i].value[2].keyIns, "lin_color": features[2][i].value[2].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[2][i*4+2]), "MI_pick":colorsScaleNodes3([this.overallDataTransfMI[2][i*4+2]].map(normalize(MIMin3, MIMax3))[0])}, + {"name": features[2][i].value[3].keyIns, "lin_color": features[2][i].value[3].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[2][i*4+3]), "MI_pick":colorsScaleNodes3([this.overallDataTransfMI[2][i*4+3]].map(normalize(MIMin3, MIMax3))[0])}, ], - "lin_color": features[2][i].value[0].valueIns+features[2][i].value[1].valueIns+features[2][i].value[2].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[2].valueIns+features[2][i].value[3].valueIns, + "Corr_pick": Math.round(Object.values(corrGlob3)[i+1]['0'] * 100), + "MI_pick": colorsScaleNodes3([MIVar3[i]].map(normalize(MIMin3, MIMax3))[0]) }) featuresQuad4.push({"name": features[3][i].key, "children": [ - {"name": features[3][i].value[0].keyIns, "lin_color": features[3][i].value[0].valueIns}, - {"name": features[3][i].value[1].keyIns, "lin_color": features[3][i].value[1].valueIns}, - {"name": features[3][i].value[2].keyIns, "lin_color": features[3][i].value[2].valueIns}, - {"name": features[3][i].value[3].keyIns, "lin_color": features[3][i].value[3].valueIns}, + {"name": features[3][i].value[0].keyIns, "lin_color": features[3][i].value[0].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[3][i*4+0]), "MI_pick":colorsScaleNodes4([this.overallDataTransfMI[3][i*4+0]].map(normalize(MIMin4, MIMax5))[0])}, + {"name": features[3][i].value[1].keyIns, "lin_color": features[3][i].value[1].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[3][i*4+1]), "MI_pick":colorsScaleNodes4([this.overallDataTransfMI[3][i*4+1]].map(normalize(MIMin4, MIMax5))[0])}, + {"name": features[3][i].value[2].keyIns, "lin_color": features[3][i].value[2].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[3][i*4+2]), "MI_pick":colorsScaleNodes4([this.overallDataTransfMI[3][i*4+2]].map(normalize(MIMin4, MIMax5))[0])}, + {"name": features[3][i].value[3].keyIns, "lin_color": features[3][i].value[3].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[3][i*4+3]), "MI_pick":colorsScaleNodes4([this.overallDataTransfMI[3][i*4+3]].map(normalize(MIMin4, MIMax5))[0])}, ], - "lin_color": features[3][i].value[0].valueIns+features[3][i].value[1].valueIns+features[3][i].value[2].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[2].valueIns+features[3][i].value[3].valueIns, + "Corr_pick": Math.round(Object.values(corrGlob4)[i+1]['0'] * 100), + "MI_pick": colorsScaleNodes4([MIVar4[i]].map(normalize(MIMin4, MIMax4))[0]) }) featuresQuad5.push({"name": features[4][i].key, "children": [ - {"name": features[4][i].value[0].keyIns, "lin_color": features[4][i].value[0].valueIns}, - {"name": features[4][i].value[1].keyIns, "lin_color": features[4][i].value[1].valueIns}, - {"name": features[4][i].value[2].keyIns, "lin_color": features[4][i].value[2].valueIns}, - {"name": features[4][i].value[3].keyIns, "lin_color": features[4][i].value[3].valueIns}, + {"name": features[4][i].value[0].keyIns, "lin_color": features[4][i].value[0].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[4][i*4+0]), "MI_pick":colorsScaleNodes5([this.overallDataTransfMI[4][i*4+0]].map(normalize(MIMin5, MIMax5))[0])}, + {"name": features[4][i].value[1].keyIns, "lin_color": features[4][i].value[1].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[4][i*4+1]), "MI_pick":colorsScaleNodes5([this.overallDataTransfMI[4][i*4+1]].map(normalize(MIMin5, MIMax5))[0])}, + {"name": features[4][i].value[2].keyIns, "lin_color": features[4][i].value[2].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[4][i*4+2]), "MI_pick":colorsScaleNodes5([this.overallDataTransfMI[4][i*4+2]].map(normalize(MIMin5, MIMax5))[0])}, + {"name": features[4][i].value[3].keyIns, "lin_color": features[4][i].value[3].valueIns, "Corr_pick": Math.round(this.overallDataTransfCorr[4][i*4+3]), "MI_pick":colorsScaleNodes5([this.overallDataTransfMI[4][i*4+3]].map(normalize(MIMin5, MIMax5))[0])}, ], - "lin_color": features[4][i].value[0].valueIns+features[4][i].value[1].valueIns+features[4][i].value[2].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[2].valueIns+features[4][i].value[3].valueIns, + "Corr_pick": Math.round(Object.values(corrGlob5)[i+1]['0'] * 100), + "MI_pick": colorsScaleNodes5([MIVar5[i]].map(normalize(MIMin5, MIMax5))[0]) }) } - + var spaceSlice1=0 var spaceSlice2 = 0 var spaceSlice3 = 0 @@ -194,7 +288,7 @@ export default { var DURATION = 700; // d3 animation duration var STAGGERN = 4; // delay for each node var STAGGERD = 200; // delay for each depth - var NODE_DIAMETER = 8; // diameter of circular nodes + var NODE_DIAMETER = 10; // diameter of circular nodes var MIN_ZOOM = 0.5; // minimum zoom allowed var MAX_ZOOM = 10; // maximum zoom allowed var HAS_CHILDREN_COLOR = 'lightsteelblue'; @@ -284,7 +378,6 @@ export default { root.children.forEach(function(child) { child.children.forEach(function(child) { if (child.name == listofNodes[activeLeafLoc]) { - console.log(child) toggle(child) } }); @@ -325,7 +418,8 @@ export default { // Enter any new nodes at the parent's previous position var nodeEnter = node.enter().insert('g', ':first-child') .attr('class', 'node') - .attr('transform', 'rotate(' + (source.x0 - 90) + ')translate(' + source.y0 + ')') + .attr('transform', 'rotate(' + (source.x0 + 90) + ')translate(' + source.y0 + ')') + .attr("id", function(d, i) { return "overCirc"+i }) .on('click', click) .on('dblclick', dblclick) .on('contextmenu', showContextMenu); @@ -354,8 +448,66 @@ export default { // update existing graph nodes + // var linearGradient = node.append("defs") + // .append("linearGradient") + // .attr("id", function(d, i) { return "linear-gradient"+i }); + + // linearGradient.append('stop') + // .attr('offset', function (d) { + // return '0%' + // }) + // .attr('stop-color', function (d) { + // if (d.name == 'Data') { + // return 'white' + // } else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst') { + // return '#D3D3D3' + // } else { + // return d.MI_pick + // } + // }) + // .attr('stop-opacity', '1.0') + + // linearGradient.append('stop') + // .attr('offset', function (d) { + // if (d.name == 'Data' || d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst') { + // return '50%' + // } else { + // var result = String(d.Corr_pick)+'%' + // return result + // } + // }) + // .attr('stop-color', function (d) { + // if (d.name == 'Data') { + // return 'white' + // } else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst') { + // return '#D3D3D3' + // } else { + // var result = d.Corr_pick + // if (result >= 50) + // return d.MI_pick + // else + // return '#D3D3D3' + // } + // }) + // .attr('stop-opacity', '1.0') + + // linearGradient.append('stop') + // .attr('offset', function (d) { + // return '100%' + // }) + // .attr('stop-color', function (d) { + // if (d.name == 'Data') { + // return 'white' + // } else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst') { + // return '#D3D3D3' + // } else { + // return '#D3D3D3' + // } + // }) + // .attr('stop-opacity', '1.0') + // Change the circle fill depending on whether it has children and is collapsed - node.select('circle') + node.select('circle') .attr('r', NODE_DIAMETER * reduceZ()) .style('fill', function(d) { if (d.name == 'Data') { @@ -382,11 +534,13 @@ export default { return d._children ? '#D3D3D3' : '#D3D3D3' } } - }).attr('stroke', function(d) { + }).attr('stroke', function(d, i) { if(d.name == 'Data') { return d.selected ? SELECTED_COLOR : 'white'; - } else { + } else if (d.name == 'All' || d.name == 'Best' || d.name == 'Good' || d.name == 'Bad' || d.name == 'Worst') { return d.selected ? SELECTED_COLOR : '#D3D3D3'; + } else { + return d.selected ? SELECTED_COLOR : "url(#linear-gradient"+i+")"; } }).attr('stroke-width', function(d) { if(d.name == 'Data') { @@ -396,20 +550,63 @@ export default { } else { return d.selected ? 0 : 0; } - }); + }) node.select('text') .attr('text-anchor', function(d) { return (d.x + curR) % 360 <= 180 ? 'start' : 'end'; }).attr('transform', function(d) { return ((d.x + curR) % 360 <= 180 ? - 'translate(8)scale(' : - 'rotate(180)translate(-8)scale(' + 'translate(12)scale(' : + 'rotate(180)translate(-12)scale(' ) + reduceZ() +')'; }).attr('fill', function(d) { return d.selected ? 'black' : 'black'; }).attr('dy', '.35em'); + var widthLoc = 4; + var arcSize = (2.7 * widthLoc / 4); + var innerRadius = arcSize * 3.2; + + nodes.forEach(function(obj, index) { + if (obj.name == 'Data' || obj.name == 'All' || obj.name == 'Best' || obj.name == 'Good' || obj.name == 'Bad' || obj.name == 'Worst') { + + } else { + var i = 0 + var arcs = d3v5.arc().innerRadius(i * arcSize + innerRadius + 0.4).outerRadius((i + 1) * arcSize - (widthLoc / 4) + innerRadius); + + var arcsGrey = d3v5.arc().innerRadius(i * arcSize + (innerRadius + ((arcSize / 2) - 2)) + 0.4).outerRadius((i + 1) * arcSize - ((arcSize / 2)) + (innerRadius)); + + var pieData = [[{value: obj.Corr_pick, arc: arcs, object: obj}, + {value: (100 - obj.Corr_pick), arc: arcsGrey, object: obj}, + {value: 0, arc: arcs, object: obj}]] + + var pie = d3v5.pie().sort(null).value(function (d) { + return d.value; + }); + // FIX ROTATION AND FIX COLORS! + var g = d3v5.select('#overCirc'+index).selectAll('g').data(pieData).enter() + .append('g') + .attr('transform', function(d, i) { + return 'rotate(270)' + }); + + g.selectAll('path').data(function (d) { + console.log(d) + return pie(d); + }).enter().append('path') + .attr('d', function (d) { + return d.data.arc(d); + }).attr('fill', function (d, i) { + if (i == 0) { + console.log(d.data.object.name) + return d.data.object.MI_pick + } else { + return '#D3D3D3' + } + }) + } + }) var nodeUpdate = node.transition().duration(duration) .delay( transition ? function(d, i) { return i * STAGGERN + @@ -946,8 +1143,8 @@ export default { }) .attr('transform', function(d) { return ((d.x + curR) % 360 <= 180 ? - 'translate(8)scale(' : - 'rotate(180)translate(-8)scale(' + 'translate(12)scale(' : + 'rotate(180)translate(-12)scale(' ) + reduceZ() +')'; }); svgGroup.selectAll('circle').attr('r', NODE_DIAMETER * reduceZ()); @@ -992,6 +1189,9 @@ export default { EventBus.$on('keepRootFun', data => { this.keepRoot = data }) EventBus.$on('quad', data => { this.overallData = data }) + EventBus.$on('overviewCallCorrTotal', data => { this.overallDataTransfCorr = data }) + EventBus.$on('overviewCallMI', data => { this.overallDataTransfMI = data }) + EventBus.$on('overviewCall', data => { this.colorsReceive = data }) EventBus.$on('overviewCall', this.initializeRadialTree)