Create a discrete legend

Hi, Kevin,

I guess you need what is termed an annotaded lookup table. Here is how I do it in C++:

    //table color indexes must go from 0 to greatest category code, without skipping values
    size_t tableSize = greatestCategoryCode + 1;
    vtkSmartPointer<vtkLookupTable> lut = vtkSmartPointer<vtkLookupTable>::New();
    lut->SetNumberOfTableValues(tableSize);

    //assign only the codes defined in the category definition
    //which may be less than the total number of entries in the color table
    //this is a requirement by the way VTK's LUT work for categorical color tables
    for(size_t i = 0; i < tableSize; ++i)
    {
        if( cd->codeExists( i ) ){ //cd is a category definition table object of the application's domain
            double rgb[3];
            QColor color = cd->getCategoryColor( i );
            rgb[0] = color.redF();
            rgb[1] = color.greenF();
            rgb[2] = color.blueF();
            lut->SetTableValue(i, rgb[0], rgb[1], rgb[2], 1.0);
            lut->SetAnnotation(i, cd->getCategoryName( i ) );
        } else { //we can't skip values, so add some default annotation for non-existing codes
            lut->SetTableValue(i, 1.0, 0.0, 1.0, 0.3); //ilegal color codes are rendered as pink transparent.
            lut->SetAnnotation(i, "UNKNOWN CATEGORY" );
        }
    }
    lut->SetNanColor( 1.0, 0.0, 1.0, 0.3 ); //unvalued samples are likewise rendered as pink transparent.
    lut->IndexedLookupOn();
    lut->Build();

I think this is not difficult to port to JavaScript.

I hope this helps,

Paulo