Skip to content
Snippets Groups Projects
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
No related branches found
No related tags found
No related merge requests found
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery-1.9.1.min.js"></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>
<script src="js/dropdown.js"></script>
<script src="js/jquery-ui.js"></script> <script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/messi.js"></script> <script src="js/messi.js"></script>
......
// 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.\
");
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment