Line chart with active-category-awareness

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.LineChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        title:  "Line chart with active-category-awareness",
        legend:     true,
        animate:    true,
        selectable: true,
        hoverable:  false,
        axisGrid:   true,
        dotsVisible:  true,
        stacked:    true,
        pointingMode: 'over', // legacy mode
        nullInterpolationMode: 'linear',
        extensionPoints: {
            "base_events": 'all',
            "base_event": [
                ['mousemove', (function() {
                    // Adapt ccc -> protovis signature
                    var point = pv.Behavior.point(Infinity)
                        .collapse('y');
                    return function() { 
                        return point.call(this.pvMark, pv.event); 
                    };
                })()]
            ],
            "dot_event": [
                ['point', function(s) {
                    var cat = s.vars.category.value;
                    if(cat !== this.chart.myActiveCategory) {
                        this.chart.myActiveCategory = cat;
                        renderInteractive(this.chart);
                    }
                }],
                ['unpoint', function(s) {
                    this.chart.myActiveCategory = null;
                    renderInteractive(this.chart);
                }]
            ],
            "dot_shapeSize": function(s) {
                var cat = s.vars.category.value;
                return cat === this.chart.myActiveCategory
                    ? this.delegate()
                    : 0;
            },

            // Vertical grid over horizontal
            "baseAxisGrid_zOrder": -11,
            "baseAxisGrid_visible": function(s) {
                return this.pvMark.index <
                    s.parent.childNodes.length;
            },
            "baseAxisGrid_left":...