Commit a197168b authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

Added new bootstrap, added separate stylesheet, added colortheme switching support.

parent 5d03474d
This diff is collapsed.
This diff is collapsed.
.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
svg {
width: 7300px;
height: 1000px;
font: 10px sans-serif;
shape-rendering: crispEdges;
}
#info {
min-width: 400px;
height: auto;
border: 1px solid #ccc;
padding: 15px;
float: right;
position: fixed;
background: white;
moz-box-shadow: 0 0 20px 1px #DDD;
-webkit-box-shadow: 0 0 20px 1px #DDD;
font-size: 24px;
line-height: 140%;
left: 50px;
top: 75px;
}
.legend {
padding: 8px;
border: 1px solid #ccc;
position: fixed;
width: 140px;
background: white;
moz-box-shadow: 0 0 20px 1px #DDD;
-webkit-box-shadow: 0 0 20px 1px #DDD;
left: 50px;
top: 220px;
}
.box {
width: 1em;
height: 1em;
margin-right: 10px;
display: inline;
float: left;
}
.correct3 {
fill: #cccccc;
background: #cccccc;
stroke: #999;
border: #999 1px solid;
}
.wrong3 {
fill: #333;
background: #333;
stroke: #111;
border: 1px solid #111;
}
.inexact {
fill: #ff7f00;
stroke: #b25800;
background: #ff7f00;
border: 1px solid #b25800;
}
.redundant {
fill: #1f78b4;
stroke: #15547d;
background: #1f78b4;
border: 1px solid #15547d;
}
.copy {
padding-left: 20px;
font-style: italic;
color: #DDD;
}
.btnclose {
margin-right: -10px;
}
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>KBP Visualization</title> <title>KBP Visualization</title>
<!-- <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> -->
<!-- <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script> --> <script src="js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.js?1.29.1"></script> -->
<!-- <script type="text/javascript" src="http://mbostock.github.com/d3/d3.csv.js?1.29.1"></script> -->
<script src="js/colorbrewer.js"></script> <script src="js/colorbrewer.js"></script>
<script src="js/d3.v3.min.js"></script> <script src="js/d3.v3.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/dropdown.js"></script> <script src="js/dropdown.js"></script>
<script src="js/jquery-ui.js"></script> <script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/messi.min.css" /> <script src="js/bootstrap.min.js"></script>
<script src="js/messi.js"></script> <script src="js/messi.js"></script>
<style type="text/css">
svg {
width: 7300px;
height: 1000px;
<!-- border: solid 1px #ccc; -->
font: 10px sans-serif;
shape-rendering: crispEdges;
}
#info {
min-width: 400px;
height: auto;
border: 1px solid #ccc;
padding: 15px;
float: right;
position: fixed;
background: white;
<!-- margin: 20px; -->
moz-box-shadow: 0 0 20px 1px #DDD;
-webkit-box-shadow: 0 0 20px 1px #DDD;
font-size: 24px;
line-height: 140%;
left: 50px;
top: 75px;
}
.legend {
padding: 8px;
border: 1px solid #ccc;
position: fixed;
width: 140px;
background:white;
moz-box-shadow: 0 0 20px 1px #DDD;
-webkit-box-shadow: 0 0 20px 1px #DDD;
left: 50px;
top: 220px;
}
div.box {
width: 30px;
height: 30px;
margin-right: 10px;
display: inline;
float:left;
}
.wrong {
fill: #e31a1c;
stroke: #9e1213;
background: #e31a1c;
border: #9e1213 1px solid;
}
.correct {
fill: #33a02c;
stroke: #23701e;
background: #33a02c;
border: 1px solid #23701e;
}
.inexact {
fill: #ff7f00;
stroke: #b25800;
background: #ff7f00;
border: 1px solid #b25800;
}
.redundant {
fill: #1f78b4;
stroke: #15547d;
background: #1f78b4;
border: 1px solid #15547d;
}
.copy {
padding-left: 20px;
font-style:italic;
color:#DDD;
}
.btnclose {
margin-right:-10px;
}
</style>
<script>
$(function() {
$( ".info" ).draggable();
});
$(function() {
$( ".legend").draggable();
});
</script>
</head>
<body>
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<!-- <div class="container"> -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">KBP Visualization</a>
<span style="padding-left:30px">Choose data source:</span>
<select id="selectDataBox" class="dropdown" style="vertical-align:center">
<!-- <option value="dummy">Data source...</option> -->
<!-- <option value="union">Union of All Answers</option> -->
<!-- <option value="hits">HITS</option> -->
<!-- <option value="voting">Voting</option> -->
<!-- <option value="bp">BP</option> -->
<!-- <option value="pagerank">PageRank</option> -->
<!-- <option value="random">Random</option> -->
<!-- <option value="investment">Investment</option> -->
<!-- <option value="averagelog">Average-Log</option> -->
</select>
<button class="btn btnclose" id="sortbutton">Sort Columns</button>
<select id="selectBox" class="dropdown" style="vertical-align:center">
<option value="query">Query</option>
<option value="slot">Slot</option>
<option value="numAns">Num Answers</option>
<option value="numCorrect">Num Correct</option>
</select>
<button class="btn" id="upbutton">Systems Up</button>
<button class="btn" id="downbutton">Systems Down</button>
<!-- <a href="#" id="simple">Help</a> -->
<a href="#" style="margin-left:5px"><span id="simple" class="label label-info">What is this?</span></a>
</div>
</div>
<link rel="stylesheet" href="css/jquery-ui.css" />
<div id="info" class="info"> <link rel="stylesheet" href="css/bootstrap.css" />
<b>System:</b> <span id="system"></span><br> <link rel="stylesheet" href="css/messi.min.css" />
<b>Claim:</b> <span id="claim"></span><br> <link rel="stylesheet" href="css/font-awesome.min.css">
<b>Answer:</b> <span id="answer"></span> <link rel="stylesheet" href="css/style.css"/>
<link id="colorscheme" rel="stylesheet" href="css/scheme1.css"/>
<script>
</script>
</head>
<body>
<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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">KBP Visualization</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-left">
<select id="selectDataBox" class="dropdown form-control">
<!-- automatically populated from filelist.json -->
</select>
<div class="form-group" style="margin-left: 20px">
<select id="selectBox" class="form-control" disabled>
<option value="query">Query</option>
<option value="slot">Slot</option>
<option value="numAns">Num Answers</option>
<option value="numCorrect">Num Correct</option>
</select>
</div>
<button type="button" class="btn btn-default btnclose" id="sortbutton" disabled>Sort Columns</button>
</form>
<form class="navbar-form navbar-left">
<button type="button" class="btn btn-default" id="togglebutton" disabled><i class="fa fa-th"></i> To
Matrix
</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 class="divider"></li>
<li><a href="#"><span id="simple"><i class="fa fa-info-circle"></i> What is this?</span></a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- <a href="#" id="simple">Help</a> -->
<!-- -->
</div> </div>
</div>
<!-- <div class="legend"> -->
<!-- <table> -->
<!-- <tr> --> <div id="info" class="info">
<!-- <td><b>Legend:</b></td> --> <b>System:</b> <span id="system"></span><br>
<!-- </tr> --> <b>Claim:</b> <span id="claim"></span><br>
<!-- <tr> --> <b>Answer:</b> <span id="answer"></span>
<!-- <td><div class="box correct"></div> Correct </td> --> </div>
<!-- </tr> -->
<!-- <tr> --> <!-- <div class="legend"> -->
<!-- <td><div class="box inexact"></div> Inexact </td> --> <!-- <table> -->
<!-- </tr> --> <!-- <tr> -->
<!-- <tr> --> <!-- <td><b>Legend:</b></td> -->
<!-- <td><div class="box redundant"></div> Redundant </td> --> <!-- </tr> -->
<!-- </tr> --> <!-- <tr> -->
<!-- <tr> --> <!-- <td><div class="box correct"></div> Correct </td> -->
<!-- <td><div class="box wrong"></div> Wrong </td> --> <!-- </tr> -->
<!-- </tr> --> <!-- <tr> -->
<!-- </table> --> <!-- <td><div class="box inexact"></div> Inexact </td> -->
<!-- </div> --> <!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box redundant"></div> Redundant </td> -->
<!-- </tr> -->
<script type="text/javascript" src="vis.js"></script> <!-- <tr> -->
<!-- <td><div class="box wrong"></div> Wrong </td> -->
</body> <!-- </tr> -->
<!-- </table> -->
<!-- </div> -->
<script type="text/javascript" src="vis.js"></script>
</body>
</html> </html>
d3.json("filelist.json", function(error, folderList){
var listItems = "<option value='dummy'>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);
});
// this is not used anywhere.
var w = 4300, var w = 4300,
h = 800, h = 800,
...@@ -13,7 +15,9 @@ vertlines = d3.scale.ordinal().rangeRoundBands([0, w]); //- p[1] - p[3]]), ...@@ -13,7 +15,9 @@ vertlines = d3.scale.ordinal().rangeRoundBands([0, w]); //- p[1] - p[3]]),
function numOnes(dict){ function numOnes(dict){
var sum= 0; var sum= 0;
for (var key in dict){ for (var key in dict){
if (key == "slot"){continue}; if (key == "slot") {
continue
}
sum += parseInt(dict[key]); sum += parseInt(dict[key]);
} }
return sum; return sum;
...@@ -74,20 +78,19 @@ function range(start, stop, step){ ...@@ -74,20 +78,19 @@ function range(start, stop, step){
// one param defined // one param defined
stop = start; stop = start;
start = 0; start = 0;
}; }
if (typeof step=='undefined'){ if (typeof step=='undefined'){
step = 1; step = 1;
}; }
if ((step>0 && start>=stop) || (step<0 && start<=stop)){ if ((step>0 && start>=stop) || (step<0 && start<=stop)){
return []; return [];
}; }
var result = []; var result = [];
for (var i=start; step>0 ? i<stop : i>stop; i+=step){ for (var i=start; step>0 ? i<stop : i>stop; i+=step){
result.push(i); result.push(i);
}; }
return result; return result;
}; }
var svg = d3.select("body").append("svg:svg") var svg = d3.select("body").append("svg:svg")
.attr("width", w) .attr("width", w)
.attr("height", h) .attr("height", h)
...@@ -197,8 +200,8 @@ d3.csv("mycsv.csv", function(data) { ...@@ -197,8 +200,8 @@ d3.csv("mycsv.csv", function(data) {
} }
function clear(d,i){ function clear(d,i){
d3.select("#info #system").text("") d3.select("#info #system").text("");
d3.select("#info #claim").text("") d3.select("#info #claim").text("");
// d3.select(this) // d3.select(this)
// .style("fill", z(i)); // .style("fill", z(i));
...@@ -314,7 +317,9 @@ d3.csv("mycsv.csv", function(data) { ...@@ -314,7 +317,9 @@ d3.csv("mycsv.csv", function(data) {
function transitionStacked() { function transitionStacked() {
var t = svg.transition().duration(750), var t = svg.transition().duration(750),
g = t.selectAll(".system").attr("transform", "translate(0,0)"); g = t.selectAll(".system").attr("transform", "translate(0,0)");
g.selectAll("rect").attr("y", function(d) { return -rectheight*(d.y0) - rectheight*(d.y); }) g.selectAll("rect").attr("y", function (d) {
return -rectheight * (d.y0) - rectheight * (d.y);
});
d3.selectAll(".rule").style("visibility", "visible"); d3.selectAll(".rule").style("visibility", "visible");
} }
......
...@@ -3,6 +3,34 @@ ...@@ -3,6 +3,34 @@
return a; return a;
};*/ };*/
$(function () {
$(".info").draggable();
});
$(function () {
$(".legend").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);
});
// for changing the color scheme
$('a.color').click(function (e) {
e.preventDefault();
var newscheme = "css/" + $(this).attr('id') + ".css";
console.log(newscheme);
$("link#colorscheme").attr("href", newscheme);
return false;
});
$("#selectDataBox").change(dd); $("#selectDataBox").change(dd);
...@@ -11,6 +39,10 @@ function dd() { ...@@ -11,6 +39,10 @@ function dd() {
var strVal = e.options[e.selectedIndex].value; var strVal = e.options[e.selectedIndex].value;
console.log(strVal); console.log(strVal);
$("#selectBox").prop("disabled", false);
$("#sortbutton").prop("disabled", false);
$("#togglebutton").prop("disabled", false);
var filename; var filename;
if (strVal === "dummy"){ if (strVal === "dummy"){
return; return;
...@@ -39,7 +71,9 @@ function dd() { ...@@ -39,7 +71,9 @@ function dd() {
function numOnes(dict){ function numOnes(dict){
var sum= 0; var sum= 0;
for (var key in dict){ for (var key in dict){
if (key == "slot"){continue}; if (key == "slot") {
continue
}
// sum += parseInt(dict[key]); // sum += parseInt(dict[key]);
sum += yesorno(dict[key]); sum += yesorno(dict[key]);
} }
...@@ -144,20 +178,19 @@ function dd() { ...@@ -144,20 +178,19 @@ function dd() {
// one param defined // one param defined
stop = start; stop = start;
start = 0; start = 0;
}; }
if (typeof step=='undefined'){ if (typeof step=='undefined'){
step = 1; step = 1;
}; }
if ((step>0 && start>=stop) || (step<0 && start<=stop)){ if ((step>0 && start>=stop) || (step<0 && start<=stop)){
return []; return [];
}; }
var result = [];