Bar Chart with Custom Tooltip Showing visual roles

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) {
debugger;
    new pvc.BarChart({
        canvas: "cccExample",
        width:  600,
        height: 400,    
        title: "Bar Chart with Custom Tooltip",
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     true,
        tooltipFormat: function(scene){
            var fix  = def.html.escape;
            var vars = scene.vars;
            return "<div style='text-align:left'>" + 
                     "<b>City</b>: "  + fix(vars.series.label)   + "<br/>" + 
                     "<b>Day</b>: "   + fix(vars.category.label) + "<br/>" + 
                     "<b>Count</b>: " + fix(vars.value.label)    + 
                   "</div>";
        }    
    })
    .setData(relational_01, { crosstabMode: false })
    .render();
});