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

deleted 2 unneccessary files. vis.js is an old version. vis.js is the name of... 

deleted 2 unneccessary files. vis.js is an old version. vis.js is the name of the file in use, but they are different files.
parent a197168b
Hide whitespace changes
Inline Side-by-side
index.html
View file @ e65f83a4
......@@ -6,7 +6,6 @@
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="js/d3.v3.min.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/messi.js"></script>
......
js/vis.js deleted 100755 → 0
View file @ a197168b
// this is not used anywhere.
var w = 4300,
h = 800,
p = [20, 50, 50, 20],
x = d3.scale.ordinal().rangeRoundBands([0, w]), //- p[1] - p[3]]),
y = d3.scale.linear().range([0, h - p[0] - p[2]]),
yscale = d3.scale.linear().range([0, h - p[0] - p[2]]),
y0 = d3.scale.ordinal().rangeRoundBands([h-p[0]-p[2], 0], .2),
y1 = d3.scale.linear();
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
}
sum += parseInt(dict[key]);
}
return sum;
}
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;
}
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 slot_a = getSlot(a),
slot_b = getSlot(b);
if (slot_a < slot_b){
return 1;
}
if (slot_a > slot_b){
return -1;
}
return 0;
}
// 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 0;
}
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;
}
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + p[3] + "," + (h - p[2]) + ")");
// Actually read the data
d3.csv("mycsv.csv", function(data) {
var syslist = Object.keys(data[0]);
syslist.splice(0,1);
// this has to do with colors
var z = d3.scale.ordinal()
.domain(syslist)
.range(colorbrewer.Accent[8]
.concat(colorbrewer.Paired[12])
.concat(colorbrewer.Spectral[7]));
// console.log(data);
// Transpose the data into layers by system.
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; }));
vertlines.domain(range(0,470)); // 471 is the number of slots
y.domain([0, d3.max(systems[systems.length - 1], function(d) { return d.y0 + d.y; })]);
yscale.domain([0, 45]);
y0.domain(syslist);
y1.domain([0, 1]).range([y0.rangeBand(), 0]);
var rectheight = 15;
// 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)
.enter().append("svg:g")
.attr("name", function(d, i) { return syslist[i]; } )
.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("mouseout", clear);
// Add a rect for each date.
var rect = system.selectAll("rect")
.data(Object) // this is just the identity function?
.enter().append("svg:rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return -rectheight*(d.y0) - rectheight*(d.y); })
.attr("height", function(d) { return rectheight*(d.y); })
.attr("width", x.rangeBand())
.on("mouseover", setClaim)
.on("mouseout", reset);
function setSystem(d, i){
d3.select("#info #system").text(syslist[i]);
}
var offset = 20;
function setClaim(d, i){
d3.select("#info #claim").text(d.x);
// 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 }) ;
}
function clear(d,i){
d3.select("#info #system").text("");
d3.select("#info #claim").text("");
// d3.select(this)
// .style("fill", z(i));
}
// 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);
d3.select("#sortbutton").on("click", update);
d3.select("#upbutton").on("click", transitionMultiples);
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);
}
}
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;
}
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);
lines = true;
linelocations = getLineLocs(data, queryEqual);
}else if (strVal == "slot"){
data.sort(compBySlot);
lines = true;
linelocations = getLineLocs(data, slotEqual);
}else if (strVal == "numAns"){
data.sort(comp);
}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)-x.rangeBand()/2 + 1) + ",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)
.attr("x", function(d) { return x(d.x) } );
}
function transitionMultiples() {
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() {
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");
}
$("#simple").on("click", function() {
new Messi("<h2><center>What is this?</center></h2> \
<p>This is a visualization of the KBP 2012 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.\
");
});
});
Supports Markdown
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