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

Fixed the kNN barchart

Browse Source 
Former-commit-id: 21930948db
master
Angelos Chatzimparmpas 6 years ago
parent 0ebd67cc29
commit 29c25126d9
6 changed files with 123 additions and 64 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/Diabetes_Projection.txt
  2. 44
      css/style.css
  3. 2
      data/bank-additional_s.csv
  4. 24
      index.html
  5. 89
      js/tsne_vis.js
  6. 7
      modules/plotly/plotly_min.js

1
Previously_Executed_Analyses_Files/Diabetes_Projection.txt
View File

File diff suppressed because one or more lines are too long

44
css/style.css
Unescape View File

@ -108,7 +108,17 @@ cursor: default;
.right-side-star {
margin-left:12px;
margin-top: -50px;
margin-top: -5px;
}
#left-side-param{
margin-top: -115px;
}
#left-side-visual{
margin-top: -160px;
margin-left: 15px;
margin-right: -5px;
}
/* Styling of the main canvas */
@ -132,11 +142,10 @@ cursor: default;
/* A little styling for knn's bar chart */
#knnBarChart {
width: 50vw !important;
height: 4.2vw !important;
margin-top: 7.2vw !important;
border: 1px solid black;
position: absolute;
display: block;
height: 5.5vw !important;
border: 1px solid black !important;
margin-top: 0.2vw;
position: absolute !important;
}
/* Styling of the main SVG behind canvas */
@ -362,7 +371,7 @@ rect {
}
/* Margins for the extra-information panel and the kNNInfo */
#extra-information {
margin-top: 32px;
margin-top: -5px;
margin-left: 5px;
}
@ -396,3 +405,24 @@ rect {
width: 100%;
height: 90vh;
}
/* kNN barchart color box (legend)*/
ul {
margin: 20px;
}
.input-color {
position: relative;
}
.input-color input {
padding-left: 20px;
}
.input-color .color-box {
width: 10px;
height: 10px;
display: inline-block;
background-color: #ccc;
position: absolute;
left: 5px;
top: 5px;
}

2
data/bank-additional_s.csv
Unescape View File

@ -1,4 +1,4 @@
age;job;marital;education;default;housing;loan;contact;month;day_of_week;duration;campaign;pdays;previous;poutcome;emp.var.rate;cons.price.idx;cons.conf.idx;euribor3m;nr.employed;y*
age;job;marital;education;default;housing;loan;contact;month;day_of_week;duration;campaign;pdays;previous;poutcome;emp.var.rate;cons.price.idx;cons.conf.idx;euribor3m;nr.employed;Outcome*
30;blue-collar;married;basic.9y;no;yes;no;cellular;may;fri;487;2;999;0;nonexistent;-1.8;92.893;-46.2;1.313;5099.1;no
39;services;single;high.school;no;no;no;telephone;may;fri;346;4;999;0;nonexistent;1.1;93.994;-36.4;4.855;5191;no
25;services;married;high.school;no;yes;no;telephone;jun;wed;227;1;999;0;nonexistent;1.4;94.465;-41.8;4.962;5228.1;no

1 age job marital education default housing loan contact month day_of_week duration campaign pdays previous poutcome emp.var.rate cons.price.idx cons.conf.idx euribor3m nr.employed y* Outcome*
2 30 blue-collar married basic.9y no yes no cellular may fri 487 2 999 0 nonexistent -1.8 92.893 -46.2 1.313 5099.1 no
3 39 services single high.school no no no telephone may fri 346 4 999 0 nonexistent 1.1 93.994 -36.4 4.855 5191 no
4 25 services married high.school no yes no telephone jun wed 227 1 999 0 nonexistent 1.4 94.465 -41.8 4.962 5228.1 no

24
index.html
Unescape View File

@ -18,6 +18,7 @@
<script src="./modules/d3-tip/tip.js"></script>
<script src="./modules/d3-legend/d3-legend.min.js"></script>
<script src="./modules/d3-lasso/lasso.js"></script>
<script src="./modules/plotly/plotly_min.js"></script>
<script src="./modules/papa/papaparse.min.js"></script>
<script src="./modules/jquery/jquery.min.js"></script>
@ -131,7 +132,7 @@
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel panel-default" id="left-side-param">
<div class="panel-heading">
<h2 class="panel-title">t-SNE Parameters</h2>
</div>
@ -140,8 +141,10 @@
<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="bank-additional_s.csv">Bank Marketing</option>
<option value="winequality-red.csv">Red Wine - Quality</option>
<option value="iris.csv" selected>Iris</option>
<option value="iris.csv">Iris</option>
<option value="mnist.csv" >Mnist</option>
<option value="Frogs_MFCCs_s.csv" >Frogs</option>
<option value="empty">Upload New File</option>
@ -199,7 +202,7 @@
</div>
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel panel-default" id="left-side-visual">
<div class="panel-heading">
<h2 class="panel-title">Visual Mapping Parameters</h2>
</div>
@ -238,7 +241,9 @@
</div>
</div>
<div class = col-md-6>
<svg id="knnBarChart"></svg>
<div id="knnBarChart">
<div id="plotlyBarChart"></div>
</div>
</div>
<div class="col-md-3" id="extra-information" style="width: 24.6vw">
<div class="panel panel-default">
@ -253,20 +258,15 @@
<div id="CategoryName"></div>
</div>
</div>
<div class="panel panel-default" id="kNNInfo">
<div class="panel-heading">
<h2 class="panel-title">k Nearest Neighborhood Cluster Purity Preservation</h2>
</div>
<div class="panel-body">
<div id="kNNDetails"></div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#cost").html('Uknown iteration and cost values.');
$("#datasetDetails").html('Uknown number of features and instances.');
$("#CategoryName").html('No specific classification.');
/* This script is used in order to give functionalities to the different buttons provide through the front-end. */
$('#param-lim').bind('input', function () { $('#param-lim-value').text($('#param-lim').val()); });
$('#param-corr').bind('input', function () { $('#param-corr-value').text($('#param-corr').val()); });

89
js/tsne_vis.js
Unescape View File

@ -24,6 +24,9 @@ var Category; var ColorsCategorical;
// This is for the removal of the distances cache.
var returnVal = false;
// This variable is for the kNN Bar Chart in order to store the first execution.
var inside = 0;
// Schema Investigation
// svgClick = Click a left mouse click in order to add a point.
// prevRightClick = When right click is pressed prevent any other action. Lock the current schema.
@ -742,6 +745,7 @@ function computeDistances(data, distFunc, transFunc) {
// Function that updates embedding
function updateEmbedding(AnalysisResults) {
inside = 0;
points = [];
points2d = [];
if (AnalysisResults == ""){ // Check if the embedding does not need to load because we had a previous analysis uploaded.
@ -1305,10 +1309,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 = 475 - 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 = 475 - mini_margin.top - mini_margin.bottom;
mini_width = 100 - mini_margin.left - mini_margin.right;
// Create the svg correlation component
@ -1583,11 +1587,11 @@ function CalculateCorrel(){ // Calculate the correlation is a function which has
for (var j = 0; j < correlationResults.length; j++) {
for (var i = 0; i < SignStore.length; i++) {
if (SignStore[i][1]*(-1) == correlationResults[j][1]) {
correlationResults[j][1] = parseInt(correlationResults[j][1] * 100) * (-1); // Give the negative sign if needed and multiply by 100
correlationResults[j][1] = (correlationResults[j][1]).toFixed(2) * (-1); // Give the negative sign if needed and multiply by 100
correlationResults[j].push(j);
}
if (SignStore[i][1] == correlationResults[j][1]) {
correlationResults[j][1] = parseInt(correlationResults[j][1] * 100); // Give a positive sign and multiply by 100
correlationResults[j][1] = (correlationResults[j][1]).toFixed(2); // Give a positive sign and multiply by 100
correlationResults[j].push(j);
}
}
@ -1692,8 +1696,8 @@ function drawBarChart(){ // Draw the horizontal barchart with the correlations.
/////////////////////// Update scales ///////////////////////
/////////////////////////////////////////////////////////////
//Update the scales
main_xScale.domain([-100, 100]);
mini_xScale.domain([-100, 100]);
main_xScale.domain([-1, 1]);
mini_xScale.domain([-1, 1]);
main_yScale.domain(correlationResultsFinal.map(function(d) { return d[0]; }));
mini_yScale.domain(correlationResultsFinal.map(function(d) { return d[0]; }));
@ -2117,11 +2121,12 @@ var IDS = [];
RadarChart("#starPlot", wrapData, colors, IDS, radarChartOptions);
function BetatSNE(points){ // Run the main visualization
inside = inside + 1;
if (points.length) { // If points exist (at least 1 point)
selectedPoints = [];
var findNearestTable = [];
var findNearestTableCombination = [];
for (let m=0; m<points.length; m++){
if (points[m].selected == true){
selectedPoints.push(points[m]); // Add the selected points in to a new variable
@ -2140,12 +2145,10 @@ if (points.length) { // If points exist (at least 1 point)
var vh = viewport[1] * 0.042;
var maxKNN = document.getElementById("param-perplexity-value").value; // Specify the amount of k neighborhoods that we are going to calculate. According to "perplexity."
selectedPoints.sort(function(a, b) { // Sort the points according to ID.
return parseFloat(a.id) - parseFloat(b.id);
});
$("#kNNDetails").html("Purity of the cluster was checked for k values starting from " + (1) + " to " + maxKNN + "."); // Print on the screen the number of k values of kNN which we present!
for (k=maxKNN; k>0; k--){ // Start from the maximum k value and go to the minimum (k=2).
findNearest = 0;
@ -2223,35 +2226,55 @@ if (points.length) { // If points exist (at least 1 point)
if (isNaN(findNearest)){
findNearest = 0; // If kNN is fully uncorrelated then we say that the value is 0.
}
findNearestTable.push(findNearest * vh * 2); // These values are multiplied by the height of the viewport because we need to draw the bins of the barchart representation
findNearestTable.push(findNearest.toFixed(2)); // These values are multiplied by the height of the viewport because we need to draw the bins of the barchart representation
}
findNearestTable.reverse();
var barPadding = 5; // Leave some space between the bars
d3v3.select("#knnBarChart").selectAll("rect").remove();
var svg2 = d3v3.select('#knnBarChart') // Create the barchart for the kNN
.attr("class", "bar-chart");
var kValuesLegend = [];
for (var i=1; i<=maxKNN; i++){
kValuesLegend.push(i);
}
if (inside == 1){
StoreInitialFindNearestTable = findNearestTable;
}
var trace1 = {
x: kValuesLegend,
y: StoreInitialFindNearestTable,
name: 'Entire Projection',
type: 'bar',
marker: {
color: 'rgb(0,0,0)'
}
};
var trace2 = {
x: kValuesLegend,
y: findNearestTable,
name: 'Lasso Selected Cluster',
type: 'bar',
marker: {
color: 'rgb(0, 187, 187)'
}
};
var LimitXaxis = Number(maxKNN) + 1;
var data = [trace1, trace2];
var layout = {
barmode: 'group',autosize: false,
width: dimensions*0.99,
height: vh*2.1,
margin: {
l: 30,
r: 30,
b: 20,
t: 20,
pad: 4
},
xaxis: {range: [0, LimitXaxis]},
yaxis: {range: [0, 1]}};
Plotly.newPlot('knnBarChart', data, layout, {displayModeBar:false},{staticPlot: true});
vw = dimensions;
var barWidth = (vw / findNearestTable.length); // Bar width.
var knnBarChartSVG = svg2.selectAll("rect") // Draw the barchart!
.data(findNearestTable)
.enter()
.append("rect")
.attr("y", function(d) {
return Math.round(vh*2 - d)
})
.attr("height", function(d) {
return d;
})
.attr("width", barWidth - barPadding)
.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
});
// Here we have the code for the starplot
d3.select("#starPlot").selectAll('g').remove(); // Remove the starplot if there was one before
@ -2262,8 +2285,6 @@ if (points.length) { // If points exist (at least 1 point)
}
}
if(selectedPoints.length <= 10 && coun > 0){ // If points > 10 then do not draw! If points = 0 then do not draw!
var FeatureWise = [];

7
modules/plotly/plotly_min.js
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save