Skip to content
GitLab
Commit a197168b authored by Stephen Mayhew's avatar Stephen Mayhew
Browse files

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

parent 5d03474d
Hide whitespace changes
Inline Side-by-side
css/bootstrap.css 100755 → 100644
View file @ a197168b
This source diff could not be displayed because it is too large. You can view the blob instead.
css/bootstrap.min.css 100755 → 100644
View file @ a197168b
This source diff could not be displayed because it is too large. You can view the blob instead.
css/scheme1.css 0 → 100644
View file @ a197168b
.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 0 → 100644
View file @ a197168b
.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 0 → 100644
View file @ a197168b
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
index.html
View file @ a197168b
<!DOCTYPE html>
<html>
<head>
<head>
<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 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/jquery-1.9.1.min.js"></script>
<script src="js/colorbrewer.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/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>
<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>
<div id="info" class="info">
<b>System:</b> <span id="system"></span><br>
<b>Claim:</b> <span id="claim"></span><br>
<b>Answer:</b> <span id="answer"></span>
<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>
<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 class="legend"> -->
<!-- <table> -->
<!-- <tr> -->
<!-- <td><b>Legend:</b></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box correct"></div> Correct </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box inexact"></div> Inexact </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box redundant"></div> Redundant </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box wrong"></div> Wrong </td> -->
<!-- </tr> -->
<!-- </table> -->
<!-- </div> -->
<script type="text/javascript" src="vis.js"></script>
</body>
</div>
<div id="info" class="info">
<b>System:</b> <span id="system"></span><br>
<b>Claim:</b> <span id="claim"></span><br>
<b>Answer:</b> <span id="answer"></span>
</div>
<!-- <div class="legend"> -->
<!-- <table> -->
<!-- <tr> -->
<!-- <td><b>Legend:</b></td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box correct"></div> Correct </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box inexact"></div> Inexact </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box redundant"></div> Redundant </td> -->
<!-- </tr> -->
<!-- <tr> -->
<!-- <td><div class="box wrong"></div> Wrong </td> -->
<!-- </tr> -->
<!-- </table> -->
<!-- </div> -->
<script type="text/javascript" src="vis.js"></script>
</body>
</html>
js/dropdown.js
View file @ a197168b
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);
});
js/vis.js
View file @ a197168b
// this is not used anywhere.
var w = 4300,
h = 800,
......@@ -13,7 +15,9 @@ vertlines = d3.scale.ordinal().rangeRoundBands([0, w]); //- p[1] - p[3]]),
function numOnes(dict){
var sum= 0;
for (var key in dict){
if (key == "slot"){continue};
if (key == "slot") {
continue
}
sum += parseInt(dict[key]);
}
return sum;
......@@ -74,20 +78,19 @@ function range(start, stop, step){
// 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;
};
}
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
......@@ -197,8 +200,8 @@ d3.csv("mycsv.csv", function(data) {
}
function clear(d,i){
d3.select("#info #system").text("")
d3.select("#info #claim").text("")
d3.select("#info #system").text("");
d3.select("#info #claim").text("");
// d3.select(this)
// .style("fill", z(i));
......@@ -314,7 +317,9 @@ d3.csv("mycsv.csv", function(data) {
function transitionStacked() {
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); })
g.selectAll("rect").attr("y", function (d) {
return -rectheight * (d.y0) - rectheight * (d.y);
});
d3.selectAll(".rule").style("visibility", "visible");
}
......
vis.js
View file @ a197168b
......@@ -3,6 +3,34 @@
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);
......@@ -11,6 +39,10 @@ function dd() {
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;
......@@ -39,7 +71,9 @@ function dd() {
function numOnes(dict){
var sum= 0;
for (var key in dict){
if (key == "slot"){continue};
if (key == "slot") {
continue
}
// sum += parseInt(dict[key]);
sum += yesorno(dict[key]);
}
......@@ -144,20 +178,19 @@ function dd() {
// 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();
......@@ -167,7 +200,7 @@ function dd() {
.append("svg:g")
.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
var copystring = "<div class='copy'>&copy; ???, 2015</div>";
var copystring = "<div class='copy'>&copy; Stephen Mayhew, 2015</div>";
$(copystring).insertAfter("svg");
// Actually read the data
......@@ -241,14 +274,13 @@ function dd() {
if (char1 === "C"){
return "correct";
}else if(char1 === "X"){
return "inexact";
return "wrong";
}else if(char1 === "R"){
return "redundant";
return "wrong";
}else{
return "wrong";
}
}
// Add a rect for each claim
var rect = system.selectAll("rect")
......@@ -299,9 +331,9 @@ function dd() {
}
function clear(d,i){
d3.select("#info #system").text("")
d3.select("#info #claim").text("")
d3.select("#info #answer").text("")
d3.select("#info #system").text("");
d3.select("#info #claim").text("");