Skip to content

Commit

Permalink
Adjust plotsize and other options
Browse files Browse the repository at this point in the history
  • Loading branch information
@anamone26
anamone26 committed Sep 30, 2024
1 parent b9e4fc8 commit d1e3aa3
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 37 deletions.
6 changes: 3 additions & 3 deletions src/example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ <h1>Steerable Parallel Coordinates</h1>
<input type="file" id="fileInput" style="display: none"/>
<button class="input-button" id="input" title="Upload a CSV File">Upload File</button>
<button class="input-button" id="download" title="Download Plot as SVG">Download SVG</button>
<button class="input-button" id="resetRanges" title="Reset All Ranges to Original Range">Set Ranges from Data</button>
<button class="input-button" id="resetRoundedRanges" title="Reset All Ranges to Inital Rounded Range">Round Ranges from Data</button>
<button class="input-button" id="resetAll" title="Reset Plot to Origin">Reset</button>
<button class="input-button" id="resetRanges" title="Set Ranges from Data">Set Ranges from Data</button>
<button class="input-button" id="resetRoundedRanges" title="Set Ranges to Round Range">Round Ranges from Data</button>
<button class="input-button" id="resetAll" title="Reset Plot to Initial State">Reset</button>
</div>

<div id="parallelcoords"></div>
Expand Down
31 changes: 21 additions & 10 deletions src/example/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@ let newFeatures = [];
let moveDimensionData;
let filterDimensionData;
let rangeDimensionData;
let dimensions;

let studentData = "Name,Maths,English,PE,Art,History,IT,Biology,German\nAdrian,95,24,82,49,58,85,21,24\nAmelia,92,98,60,45,82,85,78,92\nBrooke,27,35,84,45,23,50,15,22\nChloe,78,9,83,66,80,63,29,12\nDylan,92,47,91,56,47,81,60,51\nEmily,67,3,98,77,25,100,50,34\nEvan,53,60,97,74,21,78,72,75\nFinn,42,73,65,52,43,61,82,85\nGia,50,81,85,80,43,46,73,91\nGrace,24,95,98,94,89,25,91,69\nHarper,69,9,97,77,56,94,38,2\nHayden,2,72,74,53,40,40,66,64\nIsabella,8,99,84,69,86,20,86,85\nJesse,63,39,93,84,30,71,86,19\nJordan,11,80,87,68,88,20,96,81\nKai,27,65,62,92,81,28,94,84\nKaitlyn,7,70,51,77,79,29,96,73\nLydia,75,49,98,55,68,67,91,87\nMark,51,70,87,40,97,94,60,95\nMonica,62,89,98,90,85,66,84,99\nNicole,70,8,84,64,26,70,12,8\nOswin,96,14,62,35,56,98,5,12\nPeter,98,10,71,41,55,66,38,29\nRenette,96,39,82,43,26,92,20,2\nRobert,78,32,98,55,56,81,46,29\nSasha,87,1,84,70,56,88,49,2\nSylvia,86,12,97,4,19,80,36,8\nThomas,76,47,99,34,48,92,30,38\nVictor,5,60,70,65,97,19,63,83\nZack,19,84,83,42,93,15,98,95";

document.addEventListener('DOMContentLoaded', function() {
data = studentData;
newData = loadCSV(data);
newData = loadCSV(data);
dimensions = newData['columns'];
showButtons();
drawChart(newData);
generateDropdownForShow();
Expand All @@ -31,12 +33,24 @@ let inputButton = document.getElementById('input');
inputButton.addEventListener('click', openFileDialog, false);
let inputFile = document.getElementById('fileInput');
inputFile.addEventListener('change', handleFileSelect, false);
inputFile.addEventListener('cancel', () => {
document.getElementById('input').textContent = 'Upload File';
})
inputFile.addEventListener('click', (event) => {
event.target.value = null;
})

let downloadButton = document.getElementById('download');
downloadButton.addEventListener('click', saveAsSvg, false);
downloadButton.addEventListener('click', () => {
saveAsSvg();
document.getElementById('download').textContent = 'Download SVG';
});
inputFile.addEventListener('change', () => {
document.getElementById('download').textContent = 'Download SVG...';
});
downloadButton.addEventListener('cancel', () => {
document.getElementById('download').textContent = 'Download SVG';
})
downloadButton.style.visibility = 'hidden';

let resetRangesButton = document.getElementById('resetRanges');
Expand Down Expand Up @@ -75,7 +89,6 @@ function handleFileSelect(event) {
clearPlot();
data = e.target.result;
newData = loadCSV(data);
//newFeatures = getAllDimensionNames().reverse();
drawChart(newData);

showButtons();
Expand Down Expand Up @@ -184,7 +197,7 @@ function showOptionsForRecords(id, buttonId) {
}

function generateDropdownForShow() {
let dimensions = newData['columns'].reverse();
//let dimensions = newData['columns'];

document.getElementById('showDimensionHeader').style.visibility = 'visible';

Expand Down Expand Up @@ -296,7 +309,7 @@ function generateDropdownForShow() {
}

function generateDropdownForInvert() {
let dimensions = newData['columns'];
//let dimensions = newData['columns'];

document.getElementById('invertDimensionHeader').style.visibility = 'visible';

Expand Down Expand Up @@ -415,7 +428,7 @@ function disableOptionInDropdown(prefixId, dimension) {
}

function generateDropdownForMove() {
let dimensions = newData['columns'];
//let dimensions = newData['columns'];

document.getElementById('moveDimensionHeader').style.visibility = 'visible';

Expand Down Expand Up @@ -468,7 +481,6 @@ function moveDimensionRight() {
}

function disableLeftAndRightButton(dimension) {
console.log(dimension);
const position = getDimensionPosition(dimension);
const numberOfDimensions = getNumberOfDimensions();
const headline = document.getElementById('move_headline');
Expand All @@ -493,7 +505,7 @@ function disableLeftAndRightButton(dimension) {
}

function generateDropdownForFilter() {
let dimensions = newData['columns'];
//let dimensions = newData['columns'];

document.getElementById('filterDimensionHeader').style.visibility = 'visible';

Expand Down Expand Up @@ -719,7 +731,7 @@ function generateModuleForSetFilter() {
}

function generateDropdownForRange() {
let dimensions = newData['columns'];
//let dimensions = newData['columns'];

document.getElementById('rangeDimensionHeader').style.visibility = 'visible';

Expand All @@ -728,7 +740,6 @@ function generateDropdownForRange() {
const dropdown = document.createElement('select');
dropdown.onchange = (event) => {
rangeDimensionData = event.target.value;
console.log(rangeDimensionData);
generateModuleForRangeSettings();
}
dropdown.onfocus = () => {
Expand Down
27 changes: 3 additions & 24 deletions src/lib/scripts/parallelcoordinates.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ export function moveByOne(dimension: string, direction: string): void {
const pos = parcoords.xScales(dimension);
const posNeighbour = parcoords.xScales(neighbour);

const distance = (width-window.paddingXaxis)/parcoords.newFeatures.length;
const distance = 97.5; //(width-window.paddingXaxis)/parcoords.newFeatures.length;

parcoords.dragging[dimension] = direction == 'right' ? pos + distance :
pos - distance;
Expand Down Expand Up @@ -664,13 +664,6 @@ export function drawChart(content: any): void {
setUpParcoordData(content, newFeatures);

const height = 360;
/*let width = 0;
if (longLabels) {
width = newFeatures.length * 200-40;
}
else {
width = newFeatures.length * 100-80;
}*/

window.svg = d3.select('#parallelcoords')
.append('svg')
Expand Down Expand Up @@ -752,20 +745,6 @@ export function getDimensionPosition(dimension: string): number {
return parcoords.newFeatures.indexOf(dimension);
}

/*export function setDimensionPosition(dimension: string, position: number): void {
const dimensionListCopy = parcoords.newFeatures.slice();
const dimensionListInOrder = dimensionListCopy.reverse();
const dimensionToMove = dimensionListInOrder[position];
const dimensionPositionA = getDimensionPosition(dimension);
const dimensionPositionB = getDimensionPosition(dimensionToMove);
if (dimensionPositionA > dimensionPositionB) {
move(dimension, true, dimensionToMove);
}
else {
move(dimension, false, dimensionToMove);
}
}*/

export function isDimensionCategorical(dimension: string): boolean {
let values = window.parcoords.newDataset.map(o => o[dimension]);
if (isNaN(values[0])) {
Expand All @@ -785,7 +764,7 @@ function setUpParcoordData(data: any, newFeatures: any): any {

window.padding = 80;
window.paddingXaxis = 60;
window.width = newFeatures.length * 100-80;
window.width = newFeatures.length * 100;
window.height = 400;
window.longLabels = false;

Expand All @@ -800,7 +779,7 @@ function setUpParcoordData(data: any, newFeatures: any): any {
if (isNaN(values[0])) {
values.forEach(item => {
if(item.length > 20) {
window.width = newFeatures.length * 200-40;
window.width = newFeatures.length * 200;
window.paddingXaxis = 200;
window.longLabels = true;
return;
Expand Down

0 comments on commit d1e3aa3

Please sign in to comment.