Line Chart with a calculated discrete dimension feeding the color role

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"], function(pvc, def) {
    new pvc.DotChart({
        canvas: "cccExample",
        width:  600,
        height: 500,
        title:  "Line Chart with a calculated discrete dimension feeding the color role",
        legend:     true,
        legendPosition: 'right',
        animate:    true,
        selectable: true,
        hoverable:  true,
        axisGrid:   false,
        stacked: true,
        linesVisible: true,
        nullInterpolationMode: 'linear',

        dimensions:{
            bucket: {label: "Value Category"}
        },
        colorMap: {
            small:  'green',
            medium: 'yellow',
            large:  'red'
        },
        calculations: [{
            names: 'bucket', 
            calculation: function(datum, outAtoms) {
                var v = datum.atoms.value.value;
                outAtoms.bucket = 
                       (v <= 20) ? 'small'  :
                       (v <= 60) ? 'medium' :
                       'large';
            }
        }],
        colorRole: "bucket",

        extensionPoints: {
          line_interpolate: 'cardinal',
          area_interpolate: 'cardinal',
          axisGrid_strokeStyle: 'lightgray'
        }
    })
    .setData(relational_04, { crosstabMode: false })
    .render();
});