@ -1,8 +1,9 @@
// t-SNE.js object and other global variables
var toggleValue = false ; var k ; var points = [ ] ; var all _fields ; var pointsbeta = [ ] ; var KNNEnabled = true ;
var k ; var points = [ ] ; var all _fields ; var pointsbeta = [ ] ; var KNNEnabled = true ;
// These are the dimensions for the square shape of the main panel\
var dimensions = document . getElementById ( 'modtSNEcanvas' ) . offsetWidth ;
var prevRightClick ;
// These are the dimensions for the overview panel
var dim = document . getElementById ( 'tSNEcanvas' ) . offsetWidth ;
@ -71,7 +72,7 @@ function parseData(url) {
}
function setContinue ( ) {
d3v3 . select ( "#SvgAnnotator" ) . style ( "z-index" , 2 ) ;
d3v3 . select ( "#SvgAnnotator" ) . style ( "z-index" , 1 ) ;
}
var ringNotes = [ ] ;
@ -80,11 +81,35 @@ var AnnotationsAll = [];
var draggable = [ ] ;
function setReset ( ) {
d3 . selectAll ( "#SvgAnnotator > *" ) . remove ( ) ;
d3 . selectAll ( "#OverviewtSNE > *" ) . remove ( ) ;
d3 . selectAll ( "#correlation > *" ) . remove ( ) ;
d3 . selectAll ( "#modtSNEcanvas_svg > *" ) . remove ( ) ;
d3 . selectAll ( "#kNNBar > *" ) . remove ( ) ;
lassoEnable ( ) ;
flag = false ;
d3 . selectAll ( "#modtSNEcanvas_svg_Schema > *" ) . remove ( ) ;
d3 . selectAll ( "#SvgAnnotator > *" ) . remove ( ) ;
Arrayx = [ ] ;
Arrayy = [ ] ;
XYDistId = [ ] ;
Arrayxy = [ ] ;
DistanceDrawing1D = [ ] ;
allTransformPoints = [ ] ;
p ;
pFinal = [ ] ;
paths ;
path ;
ArrayLimit = [ ] ;
minimum ;
correlationResults = [ ] ;
ArrayContainsDataFeaturesLimit = [ ] ;
prevRightClick = false ;
for ( var i = 0 ; i < InitialStatePoints . length ; i ++ ) {
InitialStatePoints [ i ] . selected = true ;
InitialStatePoints [ i ] . starplot = false ;
}
redraw ( InitialStatePoints ) ;
}
function setReInitialize ( ) {
for ( var i = 0 ; i < InitialStatePoints . length ; i ++ ) {
InitialStatePoints [ i ] . selected = true ;
}
@ -94,18 +119,39 @@ function setReset(){
function setLayerProj ( ) {
d3 . select ( "#modtSNEcanvas" ) . style ( "z-index" , 2 ) ;
d3 . select ( "#modtSNEcanvas_svg" ) . style ( "z-index" , 1 ) ;
d3 . select ( "#modtSNEcanvas_svg_Schema" ) . style ( "z-index" , 1 ) ;
}
function setLayerComp ( ) {
d3 . select ( "#modtSNEcanvas_svg" ) . style ( "z-index" , 3 ) ;
d3 . select ( "#modtSNEcanvas_svg" ) . style ( "z-index" , 2 ) ;
d3 . select ( "#modtSNEcanvas_svg_Schema" ) . style ( "z-index" , 1 ) ;
d3 . select ( "#modtSNEcanvas" ) . style ( "z-index" , 1 ) ;
lassoEnable ( ) ;
}
function setLayerSche ( ) {
d3 . select ( "#modtSNEcanvas_svg" ) . style ( "z-index" , 3 ) ;
toggleValue = true ;
d3 . select ( "#modtSNEcanvas_svg_Schema" ) . style ( "z-index" , 2 ) ;
d3 . select ( "#modtSNEcanvas" ) . style ( "z-index" , 1 ) ;
d3 . select ( "#modtSNEcanvas_svg" ) . style ( "z-index" , 1 ) ;
click ( ) ;
}
function lassoEnable ( ) {
var interactionSvg = d3 . select ( "#modtSNEcanvas_svg" )
. attr ( "width" , dimensions )
. attr ( "height" , dimensions )
. style ( 'position' , 'absolute' )
. style ( 'top' , 0 )
. style ( 'left' , 0 ) ;
var lassoInstance = lasso ( )
. on ( 'end' , handleLassoEnd )
. on ( 'start' , handleLassoStart ) ;
interactionSvg . call ( lassoInstance ) ;
}
function setAnnotator ( ) {
@ -136,7 +182,6 @@ function setAnnotator(){
. attr ( "height" , vh2 * 0.888 )
. style ( "z-index" , 3 ) ;
var gAnnotations = svgAnnotator . append ( "g" )
. attr ( "class" , "annotations" )
. call ( ringNote , annotations ) ;
@ -184,16 +229,15 @@ function setAnnotator(){
var camera ;
var scene ;
// function that executes after data is successfully loaded
function init ( data , results _all , fields ) {
MainCanvas = document . getElementById ( 'modtSNEcanvas' ) ;
Child = document . getElementById ( 'modtSNEDiv' ) ;
// Add canvas
renderer = new THREE . WebGLRenderer ( { canvas : MainCanvas } ) ;
renderer = new THREE . WebGLRenderer ( { canvas : MainCanvas } ) ;
renderer . setSize ( dimensions , dimensions ) ;
Child . append ( renderer . domElement ) ;
scene = new THREE . Scene ( ) ;
scene . background = new THREE . Color ( 0xffffff ) ;
@ -205,6 +249,11 @@ function init(data, results_all, fields) {
far
) ;
animate ( ) ;
// function that executes after data is successfully loaded
function init ( data , results _all , fields ) {
prevRightClick = false ;
step _counter = 0 ;
max _counter = document . getElementById ( "param-maxiter-value" ) . value ;
opt = { } ;
@ -399,6 +448,7 @@ function updateEmbedding() {
}
function ShepardHeatMap ( ) {
d3 . selectAll ( "#sheparheat > *" ) . remove ( ) ;
var margin = { top : 35 , right : 15 , bottom : 15 , left : 35 } ,
dim2 = Math . min ( parseInt ( d3 . select ( "#sheparheat" ) . style ( "width" ) ) , parseInt ( d3 . select ( "#sheparheat" ) . style ( "height" ) ) )
width = dim2 - margin . left - margin . right ,
@ -620,10 +670,11 @@ var correlationResults = [];
var ArrayContainsDataFeaturesLimit = [ ] ;
function OverviewtSNE ( points ) {
if ( step _counter == 1 ) {
d3 . select ( "#OverviewtSNE" ) . select ( "g" ) . remove ( ) ;
d3 . select ( "#correlation" ) . select ( "g" ) . remove ( ) ;
d3 . selectAll ( "#correlation > *" ) . remove ( ) ;
d3 . selectAll ( "#modtSNEcanvas_svg > *" ) . remove ( ) ;
lassoEnable ( ) ;
d3 . selectAll ( "#modtSNEcanvas_svg_Schema > *" ) . remove ( ) ;
d3 . selectAll ( "#SvgAnnotator > *" ) . remove ( ) ;
Arrayx = [ ] ;
Arrayy = [ ] ;
XYDistId = [ ] ;
@ -638,7 +689,6 @@ function OverviewtSNE(points){
minimum ;
correlationResults = [ ] ;
ArrayContainsDataFeaturesLimit = [ ] ;
}
var canvas = document . getElementById ( 'tSNEcanvas' ) ;
gl = canvas . getContext ( 'experimental-webgl' ) ;
@ -833,15 +883,13 @@ function OverviewtSNE(points){
}
function redraw ( repoints ) {
//OverviewtSNE(repoints);
// OverviewtSNE(repoints);
BetatSNE ( repoints ) ;
//CosttSNE(repoints);
}
function handleLassoEnd ( lassoPolygon ) {
var countLassoFalse = 0 ;
KNNEnabled = true ;
if ( toggleValue == false ) {
for ( var i = 0 ; i < points . length ; i ++ ) {
x = points [ i ] . x ;
y = points [ i ] . y ;
@ -872,16 +920,12 @@ function handleLassoEnd(lassoPolygon) {
}
}
redraw ( points ) ;
} else {
click ( ) ;
}
}
// reset selected points when starting a new polygon
function handleLassoStart ( lassoPolygon ) {
if ( toggleValue == true ) {
} else {
KNNEnabled = false ;
for ( var i = 0 ; i < points . length ; i ++ ) {
points [ i ] . selected = true ;
@ -890,7 +934,6 @@ function handleLassoStart(lassoPolygon) {
}
redraw ( points ) ;
}
}
@ -929,9 +972,12 @@ var svg,
. on ( "touchmove.zoom" , null )
. on ( "touchend.zoom" , null ) ;
var svgClick ;
var flag = false ;
function click ( ) {
let svgClick = d3 . select ( '#modtSNEcanvas_svg' ) ;
svgClick = d3 . select ( '#modtSNEcanvas_svg_Schema ' ) ;
function drawCircle ( x , y , size ) {
svgClick . append ( "circle" )
@ -943,26 +989,32 @@ function click(){
Arrayy . push ( y ) ;
}
svgClick . on ( 'click' , function ( ) {
if ( prevRightClick == false ) {
var coords = d3 . mouse ( this ) ;
drawCircle ( coords [ 0 ] , coords [ 1 ] , 4 ) ;
drawCircle ( coords [ 0 ] , coords [ 1 ] , 3 ) ;
}
for ( var k = 0 ; k < Arrayx . length ; k ++ ) {
Arrayxy [ k ] = [ Arrayx [ k ] , Arrayy [ k ] ] ;
}
for ( var k = 0 ; k < Arrayxy . length - 1 ; k ++ ) {
d3 . select ( '#modtSNEcanvas_svg_Schema' ) . append ( 'line' )
. attr ( "x1" , Arrayxy [ k ] [ 0 ] )
. attr ( "y1" , Arrayxy [ k ] [ 1 ] )
. attr ( "x2" , Arrayxy [ k + 1 ] [ 0 ] )
. attr ( "y2" , Arrayxy [ k + 1 ] [ 1 ] )
. style ( "stroke" , "black" )
. style ( "stroke-width" , 1 ) ;
}
} ) ;
//if (Arrayx.length == 1){
//}
svgClick . on ( "contextmenu" , function ( d ) {
// Prevent the default mouse action. Allow right click to be used for the confirmation of our schema.
d3 . event . preventDefault ( ) ;
var line = d3 . line ( ) . curve ( d3 . curveCardinal ) ;
if ( prevRightClick == true ) {
for ( var k = 0 ; k < Arrayx . length ; k ++ ) {
Arrayxy [ k ] = [ Arrayx [ k ] , Arrayy [ k ] ] ;
}
} else {
for ( var loop = 0 ; loop < points . length ; loop ++ ) {
allTransformPoints [ loop ] = [ points [ loop ] . x , points [ loop ] . y , points [ loop ] . id , points [ loop ] . beta , points [ loop ] . cost , points [ loop ] . selected ] ;
}
var line = d3 . line ( ) . curve ( d3 . curveCardinal ) ;
for ( var k = 0 ; k < Arrayxy . length - 1 ; k ++ ) {
path = svgClick . append ( "path" )
@ -970,13 +1022,32 @@ function click(){
. attr ( "class" , "SchemaCheck" )
. attr ( "d" , line ) ;
}
// Prevent the default mouse action. Allow right click to be used for the confirmation of our schema.
d3 . event . preventDefault ( ) ;
var line = svgClick . append ( "line" ) ;
flag = true ;
CalculateCorrel ( ) ;
}
} ) ;
}
paths = svgClick . selectAll ( "path" ) . filter ( ".SchemaCheck" ) ;
function CalculateCorrel ( ) {
if ( flag == false ) {
alert ( "Please, draw a schema first!" ) ;
} else {
var correlLimit = document . getElementById ( "param-corr-value" ) . value ;
correlLimit = parseInt ( correlLimit ) ;
allTransformPoints = [ ] ;
for ( var loop = 0 ; loop < points . length ; loop ++ ) {
allTransformPoints [ loop ] = [ points [ loop ] . x , points [ loop ] . y , points [ loop ] . id , points [ loop ] . beta , points [ loop ] . cost , points [ loop ] . selected ] ;
}
var line = svgClick . append ( "line" ) ;
paths = svgClick . selectAll ( "path" ) . filter ( ".SchemaCheck" ) ;
XYDistId = [ ] ;
if ( paths . nodes ( ) . length == 0 ) {
alert ( "Please, provide one more point in order to create a line (i.e., path)!" )
} else {
@ -1018,6 +1089,7 @@ function click(){
}
}
ArrayLimit = [ ] ;
for ( var i = 0 ; i < arraysCleared . length ; i ++ ) {
if ( arraysCleared [ i ] [ 5 ] < correlLimit ) {
ArrayLimit . push ( arraysCleared [ i ] ) ;
@ -1061,7 +1133,6 @@ function click(){
arraysConnected = arraysSplitted [ m ] . concat ( arraysSplitted [ m + 1 ] ) ;
}
}
var Order = [ ] ;
for ( var temp = 0 ; temp < arraysConnected . length ; temp ++ ) {
Order . push ( arraysConnected [ temp ] [ 6 ] ) ;
@ -1077,8 +1148,12 @@ function click(){
}
redraw ( points ) ;
ArrayContainsDataFeatures = mapOrder ( ArrayContainsDataFeatures , Order , 5 ) ;
for ( let k = 0 ; k < dataFeatures . length ; k ++ ) {
ArrayContainsDataFeatures . push ( Object . values ( dataFeatures [ k ] ) . concat ( k ) ) ;
}
ArrayContainsDataFeatures = mapOrder ( ArrayContainsDataFeatures , Order , 5 ) ;
ArrayContainsDataFeaturesLimit = [ ] ;
for ( var i = 0 ; i < ArrayContainsDataFeatures . length ; i ++ ) {
for ( var j = 0 ; j < arraysConnected . length ; j ++ ) {
if ( ArrayContainsDataFeatures [ i ] [ 5 ] == arraysConnected [ j ] [ 6 ] ) {
@ -1091,17 +1166,8 @@ function click(){
ArrayContainsDataFeaturesLimit [ loop ] . push ( loop ) ;
}
for ( var k = 0 ; k < Arrayxy . length - 1 ; k ++ ) {
d3 . select ( '#modtSNEcanvas_svg' ) . append ( 'line' )
. attr ( "x1" , Arrayxy [ k ] [ 0 ] )
. attr ( "y1" , Arrayxy [ k ] [ 1 ] )
. attr ( "x2" , Arrayxy [ k + 1 ] [ 0 ] )
. attr ( "y2" , Arrayxy [ k + 1 ] [ 1 ] )
. style ( "stroke" , "black" )
. style ( "stroke-width" , 2 ) ;
}
var SignStore = [ ] ;
correlationResults = [ ] ;
const arrayColumn = ( arr , n ) => arr . map ( x => x [ n ] ) ;
for ( var temp = 0 ; temp < ArrayContainsDataFeaturesLimit [ 0 ] . length - 2 ; temp ++ ) {
var tempData = new Array (
@ -1127,7 +1193,6 @@ function click(){
if ( SignStore [ i ] [ 1 ] * ( - 1 ) == correlationResults [ j ] [ 1 ] ) {
correlationResults [ j ] [ 1 ] = parseInt ( correlationResults [ j ] [ 1 ] * 100 ) * ( - 1 ) ;
correlationResults [ j ] . push ( j ) ;
//correlationResults[j][1] = correlationResults[j][1].toFixed(2)*(-1);
}
if ( SignStore [ i ] [ 1 ] == correlationResults [ j ] [ 1 ] ) {
correlationResults [ j ] [ 1 ] = parseInt ( correlationResults [ j ] [ 1 ] * 100 ) ;
@ -1135,6 +1200,13 @@ function click(){
}
}
}
}
drawBarChart ( ) ;
}
}
function drawBarChart ( ) {
d3 . selectAll ( "#correlation > *" ) . remove ( ) ;
/////////////////////////////////////////////////////////////
///////////////// Set-up SVG and wrappers ///////////////////
/////////////////////////////////////////////////////////////
@ -1300,10 +1372,8 @@ function click(){
//Start the brush
//gBrush.call(brush.event);
gBrush . call ( brush . event ) ;
prevRightClick = true ;
}
} ) ;
}
//Function runs on a brush move - to update the big bar chart
function updateBarChart ( ) {
@ -1708,6 +1778,7 @@ function BetatSNE(points){
return parseFloat ( a . id ) - parseFloat ( b . id ) ;
} ) ;
$ ( "#kNNDetails" ) . html ( "Purity of the cluster was checked for k values starting from " + ( 1 ) + " to " + maxKNN + "." ) ;
for ( k = maxKNN ; k > 0 ; k -- ) {
@ -1895,25 +1966,6 @@ function BetatSNE(points){
RadarChart ( "#starPlot" , wrapData , colorScl , IDS , radarChartOptions ) ;
}
if ( step _counter == max _counter || step _counter == 1 ) {
if ( step _counter == 1 ) {
d3 . select ( "#modtSNEcanvas_svg" ) . select ( "g" ) . remove ( ) ;
} else {
if ( toggleValue == false ) {
interactionSvg = d3 . select ( "#modtSNEcanvas_svg" )
. attr ( "width" , dimensions )
. attr ( "height" , dimensions )
. style ( 'position' , 'absolute' )
. style ( 'top' , 0 )
. style ( 'left' , 0 ) ;
var lassoInstance = lasso ( )
. on ( 'end' , handleLassoEnd )
. on ( 'start' , handleLassoStart ) ;
interactionSvg . call ( lassoInstance ) ;
}
}
}
var ColSizeSelector = document . getElementById ( "param-neighborHood" ) . value ;
@ -2009,11 +2061,8 @@ var colorScale = d3.scaleLinear()
. call ( legend ) ;
}
let viz _width = dimensions ;
window . addEventListener ( 'resize' , ( ) => {
dimensions = window . innerWidth ;
viz _width = dimensions ;
dimensions = window . innerHeight ;
renderer . setSize ( dimensions , dimensions ) ;
@ -2032,10 +2081,11 @@ view = d3.select(renderer.domElement);
function setUpZoom ( ) {
view . call ( zoom ) ;
let initial _scale = getScaleFromZ ( far ) ;
var initial _transform = d3 . zoomIdentity . translate ( viz _width / 2 , dimensions / 2 ) . scale ( initial _scale ) ;
var initial _transform = d3 . zoomIdentity . translate ( dimensions / 2 , dimensions / 2 ) . scale ( initial _scale ) ;
zoom . transform ( view , initial _transform ) ;
camera . position . set ( 0 , 0 , far ) ;
}
setUpZoom ( ) ;
var circle _sprite = new THREE . TextureLoader ( ) . load (
@ -2198,7 +2248,7 @@ if(temporal == 0 && points[j].DimON == null){
function zoomHandler ( d3 _transform ) {
let scale = d3 _transform . k ;
let x = - ( d3 _transform . x - viz _width / 2 ) / scale ;
let x = - ( d3 _transform . x - dimensions / 2 ) / scale ;
let y = ( d3 _transform . y - dimensions / 2 ) / scale ;
let z = getZFromScale ( scale ) ;
camera . position . set ( x , y , z ) ;
@ -2238,7 +2288,7 @@ checkIntersects(mouse_position);
function mouseToThree ( mouseX , mouseY ) {
return new THREE . Vector3 (
mouseX / viz _width * 2 - 1 ,
mouseX / dimensions * 2 - 1 ,
- ( mouseY / dimensions ) * 2 + 1 ,
1
) ;
