@ -7,13 +7,18 @@
< table class = "table table-borderless centerTable" >
< tbody >
< tr >
< td scope = "row" > < button class = "btn btn-primary active" id = "initButton" v -on :click ="setLayerExplore" style = "margin-left: -1px !important" > < font -awesome -icon icon = "search" style = "margin-right: 5px" / > Exploration < / button > < / td >
< td > < button class = "btn btn-primary" v -on :click ="setLayerCompare" style = "margin-left: -1.4px" > < font -awesome -icon icon = "balance-scale-left" style = "margin-right: 5px" / > Generation < / button > < / td >
< td scope = "row" > < button class = "btn btn-primary" v -on :click ="setLayerEngineer" style = "margin-left: -2px !important" > < font -awesome -icon icon = "wrench" style = "margin-right: 5px" / > Transformation < / button > < / td >
< td scope = "row" > < button class = "btn btn-primary active" id = "initButton" v -on :click ="setLayerExplore" style = "margin-left: -1px !important" > < font -awesome -icon icon = "wrench" style = "margin-right: 5px" / > Transformation < / button > < / td >
< td > < button class = "btn btn-primary" v -on :click ="setLayerCompare" style = "margin-left: -1.4px" > < font -awesome -icon icon = "balance-scale" style = "margin-right: 5px" / > Generation < / button > < / td >
< td >
< div id = "buildLegend" style = "min-width: 160px;" >
< div id = "legend" > < / div >
< div id = "legendText" > < / div >
< / div >
< / td >
< td >
< div class = "row align-items-center" >
< div class = "col-lg-4" > < p > Correl . ( > ) < / p > < / div >
< div class = "col-lg-8" > < div id = "thres" > < / div > < / div >
< div class = "col-lg-4" > < p > Collinear ( > ) < / p > < / div >
< div class = "col-lg-7 " > < div id = "thres" > < / div > < / div >
< / div >
< / td >
< / tr >
@ -29,6 +34,7 @@
import { EventBus } from '../main.js'
import * as greadability from '../greadability.js'
import * as d3Base from 'd3'
import $ from 'jquery'
/ / a t t a c h a l l d 3 p l u g i n s t o t h e d 3 l i b r a r y
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 ( 18 0 )
. width ( 15 0 )
. 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' , 23 0 )
. attr ( 'width' , 20 0 )
. 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 )
} )
} ) ;
}
/ / i f ( 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" ) ;
/ / A d d X a x i s
var x = d3 . scaleLinear ( )
. domain ( [ 0 , 100 ] )
. range ( [ 0 , width ] ) ;
/ / Y a x i s
var y = d3 . scaleBand ( )
. range ( [ 0 , height ] )
. domain ( binaryBarLegend . map ( function ( d ) { return d . class ; } ) )
. padding ( .0 ) ;
/ / B a r s
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 {
< style >
# buildLegend { position : relative }
# legend { position : absolute ; top : 0 ; left : 0 ; z - index : 1 }
# legendText { position : absolute ; top : 0 ; left : 0 ; z - index : 2 }
# legend {
transform : translateY ( - 47 px ) scale ( 0.8 ) ! important
}
# legendText {
transform : translateY ( - 47 px ) ! important
}
text {
font - family : sans - serif ;
font - size : 16 px
}
svg {
