ISOVIS
/
t-viSNE
10
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Fixed the different layers

Browse Source
master
Angelos Chatzimparmpas 6 years ago
parent 2e23d57d8d
commit 7664364ddc
3 changed files with 474 additions and 419 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      css/style.css
  2. 27
      index.html
  3. 216
      js/tsne_vis.js

10
css/style.css
Unescape View File

@ -134,11 +134,19 @@ cursor: default;
width: 50vw; width: 50vw;
height: 50vw; height: 50vw;
opacity: 1.0; opacity: 1.0;
margin-left: 15px;
position:absolute; position:absolute;
z-index: 2; z-index: 2;
} }
#modtSNEcanvas_svg_Schema {
width: 50vw;
height: 50vw;
opacity: 1.0;
position:absolute;
z-index: 2;
}
/* Legend of the Overview t-SNE canvas */ /* Legend of the Overview t-SNE canvas */
div#legend3 { div#legend3 {
height: 11vw; height: 11vw;

27
index.html
Unescape View File

@ -60,9 +60,9 @@
</div> </div>
<div id="control-panel"> <div id="control-panel">
<div class="param"> <div class="param">
<label for="param-lim">Points radius scaling factor</label> <label for="param-lim" >Points radius scaling factor</label>
<input id="param-lim" type="range" min="0.25" max="4" value="2", step="0.25"> <input id="param-lim" type="range" min="1" max="4" value="2", step="0.25" onchange="setReInitialize();">
<output for="param-lim" id="param-lim-value">2</output> <output for="param-lim" id="param-lim-value" >2</output>
</div> </div>
</div> </div>
</div> </div>
@ -70,6 +70,7 @@
<div class="col-md-6"> <div class="col-md-6">
<svg id="SvgAnnotator"></svg> <svg id="SvgAnnotator"></svg>
<svg id="modtSNEcanvas_svg"></svg> <svg id="modtSNEcanvas_svg"></svg>
<svg id="modtSNEcanvas_svg_Schema"></svg>
<div id="modtSNEDiv"> <div id="modtSNEDiv">
<canvas id = "modtSNEcanvas" ></canvas> <canvas id = "modtSNEcanvas" ></canvas>
</div> </div>
@ -80,7 +81,7 @@
<div class="col-md-2" style="width: 21.499999995%"> <div class="col-md-2" style="width: 21.499999995%">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Select different modes</h3> <h3 class="panel-title">Select Different Modes</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="resetAllFilters" style="margin-bottom: 40px"> <div id="resetAllFilters" style="margin-bottom: 40px">
@ -190,7 +191,7 @@
<div class="col-md-12"> <div class="col-md-12">
<div id="ThumbNailsList"> <div id="ThumbNailsList">
<label for="male">Neighborhood Preservation</label> <label for="male">Neighborhood Preservation</label>
<select id="param-neighborHood" name ="param-neighborHood"> <select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize();">
<option selected="selected" value="color">Color</option> <option selected="selected" value="color">Color</option>
<option value="size">Size</option> <option value="size">Size</option>
</select> </select>
@ -200,17 +201,17 @@
<div id="param-correlation"> <div id="param-correlation">
<div class="param"> <div class="param">
<label for="param-corr">Correlation threshold</label> <label for="param-corr">Correlation threshold</label>
<input id="param-corr" type="range" min="0" max="750" value="150", step="50"> <input id="param-corr" type="range" min="0" max="750" value="150", step="25" onchange="CalculateCorrel();">
<output for="param-corr" id="param-corr-value">150</output> <output for="param-corr" id="param-corr-value">150</output>
</div> </div>
Visualization annotating form: <textarea type="text" id="comment" name="textforAnnotator" style="margin-top:4px" placeholder="Please, provide your comment."></textarea> Visualization annotating form: <textarea type="text" id="comment" name="textforAnnotator" style="margin-top:4px" placeholder="Please, provide your comment."></textarea>
</div> </div>
<div id="commBtn"> <div id="commBtn">
<div class="param" style="margin-top:4px"> <div class="param" style="margin-top:4px">
<div id="toggleAnnotator"><button class="btn btn-default btn-block" onclick="setAnnotator();">Add a new comment</button></div> <div id="toggleAnnotator"><button class="btn btn-default btn-block" onclick="setAnnotator();">Addition of a new comment</button></div>
</div> </div>
<div class="param" style="margin-top:4px"> <div class="param" style="margin-top:4px">
<div id="continue"><button class="btn btn-default btn-block active" onclick="setContinue();">Continue with the analysis</button></div> <div id="continue"><button class="btn btn-default btn-block active" onclick="setContinue();">Continuation of the analysis</button></div>
</div> </div>
</div> </div>
</div> </div>
@ -225,7 +226,7 @@
<div class="col-md-3" id="extra-information" style="width: 24.5999995%"> <div class="col-md-3" id="extra-information" style="width: 24.5999995%">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">t-SNE and data set's extra information</h3> <h3 class="panel-title">t-SNE and Data Set's Extra Information</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="cost"></div> <div id="cost"></div>
@ -235,12 +236,10 @@
</div> </div>
<div class="panel panel-default" id="kNNInfo"> <div class="panel panel-default" id="kNNInfo">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">kNN barchart information</h3> <h3 class="panel-title">kNN Barchart Information</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="cost"></div> <div id="kNNDetails"></div>
<br>
<div id="datasetDetails"></div>
</div> </div>
</div> </div>
</div> </div>
@ -265,7 +264,6 @@
for (var i = 0; i < btns.length; i++) { for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() { btns[i].addEventListener("click", function() {
let current = document.getElementById("commBtn").getElementsByClassName("active"); let current = document.getElementById("commBtn").getElementsByClassName("active");
console.log(current);
current[0].className = current[0].className.replace("btn btn-default btn-block active", "btn btn-default btn-block"); current[0].className = current[0].className.replace("btn btn-default btn-block active", "btn btn-default btn-block");
this.className += " active"; this.className += " active";
}); });
@ -280,7 +278,6 @@
for (var i = 0; i < btns2.length; i++) { for (var i = 0; i < btns2.length; i++) {
btns2[i].addEventListener("click", function() { btns2[i].addEventListener("click", function() {
let current = document.getElementsByClassName("active"); let current = document.getElementsByClassName("active");
console.log(current);
current[0].className = current[0].className.replace("btn btn-info btn-block active", "btn btn-info btn-block"); current[0].className = current[0].className.replace("btn btn-info btn-block active", "btn btn-info btn-block");
this.className += " active"; this.className += " active";
}); });

216
js/tsne_vis.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save