What a pain. I've wasted hours trying to take in an index and produce a unique color to go with it. Here, it's to create icons that represent which table, out of over six-thousand, is a particular attribute's origin. It's impossible to come up with 600, much less 6000, easily discernable colors, I think. But this seems to work as well as it's going to without displaying more than one color at a time.

<head>
<script>
function determineViewRGB_stepped(i) {
        var intNum = 10;
        var lumStart = 80;
        var lumStep = 19; // seems about right to ensure all colors
                // are noticeably different from their neighbors in this scale.

        
        var modNum = (i%intNum);
        var divNum = ~~(i/intNum);

        var modDivNumBy6 = (divNum%6)+1;
        var divCntBySteps = ~~(i/ (lumStep+1) );
        
        var int111Iterations = ~~((i)/(intNum*6));

        var intZero = (int111Iterations * lumStep)%256;
        var intValue = ((modNum * lumStep) + lumStart) % 256;

        // console.log('i: ' + i + ' -- modNum: ' + modNum + ' divNum: ' + divNum
        // + ' modDivNumBy6: ' + modDivNumBy6 + ' divCntBySteps: ' + divCntBySteps
        // + ' intZero: ' + intZero
        // + ' int: ' + intZero
        // + ' intCompleteIterations: ' + int111Iterations);

        var intR = intZero;
        var intG = intZero;
        var intB = intZero;

        if (modDivNumBy6 & parseInt("1", 2)) intR = intValue;
        if (modDivNumBy6 & parseInt("10", 2)) intG = intValue;
        if (modDivNumBy6 & parseInt("100", 2)) intB = intValue;

        var strReturn = 'rgb(' + intR + ',' + intG + ',' + intB + ')';


        return strReturn;

}


function createViewIcon(intAttribViewId)        {
        var strReturn = '<span class="circle" style="background:'
                + determineViewRGB_stepped(intAttribViewId) + ';">&nbsp;&nbsp;</span>';

        return strReturn;
}

</script>

<style>
        .circle{
                        width:8px;
                        height:8px;
                        border-radius:4px;
                        font-size:8px;
                        color:black;
                        line-height:8px;
                        text-align:right;
                        float:left;
        }
</style>
</head>
<body>
        <!-- It's close, but I think you can eyeball the difference between
                the first and second circles -->
        <script>
                document.write(createViewIcon(1) + createViewIcon(2)
                        + createViewIcon(400) + createViewIcon(3000));
        </script>
</body>
Just for fun, let's try it out.



EDIT: This apparently doesn't work in IE9 unless you're in IE7 mode. That's no fun. I need to go back to the page where I got the CSS code from, as at first it did work for me in IE9, but I'm not sure what compatibility settings I had going on there.

Labels: ,