Highlighting an interesting section on the Y axis

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

    var _median_ = 55, _band_ = 0.2;

    new pvc.LineChart({
        canvas: "cccExample",
        width:  500,
        height: 400,
        axisGrid:    true,
        extensionPoints: {
          plot_add: function() {
                // Shadow Panel
                return new pv.Panel()
                    .bottom(function() {
                        var orthoScale = this.getContext()
                              .chart.axes.ortho.scale;
                        var bandStart = 
                              orthoScale(_median_ * (1 - _band_));
                        return bandStart;
                    })
                    .height(function() {
                        var orthoScale = this.getContext()
                              .chart.axes.ortho.scale;
                        var bandEnd = 
                              orthoScale(_median_ * (1 + _band_));
                        return bandEnd - this.bottom();
                    })
                    .fillStyle('rgba(0,0,250, 1)');
            }
        }
    })
    .setData(relational_04, {crosstabMode: false })
    .render();
});