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

the final analyses

Browse Source 
Former-commit-id: fadf617182
master
Angelos Chatzimparmpas 6 years ago
parent 62dbdb3e52
commit 29bd4ca52f
6 changed files with 1037 additions and 31 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. 1
      Previously_Executed_Analyses_Files/breast_cancer_perplexity(30)_iterations(500)_rate(10).txt
  2. 2
      css/style.css
  3. 1001
      data/blobs_1000_5.csv
  4. 2
      data/diabetes.csv
  5. 23
      index.html
  6. 39
      js/tsne_vis.js

1
Previously_Executed_Analyses_Files/breast_cancer_perplexity(30)_iterations(500)_rate(10).txt
View File

File diff suppressed because one or more lines are too long

2
css/style.css
Unescape View File

@ -5,6 +5,8 @@ html, body {
max-width: 100%; max-width: 100%;
font-family: sans-serif !important; font-family: sans-serif !important;
font-size: 15px !important; font-size: 15px !important;
overflow-x: hidden;
overflow-y: hidden;
} }
.container-fluid { .container-fluid {

1001
data/blobs_1000_5.csv
View File

File diff suppressed because it is too large Load Diff

2
data/diabetes.csv
Unescape View File

@ -1,4 +1,4 @@
Preg.,Glucose,BloodPres.,SkinThic.,Insulin,BMI,Diab.Pedig.,Age,Outcome* Pregnancies,Glucose,BloodPress.,SkinThick.,Insulin,BMI,DPF,Age,Outcome*
6,148,72,35,0,33.6,0.627,50,1 6,148,72,35,0,33.6,0.627,50,1
1,85,66,29,0,26.6,0.351,31,0 1,85,66,29,0,26.6,0.351,31,0
8,183,64,0,0,23.3,0.672,32,1 8,183,64,0,0,23.3,0.672,32,1

1 Preg. Pregnancies Glucose BloodPres. BloodPress. SkinThic. SkinThick. Insulin BMI Diab.Pedig. DPF Age Outcome*
2 6 148 72 35 0 33.6 0.627 50 1
3 1 85 66 29 0 26.6 0.351 31 0
4 8 183 64 0 0 23.3 0.672 32 1

23
index.html
Unescape View File

@ -181,7 +181,7 @@
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="param" style="padding: 5px 0 5px 0"> <div class="param" style="padding: 5px 0 5px 0">
<label for="male" ></label>Density (1/sigma)</label> <label for="male"></label>Density</label>
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize(true);" style="display:inline-block;margin-left: 60px"> <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 selected="selected" value="color" >Color-encoding</option>
<option value="size">Size-encoding</option> <option value="size">Size-encoding</option>
@ -189,8 +189,8 @@
</div> </div>
<div class="param" style="padding: 10px 0 10px 0" > <div class="param" style="padding: 10px 0 10px 0" >
<output for="param-neighborHood" id="param-neighborHood-value " ></output> <output for="param-neighborHood" id="param-neighborHood-value " ></output>
<label for="male">Final remaining cost (KLD)</label> <label for="male">Remaining cost</label>
<label id="selectionLabel" style="margin-top:4px; margin-left: 10px">Size-encoding</label> <label id="selectionLabel" style="margin-top:4px; margin-left: 15px">Size-encoding</label>
</div> </div>
<div class="param"> <div class="param">
<div class="row" style="margin-top: 30px"> <div class="row" style="margin-top: 30px">
@ -211,7 +211,7 @@
<label for="param-lim" >Points radius scaling</label> <label for="param-lim" >Points radius scaling</label>
</div> </div>
<div class="col-md-5"> <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;"> <input id="param-lim" type="range" min="1" max="4" value="3", step="0.5" onchange="setReInitialize(false);" style="margin-left: -20px;">
</div> </div>
<div class="col-md-1"> <div class="col-md-1">
<output for="param-lim" id="param-lim-value" style="margin-left: -20px;">3</output> <output for="param-lim" id="param-lim-value" style="margin-left: -20px;">3</output>
@ -220,10 +220,10 @@
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<svg id="legend1"></svg> <svg id="legend1" style = "margin-left: -25px"></svg>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<svg id="legend4"></svg> <svg id="legend4" style = "margin-left: -45px"></svg>
</div> </div>
</div> </div>
<div class="annotationAllClass" style="margin-top: 30px"> <div class="annotationAllClass" style="margin-top: 30px">
@ -270,7 +270,7 @@
<div class="col-md-3 col-md-offset-6"> <div class="col-md-3 col-md-offset-6">
<div class="panel panel-default right-side-cor"> <div class="panel panel-default right-side-cor">
<div class="panel-heading"> <div class="panel-heading">
<h2 class="panel-title" style="display:inline-block">Dimension 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> <h2 class="panel-title" style="display:inline-block">Dimension Correlation</h2><div class="param" style="display:inline-block; margin-top:-5px; 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);"> <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> </div>
@ -286,9 +286,14 @@
<div class="col-md-3" id="extra-information" style="width: 24.8vw"> <div class="col-md-3" id="extra-information" style="width: 24.8vw">
<div class="panel panel-default right-side-hist"> <div class="panel panel-default right-side-hist">
<div class="panel-heading"> <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> <h2 class="panel-title" style="display:inline-block;">Density and Remaining Cost Distributions</h2>
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="param" style="display:inline-block; float:right; margin-top:-21.5px; margin-right: -18px">
<label for="param-costlim" style="display:inline-block; float: right">Min. Visible Cost Rate: #<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);"> <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> </div>
<div class="panel-body"> <div class="panel-body">
<div id="costHist"></div> <div id="costHist"></div>

39
js/tsne_vis.js
Unescape View File

@ -1325,7 +1325,7 @@ function CostHistogram(points){
} }
var trace1 = { var trace1 = {
x: frequency2, x: frequency2,
name: '1/sigma', name: 'Density',
autobinx: false, autobinx: false,
marker: { marker: {
color: "rgb(0,128,0)", color: "rgb(0,128,0)",
@ -1350,7 +1350,7 @@ function CostHistogram(points){
} }
var trace2 = { var trace2 = {
x: frequency, x: frequency,
name: 'KLD(P||Q)', name: 'Remaining Cost',
autobinx: false, autobinx: false,
histnorm: "count", histnorm: "count",
marker: { marker: {
@ -1383,7 +1383,7 @@ function CostHistogram(points){
t: 10, t: 10,
pad: 4 pad: 4
}, },
xaxis:{range: [0,1.01],title: 'Normalized Bins from Min to Max Values.', xaxis:{range: [0,1.01],title: 'Normalized bins from min to max values.',
titlefont: { titlefont: {
size: 14, size: 14,
color: 'black' color: 'black'
@ -1744,7 +1744,7 @@ function CalculateCorrel(flagForSchema){ // Calculate the correlation is a funct
if (isNaN(pearsonCorrelation(tempData, 0, 1))) { if (isNaN(pearsonCorrelation(tempData, 0, 1))) {
} else{ } else{
SignStore.push([temp, pearsonCorrelation(tempData, 0, 1)]); // Keep the sign SignStore.push([temp, pearsonCorrelation(tempData, 0, 1)]); // Keep the sign
correlationResults.push([Object.keys(dataFeatures[0])[temp] + " (" + temp + ")", Math.abs(pearsonCorrelation(tempData, 0, 1)),temp]); // Find the pearson correlations correlationResults.push([Object.keys(dataFeatures[0])[temp], Math.abs(pearsonCorrelation(tempData, 0, 1)),temp]); // Find the pearson correlations
//correlationResults.push([Object.keys(dataFeatures[0])[temp] + " (" + temp + ")", Math.pow(pearsonCorrelation(tempData, 0, 1),2),temp]); // Find the pearson correlations (MAYBE!) //correlationResults.push([Object.keys(dataFeatures[0])[temp] + " (" + temp + ")", Math.pow(pearsonCorrelation(tempData, 0, 1),2),temp]); // Find the pearson correlations (MAYBE!)
} }
} }
@ -1802,7 +1802,6 @@ function CalculateCorrel(flagForSchema){ // Calculate the correlation is a funct
} }
} }
} }
drawBarChart(); // Draw the horizontal barchart with the correlations. drawBarChart(); // Draw the horizontal barchart with the correlations.
} }
@ -2448,7 +2447,7 @@ if (points.length) { // If points exist (at least 1 point)
var trace1 = { var trace1 = {
x: kValuesLegend, x: kValuesLegend,
y: StoreInitialFindNearestTable, y: StoreInitialFindNearestTable,
name: 'Entire Projection', name: 'Projection average',
type: 'bar', type: 'bar',
marker: { marker: {
color: 'rgb(0,0,0)' color: 'rgb(0,0,0)'
@ -2457,7 +2456,7 @@ if (points.length) { // If points exist (at least 1 point)
var trace2 = { var trace2 = {
x: kValuesLegend, x: kValuesLegend,
y: findNearestTable, y: findNearestTable,
name: 'Lasso Selected Cluster', name: 'Selected points',
type: 'bar', type: 'bar',
marker: { marker: {
color: 'rgb(0, 187, 187)' color: 'rgb(0, 187, 187)'
@ -2477,13 +2476,13 @@ if (points.length) { // If points exist (at least 1 point)
pad: 4 pad: 4
}, },
xaxis: {range: [0, LimitXaxis], xaxis: {range: [0, LimitXaxis],
title: 'K Values for K-NN', title: 'Number of neighbors',
titlefont: { titlefont: {
size: 12, size: 12,
color: 'black' color: 'black'
}}, }},
yaxis: { yaxis: {
title: 'Cl. Purity', title: 'n, %',
titlefont: { titlefont: {
size: 12, size: 12,
color: 'black' color: 'black'
@ -2746,7 +2745,7 @@ if (points.length) { // If points exist (at least 1 point)
.labelFormat(d3.format(",.0f")) .labelFormat(d3.format(",.0f"))
.cells(9) .cells(9)
.labels([abbr_labels_beta[0],abbr_labels_beta[1],abbr_labels_beta[2],abbr_labels_beta[3],abbr_labels_beta[4],abbr_labels_beta[5],abbr_labels_beta[6],abbr_labels_beta[7],abbr_labels_beta[8]]) .labels([abbr_labels_beta[0],abbr_labels_beta[1],abbr_labels_beta[2],abbr_labels_beta[3],abbr_labels_beta[4],abbr_labels_beta[5],abbr_labels_beta[6],abbr_labels_beta[7],abbr_labels_beta[8]])
.title("1/sigma") .title("Density")
.scale(colorScale); .scale(colorScale);
svg.select(".legendLinear") svg.select(".legendLinear")
@ -2759,19 +2758,18 @@ if (points.length) { // If points exist (at least 1 point)
.attr("transform", "translate(10,20)"); .attr("transform", "translate(10,20)");
var SizeRange1 = []; var SizeRange1 = [];
SizeRange1.push((minSize1).toFixed(3)); SizeRange1.push((minSize1).toFixed(4));
SizeRange1.push(((maxSize1-minSize1)/2).toFixed(3)); SizeRange1.push(((maxSize1-minSize1)/2).toFixed(4));
SizeRange1.push((maxSize1).toFixed(3)); SizeRange1.push((maxSize1).toFixed(4));
var legendSize1 = d3.legendSize() var legendSize1 = d3.legendSize()
.scale(legendScale1) .scale(legendScale1)
.labelFormat(d3.format(",.5f"))
.cells(3) .cells(3)
.shape('circle') .shape('circle')
.labels([SizeRange1[0],SizeRange1[1],SizeRange1[2]]) .labels([SizeRange1[0],SizeRange1[1],SizeRange1[2]])
.shapePadding(10) .shapePadding(10)
.labelOffset(5) .labelOffset(5)
.title("KLD(P||Q)") .title("Remaining Cost")
.orient('vertical'); .orient('vertical');
svg.select(".legendSize") svg.select(".legendSize")
@ -2834,7 +2832,7 @@ if (points.length) { // If points exist (at least 1 point)
.labelFormat(d3.format(",.5f")) .labelFormat(d3.format(",.5f"))
.cells(9) .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]]) .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)") .title("Remaining Cost")
.scale(colorScale); .scale(colorScale);
svg.select(".legendLinear") svg.select(".legendLinear")
@ -2854,7 +2852,7 @@ if (points.length) { // If points exist (at least 1 point)
svg.append("g") svg.append("g")
.attr("class", "legendSize") .attr("class", "legendSize")
.attr("transform", "translate(15,20)"); .attr("transform", "translate(45,20)");
var SizeRange2 = []; var SizeRange2 = [];
SizeRange2.push(0); SizeRange2.push(0);
@ -2870,7 +2868,7 @@ if (points.length) { // If points exist (at least 1 point)
.labels([SizeRange2[0],SizeRange2[1],SizeRange2[2]]) .labels([SizeRange2[0],SizeRange2[1],SizeRange2[2]])
.shapePadding(10) .shapePadding(10)
.labelOffset(5) .labelOffset(5)
.title("1/sigma") .title("Density")
.orient('vertical'); .orient('vertical');
svg.select(".legendSize") svg.select(".legendSize")
@ -2977,6 +2975,7 @@ if (points.length) { // If points exist (at least 1 point)
var color = new THREE.Color("rgb(145, 145, 145)"); var color = new THREE.Color("rgb(145, 145, 145)");
} else if (ColSizeSelector == "color") { } else if (ColSizeSelector == "color") {
var color = new THREE.Color(colorScale(points[i].beta)); var color = new THREE.Color(colorScale(points[i].beta));
//var color = new THREE.Color("rgb(125, 125, 125)");
} }
else{ else{
if (points[i].cost < min){ if (points[i].cost < min){
@ -3062,7 +3061,7 @@ if (points.length) { // If points exist (at least 1 point)
.labelFormat(d3.format(",.0f")) .labelFormat(d3.format(",.0f"))
.cells(9) .cells(9)
.labels([abbr_labels_beta[0],abbr_labels_beta[1],abbr_labels_beta[2],abbr_labels_beta[3],abbr_labels_beta[4],abbr_labels_beta[5],abbr_labels_beta[6],abbr_labels_beta[7],abbr_labels_beta[8]]) .labels([abbr_labels_beta[0],abbr_labels_beta[1],abbr_labels_beta[2],abbr_labels_beta[3],abbr_labels_beta[4],abbr_labels_beta[5],abbr_labels_beta[6],abbr_labels_beta[7],abbr_labels_beta[8]])
.title("1/sigma") .title("Density")
.scale(colorScale); .scale(colorScale);
svg.select(".legendLinear") svg.select(".legendLinear")
@ -3114,7 +3113,7 @@ if (points.length) { // If points exist (at least 1 point)
.labelFormat(d3.format(",.5f")) .labelFormat(d3.format(",.5f"))
.cells(7) .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]]) .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]])
.title("KLD(P||Q)") .title("Remaining Cost")
.scale(colorScale); .scale(colorScale);
svg.select(".legendLinear") svg.select(".legendLinear")

Write Preview
Loading…
Cancel
Save