/// <reference path="Scripts/typings/d3/d3.d.ts" />
// javascript style declarations:
var chart = {
    width: 960,
    height: 500,
    margins: { x: 300, y: 50 }
};
var bar = {
    width: 55,
    height: 65,
    spacing: 20
};
// animation properties
var animation = {
    duration: 400,
    pauseDuration: 400
};
// simple data to visualize
var Datum = (function () {
    function Datum() {
    }
    return Datum;
})();
var data = [
    { value: 4, range: 1, angle: 45, color: '#377eb8', width: 1 },
    { value: 2, range: 2, angle: 315, color: '#4daf4a', width: 0.6 },
    { value: 5, range: 2, angle: 90, color: '#ff7f00', width: 0.8 },
    { value: 3, range: 1, angle: 180, color: '#e41a1c', width: 0.4 },
    { value: 1, range: 0.5, angle: 225, color: '#984ea3', width: 0.9 },
    { value: 2.5, range: 1, angle: 270, color: '#f781bf', width: 0.7 }
];
// apply settings for the rectangles
// lose type safety and code completion here because Selection and Transition are incompatible (grrr!)
function render(selection) {
    selection.attr('width', function (d, i) { return d.width * bar.width; }).attr('height', function (d, i) { return d.range * bar.height; }).attr('fill', function (d, i) { return d.color; }).attr('transform', function (d, i) { return 'translate(' + [chart.margins.x + i * (bar.width + bar.spacing), -chart.margins.y + chart.height - d.value * bar.height] + ') ' + 'rotate(' + [(d.angle)] + ')' + 'translate(' + [-bar.width / 2, -d.range / 2] + ')'; });
}
window.onload = function () {
    // make the svg
    var svg = d3.select('#content').append('svg');
    svg.attr('width', chart.width).attr('height', chart.height).style('background', 'white');
    // initialize rectangles
    var rects = svg.selectAll('rect').data(data).enter().append('rect');
    render(rects);
    // start timer
    setInterval(function () {
        data = d3.shuffle(data);
        // apply the data to the rectangles
        var rects = svg.selectAll('rect').data(data);
        // create rectangles that were added
        render(rects.enter().append('rect'));
        // update rectangles that changed
        render(rects.transition().duration(animation.duration));
        // remove deleted rectangles
        rects.exit().remove();
    }, animation.duration + animation.pauseDuration);
};
//# sourceMappingURL=main.js.map