ben-burlingham
10 years ago
parent
397691a463
commit
89a20ac073
9 changed files with 367 additions and 251 deletions
@ -0,0 +1,125 @@ |
||||
/** |
||||
* Instructions contain a string with the name of a function in this object which is called to perform an action. |
||||
*/ |
||||
Visualizer.prototype.actions = { |
||||
/** |
||||
* |
||||
*/ |
||||
initSection: function() { |
||||
console.warn('INIT SECTION'); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
swap: function(indexA, indexB) { |
||||
console.warn('SWAP'); |
||||
// Move up
|
||||
// NOTE Two way binding here between dataset and function parameter?
|
||||
// NOTE swapping will not reorder index and i parameter will be off
|
||||
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
|
||||
// this.groups
|
||||
// .transition().duration(400)
|
||||
// .attr('transform', function doTransform(d) {
|
||||
// if (d.index === indexA) {
|
||||
// d.index = indexB;
|
||||
// }
|
||||
// else if (d.index === indexB) {
|
||||
// d.index = indexA;
|
||||
// }
|
||||
|
||||
// return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
|
||||
// })
|
||||
}, |
||||
|
||||
/** |
||||
* Highlights an index. |
||||
*/ |
||||
highlight: function(index) { |
||||
console.warn('HIGHLIGHT'); |
||||
}, |
||||
|
||||
/** |
||||
* Un-highlights an index. |
||||
*/ |
||||
unhighlight: function(index) { |
||||
console.warn('UNHIGHLIGHT'); |
||||
}, |
||||
|
||||
// /**
|
||||
// * Greys out an item.
|
||||
// */
|
||||
// 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;
|
||||
// });
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * Restores all items to un-greyed state.
|
||||
// */
|
||||
// unfade: function() {
|
||||
// this.svg.selectAll('rect')
|
||||
// .attr('fill', function fill(d) {
|
||||
// console.log(`unfade ${d.index}`)
|
||||
// return d.fill;
|
||||
// })
|
||||
// };
|
||||
|
||||
/** |
||||
* Moves marker 1 to an index and sets its text label. |
||||
*/ |
||||
marker1: function(index, label) { |
||||
console.warn('MARKER1') |
||||
}, |
||||
|
||||
/** |
||||
* Moves marker 2 to an index and sets its text label. |
||||
*/ |
||||
marker2: function(index, label) { |
||||
console.warn('MARKER2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in stats 1 div. |
||||
*/ |
||||
stats1: function(message) { |
||||
console.warn('STATS1') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in stats 2 div. |
||||
*/ |
||||
stats2: function(message) { |
||||
console.warn('STATS2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 1 div. |
||||
*/ |
||||
message1: function(message) { |
||||
console.warn('MESSAGE1') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 2 div. |
||||
*/ |
||||
message2: function(message) { |
||||
console.warn('MESSAGE2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 3 div. |
||||
*/ |
||||
message3: function(message) { |
||||
console.warn('MESSAGE3') |
||||
}, |
||||
}; |
||||
@ -0,0 +1,132 @@ |
||||
/** |
||||
* |
||||
*/ |
||||
Visualizer.prototype.initItems = function(n) { |
||||
var data = this.sorter.generate(n); |
||||
var shuffled = this.sorter.shuffle(data); |
||||
var ordered = Object.create(shuffled); |
||||
ordered = this.sorter.sort(ordered, 0, ordered.length - 1); |
||||
|
||||
// A swap on the dataset will not take effect until after transition is complete, so custom index is required.
|
||||
var n = 0; |
||||
for (i in shuffled) { |
||||
shuffled[i].index = n++; |
||||
} |
||||
|
||||
this.groups = this.svg.selectAll('g').data(shuffled).enter().append('g') |
||||
.attr('transform', `translate(0, ${Visualizer.itemY})`); |
||||
|
||||
this.groups.append('rect') |
||||
.attr('height', Visualizer.itemH) |
||||
.attr('width', Visualizer.itemW) |
||||
.attr('fill', function doFill(d) { return `rgb(0, 0, ${d.value})`; }); |
||||
|
||||
this.groups.transition(500) |
||||
.attr('transform', function doTransform(d, i) { |
||||
return `translate(${i * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`; |
||||
}); |
||||
|
||||
this.groups.append('text') |
||||
.text(function t(d) { return d.value; }) |
||||
.attr('fill', '#aaa') |
||||
.attr('font-size', 10) |
||||
.attr('font-family', 'sans-serif') |
||||
.attr('transform', function doTransform(d) { |
||||
return `rotate(90 0,0), translate(5, -3)`; |
||||
}); |
||||
|
||||
setTimeout(this.followInstruction.bind(this, 0), 500); |
||||
}; |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
Visualizer.prototype.initComments = function() { |
||||
var container = document.createElement('div'); |
||||
container.className = 'comment-container'; |
||||
|
||||
var div1 = document.createElement('div'); |
||||
div1.className = 'comment'; |
||||
|
||||
var div2 = document.createElement('div'); |
||||
div2.className = 'comment'; |
||||
|
||||
var div3 = document.createElement('div'); |
||||
div3.className = 'comment'; |
||||
|
||||
container.appendChild(div1); |
||||
container.appendChild(div2); |
||||
container.appendChild(div3); |
||||
|
||||
return container; |
||||
}; |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
Visualizer.prototype.initRange = function() { |
||||
var container = document.createElement('div'); |
||||
container.className = 'range-container'; |
||||
|
||||
var msg = document.createElement('div'); |
||||
msg.className = 'msg'; |
||||
msg.innerHTML = "Number of items (n) = 10"; |
||||
|
||||
var range = document.createElement('input'); |
||||
range.setAttribute('type', 'range'); |
||||
range.setAttribute('value', 40); |
||||
range.setAttribute('min', 5); |
||||
range.setAttribute('max', 80); |
||||
range.addEventListener('change', this.rangeChange.bind(this)); |
||||
range.addEventListener('input', this.rangeInput.bind(null, msg)); |
||||
|
||||
container.appendChild(range); |
||||
container.appendChild(msg); |
||||
|
||||
return container; |
||||
}; |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
Visualizer.prototype.initControls = function() { |
||||
var play = document.createElement('button'); |
||||
play.className = 'fa fa-play'; |
||||
play.title = 'Play' |
||||
play.addEventListener('click', onclick); |
||||
|
||||
var back = document.createElement('button'); |
||||
back.className = 'fa fa-step-backward'; |
||||
back.title = 'Step Backward'; |
||||
back.addEventListener('click', onclick); |
||||
|
||||
var forward = document.createElement('button'); |
||||
forward.className = 'fa fa-step-forward' |
||||
forward.title = 'Step Forward'; |
||||
forward.addEventListener('click', onclick); |
||||
|
||||
var reset = document.createElement('button'); |
||||
reset.className = 'fa fa-fast-backward'; |
||||
reset.title = 'Restart' |
||||
reset.addEventListener('click', onclick); |
||||
|
||||
var msg1 = document.createElement('div'); |
||||
msg1.className = 'msg'; |
||||
msg1.innerHTML = 'Swaps: 999'; |
||||
|
||||
var msg2 = document.createElement('div'); |
||||
msg2.className = 'msg'; |
||||
msg2.innerHTML = 'Comparisons: 999'; |
||||
|
||||
var container = document.createElement('div'); |
||||
container.className = 'controls-container'; |
||||
|
||||
container.appendChild(reset); |
||||
container.appendChild(back); |
||||
container.appendChild(play); |
||||
container.appendChild(forward); |
||||
container.appendChild(msg1); |
||||
container.appendChild(msg2); |
||||
|
||||
return container; |
||||
}; |
||||
Loading…
Reference in new issue