choice click brain dump

A quick and dirty idea for clicking through data points. Expand as needed.

by Jeremy Bolanos

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div id="finderBox">
    <div id="colVendor" class="colBox first"></div>
    <div id="colArea" class="colBox"></div>
</div>
<div id="plotBox">
    <table class="table table-striped table-condensed">
        <thead>
            <tr>
                <th colspan="2">Plot Lines</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 @import url('https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css');
 #finderBox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
    height: 105px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.colBox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    display: block;
    float: left;
    height: 105px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 20%;
}
.colBox.first {
    border-left: none;
}
#finderBox ul {
    margin: 5px 0 0 5px;
    padding: 0;
}
#finderBox li {
    cursor: pointer;
    list-style-type: none;
    margin: 0;
}
#finderBox li.active {
    color: green;
}
#plotBox {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.25);
    display: block;
    font-size: 11px;
    height: 117px;
    margin-top: 8px;
    overflow-y: auto;
    position: relative;
    width: 407px;
}

JavaScript

var byVendors = {
    "levdort": [{
        "region": "Great Plains",
            "area": "Midwest",
            "market": "Rockford",
            "switch": "79"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Chicago",
            "switch": "74"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Chicago",
            "switch": "76"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Chicago",
            "switch": "77"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Des_Moines",
            "switch": "232"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Milwaukee",
            "switch": "80"
    }, {
        "region": "Illinois / Wisconsin",
            "area": "Midwest",
            "market": "Oklahoma",
            "switch": "128"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "Kansas_City",
            "switch": "173"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "Midsouth",
            "switch": "96"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "Midsouth",
            "switch": "97"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "Midsouth",
            "switch": "99"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "St_Louis",
            "switch": "170"
    }, {
        "region": "KS / MO",
            "area": "Midwest",
            "market": "St_Louis",
            "switch": "171"
    }, {
        "region": "MI/IN/KY",
            "area": "Midwest",
            "market": "IN_KY",
            "switch": "13"
    }, {
        "region": "MI/IN/KY",
            "area":...