function BooleanVis(canvas) {
var width = 1000;
var height = 800;
// var color = d3.scale.category20();
var color = d3.scale.linear().domain([-1, 0]).range(['white', 'red']);
var scale = d3.scale.linear().domain([-3, 3]).range([0, 255]);
var startTime = Date.now();
// Duration 4:06
var chanceOfBinary = d3.scale.linear().domain([startTime, startTime + 135000, startTime + 222000, startTime + 223000, startTime + 300000]).range([0, 0, 1, 1, 1]).clamp(true);
var numCirclesScale = d3.scale.linear().domain([startTime, startTime + 135000, startTime + 222000, startTime + 223000, startTime + 300000]).range([0, 0, 5, 0, 0]).clamp(true);
var textScale = d3.scale.linear().domain([startTime, startTime + 135000, startTime + 235000, startTime + 300000]).range([0, 0, 100, 100]).clamp(true);
this.color = d3.scale.category20b();
this.scale = d3.scale.linear().domain([-3, 6]).range([1000, 0]);
this.indexScale = d3.scale.threshold().domain([0, 54000, 70000, 84000, 120000, 154000, 167000, 200000, 230000]).range([0, 3, 10, 40, 10, 1, 60, 20, 10, 10]);
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, this.width, this.height);
// poll()
this.poll = function() {
var me = this;
d3.json('/playbackServer/api/data.json', function(err,json){me.draw(err,json);});
};
this.draw = function(json) {
if(json === undefined) return;
var data = getDataOfSkeleton(json, 0);
// console.log(data);
// data = data.slice(0, 8);
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, width, height);
// ctx.font = '15px sans-serif';
var t = Date.now();
var threshold = numCirclesScale(t);
_.each(data, function(d, index) {
// console.log(index);
if(index > threshold)
return;
var drawAsBinary = Math.random() < chanceOfBinary(t);
if(drawAsBinary) {
var fontSize = Math.random() * textScale(t) + 8;
ctx.font = 'bold ' + fontSize + 'px sans-serif';
var binary = Math.round(scale(d)).toString(2);
_.each(binary, function(bit) {
var x = Math.random() * width;
var y = Math.random() * height;
ctx.fillStyle = bit === '1' ? 'red' : 'white';
ctx.fillText(bit, x, y);
});
} else {
var x = Math.random() * width;
var y = Math.random() * height;
ctx.fillStyle = color(d);
drawCircle(ctx, x, y, 4);
}
});
};
};
// You can choose one of these to visualise a different dance
var DATASET_ALGORITHM = 'https://d10u56tzn9e9rq.cloudfront.net/algorithm_';
var DATASET_BINARY = 'https://d10u56tzn9e9rq.cloudfront.net/binary_';
var DATASET_WHOLEPIECE = 'https://d10u56tzn9e9rq.cloudfront.net/wholepiece_';
var dataFetcher = new ChunkedDataFetcher(DATASET_ALGORITHM);
var boolean = new BooleanVis( document.getElementById('mycanvas'));
dataFetcher.drawFunction = function(json) {boolean.draw(json);
}