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

fixed correlation issue

Browse Source
master
Angelos Chatzimparmpas 6 years ago
parent 1a6b41cc7e
commit 63d46f9520
7 changed files with 838 additions and 901 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. 9
      css/style.css
  2. 2
      data/dataR2.csv
  3. 95
      index.html
  4. 113
      js/checkbox.js
  5. 26
      js/data_form_handler.js
  6. 3
      js/tsne.js
  7. 1491
      js/tsne_vis.js

9
css/style.css
Unescape View File

@ -220,7 +220,6 @@ rect {
box-sizing: border-box; box-sizing: border-box;
display: inline; display: inline;
font-size: 10px; font-size: 10px;
width: 100%;
line-height: 1; line-height: 1;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
content: "\25BC"; content: "\25BC";
@ -310,7 +309,7 @@ rect {
} }
.bar { .bar {
/*shape-rendering: crispEdges;*/ shape-rendering: crispEdges;
} }
/* Styling for the annotation circle */ /* Styling for the annotation circle */
@ -351,7 +350,7 @@ rect {
.children-columns{ .children-columns{
display: flex; display: flex;
} }
/* Margins for the extra-information panel and the kNNInfo */
#extra-information { #extra-information {
margin-top: 40px; margin-top: 40px;
margin-left: 10px; margin-left: 10px;
@ -370,6 +369,8 @@ rect {
margin-left:10px; margin-left:10px;
} }
/* Draw a red colored button for reset */
#FactRes{ #FactRes{
color: red; color: red;
} }

2
data/dataR2.csv
Unescape View File

@ -1,4 +1,4 @@
Age,BMI,Glucose,Insulin,HOMA,Leptin,Adiponectin,Resistin,MCP.1,name Age,BMI,Glucose,Insulin,HOMA,Leptin,Adiponectin,Resistin,MCP.1,Category*
48,23.5,70,2.707,0.467408667,8.8071,9.7024,7.99585,417.114,1 48,23.5,70,2.707,0.467408667,8.8071,9.7024,7.99585,417.114,1
83,20.69049454,92,3.115,0.706897333,8.8438,5.429285,4.06405,468.786,1 83,20.69049454,92,3.115,0.706897333,8.8438,5.429285,4.06405,468.786,1
82,23.12467037,91,4.498,1.009651067,17.9393,22.43204,9.27715,554.697,1 82,23.12467037,91,4.498,1.009651067,17.9393,22.43204,9.27715,554.697,1

1 Age BMI Glucose Insulin HOMA Leptin Adiponectin Resistin MCP.1 name Category*
2 48 23.5 70 2.707 0.467408667 8.8071 9.7024 7.99585 417.114 1
3 83 20.69049454 92 3.115 0.706897333 8.8438 5.429285 4.06405 468.786 1
4 82 23.12467037 91 4.498 1.009651067 17.9393 22.43204 9.27715 554.697 1

95
index.html
Unescape View File

@ -12,7 +12,7 @@
<script src='./modules/d3v3/d3.min.js'></script> <script src='./modules/d3v3/d3.min.js'></script>
<script src='./modules/d3/d3.min.js'></script> <script src='./modules/d3/d3.min.js'></script>
<!-- Importing additional modules such as starPlot, annotator, tip, legend, switch, papaParse, and Jquery. --> <!-- Importing additional modules such as starPlot, annotator, tip, legend, lasso, papaParse, and Jquery. -->
<script src='./modules/d3-star/d3-starPlot.js'></script> <script src='./modules/d3-star/d3-starPlot.js'></script>
<script src='./modules/d3-annotations/d3-annotator.js'></script> <script src='./modules/d3-annotations/d3-annotator.js'></script>
<script src="./modules/d3-tip/tip.js"></script> <script src="./modules/d3-tip/tip.js"></script>
@ -24,7 +24,6 @@
<!-- Basic scripts that we execute. --> <!-- Basic scripts that we execute. -->
<script src="./js/tsne.js"></script> <script src="./js/tsne.js"></script>
<script src="./js/checkbox.js"></script>
<script src="./js/data_form_handler.js"></script> <script src="./js/data_form_handler.js"></script>
<script src="./modules/pca/pca.js"></script> <script src="./modules/pca/pca.js"></script>
@ -128,52 +127,52 @@
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div id="control-panel" data-sr="enter left over 8s"> <div id="control-panel" data-sr="enter left over 8s">
<div class="param"> <div class="param">
<label id="data" for="param-dataset">Data sets</label> <label id="data" for="param-dataset">Data sets</label>
<select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);"> <select id="param-dataset" name="param-dataset" onChange="changeDataset(this.value);">
<option value="winequality-red.csv">Red Wine - Quality</option> <option value="winequality-red.csv">Red Wine - Quality</option>
<option value="iris.csv" selected>Iris</option> <option value="iris.csv" selected>Iris</option>
<option value="mnist.csv" >Mnist</option> <option value="mnist.csv" >Mnist</option>
<option value="Frogs_MFCCs_s.csv" >Frogs</option> <option value="Frogs_MFCCs_s.csv" >Frogs</option>
<option value="empty">Add New File</option> <option value="empty">Add New File</option>
</select> </select>
<button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory reset</button> <button type="button" class="button" id="FactRes" onclick="FactoryReset()">Factory reset</button>
</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="2" max="100" value="30", step="1"> <input id="param-perplexity" type="range" min="2" 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">
<label for="param-learningrate">Learning rate</label> <label for="param-learningrate">Learning rate</label>
<input id="param-learningrate" type="range" min="1" max="300" value="10", step="1"> <input id="param-learningrate" type="range" min="1" max="300" value="10", step="1">
<output for="param-learningrate" id="param-learningrate-value">10</output> <output for="param-learningrate" id="param-learningrate-value">10</output>
</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="10" 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">
<label for="param-distance">Distance metric</label> <label for="param-distance">Distance metric</label>
<select id="param-distance" name="param-distance"> <select id="param-distance" name="param-distance">
<option value="euclideanDist" selected>Euclidean distance</option> <option value="euclideanDist" selected>Euclidean distance</option>
<option value="jaccardDist">Jaccard dissimilarity</option> <option value="jaccardDist">Jaccard dissimilarity</option>
</select> </select>
<input id="file-input" type="file" name="name" style="display: none;" /> <input id="file-input" type="file" name="name" style="display: none;" />
<button type="button" class="button" onclick='loadAnalysis();'>Load Execut.</button> <button type="button" class="button" onclick='loadAnalysis();'>Load Execut.</button>
</div> </div>
<div class="param"> <div class="param">
<label for="param-transform">Data transform</label> <label for="param-transform">Data transform</label>
<select id="param-transform" name="param-transform"> <select id="param-transform" name="param-transform">
<option value="noTrans" selected>No transform</option> <option value="noTrans" selected>No transform</option>
<option value="logTrans">Log10</option> <option value="logTrans">Log10</option>
<option value="asinhTrans">Asinh</option> <option value="asinhTrans">Asinh</option>
<option value="binTrans">Binarize</option> <option value="binTrans">Binarize</option>
</select> </select>
<button type="button" class="button" onclick="SaveAnalysis()">Save Execut.</button> <button type="button" class="button" onclick="SaveAnalysis()">Save Execut.</button>
</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> <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> </div>
</div> </div>

113
js/checkbox.js
Unescape View File

@ -1,113 +0,0 @@
function d3CheckBox () {
var size = 20,
x = 0,
y = 0,
rx = 0,
ry = 0,
markStrokeWidth = 3,
boxStrokeWidth = 3,
checked = false,
clickEvent;
function checkBox (selection) {
var g = selection.append("g"),
box = g.append("rect")
.attr("width", size)
.attr("height", size)
.attr("x", x)
.attr("y", y)
.attr("rx", rx)
.attr("ry", ry)
.style({
"fill-opacity": 0,
"stroke-width": boxStrokeWidth,
"stroke": "black"
});
//Data to represent the check mark
var coordinates = [
{x: x + (size / 8), y: y + (size / 3)},
{x: x + (size / 2.2), y: (y + size) - (size / 4)},
{x: (x + size) - (size / 8), y: (y + (size / 10))}
];
var line = d3.svg.line()
.x(function(d){ return d.x; })
.y(function(d){ return d.y; })
.interpolate("basic");
var mark = g.append("path")
.attr("d", line(coordinates))
.style({
"stroke-width" : markStrokeWidth,
"stroke" : "black",
"fill" : "none",
"opacity": (checked)? 1 : 0
});
g.on("click", function () {
checked = !checked;
mark.style("opacity", (checked)? 1 : 0);
if(clickEvent)
clickEvent();
d3.event.stopPropagation();
});
}
checkBox.size = function (val) {
size = val;
return checkBox;
}
checkBox.x = function (val) {
x = val;
return checkBox;
}
checkBox.y = function (val) {
y = val;
return checkBox;
}
checkBox.rx = function (val) {
rx = val;
return checkBox;
}
checkBox.ry = function (val) {
ry = val;
return checkBox;
}
checkBox.markStrokeWidth = function (val) {
markStrokeWidth = val;
return checkBox;
}
checkBox.boxStrokeWidth = function (val) {
boxStrokeWidth = val;
return checkBox;
}
checkBox.checked = function (val) {
if(val === undefined) {
return checked;
} else {
checked = val;
return checkBox;
}
}
checkBox.clickEvent = function (val) {
clickEvent = val;
return checkBox;
}
return checkBox;
}

26
js/data_form_handler.js
Unescape View File

@ -1,16 +1,20 @@
function changeDataset(value) { function changeDataset(value) {
var format = value.split("."); //get the actual format
if (format[value.split(".").length-1] == "csv") { var format = value.split("."); // Get the data set's format.
}else{
d3.select("#data").select("input").remove(); if (format[value.split(".").length-1] != "csv") { // This is for a new file.
d3.select("#data") d3.select("#data").select("input").remove();
.append("input") d3.select("#data")
.attr("type", "file") .append("input")
.on("change", function() { .attr("type", "file")
.style("font-size", "10px")
.on("change", function() {
var file = d3.event.target.files[0]; var file = d3.event.target.files[0];
getfile(file); getfile(file);
}) })
} } else {
d3.select("#data").select("input").remove(); // Remove the selection field.
}
} }

3
js/tsne.js
Unescape View File

@ -1,4 +1,5 @@
// create main global object // t-SNE Algorithm
var tsnejs = tsnejs || { REVISION: 'ALPHA' }; var tsnejs = tsnejs || { REVISION: 'ALPHA' };
(function(global) { (function(global) {

1491
js/tsne_vis.js
View File

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