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 {
@@ -81,4 +133,11 @@ 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;
+}
+
+
+