Stack d3

by jarandaf

CSS

svg {
    background: grey;
}

JavaScript

var numberOfSlots = 10;
var randomData = d3.range(100).map(function (d) { return Math.random() >= 0.5; });

var margin = {
    top: 20,
    left: 20,
    right: 20,
    bottom: 20
};

var width = 750 - margin.left - margin.right;
var height = 750 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
    .domain(d3.range(2)) // only two values are possible, true or false
    .rangeBands([0, width], 0.1);
console.log('xRangeBand', x.rangeBand());
var y = d3.scale.ordinal()
    .domain(d3.range(numberOfSlots)) // the greater, the higher the chart
    .rangeBands([height, 0], 0.1);
console.log('yRangeBand', y.rangeBand());

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height)
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// First column, positive 
var g1 = svg.append('g')
    .attr('transform', 'translate(' + x(0) + ',0)');
// How many slots?
g1NSlots = Math.floor(randomData.filter(function (d) { return d; }).length/randomData.length*numberOfSlots);
d3.range(g1NSlots).forEach(function (d, i) {
    g1.append('rect')
        .attr('x', 0)
        .attr('y', y(i))
        .attr('width', x.rangeBand())
        .attr('height', y.rangeBand())
        .style('fill', 'green')
        .style('stroke', 'black')
        .style('stroke-width', 1);    
});

// Second column, negative
var g2 = svg.append('g')
    .attr('transform', 'translate(' + x(1) + ',0)');
// How many slots?
g2NSlots = Math.floor(randomData.filter(function (d) { return !d; }).length/randomData.length*numberOfSlots);
d3.range(g2NSlots).forEach(function (d, i) {
    g2.append('rect')
    .attr('x', 0)
    .attr('y', y(i))
    .attr('width', x.rangeBand())
    .attr('height', y.rangeBand())
    .style('fill', 'red')
    .style('stroke', 'black')
    .style('stroke-width', 1);
});