Vertical ColorBar

by Nick Karnik

HTML

<button id=toggleLines>Toggle Lines</button>
<br>
<br>
<div id=colorbar class="colorbar">
    <div id="colorpalette" class="colorpalette open">
    </div>
    <svg id="bar" width="50" height="500"></svg>
    <div class=colorbarsettings>
        <button id=btnPallete class=gear>C</button>
        <button id=btnHistogram class=gear>G</button>
    </div>
</div>

CSS

#bar {
    position: absolute;
    right: 0;
    left: auto;
}
.colorbar {
    position: absolute;
    left: auto;
    right: 0;
    border: 1px solid black;
    width: 50px;
    height: 530px;
}
.colorbarsettings {
    position: absolute;
    height: 30px;
    background-color: red;
    bottom: 0;
    top: auto;
    width: 50px;
    right:0;
    left: auto;
}
.colorbarsettings .gear {
    //position: absolute;
    //right: 0;
    margin: 5px;
}
.colorScheme {    
    display: inline-block;
    max-width: 500px;
    text-align: center;
    margin: 10px;
    overflow; hidden;
}
.colorBand {
    text-align: center;
    //padding: 5px;
    color: white;
    font-weight: bold;
    display: inline-block;
    min-width: 1px;
    height: 40px;
    /*border: none;*/
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.colorBand:first-of-type {
    border-left: 1px solid black;
}
.colorBand:last-of-type {
    border-right: 1px solid black;
}
.colorpalette {
    right:50px;
    height: 500px;
    position:absolute;
    border: 1px solid red;
    //overflow:hidden;
    width: 0px;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.open {
    right:50px;
    width: 400px;
    background-color: gray;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

JavaScript

/*var schemes = {
    'DivergingBlue': ["rgb(213,62,79)","rgb(244,109,67)","rgb(253,174,97)","rgb(254,224,139)","rgb(255,255,191)","rgb(230,245,152)","rgb(171,221,164)","rgb(102,194,165)","rgb(50,136,189)"],
    'MultiHueGreen': ["rgb(247,252,253)","rgb(229,245,249)","rgb(204,236,230)","rgb(153,216,201)","rgb(102,194,164)","rgb(65,174,118)","rgb(35,139,69)","rgb(0,109,44)","rgb(0,68,27)"],
    'MultiHueBlue': ["rgb(247,252,240)","rgb(224,243,219)","rgb(204,235,197)","rgb(168,221,181)","rgb(123,204,196)","rgb(78,179,211)","rgb(43,140,190)","rgb(8,104,172)","rgb(8,64,129)"],
    'MultiHueRed': ["rgb(255,247,236)","rgb(254,232,200)","rgb(253,212,158)","rgb(253,187,132)","rgb(252,141,89)","rgb(239,101,72)","rgb(215,48,31)","rgb(179,0,0)","rgb(127,0,0)"],
    'MultiHueCoolBlue': ["rgb(255,247,251)","rgb(236,231,242)","rgb(208,209,230)","rgb(166,189,219)","rgb(116,169,207)","rgb(54,144,192)","rgb(5,112,176)","rgb(4,90,141)","rgb(2,56,88)"],
    'SingleHueOrange': ["rgb(255,245,235)","rgb(254,230,206)","rgb(253,208,162)","rgb(253,174,107)","rgb(253,141,60)","rgb(241,105,19)","rgb(217,72,1)","rgb(166,54,3)","rgb(127,39,4)"],
    'DivergingRedBlue': ["rgb(215,48,39)","rgb(244,109,67)","rgb(253,174,97)","rgb(254,224,139)","rgb(255,255,191)","rgb(217,239,139)","rgb(166,217,106)","rgb(102,189,99)","rgb(26,152,80)"],
    'SingleHueRed': ["rgb(255,245,240)","rgb(254,224,210)","rgb(252,187,161)","rgb(252,146,114)","rgb(251,106,74)","rgb(239,59,44)","rgb(203,24,29)","rgb(165,15,21)","rgb(103,0,13)"],
}*/

var ns = bar.namespaceURI;
var colors = ["red", "blue", "green", "yellow", "orange", "brown", "pink", "gray", "maroon", "lightgray", "gold", "lightblue", "rgb(122,133,444)", "#fff000"];

window.bands = [];

var bandOffset = bar.height.baseVal.value / colors.length;
var bandHeight = (bandOffset * 100) / bar.height.baseVal.value;

var mousedown = false;
var selectedLine = null;

function addBand(color, index) {

    var group = document.createElementNS(ns, "g");

   ...