Swapping Bars - d3 with TypeScript by steveharoz

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Swapping Bars</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="main.js"></script>
</head>
<body style="background:black">
    <div id="content"></div>
</body>
</html>

main.js

/// <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

main.ts

/// <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
class Datum {
    value: number;
    range: number;
    width: number;
    angle: number;
    color: string; 
}
var data: Datum[] = [
    { 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: any) {
    selection
        .attr('width',(d, i) => d.width * bar.width)
        .attr('height',(d, i) => d.range * bar.height)
        .attr('fill',(d, i) => d.color)
        .attr('transform',(d, i) =>
            '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 = () => {
    // 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(() => {
        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);
};