ben-burlingham
10 years ago
parent
89a20ac073
commit
990c6f38ed
12 changed files with 2524 additions and 184 deletions
@ -1,125 +1,155 @@ |
|||||||
/** |
/** |
||||||
* Instructions contain a string with the name of a function in this object which is called to perform an action. |
* Instructions contain a string with the name of a function in this object which is called to perform an action. |
||||||
*/ |
*/ |
||||||
Visualizer.prototype.actions = { |
Visualizer.prototype.initSection = function() { |
||||||
/** |
// console.warn('INIT SECTION');
|
||||||
* |
}; |
||||||
*/ |
|
||||||
initSection: function() { |
/** |
||||||
console.warn('INIT SECTION'); |
* |
||||||
}, |
*/ |
||||||
|
Visualizer.prototype.swap = function(indexA, indexB) { |
||||||
/** |
// console.warn('SWAP');
|
||||||
* |
// Move u;
|
||||||
*/ |
// NOTE Two way binding here between dataset and function parameter?
|
||||||
swap: function(indexA, indexB) { |
// NOTE swapping will not reorder index and i parameter will be off
|
||||||
console.warn('SWAP'); |
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
|
||||||
// Move up
|
// this.groups
|
||||||
// NOTE Two way binding here between dataset and function parameter?
|
// .transition().duration(400)
|
||||||
// NOTE swapping will not reorder index and i parameter will be off
|
// .attr('transform', function doTransform(d) {
|
||||||
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
|
// if (d.index === indexA) {
|
||||||
// this.groups
|
// d.index = indexB;
|
||||||
// .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;
|
// else if (d.index === indexB) {
|
||||||
// });
|
// d.index = indexA;
|
||||||
// };
|
// }
|
||||||
|
|
||||||
// /**
|
// return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
|
||||||
// * 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. |
* Highlights an index. |
||||||
*/ |
*/ |
||||||
marker1: function(index, label) { |
Visualizer.prototype.highlight = function(args) { |
||||||
console.warn('MARKER1') |
var index = args[2]; |
||||||
}, |
|
||||||
|
if (index < 0) { |
||||||
/** |
console.error('Trying to highlight index of ' + index); |
||||||
* Moves marker 2 to an index and sets its text label. |
return; |
||||||
*/ |
} |
||||||
marker2: function(index, label) { |
|
||||||
console.warn('MARKER2') |
this.svg.select(`g:nth-child(${index})`).select('rect').attr('fill', 'red'); |
||||||
}, |
}; |
||||||
|
|
||||||
/** |
/** |
||||||
* Updates message in stats 1 div. |
* Un-highlights an index. |
||||||
*/ |
*/ |
||||||
stats1: function(message) { |
Visualizer.prototype.unhighlight = function() { |
||||||
console.warn('STATS1') |
this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; }); |
||||||
}, |
}; |
||||||
|
|
||||||
/** |
// /**
|
||||||
* Updates message in stats 2 div. |
// * Greys out an item.
|
||||||
*/ |
// */
|
||||||
stats2: function(message) { |
// Visualizer.prototype.fade = function(startIndex, endIndex) {
|
||||||
console.warn('STATS2') |
// 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) {
|
||||||
* Updates message in message 1 div. |
// if (d.index >= startIndex && d.index <= endIndex) {
|
||||||
*/ |
// console.log(`${d.index} to ${d.fade}`)
|
||||||
message1: function(message) { |
// return d.fade;
|
||||||
console.warn('MESSAGE1') |
// }
|
||||||
}, |
// return d.fill;
|
||||||
|
// });
|
||||||
/** |
// };
|
||||||
* Updates message in message 2 div. |
|
||||||
*/ |
// /**
|
||||||
message2: function(message) { |
// * Restores all items to un-greyed state.
|
||||||
console.warn('MESSAGE2') |
// */
|
||||||
}, |
// Visualizer.prototype.unfade = function() {
|
||||||
|
// this.svg.selectAll('rect')
|
||||||
/** |
// .attr('fill', functi;n fill(d) {
|
||||||
* Updates message in message 3 div. |
// console.log(`unfade ${d.index}`)
|
||||||
*/ |
// return d.fill;
|
||||||
message3: function(message) { |
// })
|
||||||
console.warn('MESSAGE3') |
// };
|
||||||
}, |
|
||||||
|
/** |
||||||
|
* Moves marker 1 to an index and sets its text label. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.marker1 = function(args) { |
||||||
|
var index = args[2]; |
||||||
|
var label = args[3]; |
||||||
|
|
||||||
|
if (label !== undefined) { |
||||||
|
label = label[0].toString(); |
||||||
|
this.svg.select('#marker1 text').text(label) |
||||||
|
} |
||||||
|
|
||||||
|
var x = index * (Visualizer.itemW + Visualizer.spacerW); |
||||||
|
|
||||||
|
this.svg.select('#marker1') |
||||||
|
.transition().duration(300) |
||||||
|
.attr('transform', `translate(${x},0)`) |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Moves marker 2 to an index and sets its text label. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.marker2 = function(args) { |
||||||
|
var index = args[2]; |
||||||
|
var label = args[3]; |
||||||
|
|
||||||
|
if (label !== undefined) { |
||||||
|
label = label[0].toString(); |
||||||
|
this.svg.select('#marker2 text').text(label) |
||||||
|
} |
||||||
|
|
||||||
|
var x = index * (Visualizer.itemW + Visualizer.spacerW); |
||||||
|
|
||||||
|
this.svg.select('#marker2') |
||||||
|
.transition().duration(300) |
||||||
|
.attr('transform', `translate(${x},0)`) |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates message in stats 1 div. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.stats1 = function(args) { |
||||||
|
var msg = args[2]; |
||||||
|
this.parent.querySelectorAll('.stat')[0].innerHTML = msg; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates message in stats 2 div. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.stats2 = function(args) { |
||||||
|
var msg = args[2]; |
||||||
|
this.parent.querySelectorAll('.stat')[1].innerHTML = msg; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates message in message 1 div. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.message1 = function(args) { |
||||||
|
var msg = args[2]; |
||||||
|
this.parent.querySelector('.message:nth-child(2)').innerHTML = msg; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates message in message 2 div. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.message2 = function(args) { |
||||||
|
var msg = args[2]; |
||||||
|
this.parent.querySelector('.message:nth-child(2)').innerHTML = msg; |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* Updates message in message 3 div. |
||||||
|
*/ |
||||||
|
Visualizer.prototype.message3 = function(args) { |
||||||
|
var msg = args[2]; |
||||||
|
this.parent.querySelector('.message:nth-child(3)').innerHTML = msg; |
||||||
}; |
}; |
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,16 @@ |
|||||||
|
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 11, 2015 */ |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@font-face { |
||||||
|
font-family: 'district_prothin'; |
||||||
|
src: url('distproth-webfont.eot'); |
||||||
|
src: url('distproth-webfont.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('distproth-webfont.woff2') format('woff2'), |
||||||
|
url('distproth-webfont.woff') format('woff'), |
||||||
|
url('distproth-webfont.ttf') format('truetype'), |
||||||
|
url('distproth-webfont.svg#district_prothin') format('svg'); |
||||||
|
font-weight: normal; |
||||||
|
font-style: normal; |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue