Fixed overview, log10)

Former-commit-id: 18620fcd50
master
parent ad0afaffb1
commit 6f6291dd75
  1. 28
      css/style.css
  2. 2
      data/diabetes.csv
  3. 12
      index.html
  4. 800
      js/tsne_vis.js

@ -135,12 +135,22 @@ cursor: default;
z-index: 2; z-index: 2;
} }
/* Styling of the overview canvas */ .dot {
#tSNEcanvas { fill: steelblue;
}
.bounding-rect {
stroke: red;
stroke-width: 1;
fill: transparent;
}
#overviewRect {
border: 1px solid black; border: 1px solid black;
width: 11vw; width: 11vw;
height: 11vw; height: 11vw;
position: absolute; position: absolute;
z-index: 1;
} }
/* A little styling for knn's bar chart */ /* A little styling for knn's bar chart */
@ -153,7 +163,7 @@ cursor: default;
#hider { #hider {
width: 48.7vw !important; width: 48.7vw !important;
height: 2.8vw; height: 3.2vw;
background-color: white; background-color: white;
position: absolute !important; position: absolute !important;
z-index: 2; z-index: 2;
@ -233,12 +243,22 @@ svg#legend3 {
overflow: auto; overflow: auto;
} }
/* Styling of the ShepardHeatmap */
#PlotCost { #PlotCost {
height: 3vw; height: 3vw;
width: 11vw; width: 11vw;
margin-left: -5px; margin-left: -5px;
text-align: left; text-align: left;
z-index: 1;
}
#hider2 {
height: 3vw;
width: 11vw;
margin-left: -5px;
text-align: left;
background-color: white;
position: absolute !important;
z-index: 2;
} }
/* ShepardHeatmap Styling for the different rectangles used there */ /* ShepardHeatmap Styling for the different rectangles used there */

@ -1,4 +1,4 @@
Pregnan.;Glucose;BloodPres.;SkinThic.;Insulin;BMI;Diab.Pedig.Fun.;Age;Outcome* Pregnan.;Glucose;BloodPres.;SkinThic.;Insulin;BMI;Diab.Pedig.;Age;Outcome*
6;148;72;35;0;33.6;0.627;50;Positive 6;148;72;35;0;33.6;0.627;50;Positive
1;85;66;29;0;26.6;0.351;31;Negative 1;85;66;29;0;26.6;0.351;31;Negative
8;183;64;0;0;23.3;0.672;32;Positive 8;183;64;0;0;23.3;0.672;32;Positive

1 Pregnan. Glucose BloodPres. SkinThic. Insulin BMI Diab.Pedig.Fun. Diab.Pedig. Age Outcome*
2 6 148 72 35 0 33.6 0.627 50 Positive
3 1 85 66 29 0 26.6 0.351 31 Negative
4 8 183 64 0 0 23.3 0.672 32 Positive

@ -51,7 +51,7 @@
<div class="row"> <div class="row">
<div class="panel-body"> <div class="panel-body">
<div class="col-md-6"> <div class="col-md-6">
<canvas id = "tSNEcanvas"></canvas> <div id="overviewRect"></div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div style="display:block" id="CategoryName"></div> <div style="display:block" id="CategoryName"></div>
@ -116,6 +116,7 @@
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<svg id="legend3"></svg> <svg id="legend3"></svg>
<div id="hider2"></div>
<div id="PlotCost"></div> <div id="PlotCost"></div>
</div> </div>
</div> </div>
@ -159,7 +160,7 @@
</div> </div>
<div class="param"> <div class="param">
<label for="param-perplexity">Perplexity</label> <label for="param-perplexity">Perplexity</label>
<input id="param-perplexity" type="range" min="5" max="50" value="30", step="1"> <input id="param-perplexity" type="range" min="5" max="100" value="30", step="1">
<output for="param-perplexity" id="param-perplexity-value">30</output> <output for="param-perplexity" id="param-perplexity-value">30</output>
</div> </div>
<div class="param"> <div class="param">
@ -169,7 +170,7 @@
</div> </div>
<div class="param"> <div class="param">
<label for="param-maxiter">Max iterations</label> <label for="param-maxiter">Max iterations</label>
<input id="param-maxiter" type="range" min="100" max="1000" value="500", step="10"> <input id="param-maxiter" type="range" min="10" max="1000" value="500", step="10">
<output for="param-maxiter" id="param-maxiter-value">500</output> <output for="param-maxiter" id="param-maxiter-value">500</output>
</div> </div>
<div class="param"> <div class="param">
@ -216,11 +217,14 @@
<div class="panel-body"> <div class="panel-body">
<div class="col-md-12"> <div class="col-md-12">
<div id="ThumbNailsList"> <div id="ThumbNailsList">
<div class="param" >
<label for="male">Density (1/sigma)</label> <label for="male">Density (1/sigma)</label>
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);"> <select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block">
<option selected="selected" value="color">Color-encoding</option> <option selected="selected" value="color">Color-encoding</option>
<option value="size">Size-encoding</option> <option value="size">Size-encoding</option>
</select> </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> <output for="param-neighborHood" id="param-neighborHood-value"></output>
<label for="male">Final Cost (Kullback-Leibler Divergence)</label> <label for="male">Final Cost (Kullback-Leibler Divergence)</label>
<label id="selectionLabel" style="margin-top:4px">Size-encoding</label> <label id="selectionLabel" style="margin-top:4px">Size-encoding</label>

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save