Bar chart with Tick Tabs on discrete axis

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) {

  // The base chart definition
  var chartDef = {
      canvas:    "cccExample",
      width:      500,
      height:     400,
      animate:    true,
      clickable:  true,
      selectable: true,
      hoverable:  true,
      legend:     true,
      legendPosition: 'bottom',
      axisGrid:    true,

      // -------

      // Try 'vertical' and 'horizontal'
      //orientation: 'horizontal',
      baseAxisPosition: 'top',

      // If needed, fixate the height/width of the axis
      // baseAxisSize:   30,
      // orthoAxisSize:  30,

      // The space between category bands.
      // panelSizeRatio: 0.6
  };

  // Extend the chart definition.
  addAxisTickTab(chartDef, 'base');

  // Create and render the chart
  new pvc.BarChart(chartDef)
      .setData(relational_04, {crosstabMode: false })
      .render();

  /**
   * This function extends a chart definition so that it 
   * shows tick tabs on the given discrete axis.
   * 
   * @param {Object} cd - the chart definition.
   * @param {String} axisId - the id of a discrete axis.
   *                 Can be "base" or "ortho".
   * @param {Object} [options] - Optional keyword parameters.
   * @param {String} [options.tabColor="rgb(247,243,229)"] - The 
   *                 color of the tabs.
   * @param {String} [options.tabWidthFactor=1] - Specify less 
   *                 than 1 to make the tab width be smaller.
   *
   * @return {Object} the specified chart definition.
   */
  function addAxisTickTab(cd, axisId, options) {
      var axisPosition = cd[axisId + 'AxisPosition'];
      if(!axisPosition) {
          var axisType    = pvc.splitIndexedId(axisId)[0];
          var orientation = cd.orientation || 'vertical';
          var axisOrient  = pvc.visual.CartesianAxis
               .getOrientation(axisType, orientation);
          axisPosition = axisOrient === 'x' ? 'bottom' : 'left';
          cd[axisId +...