Added spinner icon, cleaned up javascript

css/scheme1.css

-.correct {
-    fill: #33a02c;
-    background: #33a02c;
-    stroke: #23701e;
-    border: 1px solid #23701e;
-}
-
-.wrong {
-    fill: #e31a1c;
-    background: #e31a1c;
-    stroke: #9e1213;
-    border: #9e1213 1px solid;
-}
\ No newline at end of file

css/scheme2.css

-.correct {
-    fill: #2c33a0;
-    background: #2c33a0;
-    stroke: #272D90;
-    border: 1px solid #272D90;
-}
-
-.wrong {
-    fill: #e31a1c;
-    background: #e31a1c;
-    stroke: #9e1213;
-    border: #9e1213 1px solid;
-}
\ No newline at end of file

css/style.css

+body{
+    padding-top: 100px;
+}
+
 svg {
-    width: 7300px;
-    height: 1000px;
+    /*width: 7300px;*/
+    /*height: 1000px;*/
     font: 10px sans-serif;
     shape-rendering: crispEdges;
 }
@@ -22,6 +26,18 @@ svg {
 
 }
 
+/* overrides bootstrap! */
+.dropdown-menu > li > p {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+    margin: 0;
+}
+
 .legend {
     padding: 8px;
     border: 1px solid #ccc;
@@ -35,12 +51,48 @@ svg {
 
 }
 
+.selected {
+    background: #dcdcdc;
+}
+
+p.color:hover {
+    background: #f5f5f5;
+    cursor: pointer;
+}
+
 .box {
     width: 1em;
     height: 1em;
     margin-right: 10px;
-    display: inline;
-    float: left;
+    display: inline-block;
+}
+
+.correct1 {
+    fill: #33a02c;
+    background: #33a02c;
+    stroke: #23701e;
+    border: 1px solid #23701e;
+}
+
+.wrong1 {
+    fill: #e31a1c;
+    background: #e31a1c;
+    stroke: #9e1213;
+    border: #9e1213 1px solid;
+}
+
+.correct2 {
+    fill: #2c33a0;
+    background: #2c33a0;
+    stroke: #272D90;
+    border: 1px solid #272D90;
+}
+
+.wrong2 {
+    fill: #e31a1c;
+    background: #e31a1c;
+    stroke: #9e1213;
+    border: #9e1213 1px solid;
 }
 
 .correct3 {
@@ -82,3 +134,10 @@ svg {
 .btnclose {
     margin-right: -10px;
 }
+
+#spinnerdiv {
+    /*display: none;*/
+    position: fixed;
+    top: 50%;
+    left: 50%;
+}
\ No newline at end of file

index.html

@@ -9,19 +9,14 @@
     <script src="js/jquery-ui.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/messi.js"></script>
+    <script type="text/javascript" src="js/vis_common.js"></script>
+    <script type="text/javascript" src="vis.js"></script>
 
     <link rel="stylesheet" href="css/jquery-ui.css" />
     <link rel="stylesheet" href="css/bootstrap.css" />
     <link rel="stylesheet" href="css/messi.min.css" />
     <link rel="stylesheet" href="css/font-awesome.min.css">
     <link rel="stylesheet" href="css/style.css"/>
-    <link id="colorscheme" rel="stylesheet" href="css/scheme1.css"/>
-
-
-    <script>
-
-
-    </script>
 
 </head>
 
@@ -30,7 +25,6 @@
 <div class="navbar navbar-default navbar-fixed-top">
     <div class="container-fluid">
 
-
         <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                     data-target="#bs-example-navbar-collapse-1">
@@ -66,21 +60,20 @@
                 </button>
                 <!--<button type="button" class="btn btn-default" id="downbutton"><i class="fa fa-bar-chart"></i> To Histogram</button>-->
             </form>
+
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
                             class="fa fa-bars fa-lg" style="vertical-align: middle;"></i></a>
+
                     <ul class="dropdown-menu" role="menu">
-                        <li><a>Color schemes (Correct/Incorrect):</a></li>
-                        <li><a id="scheme1" class="color" href="#"><span class="box correct"></span><span
-                                class="box wrong1"></span>&nbsp;</a></li>
-                        <li><a id="scheme2" class="color" href="#"><span class="box correct"></span><span
-                                class="box wrong2"></span>&nbsp;</a></li>
-                        <li><a id="scheme3" class="color" href="#"><span class="box correct3"></span><span
-                                class="box wrong3"></span>&nbsp;</a></li>
+                        <li><p><b>Color schemes</b></p></li>
+                        <li><p class="color">Color by system</p></li>
+                        <li><p class="color selected">Correct: <span class="box correct1"></span> Incorrect: <span class="box wrong1"></span></p></li>
+                        <li><p class="color">Correct: <span class="box correct2"></span> Incorrect: <span class="box wrong2"></span></p></li>
+                        <li><p class="color">Correct: <span class="box correct3"></span> Incorrect: <span class="box wrong3"></span></p></li>
                         <li class="divider"></li>
-                        <li><a href="#"><span id="simple"><i class="fa fa-info-circle"></i> What is this?</span></a>
-                        </li>
+                        <li><a href="#"><span id="simple"><i class="fa fa-info-circle"></i> What is this?</span></a></li>
                     </ul>
                 </li>
             </ul>
@@ -121,7 +114,9 @@
 <!-- </div> -->
 
 
-<script type="text/javascript" src="vis.js"></script>
+<div id="spinnerdiv"><i id="spinner" class="fa fa-spinner fa-5x"></i></div>
+
+
 
 </body>
 </html>

js/stackindex.js

+// OLD NOT USED!!
 
 // <!-- var parseDate = d3.time.format("%Y-%m").parse, -->
     // <!-- formatYear = d3.format("02d"), -->

js/vis_common.js

+/**
+ * Created by stephen on 3/20/15.
+ */
+function startSpinner() {
+    //$("#spinnerdiv").fadeIn();
+    $("#spinner").addClass("fa-spin");
+}
+
+function stopSpinner() {
+    //$("#spinnerdiv").fadeOut();
+    $("#spinner").removeClass("fa-spin");
+}
+
+function getSelectedClass(){
+    // should only be one selected at a time...
+    var kids = $(".selected").children();
+
+    if(kids.length == 0){
+        var correct_class= "";
+        var wrong_class = "";
+    }else{
+        var correct_class = kids[0].className.split(" ")[1];
+        var wrong_class = kids[1].className.split(" ")[1];
+    }
+
+    return [correct_class, wrong_class];
+};
+
+// used later
+function yesorno(dy){
+    if (dy === "0" || +dy == 0){
+        return 0;
+    }else{
+        return 1;
+    }
+}
+
+function numOnes(dict){
+    var sum= 0;
+    for (var key in dict){
+        if (key == "slot") {
+            continue
+        }
+        // sum += parseInt(dict[key]);
+        sum += yesorno(dict[key]);
+    }
+    return sum;
+}
+
+// This sorts by the number of answers
+function comp(a,b){
+    var num_a = numOnes(a),
+        num_b = numOnes(b);
+
+    if (num_a < num_b){
+        return 1;
+    }
+    if (num_a > num_b){
+        return -1;
+    }
+    return 0;
+}
+
+// This sorts by the number of answers, then by number correct
+function comp2(a,b){
+    var num_a = numOnes(a),
+        num_b = numOnes(b);
+
+    if (num_a < num_b){
+        return 1;
+    }
+    if (num_a > num_b){
+        return -1;
+    }
+    return compByCorrect(a,b);
+}
+
+
+
+function numCorrect(dict){
+    var sum = 0;
+    for (var key in dict){
+        if (key == "slot"){continue}
+        var firstChar = dict[key].charAt(0);
+        if (firstChar == "C"){
+            sum += 1;
+        }
+    }
+    return sum;
+}
+
+function compByCorrect(a,b){
+    var num_a = numCorrect(a),
+        num_b = numCorrect(b);
+
+    if (num_a < num_b){
+        return 1;
+    }
+    if (num_a > num_b){
+        return -1;
+    }
+    return comp(a, b);
+}
+
+
+function getSlot(dict){
+    for (var key in dict){
+        if (key == "slot"){
+            return dict[key];
+        }
+    }
+    return null;
+}
+
+// This compares by SF_ENG_062...
+function compByQuery(a,b){
+    var query_a = getSlot(a).split(":").slice(0,1),
+        query_b = getSlot(b).split(":").slice(0,1);
+
+    if (query_a < query_b){
+        return 1;
+    }
+    if (query_a > query_b){
+        return -1;
+    }
+    return comp(a,b);
+}
+
+// This compares by org:founder...
+function compBySlot(a,b){
+    var slot_a = getSlot(a).split(":").slice(1).join(":") ,
+        slot_b = getSlot(b).split(":").slice(1).join(":");
+
+    if (slot_a < slot_b){
+        return 1;
+    }
+    if (slot_a > slot_b){
+        return -1;
+    }
+    return comp(a,b);
+}
+
+function range(start, stop, step){
+    if (typeof stop=='undefined'){
+        // one param defined
+        stop = start;
+        start = 0;
+    }
+    if (typeof step=='undefined'){
+        step = 1;
+    }
+    if ((step>0 && start>=stop) || (step<0 && start<=stop)){
+        return [];
+    }
+    var result = [];
+    for (var i=start; step>0 ? i<stop : i>stop; i+=step){
+        result.push(i);
+    }
+    return result;
+}
+
+function setClaim(d){
+    d3.select("#info #claim").text(d.x);
+    d3.select("#info #answer").text(d.ans);
+}
+
+function clear(){
+    d3.select("#info #system").text("");
+    d3.select("#info #claim").text("");
+    d3.select("#info #answer").text("");
+}
+
+// return true if the two strings have the same slot
+function slotEqual(s1,s2){
+    var slot1 = s1.split(":").slice(1).join(":") ,
+        slot2 = s2.split(":").slice(1).join(":");
+    return slot1 === slot2;
+}
+
+// return true if the two strings have the same query
+function queryEqual(s1, s2){
+    var slot1 = s1.split(":")[0],
+        slot2 = s2.split(":")[0];
+    return slot1 === slot2;
+}
+
+
+

vis.js

-/*window.onbeforeunload = function(a){
-    console.log(a);
-      return a;
- };*/
 
-$(function () {
+
+// everything that needs to be loaded at the beginning goes here.
+$( document ).ready(function() {
+    // This makes the info box draggable.
     $(".info").draggable();
-});
 
-$(function () {
-    $(".legend").draggable();
-});
+    $("#selectDataBox").change(updateSVG);
 
-d3.json("filelist.json", function (error, folderList) {
+    // This populates the data box from the filelist.json file
+    d3.json("filelist.json", function (error, folderList) {
         var listItems = "<option value='dummy'>Select data source...</option>";
         for (var i = 0; i < folderList.Table.length; i++) {
             listItems += "<option value='" + folderList.Table[i].name + "'>" + folderList.Table[i].name.slice(0, -4) + "</option>";
-        //listItems += "<option value='" + folderList.Table[i].name + "'>" + BLah Bla + "</option>";
         }
         d3.select("#selectDataBox").html(listItems);
-});
-
+    });
 
 // for changing the color scheme
-$('a.color').click(function (e) {
-    e.preventDefault();
+    $('p.color').click(function() {
+        $(".color").removeClass("selected");
+        $(this).addClass("selected");
+
+        var cc = getSelectedClass();
+
+        $(".correct").attr("class", "correct " + cc[0]);
+        $(".wrong").attr("class", "wrong " + cc[1]);
+
+    });
+
+    $("#simple").on("click", function() {
+        new Messi("<h2>What is this?</h2> \
+<p>This is a visualization of KBB Slot Filling Validation data. Each rectangle represents an answer to a given slot returned by a given system. You can see which system and which slot is represented by a given rectangle by mousing over it. In this incarnation, we do not include the answer string, but only the binary presence of an answer. \
+<p>You can drag the system/claim box. \
+<p>There are three sorting methods: \
+<ul>\
+<li><b>Sort by query</b>: this groups columns by query (as in, SFV_X_XX). Vertical lines are drawn to demarcate separation between groups. </li>\
+<li><b>Sort by slot</b>: this groups columns by slot (as in, org:date_dissolved). As above, vertical lines are drawn.</li>\
+<li><b>Sort by number of answers by slot</b>: this sorts columns by number of answers</b></li>\
+</ul>\
+<p>Press 'Systems Up' to see each rectangle from a given system drawn in a line. Press 'Systems Down' to reset the layout.\
+<p>Note that the visualization extends to the right for some distance.\
+");
+    });
 
-    var newscheme = "css/" + $(this).attr('id') + ".css";
-    console.log(newscheme);
 
-    $("link#colorscheme").attr("href", newscheme);
-    return false;
 });
 
-$("#selectDataBox").change(dd);
+function updateSVG() {
 
-function dd() {
+    startSpinner();
     var e = document.getElementById("selectDataBox");
     var strVal = e.options[e.selectedIndex].value;
     console.log(strVal);
 
-    $("#selectBox").prop("disabled", false);
-    $("#sortbutton").prop("disabled", false);
-    $("#togglebutton").prop("disabled", false);
+
 
     var filename;
     if (strVal === "dummy"){
@@ -59,138 +71,6 @@ function dd() {
         y1 = d3.scale.linear();
     vertlines = d3.scale.ordinal().rangeBands([0, w- p[1] - p[3]], 0, 10);
 
-    // used later
-    function yesorno(dy){
-        if (dy === "0" || +dy == 0){
-            return 0;
-        }else{
-            return 1;
-        }
-    }
-
-    function numOnes(dict){
-        var sum= 0;
-        for (var key in dict){
-            if (key == "slot") {
-                continue
-            }
-            // sum += parseInt(dict[key]);
-            sum += yesorno(dict[key]);
-        }
-        return sum;
-    }
-
-    // This sorts by the number of answers
-    function comp(a,b){
-        var num_a = numOnes(a),
-        num_b = numOnes(b);
-
-        if (num_a < num_b){
-            return 1;
-        }
-        if (num_a > num_b){
-            return -1;
-        }
-        return 0;
-    }
-
-    // This sorts by the number of answers, then by number correct
-    function comp2(a,b){
-        var num_a = numOnes(a),
-        num_b = numOnes(b);
-
-        if (num_a < num_b){
-            return 1;
-        }
-        if (num_a > num_b){
-            return -1;
-        }
-        return compByCorrect(a,b);
-    }
-
-    
-
-    function numCorrect(dict){
-        var sum = 0;
-        for (var key in dict){
-            if (key == "slot"){continue}
-            var firstChar = dict[key].charAt(0);
-            if (firstChar == "C"){
-                sum += 1;
-            }   
-        }
-        return sum;
-    }
-
-    function compByCorrect(a,b){
-        var num_a = numCorrect(a),
-        num_b = numCorrect(b);
-
-        if (num_a < num_b){
-            return 1;
-        }
-        if (num_a > num_b){
-            return -1;
-        }
-        return comp(a, b);
-    }
-        
-
-    function getSlot(dict){
-        for (var key in dict){
-            if (key == "slot"){
-                return dict[key];
-            }
-        }
-        return null;
-    }
-
-    // This compares by SF_ENG_062...
-    function compByQuery(a,b){
-        var query_a = getSlot(a).split(":").slice(0,1),
-        query_b = getSlot(b).split(":").slice(0,1);
-        
-        if (query_a < query_b){
-            return 1;
-        }
-        if (query_a > query_b){
-            return -1;
-        }
-        return comp(a,b);
-    }
-
-    // This compares by org:founder...
-    function compBySlot(a,b){
-        var slot_a = getSlot(a).split(":").slice(1).join(":") ,
-        slot_b = getSlot(b).split(":").slice(1).join(":");
-
-        if (slot_a < slot_b){
-            return 1;
-        }
-        if (slot_a > slot_b){
-            return -1;
-        }
-        return comp(a,b);
-    }
-
-    function range(start, stop, step){
-        if (typeof stop=='undefined'){
-            // one param defined
-            stop = start;
-            start = 0;
-        }
-        if (typeof step=='undefined'){
-            step = 1;
-        }
-        if ((step>0 && start>=stop) || (step<0 && start<=stop)){
-            return [];
-        }
-        var result = [];
-        for (var i=start; step>0 ? i<stop : i>stop; i+=step){
-            result.push(i);
-        }
-        return result;
-    }
     d3.select("svg").remove();
     d3.select(".copy").remove();
 
@@ -223,8 +103,6 @@ function dd() {
                 });
             }));
 
-        console.log(systems.length);
-        
         // Compute the x-domain (by date) and y-domain (by top).
         x.domain(systems[0].map(function(d) { return d.x; }));
         vertlines.domain(range(0,data.length));
@@ -236,6 +114,8 @@ function dd() {
 
         var rectheight = 15;
 
+        console.log((systems.length+6)*rectheight);
+
         // Add y-axis rules ------------------------------
         var rule = svg.selectAll("g.rule")
             .data(yscale.ticks(10))
@@ -262,23 +142,27 @@ function dd() {
             .attr("class", "system")
             .style("fill", function(d, i) { return z(i); })
             .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); })