Bar Chart with a double-width bar

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.BarChart({
        canvas: "cccExample",
        width:  500,
        height: 400,

        // Data source
        crosstabMode: false,

        // Interaction
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     true,
        
        // Proportion of Band occupied vs free space
        baseAxisBandSizeRatio: 0.6,
        baseAxisTicks: true,
        
        // Plot
        stacked: true,
        barSizeMax: 20,
        
        // The bar_width and bar_left extension points are locked,
        // (meaning they were not prepared to be extended...).
        // So, a _call context is needed to overcome this.
        bar_call: function() {
            this
            .width(function() {
                var w = this.delegate();
                return this.index ? w : 2*w;
            })
            .left(function(scene) {
                // Unfortunately, 
                // need to fix the left position...
                var scale = scene.panel().axes.base.scale;
                return scale(scene.getCategory()) - this.width() / 2;
            });
        }
    })
    .setData(relational_04)
    .render();
});