ben.burlingham
/
d3-sort-visualization
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fade/unfade implemented. Play button behavior finalized.

Browse Source
master
ben-burlingham 10 years ago
parent 1010f74cff
commit 4e0b92a1d1
5 changed files with 60 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      js/mergesort.js
  2. 19
      js/quicksort.js
  3. 67
      js/visualizer-actions.js
  4. 18
      js/visualizer-inits.js
  5. 33
      js/visualizer.js

22
js/mergesort.js
Unescape View File

@ -1,30 +1,10 @@
/**
*
*/
var MergeSort = function() {
this.instructions = [];
};
var MergeSort = function() {};
MergeSort.prototype = Object.create(Sorter.prototype);
/**
*
*/
MergeSort.prototype.addInstruction = function(operation, left, right, mid) {
// console.log({
// operation: operation,
// left: left,
// right: right,
// mid: mid
// });
this.instructions.push({
operation: operation,
left: left,
right: right
});
};
/**
*
*/

19
js/quicksort.js
Unescape View File

@ -18,10 +18,8 @@ QuickSort.prototype = Object.create(Sorter.prototype);
*
*/
QuickSort.prototype.sort = function(arr, start, end) {
if (end - start <= 0) {
// this//.instruct(this.V.highlight, 500, end)
// .instruct(this.V.message, 0, 3, 'Start: ' + start)
// .instruct(this.V.message, 0, 4, 'End: ' + end)
if (end <= start) {
// message: Left and Right have crossed, start sorting sublists.
return arr;
}
@ -43,6 +41,10 @@ QuickSort.prototype.sort = function(arr, start, end) {
.instruct(this.V.unhighlight, 0)
.instruct(this.V.highlight, 0, pivot)
.instruct(this.V.fade, 0, -1, start - 1)
.instruct(this.V.fade, 0, end + 1, arr.length)
// Message: pivot chosen
.instruct(this.V.message, 0, 3, 'Sorting from [' + start + '] to [' + end + ']')
.instruct(this.V.message, 0, 4, '')
.instruct(this.V.message, 100, 5, '');
@ -69,14 +71,16 @@ QuickSort.prototype.sort = function(arr, start, end) {
while (arr[right].value > pivotval) {
this.comparisons++;
this.V
.instruct(this.V.message, 0, 5, `${arr[right].value} < ${pivotval}, decrement right`)
.instruct(this.V.message, 0, 5, `${arr[right].value} > ${pivotval}, decrement right`)
.instruct(this.V.message, 0, 1, 'Comparisons: ' + this.comparisons)
.instruct(this.V.marker, 500, 2, right);
right--;
this.V.instruct(this.V.marker, 500, 2, right)
}
this.V.instruct(this.V.message, 100, 5, `Right stop: ${arr[right].value} <= ${pivotval} `)
this.V
.instruct(this.V.message, 0, 5, `Right stop: ${arr[right].value} <= ${pivotval} `)
.instruct(this.V.marker, 500, 2, right);
if (left <= right) {
tmp = arr[left];
@ -101,6 +105,7 @@ QuickSort.prototype.sort = function(arr, start, end) {
}
this.V
.instruct(this.V.unfade, 0)
.instruct(this.V.unhighlight, 0)
.instruct(this.V.hideMarker, 0, 1)
.instruct(this.V.hideMarker, 0, 2)

67
js/visualizer-actions.js
Unescape View File

@ -42,32 +42,25 @@ Visualizer.prototype.unhighlight = function() {
this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; });
};
// /**
// * Greys out an item.
// */
// Visualizer.prototype.fade = function(startIndex, endIndex) {
// console.log(`fading from ${startIndex} to ${endIndex}`);
// this.svg.selectAll('rect')
// // NOTE this replaces the fill function reference for each rectangle - key point!
// .attr('fill', function fill(d) {
// if (d.index >= startIndex && d.index <= endIndex) {
// console.log(`${d.index} to ${d.fade}`)
// return d.fade;
// }
// return d.fill;
// });
// };
/**
* Greys out an item.
*/
Visualizer.prototype.fade = function(delay, startIndex, endIndex) {
this.groups.each(function(d) {
if (d.index >= startIndex && d.index <= endIndex) {
d3.select(this).style('opacity', '0.2');
}
});
};
// /**
// * Restores all items to un-greyed state.
// */
// Visualizer.prototype.unfade = function() {
// this.svg.selectAll('rect')
// .attr('fill', functi;n fill(d) {
// console.log(`unfade ${d.index}`)
// return d.fill;
// })
// };
/**
* Restores all items to un-greyed state.
*/
Visualizer.prototype.unfade = function() {
this.groups.each(function(d) {
d3.select(this).style('opacity', 1);
});
};
/**
*
@ -104,27 +97,3 @@ Visualizer.prototype.message = function(delay, which, msg) {
var msg = msg || '&nbsp;';
this.parent.querySelector(`.message:nth-child(${which})`).innerHTML = msg;
};
/**
*
*/
Visualizer.prototype.reset = function() {
this.instructionIndex = 0;
this.message([null, 0, 1, '']);
this.message([null, 0, 2, '']);
this.message([null, 0, 3, '']);
this.message([null, 0, 4, '']);
this.message([null, 0, 5, '']);
this.marker([null, 0, 1, 0]);
this.marker([null, 0, 2, 0]);
this.unhighlight();
this.groups
.transition().duration(100)
.attr('transform', function doTransform(d, i) {
d.index = i;
return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`;
});
};

18
js/visualizer-inits.js
Unescape View File

@ -126,6 +126,7 @@ Visualizer.prototype.initRange = function() {
var rangeChange = function(event) {
this.initItems(event.target.value);
this.reset();
};
var container = document.createElement('div');
@ -178,13 +179,6 @@ Visualizer.prototype.initControls = function() {
}
};
var backclick = function() {
// TODO followinstruction skips delay of 0
this.paused = true;
this.instructionIndex--;
this.followInstruction();
};
var forwardclick = function() {
this.paused = true;
this.followInstruction();
@ -192,7 +186,7 @@ Visualizer.prototype.initControls = function() {
};
var restartclick = function() {
this.paused = false;
this.paused = true;
updatePlayPause(this.paused);
this.reset();
};
@ -202,18 +196,13 @@ Visualizer.prototype.initControls = function() {
play.title = 'Play'
play.addEventListener('click', playclick.bind(this));
var back = document.createElement('button');
back.className = 'fa fa-step-backward';
back.title = 'Step Backward';
back.addEventListener('click', backclick.bind(this));
var forward = document.createElement('button');
forward.className = 'fa fa-step-forward'
forward.title = 'Step Forward';
forward.addEventListener('click', forwardclick.bind(this));
var reset = document.createElement('button');
reset.className = 'fa fa-fast-backward';
reset.className = 'fa fa-undo';
reset.title = 'Restart'
reset.addEventListener('click', restartclick.bind(this));
@ -221,7 +210,6 @@ Visualizer.prototype.initControls = function() {
container.className = 'controls-container';
container.appendChild(reset);
container.appendChild(back);
container.appendChild(play);
container.appendChild(forward);

33
js/visualizer.js
Unescape View File

@ -100,10 +100,9 @@ Visualizer.prototype.followInstruction = function() {
var delay = instruction[1];
var args = instruction.slice(1);
// TODO finalize play button behavior
// TODO add tabs for best/worst cases
// TODO add links to stats
// TODO fade unfade
// TODO fix init slider
// TODO heap sort
// TODO extra memory
@ -122,9 +121,29 @@ Visualizer.prototype.followInstruction = function() {
this.instructionIndex++;
setTimeout(this.followInstruction.bind(this), delay);
}
// }
// else {
// console.error(i);
// throw new Error('Unidentified instruction.');
// }
};
/**
*
*/
Visualizer.prototype.reset = function() {
this.instructionIndex = 0;
this.message(0, 1, '');
this.message(0, 2, '');
this.message(0, 3, '');
this.message(0, 4, '');
this.message(0, 5, '');
this.marker(0, 1, 0);
this.marker(0, 2, 0);
this.unhighlight();
this.unfade();
this.groups
.transition().duration(100)
.attr('transform', function doTransform(d, i) {
d.index = i;
return `translate(${Visualizer.calculateX(i)}, ${Visualizer.itemY})`;
});
};

Write Preview
Loading…
Cancel
Save