Fixed the kNN barchart

Former-commit-id: 21930948db
master
parent 0ebd67cc29
commit 29c25126d9
  1. 1
      Previously_Executed_Analyses_Files/Diabetes_Projection.txt
  2. 44
      css/style.css
  3. 2
      data/bank-additional_s.csv
  4. 26
      index.html
  5. 107
      js/tsne_vis.js
  6. 7
      modules/plotly/plotly_min.js

File diff suppressed because one or more lines are too long

@ -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;
}
@ -395,4 +404,25 @@ rect {
align-items: center;
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;
}

@ -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

@ -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()); });

@ -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,46 +2226,64 @@ 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");
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
var coun = 0;
for (var i=0; i < selectedPoints.length; i++){
if (selectedPoints[i].starplot == true){ // Count the selected points
coun = coun + 1;
}
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});
// Here we have the code for the starplot
d3.select("#starPlot").selectAll('g').remove(); // Remove the starplot if there was one before
var coun = 0;
for (var i=0; i < selectedPoints.length; i++){
if (selectedPoints[i].starplot == true){ // Count the selected points
coun = coun + 1;
}
}
if(selectedPoints.length <= 10 && coun > 0){ // If points > 10 then do not draw! If points = 0 then do not draw!

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