Skip to content
Snippets Groups Projects
Commit 8a9e02ac authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

Added spinner icon, cleaned up javascript

parent edc54eb3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/scheme1.css deleted 100644 → 0
+ 0
− 13
View file @ 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
css/scheme2.css deleted 100644 → 0
+ 0
− 13
View file @ edc54eb3
.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
+ 63
− 4
View file @ 8a9e02ac
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
+ 13
− 18
View file @ 8a9e02ac
......@@ -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
+ 1
− 0
View file @ 8a9e02ac
// OLD NOT USED!!
// <!-- var parseDate = d3.time.format("%Y-%m").parse, -->
// <!-- formatYear = d3.format("02d"), -->
......
js/vis_common.js 0 → 100644
+ 188
− 0
View file @ 8a9e02ac
/**
* 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
+ 125
− 322
View file @ 8a9e02ac
/*window.onbeforeunload = function(a){
console.log(a);
return a;
};*/
$(function () {
$(".info").draggable();
});
$(function () {
$(".legend").draggable();
});
// everything that needs to be loaded at the beginning goes here.
$( document ).ready(function() {
// This makes the info box draggable.
$(".info").draggable();
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);
});
$("#selectDataBox").change(updateSVG);
// 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>";
}
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"){
return;
}
filename = strVal;
var w = 7300,
h = 1000,
p = [20, 50, 50, 20],
h = 1000,
p = [20, 50, 50, 20],
x = d3.scale.ordinal().rangeBands([0, w - p[1] - p[3]], 0, 10),
y = d3.scale.linear().range([0, h - p[0] - p[2]]),
yscale = d3.scale.linear().range([0, h - p[0] - p[2]]),
......@@ -59,141 +71,9 @@ 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();
var svg = d3.select("body").insert("svg:svg", "div.legend")
.attr("width", w)
.attr("height", h)
......@@ -202,7 +82,7 @@ function dd() {
var copystring = "<div class='copy'>&copy; Stephen Mayhew, 2015</div>";
$(copystring).insertAfter("svg");
// Actually read the data
d3.csv(filename, function(data) {
var syslist = Object.keys(data[0]);
......@@ -212,8 +92,8 @@ function dd() {
var z = d3.scale.ordinal()
.domain(syslist)
.range(colorbrewer.Accent[8]
.concat(colorbrewer.Paired[12])
.concat(colorbrewer.Spectral[7]));
.concat(colorbrewer.Paired[12])
.concat(colorbrewer.Spectral[7]));
// Transpose the data into layers by system.
var systems = d3.layout.stack()(
......@@ -223,11 +103,9 @@ 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));
vertlines.domain(range(0,data.length));
y.domain([0, d3.max(systems[systems.length - 1], function(d) { return d.y0 + yesorno(d.y); })]);
yscale.domain([0, systems.length + 4]);
y0.domain(syslist);
......@@ -236,24 +114,26 @@ 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))
.enter().append("svg:g")
.attr("class", "rule")
.attr("transform", function(d) { return "translate(0," + -rectheight*(d) + ")"; });
rule.append("svg:line")
.attr("x2", w) // - p[1] - p[3])
.style("stroke", "#CCC")
.style("stroke-opacity", function(d) { return d ? .7 : null; });
rule.append("svg:text")
.attr("x", 0) // - p[1] - p[3] + 6)
.attr("dy", ".35em")
.text(d3.format(",d"));
// ---------------------------------------------
// Add a group for each system.
var system = svg.selectAll("g.system")
.data(systems)
......@@ -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(); })
.on("mouseover", setSystem)
.on("mouseover", function(d,i) {d3.select("#info #system").text(syslist[i])})
.on("mouseout", clear)
.on("click", printsysInfo);
.on("click", function(d,i) {console.log(syslist[i])});
// having this out here saves a LOT of time.
// this call is slow.
var cc = getSelectedClass();
function getClass(ansstring){
// console.log(ansstring.slice(0,1));
var char1 = ansstring.slice(0,1);
if (char1 === "C"){
return "correct";
return "correct " + cc[0];
}else if(char1 === "X"){
return "wrong";
return "wrong " + cc[1];
}else if(char1 === "R"){
return "wrong";
return "wrong " + cc[1];
}else{
return "wrong";
return "wrong " + cc[1];
}
}
......@@ -292,118 +176,40 @@ function dd() {
.attr("height", function(d) { return rectheight*(d.y); })
.attr("width", x.rangeBand())
.on("mouseover", setClaim)
.on("mouseout", reset)
.on("click", printinfo);
function setSystem(d, i){
d3.select("#info #system").text(syslist[i]);
}
function printinfo(d,i){
console.log(d.x + " " + d.ans);
}
function printsysInfo(d,i){
console.log(syslist[i]);
}
var offset = 20;
function setClaim(d, i){
d3.select("#info #claim").text(d.x);
d3.select("#info #answer").text(d.ans);
// d3.select(this)
// .attr("x", function(d) { return this.x.baseVal.value - offset/2 })
// .attr("y", function(d) { return this.y.baseVal.value - offset/2 })
// .attr("width", function(d) { return this.width.baseVal.value + offset })
// .attr("height", function(d) { return this.height.baseVal.value + offset }) ;
}
function reset(d,i){
// d3.select(this)
// .attr("x", function(d) { return this.x.baseVal.value + offset/2 })
// .attr("y", function(d) { return this.y.baseVal.value + offset/2 })
// .attr("width", function(d) { return this.width.baseVal.value - offset })
// .attr("height", function(d) { return this.height.baseVal.value - offset }) ;
}
.on("click", function(d){console.log(d.x + " " + d.ans)});
function clear(d,i){
d3.select("#info #system").text("");
d3.select("#info #claim").text("");
d3.select("#info #answer").text("");
// d3.select(this)
// .style("fill", z(i));
function transitionMultiples() {
$("#upbutton").hide(500);
$("#downbutton").show(500);
var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; });
g.selectAll("rect").attr("y", function(d) { return y1(d.y); });
d3.selectAll(".rule").style("visibility", "hidden");
}
// Add a label per slot.
// var label = svg.selectAll("text")
// .data(x.domain())
// .enter().append("svg:text")
// .attr("text-anchor", "end")
// .attr("transform", function(d) { return "translate("+ x(d) +", 6) rotate(-90)"})
// // .attr("dx", "1.2em")
// .attr("dy", "-0.3em")
// .text(String);
$("#sortbutton").on("click", update);
$("#togglebutton").on("click",
function () {
var t = $(this).text();
if (t.indexOf("Matrix") > -1) {
transitionMultiples();
$(this).html("<i class=\"fa fa-bar-chart\"></i> To Histogram");
} else {
transitionStacked();
$(this).html("<i class=\"fa fa-th\"></i> To Matrix");
}
function transitionStacked() {
$("#downbutton").hide(500);
$("#upbutton").show(500);
var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", "translate(0,0)");
g.selectAll("rect").attr("y", function (d) {
return -rectheight * (d.y0) - rectheight * (d.y);
});
d3.selectAll(".rule").style("visibility", "visible");
//d3.select("#downbutton").on("click", transitionStacked);
// get the indices for the line numbers
function getLineLocs(data, equalFunc){
var arr = [0];
for(var i = 0; i < data.length-1; i++){
if (!equalFunc(getSlot(data[i]), getSlot(data[i+1]))){
arr.push(i+1);
}
}
arr.push(data.length);
return arr;
}
// 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;
}
// this is called when the sort button is pressed.
function update(){
d3.selectAll(".vertrule").remove();
var e = document.getElementById("selectBox");
var strVal = e.options[e.selectedIndex].value;
var lines = false;
var linelocations;
if (strVal == "query"){
data.sort(compByQuery);
......@@ -420,79 +226,76 @@ function dd() {
}else{
alert("No good way to sort??");
}
if (lines) {
var rule2 = svg.selectAll("g.vertrule")
.data(linelocations)
.enter().append("svg:g")
.attr("class", "vertrule")
.attr("transform", function(d) { return "translate(" + (vertlines(d)) + ",0)"; });
.attr("transform", function(d) { return "translate(" + (vertlines(d)) + ",0)"; });
rule2.append("svg:line")
.attr("y1", 0)
.attr("y2", -h) // - p[1] - p[3])
.style("stroke", "#CCC")
.style("stroke-opacity", .7);
}
var systems = d3.layout.stack()(syslist.map(function(system) {
return data.map(function(d) {
return {x: d.slot, y: +d[system]};
});
}));
// Compute the x-domain (by date) and y-domain (by top).
x.domain(systems[0].map(function(d) { return d.x; }));
var system = svg.selectAll("g.system");
var rect = system.selectAll("rect")
.data(Object)
//.transition().duration(750) // commented out because it takes too much memory.
//.transition().duration(750) // commented out because it takes too much memory.
.attr("x", function(d) { return x(d.x) } );
}
function transitionMultiples() {
$("#upbutton").hide(500);
$("#downbutton").show(500);
var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; });
g.selectAll("rect").attr("y", function(d) { return y1(d.y); });
d3.selectAll(".rule").style("visibility", "hidden");
}
function transitionStacked() {
$("#downbutton").hide(500);
$("#upbutton").show(500);
var t = svg; //.transition().duration(750),
g = t.selectAll(".system").attr("transform", "translate(0,0)");
g.selectAll("rect").attr("y", function (d) {
return -rectheight * (d.y0) - rectheight * (d.y);
$("#sortbutton").on("click", update);
$("#togglebutton").on("click",
function () {
var t = $(this).text();
if (t.indexOf("Matrix") > -1) {
transitionMultiples();
$(this).html("<i class=\"fa fa-bar-chart\"></i> To Histogram");
} else {
transitionStacked();
$(this).html("<i class=\"fa fa-th\"></i> To Matrix");
}
});
d3.selectAll(".rule").style("visibility", "visible");
stopSpinner();
$("#selectBox").prop("disabled", false);
$("#sortbutton").prop("disabled", false);
$("#togglebutton").prop("disabled", false);
});
}
// get the indices for the line numbers
function getLineLocs(data, equalFunc){
var arr = [0];
for(var i = 0; i < data.length-1; i++){
if (!equalFunc(getSlot(data[i]), getSlot(data[i+1]))){
arr.push(i+1);
}
}
arr.push(data.length);
return arr;
}
$("#simple").on("click", function() {
new Messi("<h2><center>What is this?</center></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.\
");
});
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment