From 0b87a162b2bdf3e6d57df27b9ab6c5267aa3ebc8 Mon Sep 17 00:00:00 2001 From: Angelos Chatzimparmpas Date: Thu, 14 Jan 2021 19:22:53 +0100 Subject: [PATCH] new --- __pycache__/run.cpython-38.pyc | Bin 29980 -> 29980 bytes .../src/components/FeatureSpaceDetail.vue | 29 +- .../src/components/FeatureSpaceOverview.vue | 274 +++++++++++++++--- 3 files changed, 259 insertions(+), 44 deletions(-) diff --git a/__pycache__/run.cpython-38.pyc b/__pycache__/run.cpython-38.pyc index 1032ef958ff38c9a9f2b62a3351eee58112f096e..e884b64e092ace4dbe86a870eb1146c713dcaf8a 100644 GIT binary patch delta 5065 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 S2FiAW3V;=S)`5MoXa5gRZj_Y( delta 5063 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 Ks{`0$o%=r|^q?OA 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)