Fixed small issues, added data set (breast cancer)

parent 542438705d
commit b02da561eb
  1. 2
      Previously_Executed_Analyses_Files/Bank_Projection.txt
  2. 1
      Previously_Executed_Analyses_Files/Breast_Cancer_Projection.txt
  3. 1398
      data/breast-cancer-wisconsin.csv
  4. 12
      index.html
  5. 59
      js/tsne_vis.js
  6. 2
      modules/d3-star/d3-starPlot.js

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

@ -153,17 +153,17 @@
</div>
<div class="param">
<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="5" max="50" 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="300" value="10", step="1">
<input id="param-learningrate" type="range" min="5" 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">
<input id="param-maxiter" type="range" min="100" max="1000" value="500", step="10">
<output for="param-maxiter" id="param-maxiter-value">500</output>
</div>
<div class="param">
@ -210,13 +210,13 @@
<div class="panel-body">
<div class="col-md-12">
<div id="ThumbNailsList">
<label for="male">Neighborhood Preservation</label>
<label for="male">Neighborhood Preservation (1/sigma)</label>
<select id="param-neighborHood" name ="param-neighborHood" onchange="setReInitialize();">
<option selected="selected" value="color">Color</option>
<option value="size">Size</option>
</select>
<output for="param-neighborHood" id="param-neighborHood-value"></output>
<label for="male">Final Cost (Kullback-Leibler)</label>
<label for="male">Final Cost (Kullback-Leibler Divergence)</label>
<label id="selectionLabel" style="margin-top:4px">Size</label>
<div id="param-correlation">
<div class="param">
@ -246,7 +246,7 @@
<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">1/sigma and Kullback-Leibler Distributions</h2>
<h2 class="panel-title">1/sigma and Kullback-Leibler Divergence Distributions</h2>
</div>
<div class="panel-body">
<div id="costHist"></div>

@ -208,6 +208,7 @@ function setReset(){ // Reset only the filters which were applied into the data
d3.selectAll("#modtSNEcanvas_svg > *").remove();
d3.selectAll("#modtSNEcanvas_svg_Schema > *").remove();
d3.selectAll("#SvgAnnotator > *").remove();
d3.select("#starPlot").selectAll('g').remove();
// Enable lasso interaction
lassoEnable();
// Disable Schema Investigation
@ -225,6 +226,8 @@ function setReset(){ // Reset only the filters which were applied into the data
ArrayContainsDataFeaturesLimit = [];
prevRightClick = false;
StarplotInitialize();
// Reset the points into their initial state
for (var i=0; i < InitialStatePoints.length; i++){
InitialStatePoints[i].selected = true;
@ -477,6 +480,9 @@ function init(data, results_all, fields) {
d3.selectAll("#sheparheat > *").remove();
d3.selectAll("#knnBarChart > *").remove();
d3.selectAll("#costHist > *").remove();
d3.select("#starPlot").selectAll('g').remove();
StarplotInitialize();
// Clear the previous t-SNE overview canvas.
var oldcanvOver = document.getElementById('tSNEcanvas');
@ -546,7 +552,9 @@ function init(data, results_all, fields) {
}
});
ArrayContainsDataFeaturesCleared = [];
ArrayContainsDataFeaturesClearedwithoutNull = [];
ArrayContainsDataFeaturesClearedwithoutNullKeys = [];
for (let k = 0; k < dataFeatures.length; k++){
object = [];
@ -1697,10 +1705,10 @@ function CalculateCorrel(){ // Calculate the correlation is a function which has
for (var j = 0; j < correlationResultsFinal.length; j++) {
for (var i = 0; i < SignStore.length; i++) {
if (SignStore[i][1]*(-1) == correlationResultsFinal[j][1]) {
correlationResultsFinal[j][1] = (correlationResultsFinal[j][1]).toFixed(2) * (-1); // Give the negative sign if needed and multiply by 100
correlationResultsFinal[j][1] = parseFloat((correlationResultsFinal[j][1])).toFixed(2) * (-1); // Give the negative sign if needed and multiply by 100
}
if (SignStore[i][1] == correlationResultsFinal[j][1]) {
correlationResultsFinal[j][1] = (correlationResultsFinal[j][1]).toFixed(2); // Give a positive sign and multiply by 100
correlationResultsFinal[j][1] = parseFloat((correlationResultsFinal[j][1])).toFixed(2); // Give a positive sign and multiply by 100
}
}
}
@ -2178,7 +2186,6 @@ function clearThree(obj){ // Clear three.js object!
}
var viewport3 = getViewport(); // Get the width and height of the main visualization
var vw3 = viewport3[0] * 0.2;
@ -2186,23 +2193,31 @@ var margin = {top: 40, right: 100, bottom: 40, left: 190}, // Set the margins fo
width = Math.min(vw3, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom);
var wrapData = [];
var radarChartOptions = { // starplot options
w: width,
h: height,
margin: margin,
maxValue: 100,
roundStrokes: true
};
var colors;
var IDS = [];
function StarplotInitialize() {
var wrapData = [];
var radarChartOptions = { // starplot options
w: width,
h: height,
margin: margin,
maxValue: 100,
roundStrokes: true
};
var colors;
var IDS = [];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
//Call function to draw the Radar chart (starplot)
RadarChart("#starPlot", wrapData, colors, IDS, radarChartOptions);
}
StarplotInitialize();
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
//Call function to draw the Radar chart (starplot)
RadarChart("#starPlot", wrapData, colors, IDS, radarChartOptions);
function BetatSNE(points){ // Run the main visualization
inside = inside + 1;
@ -2419,7 +2434,7 @@ if (points.length) { // If points exist (at least 1 point)
for (var j=0; j< ArrayContainsDataFeaturesClearedwithoutNull[selectedPoints[i].id].length; j++){
for (m=0; m < len; m++){
if (indices[m] == j){
data.push({axis:ArrayContainsDataFeaturesClearedwithoutNullKeys[selectedPoints[i].id][m],value:Math.abs((ArrayContainsDataFeaturesClearedwithoutNull[selectedPoints[i].id][m] - min[m])/(max[m] - min[m]))}); // Push the values into the starplot
data.push({axis:ArrayContainsDataFeaturesClearedwithoutNullKeys[selectedPoints[i].id][m], value:Math.abs((ArrayContainsDataFeaturesClearedwithoutNull[selectedPoints[i].id][m] - min[m])/(max[m] - min[m]))}); // Push the values into the starplot
}
}
}
@ -2430,7 +2445,7 @@ if (points.length) { // If points exist (at least 1 point)
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6']; // Colorscale for the starplot
var colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a']; // Colorscale for the starplot
var colorScl = d3v3.scale.ordinal()
.domain(IDS)
.range(colors);
@ -2819,7 +2834,7 @@ if (points.length) { // If points exist (at least 1 point)
geometry.colors = [ new THREE.Color(colorScaleCat(datum[Category])) ];
let material = new THREE.PointsMaterial({
size: 26,
size: 35,
sizeAttenuation: false,
vertexColors: THREE.VertexColors,
map: circle_sprite,

@ -17,7 +17,7 @@ function RadarChart(id, data, color, IDS, options) {
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 4, //The size of the colored circles of each blog
opacityCircles: 0.1, //The opacity of the circles of each blob
strokeWidth: 2, //The width of the stroke around each blob
strokeWidth: 2, //The wivar colors = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a'];dth of the stroke around each blob
roundStrokes: false, //If true the area and stroke will follow a round path (cardinal-closed)
};

Loading…
Cancel
Save