@ -363,10 +363,15 @@ function deleteAnnotations(){
d3 . selectAll ( "#SvgAnnotator > *" ) . remove ( ) ;
d3 . selectAll ( "#SvgAnnotator > *" ) . remove ( ) ;
} }
function BringBackAnnotations ( ) {
d3 . select ( "#SvgAnnotator" ) . style ( "z-index" , 3 ) ;
}
function setAnnotator ( ) { // Set a new annotation on top of the main visualization.
function setAnnotator ( ) { // Set a new annotation on top of the main visualization.
vw2 = dimensions ; vw2 = dimensions ;
vh2 = dimensions ; vh2 = dimensions ;
var textarea = document . getElementById ( "comment" ) . value ; var textarea = document . getElementById ( "comment" ) . value ;
d3 . select ( "#SvgAnnotator" ) . style ( "z-index" , 3 ) ; d3 . select ( "#SvgAnnotator" ) . style ( "z-index" , 3 ) ;
@ -403,6 +408,8 @@ function setAnnotator(){ // Set a new annotation on top of the main visualizatio
gAnnotationsAll . push ( gAnnotations ) ; gAnnotationsAll . push ( gAnnotations ) ;
AnnotationsAll . push ( annotations ) ; AnnotationsAll . push ( annotations ) ;
draggable . push ( true ) ; draggable . push ( true ) ;
document . getElementById ( "comment" ) . value = '' ;
$ ( '#comment' ) . removeAttr ( 'placeholder' ) ;
} }
// Hide or show the controls
// Hide or show the controls
@ -480,6 +487,7 @@ function MainVisual(){
// fields variable is all the features (columns) plus beta and cost strings.
// fields variable is all the features (columns) plus beta and cost strings.
function init ( data , results _all , fields ) {
function init ( data , results _all , fields ) {
$ ( '#comment' ) . attr ( 'placeholder' , "Please, provide your comment." ) ;
ArrayWithCosts = [ ] ; ArrayWithCosts = [ ] ;
Iterations = [ ] ; Iterations = [ ] ;
VisiblePoints = [ ] ; VisiblePoints = [ ] ;
@ -791,7 +799,7 @@ function OverallCostLineChart(){
var layout = { var layout = {
showlegend : false , showlegend : false ,
width : 28 5 , width : 21 5 ,
height : 80 , height : 80 ,
xaxis : { title : 'Iterations' , xaxis : { title : 'Iterations' ,
titlefont : { titlefont : {
@ -1000,7 +1008,7 @@ function ShepardHeatMap () {
// Color scale for minimum and maximum values for the shepard heatmap.
// Color scale for minimum and maximum values for the shepard heatmap.
var maxNum = Math . round ( d3 . max ( data , function ( d ) { return d . value ; } ) ) ; var maxNum = Math . round ( d3 . max ( data , function ( d ) { return d . value ; } ) ) ;
var minNum = Math . round ( d3 . min ( data , function ( d ) { return d . value ; } ) ) ; var minNum = Math . round ( d3 . min ( data , function ( d ) { return d . value ; } ) ) ;
var colors = [ '#ffffff' , '#f0f0f0' , '#d9d9d9' , '#bdbdbd' , '#969696' , '#737373' , '#525252' , '#252525' , '#000000' ] ; var colors = [ "#f7fbff" , "#deebf7" , "#c6dbef" , "#9ecae1" , "#6baed6" , "#4292c6" , "#2171b5" , "#08519c" , "#08306b" ] ;
let calcStep = ( maxNum - minNum ) / colors . length ; let calcStep = ( maxNum - minNum ) / colors . length ;
var colorScale = d3 . scaleLinear ( ) var colorScale = d3 . scaleLinear ( )
. domain ( d3 . range ( 0 , maxNum + calcStep , calcStep ) ) . domain ( d3 . range ( 0 , maxNum + calcStep , calcStep ) )
@ -1283,7 +1291,7 @@ function CostHistogram(points){
name : '1/sigma' , name : '1/sigma' ,
autobinx : false ,
autobinx : false ,
marker : { marker : {
color : "rgb(128,0 ,0)" , color : "rgb(0, 128,0)" ,
line : { line : {
color : "rgb(0, 0, 0)" ,
color : "rgb(0, 0, 0)" ,
width : 1 width : 1
@ -1309,7 +1317,7 @@ function CostHistogram(points){
autobinx : false ,
autobinx : false ,
histnorm : "count" ,
histnorm : "count" ,
marker : { marker : {
color : "rgb(0, 128,0)" ,
color : "rgb(128,0 ,0)" ,
line : { line : {
color : "rgb(0, 0, 0)" ,
color : "rgb(0, 0, 0)" ,
width : 1 width : 1
@ -1435,10 +1443,10 @@ var zoomer = d3v3.behavior.zoom()
// Margin of the main barchart
// Margin of the main barchart
var main _margin = { top : 8 , right : 10 , bottom : 30 , left : 100 } , var main _margin = { top : 8 , right : 10 , bottom : 30 , left : 100 } ,
main _width = 500 - main _margin . left - main _margin . right , main _width = 500 - main _margin . left - main _margin . right ,
main _height = 32 0 - main _margin . top - main _margin . bottom ; main _height = 35 0 - main _margin . top - main _margin . bottom ;
// Margin of the mini barchart
// Margin of the mini barchart
var mini _margin = { top : 8 , right : 10 , bottom : 30 , left : 10 } , var mini _margin = { top : 8 , right : 10 , bottom : 30 , left : 10 } ,
mini _height = 32 0 - mini _margin . top - mini _margin . bottom ; mini _height = 35 0 - mini _margin . top - mini _margin . bottom ;
mini _width = 100 - mini _margin . left - mini _margin . right ; mini _width = 100 - mini _margin . left - mini _margin . right ;
// Create the svg correlation component
// Create the svg correlation component
@ -2489,8 +2497,14 @@ if (points.length) { // If points exist (at least 1 point)
} }
} }
} }
var vectors = PCA . getEigenVectors ( ArrayContainsDataFeaturesClearedwithoutNull ) ; // Run a local PCA!
var PCAResults = PCA . computeAdjustedData ( ArrayContainsDataFeaturesClearedwithoutNull , vectors [ 0 ] ) ; // Get the results for individual dimension.
var FeaturesSelectedPoints = [ ] ;
for ( var i = 0 ; i < selectedPoints . length ; i ++ ) {
FeaturesSelectedPoints . push ( ArrayContainsDataFeaturesClearedwithoutNull [ selectedPoints [ i ] . id ] ) ;
}
var vectors = PCA . getEigenVectors ( FeaturesSelectedPoints ) ; // Run a local PCA!
var PCAResults = PCA . computeAdjustedData ( FeaturesSelectedPoints , vectors [ 0 ] ) ; // Get the results for individual dimension.
var PCASelVec = [ ] ; var PCASelVec = [ ] ;
PCASelVec = PCAResults . selectedVectors [ 0 ] ; PCASelVec = PCAResults . selectedVectors [ 0 ] ;
@ -2609,7 +2623,7 @@ if (points.length) { // If points exist (at least 1 point)
. alpha ( 0.35 ) . alpha ( 0.35 )
. composite ( "darken" ) . composite ( "darken" )
. hideAxis ( [ Category ] ) . hideAxis ( [ Category ] )
. margin ( { top : 20 , left : 0 , bottom : 10 , right : - 5 } ) . margin ( { top : 20 , left : 0 , bottom : 10 , right : - 8 } )
. mode ( "default" ) . mode ( "default" )
. color ( function ( d ) { if ( format [ 0 ] == "diabetes" ) { if ( d [ Category ] == "Negative" ) { return colorScaleCat ( "Positive" ) ; } else { return colorScaleCat ( "Negative" ) ; } } else { return colorScaleCat ( d [ Category ] ) ; } } ) . color ( function ( d ) { if ( format [ 0 ] == "diabetes" ) { if ( d [ Category ] == "Negative" ) { return colorScaleCat ( "Positive" ) ; } else { return colorScaleCat ( "Negative" ) ; } } else { return colorScaleCat ( d [ Category ] ) ; } } )
. render ( ) . render ( )
@ -2622,7 +2636,7 @@ if (points.length) { // If points exist (at least 1 point)
. data ( AllPointsWrapData2 ) . data ( AllPointsWrapData2 )
. composite ( "darken" ) . composite ( "darken" )
. hideAxis ( [ Category ] ) . hideAxis ( [ Category ] )
. margin ( { top : 20 , left : 0 , bottom : 10 , right : - 5 } ) . margin ( { top : 20 , left : 0 , bottom : 10 , right : - 8 } )
. mode ( "default" ) . mode ( "default" )
. color ( function ( d ) { if ( format [ 0 ] == "diabetes" ) { if ( d [ Category ] == "Negative" ) { return colorScaleCat ( "Positive" ) ; } else { return colorScaleCat ( "Negative" ) ; } } else { return colorScaleCat ( d [ Category ] ) ; } } ) . color ( function ( d ) { if ( format [ 0 ] == "diabetes" ) { if ( d [ Category ] == "Negative" ) { return colorScaleCat ( "Positive" ) ; } else { return colorScaleCat ( "Negative" ) ; } } else { return colorScaleCat ( d [ Category ] ) ; } } )
. render ( ) . render ( )
@ -2641,14 +2655,7 @@ if (points.length) { // If points exist (at least 1 point)
var max = ( d3 . max ( points , function ( d ) { return d . beta ; } ) ) ; var max = ( d3 . max ( points , function ( d ) { return d . beta ; } ) ) ;
var min = ( d3 . min ( points , function ( d ) { return d . beta ; } ) ) ; var min = ( d3 . min ( points , function ( d ) { return d . beta ; } ) ) ;
// colors
var colorbrewer = [ "#ffffcc" , "#ffeda0" , "#fed976" , "#feb24c" , "#fd8d3c" , "#fc4e2a" , "#e31a1c" , "#bd0026" , "#800026" ] ;
var calcStep = ( max ) / 8 ; var calcStep = ( max ) / 8 ;
var colorScale = d3 . scaleLinear ( )
. domain ( d3 . range ( 0 , max + calcStep , calcStep ) )
. range ( colorbrewer ) ;
var costLimiter = document . getElementById ( "param-costlim" ) . value ; var costLimiter = document . getElementById ( "param-costlim" ) . value ;
@ -2677,9 +2684,10 @@ if (points.length) { // If points exist (at least 1 point)
. domain ( d3 . range ( minSize1 , maxSize1 + calcStepSize1 , calcStepSize1 ) ) . domain ( d3 . range ( minSize1 , maxSize1 + calcStepSize1 , calcStepSize1 ) )
. range ( [ 5 * limitdist / 2 , ( parseInt ( 12 - ( 1 - document . getElementById ( "param-costlim" ) . value ) * 7 ) ) * limitdist / 2 ] ) ; . range ( [ 5 * limitdist / 2 , ( parseInt ( 12 - ( 1 - document . getElementById ( "param-costlim" ) . value ) * 7 ) ) * limitdist / 2 ] ) ;
var colorScale = d3 . scaleLinear ( ) var colorScale = d3 . scaleSequential ( )
. domain ( d3 . range ( 0 , max + calcStep , calcStep ) ) . domain ( [ 0 , max + calcStep ] )
. range ( colorbrewer ) ; . interpolator ( d => d3 . interpolateViridis ( 1 - d ) ) ;
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
return a . beta - b . beta ; return a . beta - b . beta ;
} ) } )
@ -2735,7 +2743,7 @@ if (points.length) { // If points exist (at least 1 point)
var circles = document . getElementsByClassName ( "swatch" ) ; var circles = document . getElementsByClassName ( "swatch" ) ;
for ( var i = 0 ; i < circles . length ; i ++ ) { for ( var i = 0 ; i < circles . length ; i ++ ) {
if ( circles [ i ] . localName == "circle" ) { if ( circles [ i ] . localName == "circle" ) {
circles [ i ] . style . fill = "rgb(0, 128,0)" ; circles [ i ] . style . fill = "rgb(128,0 ,0)" ;
} }
} }
} else { // If we have cost into color then calculate the color scales
} else { // If we have cost into color then calculate the color scales
@ -2754,6 +2762,7 @@ if (points.length) { // If points exist (at least 1 point)
} }
var max = ( d3 . max ( points , function ( d ) { return d . cost ; } ) ) ; var max = ( d3 . max ( points , function ( d ) { return d . cost ; } ) ) ;
var min = ( d3 . min ( points , function ( d ) { return d . cost ; } ) ) ;
var maxSize2 = ( d3 . max ( points , function ( d ) { return d . beta ; } ) ) ; var maxSize2 = ( d3 . max ( points , function ( d ) { return d . beta ; } ) ) ;
var minSize2 = ( d3 . min ( points , function ( d ) { return d . beta ; } ) ) ; var minSize2 = ( d3 . min ( points , function ( d ) { return d . beta ; } ) ) ;
@ -2764,16 +2773,16 @@ if (points.length) { // If points exist (at least 1 point)
d3 . selectAll ( "#legend1 > *" ) . remove ( ) ; d3 . selectAll ( "#legend1 > *" ) . remove ( ) ;
var colorbrewer = [ '#d9f0a3' , '#addd8e' , '#78c679' , '#41ab5d' , '#238443' , '#006837' , '#004529' ] ; var calcStep = ( ( max - min ) / 8 ) ;
var calcStep = ( ( max - min ) / 6 ) ;
var colorScale = d3 . scaleLinear ( ) var colorScale = d3 . scaleSequential ( )
. domain ( d3 . range ( min , max + calcStep , calcStep ) ) . domain ( [ min , max ] )
. range ( colorbrewer ) ; . interpolator ( d => d3 . interpolateMagma ( 1 - d ) ) ;
var labels _cost = [ ] ; var labels _cost = [ ] ;
var abbr _labels _cost = [ ] ; var abbr _labels _cost = [ ] ;
labels _cost = d3 . range ( min , max + calcStep , calcStep ) ; labels _cost = d3 . range ( min , max + calcStep , calcStep ) ;
for ( var i = 0 ; i < 7 ; i ++ ) { for ( var i = 0 ; i < 9 ; i ++ ) {
labels _cost [ i ] = labels _cost [ i ] . toFixed ( 5 ) ; labels _cost [ i ] = labels _cost [ i ] . toFixed ( 5 ) ;
abbr _labels _cost [ i ] = abbreviateNumber ( labels _cost [ i ] ) ; abbr _labels _cost [ i ] = abbreviateNumber ( labels _cost [ i ] ) ;
} }
@ -2786,8 +2795,8 @@ if (points.length) { // If points exist (at least 1 point)
var legend = d3 . legendColor ( ) var legend = d3 . legendColor ( )
. labelFormat ( d3 . format ( ",.5f" ) ) . labelFormat ( d3 . format ( ",.5f" ) )
. cells ( 7 ) . cells ( 9 )
. labels ( [ abbr _labels _cost [ 0 ] , abbr _labels _cost [ 1 ] , abbr _labels _cost [ 2 ] , abbr _labels _cost [ 3 ] , abbr _labels _cost [ 4 ] , abbr _labels _cost [ 5 ] , abbr _labels _cost [ 6 ] ] ) . labels ( [ abbr _labels _cost [ 0 ] , abbr _labels _cost [ 1 ] , abbr _labels _cost [ 2 ] , abbr _labels _cost [ 3 ] , abbr _labels _cost [ 4 ] , abbr _labels _cost [ 5 ] , abbr _labels _cost [ 6 ] , abbr _labels _cost [ 7 ] , abbr _labels _cost [ 8 ] ] )
. title ( "KLD(P||Q)" ) . title ( "KLD(P||Q)" )
. scale ( colorScale ) ; . scale ( colorScale ) ;
@ -2833,7 +2842,7 @@ if (points.length) { // If points exist (at least 1 point)
var circles = document . getElementsByClassName ( "swatch" ) ; var circles = document . getElementsByClassName ( "swatch" ) ;
for ( var i = 0 ; i < circles . length ; i ++ ) { for ( var i = 0 ; i < circles . length ; i ++ ) {
if ( circles [ i ] . localName == "circle" ) { if ( circles [ i ] . localName == "circle" ) {
circles [ i ] . style . fill = "rgb(128,0 ,0)" ; circles [ i ] . style . fill = "rgb(0, 128,0)" ;
} }
} }
@ -3024,7 +3033,6 @@ if (points.length) { // If points exist (at least 1 point)
break ; break ;
} else { } else {
var max = ( d3 . max ( points , function ( d ) { return d . cost ; } ) ) ; var max = ( d3 . max ( points , function ( d ) { return d . cost ; } ) ) ;
var costLimiter = document . getElementById ( "param-costlim" ) . value ; var costLimiter = document . getElementById ( "param-costlim" ) . value ;
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
@ -3042,11 +3050,11 @@ if (points.length) { // If points exist (at least 1 point)
d3 . selectAll ( "#legend1 > *" ) . remove ( ) ; d3 . selectAll ( "#legend1 > *" ) . remove ( ) ;
var colorbrewer = [ "#d9f0a3" , "#addd8e" , "#78c679" , "#41ab5d" , "#238443" , "#006837" , "#004529" ] ;
var calcStep = ( max - min ) / 6 ; var calcStep = ( max - min ) / 6 ;
var colorScale = d3 . scaleLinear ( )
. domain ( d3 . range ( min , max + calcStep , calcStep ) ) var colorScale = d3 . scaleSequential ( )
. range ( colorbrewer ) ; . domain ( [ min , max ] )
. interpolator ( d => d3 . interpolateMagma ( 1 - d ) ) ;
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
points = points . sort ( function ( a , b ) { // Sort them according to importance (darker color!)
return a . cost - b . cost ; return a . cost - b . cost ;
