Commit 8a9e02ac authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

Added spinner icon, cleaned up javascript

parent edc54eb3
.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
.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
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
......@@ -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>
// OLD NOT USED!!
// <!-- var parseDate = d3.time.format("%Y-%m").parse, -->
// <!-- formatYear = d3.format("02d"), -->
......
/**
* 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;
}
/*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(); })