simple moving stacked charts

_.md

[ Launch: stacked charts ] 5504342 by enoex

config.json

{"description":"simple moving stacked charts","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

//---------------------------------------
//Some config vars
//---------------------------------------
var DURATION = 1500;
var width = 890,
    height = 420;

//---------------------------------------
//Setup svg
//---------------------------------------
var svg = d3.select('svg')
    .append('g');

//---------------------------------------
//Setup scales
//---------------------------------------
var stackObject1 = {
    group: svg.append('svg:g').attr({
        'class': 'group1'
    }),
    width: 400
};
var stackObject2 = {
    group: svg.append('svg:g').attr({
        'class': 'group2',
        transform: 'translate(0, 210)'
    }),
    width: 400
};

//---------------------------------------
//Update / Draw stacked bar
//---------------------------------------
function update(stackObject, data) {
    var barHeight = 200;
    var xScale = d3.scale.ordinal()
        .rangeRoundBands([0, width], 0.1);
    var yScale = d3.scale.linear()
        .rangeRound([height, 0]);
    var color = d3.scale.category20c();
    var stackGroup = stackObject.group;

    color.domain(d3.keys(data[0]));
    //Setup stacked data
    data.forEach(function(d) {
        var y0 = 0;
        d.policies = color.domain().map(function(name) { 
            return {
                name: name, 
                y0: y0, 
                y1: y0 += +d[name]
            }; 
        });
        d.total = d.policies[d.policies.length - 1].y1;
    });
    data.sort(function(a, b) { return b.total - a.total; });

    xScale.domain(d3.range(data.length));
    yScale.domain([0, d3.max(data, function(d) { return d.total; })]);

    // DATA JOIN
    // Join new data with old elements, if any.
    console.log(stackGroup);

    var policy = stackGroup.selectAll('.policy')
        .data(data[0].policies);

    //flip it
    //stackGroup.attr({ transform: 'translate(' + [width, 0] + ') scale(-1 1)' });

    //enter
    policy.enter().append('rect').attr({
        'class': 'policy',
        'y': 0,
        'height': barHeight
        //'height': 0
    }).style({
        opacity: 1
    }).on('mouseover', function(d,i){
        d3.select(this).style({
            fill: '#336699' 
        });
        console.log(d, i);
    }).on('mouseout', function(d,i){
        d3.select(this).style({
            fill: color(d.name)
        });
    });

    //update
    policy.style({
            opacity: 1,
            'fill': function(d,i) { return color(d.name); }
        })
        .transition()
        .duration(DURATION)
            .attr({
                'height': barHeight,
                'x': function(d) { return yScale(d.y1); },
                'width': function(d) { return yScale(d.y0) - yScale(d.y1); }
            });

    //EXIT
    policy.exit()
        .transition()
        .duration(DURATION)
        .attr({
            'width': function(d) { 
                return 0;
            },
            'x': function(d) { 
                return 0;
            }
        }).style({
            opacity: 0.1
        })
        .remove();
}

// The initial display.
update(stackObject1,
    [{
        a: 310504,
        b: 552339,
        d: 259034,
        e: 450818,
        f: 1231572,
        g: 1215966
    }]
);
update(stackObject2,
    [{
        a: 310504,
        b: 552339,
        d: 259034,
        e: 450818,
        f: 1231572,
        g: 1215966
    }]
);

//Draw and update two bars
setInterval(function(){
    var data = [{}];
    var alphabet = 'abcdefghijklmnopqrstuvwxyz';

    for(i=0; i < Math.random() * 26 | 0;i++){
        data[0][alphabet[i]] = Math.random() * 1000 | 0;
    }
    update(
        stackObject2,
        _.clone(data)
    );
}, DURATION + 300);

setInterval(function(){
    var data = [{}];
    var alphabet = 'abcdefghijklmnopqrstuvwxyz';

    for(i=0; i < Math.random() * 26 | 0;i++){
        data[0][alphabet[i]] = Math.random() * 1000 | 0;
    }
    update(
        stackObject1,
        _.clone(data)
    );
}, DURATION + 300);