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

fixed local PCA and workflow

Browse Source
Angelos Chatzimparmpas 5 years ago
parent 853997eba8
commit 65d54dba72
3 changed files with 294 additions and 250 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. 57
      css/style.css
  2. 407
      index.html
  3. 80
      js/tsne_vis.js

57
css/style.css
Unescape View File

@ -11,6 +11,11 @@ html, body {
margin-top: 8px;
}
.btn{
font-size: 15px !important;
}
#param-correlation {
flex: 1;
display: flex;
@ -103,8 +108,7 @@ cursor: default;
}
.right-side-cor {
margin-left:12px;
margin-top: -60px;
margin-top: -125px;
}
.right-side-hist {
@ -112,12 +116,8 @@ cursor: default;
margin-top: 1px;
}
.right-side-star {
margin-left:12px;
margin-top: -50px;
}
#left-side-param{
.right-side-PCP {
margin-top: -57px;
}
#left-side-visual{
@ -131,7 +131,7 @@ cursor: default;
height: 50vw !important;
border: 1px solid black;
position: absolute;
margin-left: -7.5px;
margin-left: -15px;
z-index: 2;
}
@ -171,7 +171,8 @@ cursor: default;
.med-bottom {
margin-top: 6.7vw;
width: 50vw !important;
margin-left: -16px;
width: 50.1vw !important;
height: 5.4vw !important;
}
@ -180,7 +181,6 @@ cursor: default;
width: 50vw ;
height: 50vw ;
opacity: 1.0;
margin-left: 7.5px;
position:absolute;
z-index: 2;
}
@ -190,7 +190,7 @@ cursor: default;
height: 50vw;
opacity: 1.0;
position:absolute;
margin-left: -7.5px;
margin-left: -15px;
z-index: 2;
}
@ -207,24 +207,19 @@ circle.swatch{
margin-left: -6px;
}
/* Legend of the Overview t-SNE canvas */
.PoinRadius {
margin-top: 30px;
}
/* Legend of the Overview t-SNE canvas */
#legend1 {
height: 11vw;
height: 7vw;
width: 5vw;
margin-left:-10px;
margin-top: -5px;
text-align: left;
}
/* Legend of the Overview t-SNE canvas */
#legend4 {
height: 7vw;
width: 5vw;
margin-top:-80px;
margin-left:-10px;
margin-left: -20px;
margin-top: -10px;
text-align: left;
}
@ -255,7 +250,7 @@ svg#legend3 {
#PlotCost {
height: 3vw;
width: 11vw;
width: 8.1vw;
margin-left: -5px;
text-align: left;
z-index: 1;
@ -263,7 +258,7 @@ svg#legend3 {
#hider2 {
height: 3vw;
width: 11vw;
width: 8.4vw;
margin-left: -5px;
text-align: left;
background-color: white;
@ -271,12 +266,6 @@ svg#legend3 {
z-index: 2;
}
/* ShepardHeatmap Styling for the different rectangles used there */
rect {
stroke: #E6E6E6;
stroke-width: 1.5px;
}
.axis text {
font-size: 9pt;
fill: #000;
@ -408,14 +397,10 @@ rect {
/* Styling of the main SVG behind canvas */
#SvgAnnotator {
position: absolute;
margin-left:-7.5px;
margin-left:-15px;
z-index: 1;
}
#toggleAnnotator {
color: darkgray;
}
#selectionLabel{
border: 1px solid black;
padding: 5px 5px 5px 5px;
@ -437,7 +422,7 @@ rect {
/* Margins for the extra-information panel and the kNNInfo */
#extra-information {
margin-top: -5px;
margin-left: 5px;
margin-left: -12px;
}
#kNNInfo {
@ -456,6 +441,8 @@ rect {
/* Draw a red colored button for reset */
#FactRes{
color: red;
padding-right: 10px;
padding-left: 10px;
}
#isItLoaded {

407
index.html
Unescape View File

@ -33,6 +33,7 @@
<link rel="stylesheet" href="./css/bootstrap.min.css"/>
<link rel="stylesheet" href="./css/d3.parcoords.css">
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous">
<!-- Bootstrap -->
<script src="./modules/bootstrap/bootstrap.min.js"></script>
@ -42,210 +43,259 @@
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">t-SNE Overview</h2><div id="datasetDetails"style="display:inline-block; float:right"></div>
</div>
<div class="row">
<div class="panel-body">
<div class="col-md-6">
<div id="overviewRect"></div>
<div class="col-md-3">
<div class="panel panel-default" id="left-side-param">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">t-SNE Parameters</h2><div id="cost" style="display:inline-block; float:right"></div>
</div>
<div class="col-md-6">
<div style="display:block" id="CategoryName"></div>
<div class="legend" id = "legend2"></div>
<div class="panel-body">
<div id="control-panel" data-sr="enter left over 8s">
<div class="param">
<label id="data" for="param-dataset">Data sets</label>
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
<option value="diabetes.csv" selected>Pima Indian Diabetes</option>
<option value="breast-cancer-wisconsin.csv">Breast Cancer Wisconsin</option>
<option value="iris.csv">Iris</option>
<option value="winequality-red.csv">Red Wine - Quality</option>
<option value="empty">Upload New File</option>
</select>
<button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory reset</button>
</div>
<div class="param">
<label for="param-perplexity">Perplexity</label>
<input id="param-perplexity" type="range" min="5" max="100" value="30", step="1">
<output for="param-perplexity" id="param-perplexity-value">30</output>
</div>
<div class="param">
<label for="param-learningrate">Learning rate</label>
<input id="param-learningrate" type="range" min="1" max="150" value="10", step="1">
<output for="param-learningrate" id="param-learningrate-value">10</output>
</div>
<div class="param">
<div class="row">
<div class="col-md-3">
<label for="param-maxiter" style="padding: 25px 0 0 8px">Max iterations</label>
</div>
<div class="col-md-4" style="padding: 25px 0 0 0px">
<input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10" >
</div>
<div class="col-md-1">
<output for="param-maxiter" id="param-maxiter-value" style="padding: 25px 0 0 0" >500</output>
</div>
<div class="col-md-4">
<div id="hider2"></div>
<div id="PlotCost"></div>
</div>
</div>
</div>
<div class="param">
<label for="param-distance">Distance metric</label>
<select id="param-distance" name="param-distance">
<option value="euclideanDist" selected>Euclidean distance</option>
<option value="jaccardDist">Jaccard dissimilarity</option>
</select>
<input id="file-input" type="file" name="name" style="display: none;" />
<button type="button" class="button" onclick='loadAnalysis();' style="padding:0 12px 0 12px">Load execut.</button>
</div>
<div class="param">
<label for="param-transform">Data transform</label>
<select id="param-transform" name="param-transform">
<option value="noTrans" selected>No transform</option>
<option value="logTrans">Log10</option>
<option value="asinhTrans">Asinh</option>
<option value="binTrans">Binarize</option>
</select>
<button type="button" class="button" onclick="SaveAnalysis()" style="padding:0 10px 0 10px">Store execut.</button>
</div>
<div class="row">
<div class="col-md-8">
<p><div id="run-button"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" value="Execute new t-SNE analysis" style="margin-top: 4px"><i class="fas fa-running fa-lg" style="margin-right: 10px"></i>Execute new t-SNE analysis</button></div></p>
</div>
<div class="col-md-4" style="margin-top: 10px">
<label>
<input id="downloadDists" checked type="checkbox">
Distances cached on "Store execution"
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="control-panel" class="PoinRadius">
<div class="param">
<label for="param-lim" >Points radius scaling factor</label>
<input id="param-lim" type="range" min="1" max="3" value="3", step="0.5" onchange="setReInitialize(true);">
<output for="param-lim" id="param-lim-value" >3</output>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<svg id="SvgAnnotator"></svg>
<svg id="modtSNEcanvas_svg"></svg>
<svg id="modtSNEcanvas_svg_Schema"></svg>
<div id="modtSNEDiv">
<canvas id = "modtSNEcanvas" ></canvas>
</div>
</div>
<div class="col-md-1" style="width: 3.499999995%">
<svg id="legend1"></svg>
<svg id="legend4"></svg>
</div>
<div class="col-md-2" style="width: 21.499999995%">
<div class="col-md-2" style="width: 24.999999995%">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Select Different Modes</h2>
<h2 class="panel-title">Interaction/Mode Selection</h2>
</div>
<div class="panel-body">
<div id="resetAllFilters" style="margin-bottom: 40px">
<button class="btn btn-info btn-block active" onclick="setLayerProj();">t-SNE points exploration</button>
<button class="btn btn-info btn-block" onclick="setLayerComp();">Points selection and data features comparison</button>
<button class="btn btn-info btn-block" onclick="setLayerSche();">Schema investigation</button>
<div id="resetAllFilters" style="margin-bottom: 20px">
<button class="btn btn-info active" onclick="setLayerProj();"><i class="fas fa-mouse-pointer fa-lg" style="margin-right: 10px"></i>Points interaction</button>
<button class="btn btn-info" onclick="setLayerComp();"><i class="far fa-object-group fa-lg" style="margin-right: 10px" ></i>Points lasso selection</button>
<button class="btn btn-info" onclick="setLayerSche();"><i class="fas fa-draw-polygon fa-lg" style="margin-right: 10px"></i>Feature correlation</button>
</div>
<button class="btn btn-info btn-block" onclick="setReset();">Reset all filters</button>
<label style="margin-top: 15px">
<input id="controls" type="checkbox">
Hide annotations' controllers
</label>
<label style="margin-top: 15px">
<input id="downloadDists" checked type="checkbox">
Distances cache (Save Exec.)
</label>
<button class="btn btn-info" onclick="setReset();" style="margin-left: 200px"><i class="fas fa-trash-alt fa-lg" style="margin-right: 10px"></i>Reset interactions</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Shepard Heatmap</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<svg id="sheparheat"></svg>
</div>
<div class="col-md-2">
<svg id="legend3"></svg>
<div id="hider2"></div>
<div id="PlotCost"></div>
<div class="col-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom: 35px;">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">t-SNE Overview</h2><div id="datasetDetails"style="display:inline-block; float:right"></div>
</div>
<div class="row">
<div class="panel-body">
<div class="col-md-6">
<div id="overviewRect"></div>
</div>
<div class="col-md-6">
<div style="display:block" id="CategoryName"></div>
<div class="legend" id = "legend2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-6">
<div class="panel panel-default right-side-cor">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">Correl. Schema Investigation</h2><div class="param" style="display:inline-block; float:right"><label for="param-corlim" style="display:inline-block; float: right">Min. Visible Correlation: #<output for="param-corlim" id="param-corlim-value" style="display:inline-block; float:right">0.0</output></label>
<input id="param-corlim" type="range" min="0" max="1" value="0.0", step="0.1" style="display:inline-block; float:right" onchange="CalculateCorrel(true);">
<div class="col-md-3 col-md-offset-6">
<div class="panel panel-default" style="margin-top: -195px">
<div class="panel-heading">
<h2 class="panel-title">Visual Mapping</h2>
</div>
</div>
<div class="panel-body">
<svg id="correlation"></svg>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default" id="left-side-param">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">t-SNE Parameters</h2><div id="cost" style="display:inline-block; float:right"></div>
</div>
<div class="panel-body">
<div id="control-panel" data-sr="enter left over 8s">
<div class="param">
<label id="data" for="param-dataset">Data sets</label>
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
<option value="diabetes.csv" selected>Pima Indian Diabetes</option>
<option value="breast-cancer-wisconsin.csv">Breast Cancer Wisconsin</option>
<option value="iris.csv">Iris</option>
<option value="winequality-red.csv">Red Wine - Quality</option>
<option value="empty">Upload New File</option>
</select>
<button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory Reset</button>
</div>
<div class="param">
<label for="param-perplexity">Perplexity</label>
<input id="param-perplexity" type="range" min="5" max="100" value="30", step="1">
<output for="param-perplexity" id="param-perplexity-value">30</output>
</div>
<div class="param">
<label for="param-learningrate">Learning rate</label>
<input id="param-learningrate" type="range" min="1" max="150" value="10", step="1">
<output for="param-learningrate" id="param-learningrate-value">10</output>
</div>
<div class="param">
<label for="param-maxiter">Max iterations</label>
<input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10">
<output for="param-maxiter" id="param-maxiter-value">500</output>
</div>
<div class="param">
<label for="param-distance">Distance metric</label>
<select id="param-distance" name="param-distance">
<option value="euclideanDist" selected>Euclidean distance</option>
<option value="jaccardDist">Jaccard dissimilarity</option>
</select>
<input id="file-input" type="file" name="name" style="display: none;" />
<button type="button" class="button" onclick='loadAnalysis();'>Load Execut.</button>
</div>
<div class="param">
<label for="param-transform">Data transform</label>
<select id="param-transform" name="param-transform">
<option value="noTrans" selected>No transform</option>
<option value="logTrans">Log10</option>
<option value="asinhTrans">Asinh</option>
<option value="binTrans">Binarize</option>
</select>
<button type="button" class="button" onclick="SaveAnalysis()">Save Execut.</button>
<div class="row">
<div class="panel-body">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<div class="param" style="padding: 5px 0 5px 0">
<label for="male" ></label>Density (1/sigma)</label>
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block;margin-left: 60px">
<option selected="selected" value="color" >Color-encoding</option>
<option value="size">Size-encoding</option>
</select>
</div>
<div class="param" style="padding: 10px 0 10px 0" >
<output for="param-neighborHood" id="param-neighborHood-value " ></output>
<label for="male">Final remaining cost (KLD)</label>
<label id="selectionLabel" style="margin-top:4px; margin-left: 10px">Size-encoding</label>
</div>
<div class="param">
<div class="row" style="margin-top: 30px">
<div class="col-md-6">
<label for="param-corr">Correlation threshold</label>
</div>
<div class="col-md-5">
<input id="param-corr" type="range" min="0" max="750" value="150", step="25" onchange="CalculateCorrel(true);" style="margin-left: -20px;">
</div>
<div class="col-md-1">
<output for="param-corr" id="param-corr-value" style="margin-left: -20px;">150</output>
</div>
</div>
</div>
<div class="param">
<div class="row" style="margin-top: 30px">
<div class="col-md-6">
<label for="param-lim" >Points radius scaling</label>
</div>
<div class="col-md-5">
<input id="param-lim" type="range" min="1" max="3" value="3", step="0.5" onchange="setReInitialize(true);" style="margin-left: -20px;">
</div>
<div class="col-md-1">
<output for="param-lim" id="param-lim-value" style="margin-left: -20px;">3</output>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<svg id="legend1"></svg>
</div>
<div class="col-md-2">
<svg id="legend4"></svg>
</div>
</div>
<div class="annotationAllClass" style="margin-top: 30px">
<label style="padding-bottom: 0px">
<input id="controls" type="checkbox" style="margin-top: 18px">
Hide annotations' controllers</input>
<button class="btn btn-default" onclick="BringBackAnnotations();" style="display:inline-block; float:right; margin-left:178px"><i class="fas fa-eye fa-lg" style="margin-right: 10px"></i>Reveal annotations</button>
</label>
<div id="param-correlation">
Annotation: <textarea type="text" id="comment" name="textforAnnotator" placeholder="Please, provide your comment."></textarea>
</div>
<div id="commBtn">
<div class="param" style="margin-top:10px">
<div id="toggleAnnotator" style= "margin-left: -120px"><button class="btn btn-default" onclick="setAnnotator();" style="display:inline-block; float:left; margin-left: 120px" ><i class="fas fa-comment fa-lg" style="margin-right: 10px"></i>Add annotation</button></div>
<div id="continue"></div><button class="btn btn-default active" onclick="setContinue();" style="display:inline-block; float:middle; margin-left: 6px"><i class="fas fa-chart-line fa-lg" style="margin-right: 10px"></i>Continue the analysis</button></div>
<button class="btn btn-default" onclick="deleteAnnotations();" style="display:inline-block; float:right; margin-top: -45px" ><i class="fas fa-comment-slash fa-lg" style="margin-right: 10px"></i>Delete annotations</button>
</div>
</div>
</div>
</div>
</div>
</div>
<p><div id="run-button"><button id="ExecuteBut" class="btn btn-primary btn-block" onclick="getData();" value="Execute new t-SNE analysis">Execute new t-SNE analysis</button></div></p>
</div>
</div>
<div class="row">
<div class="col-md-3" style="margin-top:-4px">
<div class="panel panel-default" style="padding-bottom : 60px">
<div class="panel-heading">
<h2 class="panel-title">Shepard Heatmap</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<svg id="sheparheat"></svg>
</div>
<div class="col-md-2">
<svg id="legend3"></svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-md-offset-6">
<div class="panel panel-default right-side-star">
<div class="panel-heading">
<h2 class="panel-title">Parallel Coordinates Plot (with Local PCA Calculation)</h2>
<div class="panel panel-default right-side-cor">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">Feature Correlation</h2><div class="param" style="display:inline-block; float:right"><label for="param-corlim" style="display:inline-block; float: right">Min. Visible Correlation: #<output for="param-corlim" id="param-corlim-value" style="display:inline-block; float:right">0.0</output></label>
<input id="param-corlim" type="range" min="0" max="1" value="0.0", step="0.1" style="display:inline-block; float:right" onchange="CalculateCorrel(true);">
</div>
</div>
<div class="panel-body">
<svg id="correlation"></svg>
</div>
</div>
<div class="panel-body">
<div id="PCP" class="parcoords"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default" id="left-side-visual">
<div class="col-md-3" id="extra-information" style="width: 24.8vw">
<div class="panel panel-default right-side-hist">
<div class="panel-heading">
<h2 class="panel-title">Visual Mapping Parameters</h2>
</div>
<div class="row">
<div class="panel-body">
<div class="col-md-12">
<div id="ThumbNailsList">
<div class="param" >
<label for="male">Density (1/sigma)</label>
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block">
<option selected="selected" value="color">Color-encoding</option>
<option value="size">Size-encoding</option>
</select>
<button class="button" onclick="deleteAnnotations();" style="display:inline-block; float:right">Delete Annotations</button>
</div>
<output for="param-neighborHood" id="param-neighborHood-value"></output>
<label for="male">Final Cost (Kullback-Leibler Divergence)</label>
<label id="selectionLabel" style="margin-top:4px">Size-encoding</label>
<div id="param-correlation">
<div class="param">
<label for="param-corr">Correlation threshold</label>
<input id="param-corr" type="range" min="0" max="750" value="150", step="25" onchange="CalculateCorrel(true);">
<output for="param-corr" id="param-corr-value">150</output>
</div>
Annotation: <textarea type="text" id="comment" name="textforAnnotator" style="margin-top:4px" placeholder="Please, provide your comment."></textarea>
</div>
<div id="commBtn">
<div class="param" style="margin-top:4px">
<div id="toggleAnnotator"><button class="btn btn-default btn-block" onclick="setAnnotator();">Addition of a new comment</button></div>
</div>
<div class="param" style="margin-top:4px">
<div id="continue"><button class="btn btn-default btn-block active" onclick="setContinue();">Continuation of the analysis</button></div>
</div>
</div>
<h2 class="panel-title" style="display:inline-block;">1/sigma and KLD Distributions</h2><div class="param" style="display:inline-block; float:right"><label for="param-costlim" style="display:inline-block; float: right">Cost Acceptance Range: #<output for="param-costlim" id="param-costlim-value" style="display:inline-block; float:right">1</output></label>
<input id="param-costlim" type="range" min="0.1" max="1" value="1", step="0.1" style="display:inline-block; float:right" onchange="setReInitialize(false);">
</div>
</div>
</div>
<div class="panel-body">
<div id="costHist"></div>
</div>
</div>
</div>
</div>
</div>
<div class = col-md-6>
<div class="panel panel-default med-bottom">
@ -258,17 +308,16 @@
</div>
</div>
</div>
<div class="col-md-3" id="extra-information" style="width: 24.6vw">
<div class="panel panel-default right-side-hist">
<div class="panel-heading">
<h2 class="panel-title" style="display:inline-block;">1/sigma and KLD Distributions</h2><div class="param" style="display:inline-block; float:right"><label for="param-costlim" style="display:inline-block; float: right">Cost Acceptance Range: #<output for="param-costlim" id="param-costlim-value" style="display:inline-block; float:right">1</output></label>
<input id="param-costlim" type="range" min="0.1" max="1" value="1", step="0.1" style="display:inline-block; float:right" onchange="setReInitialize(false);">
</div>
</div>
<div class="panel-body">
<div id="costHist"></div>
</div>
<div class="col-md-3">
<div class="panel panel-default right-side-PCP">
<div class="panel-heading">
<h2 class="panel-title">Parallel Coordinates Plot (with Local PCA Calculation)</h2>
</div>
<div class="panel-body">
<div id="PCP" class="parcoords"></div>
</div>
</div>
</div>
</div>
</div>
@ -297,7 +346,7 @@
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
let current = document.getElementById("commBtn").getElementsByClassName("active");
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 active", "btn btn-default");
this.className += " active";
});
}
@ -311,7 +360,7 @@
for (var i = 0; i < btns2.length; i++) {
btns2[i].addEventListener("click", function() {
let current = document.getElementsByClassName("active");
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 active", "btn btn-info");
this.className += " active";
});
}

80
js/tsne_vis.js
Unescape View File

@ -363,10 +363,15 @@ function deleteAnnotations(){
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.
vw2 = dimensions;
vh2 = dimensions;
var textarea = document.getElementById("comment").value;
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);
AnnotationsAll.push(annotations);
draggable.push(true);
document.getElementById("comment").value = '';
$('#comment').removeAttr('placeholder');
}
// Hide or show the controls
@ -480,6 +487,7 @@ function MainVisual(){
// fields variable is all the features (columns) plus beta and cost strings.
function init(data, results_all, fields) {
$('#comment').attr('placeholder', "Please, provide your comment.");
ArrayWithCosts = [];
Iterations = [];
VisiblePoints = [];
@ -791,7 +799,7 @@ function OverallCostLineChart(){
var layout = {
showlegend: false,
width: 285,
width: 215,
height: 80,
xaxis:{title: 'Iterations',
titlefont: {
@ -1000,7 +1008,7 @@ function ShepardHeatMap () {
// Color scale for minimum and maximum values for the shepard heatmap.
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 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;
var colorScale = d3.scaleLinear()
.domain(d3.range(0, maxNum+calcStep,calcStep))
@ -1283,7 +1291,7 @@ function CostHistogram(points){
name: '1/sigma',
autobinx: false,
marker: {
color: "rgb(128,0,0)",
color: "rgb(0,128,0)",
line: {
color: "rgb(0, 0, 0)",
width: 1
@ -1309,7 +1317,7 @@ function CostHistogram(points){
autobinx: false,
histnorm: "count",
marker: {
color: "rgb(0,128,0)",
color: "rgb(128,0,0)",
line: {
color: "rgb(0, 0, 0)",
width: 1
@ -1435,10 +1443,10 @@ var zoomer = d3v3.behavior.zoom()
// Margin of the main barchart
var main_margin = {top: 8, right: 10, bottom: 30, left: 100},
main_width = 500 - main_margin.left - main_margin.right,
main_height = 320 - main_margin.top - main_margin.bottom;
main_height = 350 - main_margin.top - main_margin.bottom;
// Margin of the mini barchart
var mini_margin = {top: 8, right: 10, bottom: 30, left: 10},
mini_height = 320 - mini_margin.top - mini_margin.bottom;
mini_height = 350 - mini_margin.top - mini_margin.bottom;
mini_width = 100 - mini_margin.left - mini_margin.right;
// 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 = [];
PCASelVec = PCAResults.selectedVectors[0];
@ -2609,7 +2623,7 @@ if (points.length) { // If points exist (at least 1 point)
.alpha(0.35)
.composite("darken")
.hideAxis([Category])
.margin({ top: 20, left: 0, bottom: 10, right: -5 })
.margin({ top: 20, left: 0, bottom: 10, right: -8 })
.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]);}})
.render()
@ -2622,7 +2636,7 @@ if (points.length) { // If points exist (at least 1 point)
.data(AllPointsWrapData2)
.composite("darken")
.hideAxis([Category])
.margin({ top: 20, left: 0, bottom: 10, right: -5 })
.margin({ top: 20, left: 0, bottom: 10, right: -8 })
.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]);}})
.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 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 colorScale = d3.scaleLinear()
.domain(d3.range(0, max+calcStep, calcStep))
.range(colorbrewer);
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))
.range([5*limitdist/2,(parseInt(12-(1-document.getElementById("param-costlim").value)*7))*limitdist/2]);
var colorScale = d3.scaleLinear()
.domain(d3.range(0, max+calcStep, calcStep))
.range(colorbrewer);
var colorScale = d3.scaleSequential()
.domain([0, max+calcStep])
.interpolator(d => d3.interpolateViridis(1-d));
points = points.sort(function(a, b) { // Sort them according to importance (darker color!)
return a.beta - b.beta;
})
@ -2735,7 +2743,7 @@ if (points.length) { // If points exist (at least 1 point)
var circles = document.getElementsByClassName("swatch");
for (var i=0; i<circles.length; i++){
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
@ -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 min = (d3.min(points,function(d){ return d.cost; }));
var maxSize2 = (d3.max(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();
var colorbrewer = ['#d9f0a3','#addd8e','#78c679','#41ab5d','#238443','#006837','#004529'];
var calcStep = ((max-min)/6);
var colorScale = d3.scaleLinear()
.domain(d3.range(min, max+calcStep, calcStep))
.range(colorbrewer);
var calcStep = ((max-min)/8);
var colorScale = d3.scaleSequential()
.domain([min, max])
.interpolator(d => d3.interpolateMagma(1-d));
var labels_cost = [];
var abbr_labels_cost = [];
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);
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()
.labelFormat(d3.format(",.5f"))
.cells(7)
.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]])
.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],abbr_labels_cost[7],abbr_labels_cost[8]])
.title("KLD(P||Q)")
.scale(colorScale);
@ -2833,7 +2842,7 @@ if (points.length) { // If points exist (at least 1 point)
var circles = document.getElementsByClassName("swatch");
for (var i=0; i<circles.length; i++){
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;
} else {
var max = (d3.max(points,function(d){ return d.cost; }));
var costLimiter = document.getElementById("param-costlim").value;
points = points.sort(function(a, b) { // Sort them according to importance (darker color!)
@ -3042,12 +3050,12 @@ if (points.length) { // If points exist (at least 1 point)
d3.selectAll("#legend1 > *").remove();
var colorbrewer = ["#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"];
var calcStep = (max-min)/6;
var colorScale = d3.scaleLinear()
.domain(d3.range(min, max+calcStep, calcStep))
.range(colorbrewer);
var colorScale = d3.scaleSequential()
.domain([min, max])
.interpolator(d => d3.interpolateMagma(1-d));
points = points.sort(function(a, b) { // Sort them according to importance (darker color!)
return a.cost - b.cost;
})

Write Preview
Loading…
Cancel
Save