Categorical Line chart with band-centered grid lines

HTML

<script src="http://www.webdetails.pt/ctools/charts/lib/protovis.js"></script>
<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.LineChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        title:  "Categorical Line chart with band-centered grid lines",
        animate:    true,
        clickable:  true,
        selectable: true,
        hoverable:  true,
        legend:     true,
        legendPosition: 'right',
        dotsVisible: true,
        baseAxisGrid: true,
        baseAxisGrid_strokeStyle: '#CCC',
        baseAxisGrid_visible: function(scene) {
          return this.index > 0;
        },
        baseAxisGrid_left: function(scene) {
          var halfStep = this.panel.axes.base.scale.range().step / 2;
          return this.delegate() - halfStep;
        },
        baseAxisLabel_textAngle:    Math.PI/4,
        baseAxisLabel_textAlign:    'left',
        baseAxisLabel_textBaseline: 'top'
    })
    .setData(relationalCitiesDaily, {crosstabMode: false })
    .render();
});