Population pyramid

http://en.wikipedia.org/wiki/Population_pyramid

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>
<div id="cccExample"></div>

JavaScript

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

    // debug layout
    // def.setDebug(16);
    var valueFormatter = pv.Format.createFormatter(
            pv.Format.number().fractionDigits(0, 2));
    
    var absFormatter = function(v) {
       return valueFormatter(Math.abs(v));
    };

    new pvc.BarChart({
        canvas: 'cccExample',
        width:   500,
        height:  300,
        title:   "Population pyramid",
        orientation: 'horizontal',
        animate:      false,
        legend:       true,
        selectable:   false,
        hoverable:    false,
        stacked:      true,
        barSizeMax:   30,
        orthoAxisOffset: 0.02,
        orthoAxisTickFormatter: absFormatter,
        dimensions: {
            // Hide original value column from the tooltip
            value: {isHidden: true},
            valueSigned: {
                label: "Population",
                valueType: Number,
                formatter: absFormatter
            },
            series: {
                formatter: function(v) {
                    if(v == null) { return v; }
                    switch(v) {
                        case 'M': return "Male";
                        case 'F': return "Female";
                    }
                    return String(v);
                }
            }
        },
        calculations: [
            {
                names: 'valueSigned', 
                calculation: function(datum, out) {
                    var sign = datum.atoms.series.value === 'M' 
                         ? -1 
                         : +1;

                    out.valueSigned = sign * datum.atoms.value.value;
                }
            }
        ],
        valueRole: "valueSigned"
    })
    .setData({
        metadata: [{
            "colIndex": 0,
            "colType": "String",
            "colName": "Gender"
        }, {
            "colIndex": 1,
            "colType": "String",
            "colName":...