neale/moth
neale
/
moth
mirror of https://github.com/dirtbags/moth.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Renamed LLNL scoreboard names, consolidated scoreboard JS

This commit is contained in:
John Donaldson 2018-09-09 10:34:48 -05:00
parent 2b97c4fb7e
commit f95c9e5af4
6 changed files with 460 additions and 573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/scoreboard-llnl-all.html → www/scoreboard-all.html
View File

@ -14,7 +14,7 @@
} }
</style> </style>
<script src="d3.js" async></script> <script src="d3.js" async></script>
<script src="scoreboard-llnl.js" async></script> <script src="scoreboard.js" async></script>
<script> <script>
var type = "original"; var type = "original";

528
www/scoreboard-llnl.js
View File

@ -1,528 +0,0 @@
function loadJSON(url, callback) {
function loaded(e) {
callback(e.target.response);
}
var xhr = new XMLHttpRequest()
xhr.onload = loaded;
xhr.open("GET", url, true);
xhr.responseType = "json";
xhr.send();
}
function toObject(arr) {
var rv = {};
for (var i = 0; i < arr.length; ++i)
if (arr[i] !== undefined) rv[i] = arr[i];
return rv;
}
var updateInterval;
function scoreboard(element, continuous, mode, interval) {
if(updateInterval) {
clearInterval(updateInterval);
}
function update(state) {
//console.log("Updating");
var teamnames = state["teams"];
var pointslog = state["points"];
var highscore = {};
var teams = {};
function pointsCompare(a, b) {
return a[0] - b[0];
}
pointslog.sort(pointsCompare);
var minTime = pointslog[0][0];
var maxTime = pointslog[pointslog.length - 1][0];
var allQuestions = {};
for (var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var catPoints = {};
if(category in allQuestions) {
catPoints = allQuestions[category];
} else {
catPoints["total"] = 0;
}
if(!(points in catPoints)) {
catPoints[points] = 1;
catPoints["total"] = catPoints["total"] + points;
} else {
catPoints[points] = catPoints[points] + 1;
}
allQuestions[category] = catPoints;
}
// Dole out points
for (var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var team = teams[teamhash] || {__hash__: teamhash};
// Add points to team's points for that category
team[category] = (team[category] || 0) + points;
// Record highest score in a category
highscore[category] = Math.max(highscore[category] || 0, team[category]);
teams[teamhash] = team;
}
// Sort by team score
function teamScore(t) {
var score = 0;
for (var category in highscore) {
score += (t[category] || 0) / highscore[category];
}
// XXX: This function really shouldn't have side effects.
t.__score__ = score;
return score;
}
function pointScore(points, category) {
return points / highscore[category]
}
function teamCompare(a, b) {
return teamScore(a) - teamScore(b);
}
var winners = [];
for (var i in teams) {
winners.push(teams[i]);
}
if (winners.length == 0) {
// No teams!
return;
}
winners.sort(teamCompare);
winners.reverse();
// Clear out the element we're about to populate
while (element.lastChild) {
element.removeChild(element.lastChild);
}
// Populate!
var topActualScore = winners[0].__score__;
if(mode == "time") {
var colorScale = d3.schemeCategory20;
var teamLines = {};
var reverseTeam = {};
for(var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var teamname = teamnames[teamhash];
reverseTeam[teamname] = teamhash;
points = pointScore(points, category);
if(!(teamname in teamLines)) {
var teamHistory = [[timestamp, points, category, entry[3], [minTime, 0, category, 0]]];
teamLines[teamname] = teamHistory;
} else {
var teamHistory = teamLines[teamname];
teamHistory.push([timestamp, points + teamHistory[teamHistory.length - 1][1], category, entry[3], teamHistory[teamHistory.length - 1]]);
}
}
//console.log(teamLines);
var graph = document.createElement("svg");
graph.id = "graph";
graph.style.width="100%";
graph.style.height = "100vh";
var titleHeight = document.getElementById("title").clientHeight;
titleHeight += document.getElementById("title").offsetTop * 2;
graph.style.backgroundColor = "white";
graph.style.display = "table";
var holdingDiv = document.createElement("div");
holdingDiv.align="center";
holdingDiv.id="holding";
holdingDiv.style.height = "100%";
element.style.height = "100%";
element.appendChild(holdingDiv);
holdingDiv.appendChild(graph);
var margins = 40;
var marginsX = 120;
var width = graph.offsetWidth;
var height = graph.offsetHeight;
height = height - titleHeight - margins;
//var xScale = d3.scaleLinear().range([minTime, maxTime]);
//var yScale = d3.scaleLinear().range([0, topActualScore]);
var originTime = (maxTime - minTime) / 60;
var xScale = d3.scaleLinear().range([marginsX, width - margins]);
xScale.domain([0, originTime]);
var yScale = d3.scaleLinear().range([height - margins, margins]);
yScale.domain([0, topActualScore]);
graph = d3.select("#graph");
graph.remove();
graph = d3.select("#holding").append("svg")
.attr("width", width)
.attr("height", height);
//.attr("style", "background: white");
//graph.append("g")
// .attr("transform", "translate(" + margins + ", 0)")
// .call(d3.axisLeft(yScale))
// .style("stroke", "white");;
var maxNumEntry = 10;
//var curEntry = 0;
var winningTeams = [];
for(entry in winners) {
var curEntry = entry;
if(curEntry >= maxNumEntry) {
break;
}
entry = teamnames[winners[entry].__hash__];
winningTeams.push(entry);
//console.log(curEntry);
//console.log(entry);
//var isTop = false;
//for(var x=0; x < maxNumEntry; x++)
//{
// var teamhash = reverseTeam[entry];
// if(winners[x].__hash__ == teamhash)
// {
// curEntry = x;
// isTop = true;
// break;
// }
//}
//if(!isTop)
//{
// continue;
//}
var curTeam = teamLines[entry];
var lastEntry = curTeam[curTeam.length - 1];
//curTeam.append()
curTeam.push([maxTime, lastEntry[1], lastEntry[2], lastEntry[3], lastEntry]);
var curLayer = graph.append("g");
curLayer.selectAll("line")
.data(curTeam)
.enter()
.append("line")
.style("stroke", colorScale[curEntry * 2])
.attr("stroke-width", 4)
.attr("class", "team_" + entry)
.style("z-index", maxNumEntry - curEntry)
.attr("x1",
function(d) {
return xScale((d[4][0] - minTime) / 60);
})
.attr("x2",
function(d) {
return xScale((d[0] - minTime) / 60);
})
.attr("y1",
function(d) {
return yScale(d[4][1]);
})
.attr("y2",
function(d) {
return yScale(d[1]);
})
.on("mouseover", handleMouseover)
.on("mouseout", handleMouseout);
curLayer.selectAll("circle")
.data(curTeam)
.enter()
.append("circle")
.style("fill", colorScale[curEntry * 2])
.style("z-index", maxNumEntry - curEntry)
.attr("class", "team_" + entry)
.attr("r", 5)
.attr("cx",
function(d) {
return xScale((d[0] - minTime) / 60);
})
.attr("cy",
function(d) {
return yScale(d[1]);
})
.on("mouseover", handleMouseoverCircle)
.on("mouseout", handleMouseoutCircle);
curEntry++;
}
var axisG = graph.append("g");
axisG
.attr("transform", "translate(0," + (height - margins) + ")")
.call(d3.axisBottom(xScale));
//.style("stroke", "white");
axisG.selectAll("path").style("stroke", "white");
axisG.selectAll("line").style("stroke", "white");
axisG.selectAll("text").style("fill", "white");
graph.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate(" + (width / 2) + ", " + (height - margins / 8) + ")")
.style("fill", "white")
.text("Time (minutes)");
var legend = graph.append("g");
var legendRowHeight = (height - margins) / 10;
legend.selectAll("rect")
.data(winningTeams)
.enter()
.append("rect")
.attr("class", function(d){ return "team_" + d; })
.attr("fill", function(d, i){ return colorScale[i * 2]; })
.style("z-index", function(d, i){ return i; })
.attr("x", 0)
.attr("y", function(d, i){ return legendRowHeight * i; })
.attr("height", legendRowHeight)
.attr("width", marginsX)
.on("mouseover", handleMouseoverLegend)
.on("mouseout", handleMouseoutLegend);
legend.selectAll("text")
.data(winningTeams)
.enter()
.append("text")
//.attr("class", function(d){ return "team_" + d; })
.attr("fill", "black")
.style("z-index", function(d, i){ return i; })
.attr("dx", 0)
.attr("dy", function(d, i){ return legendRowHeight * (i + .5); })
.text(function(d, i){ return i + ": " + d; })
.attr("dominant-baseline", "central")
.style("pointer-events", "none");
//legend.append("g").selectAll("text")
// .data(winningTeams)
// .enter()
// .append("text")
// .attr("class", function(d){ return "team_" + d; })
// .attr("fill", function(d, i){ return colorScale[i]; })
// .style("z-index", function(d, i){ return i; })
// .attr("dx", margins)
// .attr("dy", function(d, i){ return margins + legendRowHeight * (i); })
// .text(function(d){ return d; });
//.attr("dominant-baseline", "central");
//.style("pointer-events", "none");
function handleMouseover(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseout(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
var tooltipPadding = 10;
function handleMouseoverCircle(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
graph.append("g").append("text")
.attr("class", "tooltip")
.attr("text-anchor", "middle")
.style("fill", "red")
.style("stroke-width", -4)
.style("stroke", "black")
.style("font-weight", "bolder")
.style("font-size", "large")
.attr("dx",
function() {
return xScale((d[0] - minTime) / 60);
})
.attr("dy",
function() {
return yScale(d[1]) - tooltipPadding;
})
.text(function(){ return d[2] + " " + d[3]; })
.style("pointer-events", "none");
}
function handleMouseoutCircle(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseoverLegend(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseoutLegend(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[zIndex * 2])
.style("fill", colorScale[zIndex * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(zIndex) * 2])
.style("fill", colorScale[(zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
} else if(mode == "original") {
// (100 / ncats) * (ncats / topActualScore);
var maxWidth = 100 / topActualScore;
for (var i in winners) {
var team = winners[i];
var row = document.createElement("div");
var ncat = 0;
for (var category in highscore) {
var catHigh = highscore[category];
var catTeam = team[category] || 0;
var catPct = catTeam / catHigh;
var width = maxWidth * catPct;
var bar = document.createElement("span");
bar.classList.add("cat" + ncat);
bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent;
row.appendChild(bar);
ncat += 1;
}
var te = document.createElement("span");
te.classList.add("teamname");
te.textContent = teamnames[team.__hash__];
row.appendChild(te);
element.appendChild(row);
}
}
if(mode == "total") {
var colorScale = d3.schemeCategory20;
var numCats = 0;
for(entry in allQuestions) {
numCats++;
}
var maxWidth = Math.floor(100 / (0.0 + numCats));
//console.log(maxWidth);
for (var i in winners) {
var team = winners[i];
var row = document.createElement("div");
var ncat = 0;
for (var category in allQuestions) {
var catHigh = highscore[category];
var catTeam = team[category] || 0;
var catPct = 0;
if (catHigh > 30000) {
catPct = (0.0 + Math.log(1+catTeam)) / (0.0 + Math.log(1+catHigh));
} else {
catPct = (0.0 + catTeam) / (0.0 + catHigh);
}
var width = maxWidth * catPct;
var bar = document.createElement("span");
var numLeft = catHigh - catTeam;
//bar.classList.add("cat" + ncat);
bar.style.backgroundColor = colorScale[ncat % 20];
bar.style.color = "white";
bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent;
row.appendChild(bar);
ncat++;
width = maxWidth * (1 - catPct);
if(width > 0) {
var noBar = document.createElement("span");
//noBar.classList.add("cat" + ncat);
noBar.style.backgroundColor = colorScale[ncat % 20];
noBar.style.width = width + "%";
noBar.textContent = numLeft;
noBar.title = bar.textContent;
row.appendChild(noBar);
}
ncat += 1;
}
var te = document.createElement("span");
te.classList.add("teamname");
te.textContent = teamnames[team.__hash__];
row.appendChild(te);
element.appendChild(row);
}
}
}
function once() {
loadJSON("points.json", update);
}
if (continuous) {
updateInterval = setInterval(once, interval);
}
once();
}

2
www/scoreboard-proj.html
View File

@ -9,7 +9,7 @@
</div> </div>
</body> </body>
<script> <script>
var cycle = ["scoreboard.html", "scoreboard-llnl-all.html", "scoreboard-llnl-timeline.html"]; var cycle = ["scoreboard.html", "scoreboard-all.html", "scoreboard-timeline.html"];
var current = 0; var current = 0;
var timeout = 25000; var timeout = 25000;
var curTimeout; var curTimeout;

2
www/scoreboard-llnl-timeline.html → www/scoreboard-timeline.html
View File

@ -14,7 +14,7 @@
} }
</style> </style>
<script src="d3.js" async></script> <script src="d3.js" async></script>
<script src="scoreboard-llnl.js" async></script> <script src="scoreboard.js" async></script>
<script> <script>
var type = "original"; var type = "original";

5
www/scoreboard.html
View File

@ -5,9 +5,12 @@
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<script src="scoreboard.js" async></script> <script src="scoreboard.js" async></script>
<script> <script>
var type = "original";
var interval = 60000;
function init() { function init() {
var sb = document.getElementById("scoreboard"); var sb = document.getElementById("scoreboard");
scoreboard(sb, true); scoreboard(sb, true, type, interval);
} }
window.addEventListener("load", init); window.addEventListener("load", init);

428
www/scoreboard.js
View File

@ -9,19 +9,59 @@ function loadJSON(url, callback) {
xhr.send(); xhr.send();
} }
function scoreboard(element, continuous) { function toObject(arr) {
var rv = {};
for (var i = 0; i < arr.length; ++i)
if (arr[i] !== undefined) rv[i] = arr[i];
return rv;
}
var updateInterval;
function scoreboard(element, continuous, mode, interval) {
if(updateInterval) {
clearInterval(updateInterval);
}
function update(state) { function update(state) {
//console.log("Updating");
var teamnames = state["teams"]; var teamnames = state["teams"];
var pointslog = state["points"]; var pointslog = state["points"];
var pointshistory = JSON.parse(localStorage.getItem("pointshistory")) || [];
if (pointshistory.length >= 20){
pointshistory.shift();
}
pointshistory.push(pointslog);
localStorage.setItem("pointshistory", JSON.stringify(pointshistory));
var highscore = {}; var highscore = {};
var teams = {}; var teams = {};
function pointsCompare(a, b) {
return a[0] - b[0];
}
pointslog.sort(pointsCompare);
var minTime = pointslog[0][0];
var maxTime = pointslog[pointslog.length - 1][0];
var allQuestions = {};
for (var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var catPoints = {};
if(category in allQuestions) {
catPoints = allQuestions[category];
} else {
catPoints["total"] = 0;
}
if(!(points in catPoints)) {
catPoints[points] = 1;
catPoints["total"] = catPoints["total"] + points;
} else {
catPoints[points] = catPoints[points] + 1;
}
allQuestions[category] = catPoints;
}
// Dole out points // Dole out points
for (var i in pointslog) { for (var i in pointslog) {
var entry = pointslog[i]; var entry = pointslog[i];
@ -52,6 +92,9 @@ function scoreboard(element, continuous) {
t.__score__ = score; t.__score__ = score;
return score; return score;
} }
function pointScore(points, category) {
return points / highscore[category]
}
function teamCompare(a, b) { function teamCompare(a, b) {
return teamScore(a) - teamScore(b); return teamScore(a) - teamScore(b);
} }
@ -75,6 +118,313 @@ function scoreboard(element, continuous) {
// Populate! // Populate!
var topActualScore = winners[0].__score__; var topActualScore = winners[0].__score__;
if(mode == "time") {
var colorScale = d3.schemeCategory20;
var teamLines = {};
var reverseTeam = {};
for(var i in pointslog) {
var entry = pointslog[i];
var timestamp = entry[0];
var teamhash = entry[1];
var category = entry[2];
var points = entry[3];
var teamname = teamnames[teamhash];
reverseTeam[teamname] = teamhash;
points = pointScore(points, category);
if(!(teamname in teamLines)) {
var teamHistory = [[timestamp, points, category, entry[3], [minTime, 0, category, 0]]];
teamLines[teamname] = teamHistory;
} else {
var teamHistory = teamLines[teamname];
teamHistory.push([timestamp, points + teamHistory[teamHistory.length - 1][1], category, entry[3], teamHistory[teamHistory.length - 1]]);
}
}
//console.log(teamLines);
var graph = document.createElement("svg");
graph.id = "graph";
graph.style.width="100%";
graph.style.height = "100vh";
var titleHeight = document.getElementById("title").clientHeight;
titleHeight += document.getElementById("title").offsetTop * 2;
graph.style.backgroundColor = "white";
graph.style.display = "table";
var holdingDiv = document.createElement("div");
holdingDiv.align="center";
holdingDiv.id="holding";
holdingDiv.style.height = "100%";
element.style.height = "100%";
element.appendChild(holdingDiv);
holdingDiv.appendChild(graph);
var margins = 40;
var marginsX = 120;
var width = graph.offsetWidth;
var height = graph.offsetHeight;
height = height - titleHeight - margins;
//var xScale = d3.scaleLinear().range([minTime, maxTime]);
//var yScale = d3.scaleLinear().range([0, topActualScore]);
var originTime = (maxTime - minTime) / 60;
var xScale = d3.scaleLinear().range([marginsX, width - margins]);
xScale.domain([0, originTime]);
var yScale = d3.scaleLinear().range([height - margins, margins]);
yScale.domain([0, topActualScore]);
graph = d3.select("#graph");
graph.remove();
graph = d3.select("#holding").append("svg")
.attr("width", width)
.attr("height", height);
//.attr("style", "background: white");
//graph.append("g")
// .attr("transform", "translate(" + margins + ", 0)")
// .call(d3.axisLeft(yScale))
// .style("stroke", "white");;
var maxNumEntry = 10;
//var curEntry = 0;
var winningTeams = [];
for(entry in winners) {
var curEntry = entry;
if(curEntry >= maxNumEntry) {
break;
}
entry = teamnames[winners[entry].__hash__];
winningTeams.push(entry);
//console.log(curEntry);
//console.log(entry);
//var isTop = false;
//for(var x=0; x < maxNumEntry; x++)
//{
// var teamhash = reverseTeam[entry];
// if(winners[x].__hash__ == teamhash)
// {
// curEntry = x;
// isTop = true;
// break;
// }
//}
//if(!isTop)
//{
// continue;
//}
var curTeam = teamLines[entry];
var lastEntry = curTeam[curTeam.length - 1];
//curTeam.append()
curTeam.push([maxTime, lastEntry[1], lastEntry[2], lastEntry[3], lastEntry]);
var curLayer = graph.append("g");
curLayer.selectAll("line")
.data(curTeam)
.enter()
.append("line")
.style("stroke", colorScale[curEntry * 2])
.attr("stroke-width", 4)
.attr("class", "team_" + entry)
.style("z-index", maxNumEntry - curEntry)
.attr("x1",
function(d) {
return xScale((d[4][0] - minTime) / 60);
})
.attr("x2",
function(d) {
return xScale((d[0] - minTime) / 60);
})
.attr("y1",
function(d) {
return yScale(d[4][1]);
})
.attr("y2",
function(d) {
return yScale(d[1]);
})
.on("mouseover", handleMouseover)
.on("mouseout", handleMouseout);
curLayer.selectAll("circle")
.data(curTeam)
.enter()
.append("circle")
.style("fill", colorScale[curEntry * 2])
.style("z-index", maxNumEntry - curEntry)
.attr("class", "team_" + entry)
.attr("r", 5)
.attr("cx",
function(d) {
return xScale((d[0] - minTime) / 60);
})
.attr("cy",
function(d) {
return yScale(d[1]);
})
.on("mouseover", handleMouseoverCircle)
.on("mouseout", handleMouseoutCircle);
curEntry++;
}
var axisG = graph.append("g");
axisG
.attr("transform", "translate(0," + (height - margins) + ")")
.call(d3.axisBottom(xScale));
//.style("stroke", "white");
axisG.selectAll("path").style("stroke", "white");
axisG.selectAll("line").style("stroke", "white");
axisG.selectAll("text").style("fill", "white");
graph.append("text")
.attr("text-anchor", "middle")
.attr("transform", "translate(" + (width / 2) + ", " + (height - margins / 8) + ")")
.style("fill", "white")
.text("Time (minutes)");
var legend = graph.append("g");
var legendRowHeight = (height - margins) / 10;
legend.selectAll("rect")
.data(winningTeams)
.enter()
.append("rect")
.attr("class", function(d){ return "team_" + d; })
.attr("fill", function(d, i){ return colorScale[i * 2]; })
.style("z-index", function(d, i){ return i; })
.attr("x", 0)
.attr("y", function(d, i){ return legendRowHeight * i; })
.attr("height", legendRowHeight)
.attr("width", marginsX)
.on("mouseover", handleMouseoverLegend)
.on("mouseout", handleMouseoutLegend);
legend.selectAll("text")
.data(winningTeams)
.enter()
.append("text")
//.attr("class", function(d){ return "team_" + d; })
.attr("fill", "black")
.style("z-index", function(d, i){ return i; })
.attr("dx", 0)
.attr("dy", function(d, i){ return legendRowHeight * (i + .5); })
.text(function(d, i){ return i + ": " + d; })
.attr("dominant-baseline", "central")
.style("pointer-events", "none");
//legend.append("g").selectAll("text")
// .data(winningTeams)
// .enter()
// .append("text")
// .attr("class", function(d){ return "team_" + d; })
// .attr("fill", function(d, i){ return colorScale[i]; })
// .style("z-index", function(d, i){ return i; })
// .attr("dx", margins)
// .attr("dy", function(d, i){ return margins + legendRowHeight * (i); })
// .text(function(d){ return d; });
//.attr("dominant-baseline", "central");
//.style("pointer-events", "none");
function handleMouseover(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseout(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
var tooltipPadding = 10;
function handleMouseoverCircle(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
graph.append("g").append("text")
.attr("class", "tooltip")
.attr("text-anchor", "middle")
.style("fill", "red")
.style("stroke-width", -4)
.style("stroke", "black")
.style("font-weight", "bolder")
.style("font-size", "large")
.attr("dx",
function() {
return xScale((d[0] - minTime) / 60);
})
.attr("dy",
function() {
return yScale(d[1]) - tooltipPadding;
})
.text(function(){ return d[2] + " " + d[3]; })
.style("pointer-events", "none");
}
function handleMouseoutCircle(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(maxNumEntry - zIndex) * 2])
.style("fill", colorScale[(maxNumEntry - zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseoverLegend(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
d3.select("body").selectAll("." + curClass)
.style("stroke", "white")
.style("fill", "white");
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
function handleMouseoutLegend(d, i) {
d3.select("body").selectAll(".tooltip").remove();
var curClass = d3.select(this).attr("class");
var zIndex = d3.select(this).style("z-index");
d3.select("body").selectAll("." + curClass)
.style("stroke", colorScale[zIndex * 2])
.style("fill", colorScale[zIndex * 2]);
legend.selectAll("." + curClass)
.style("stroke", colorScale[(zIndex) * 2])
.style("fill", colorScale[(zIndex) * 2]);
d3.select("body").selectAll("text")
.style("stroke-width", 0);
}
} else if(mode == "original") {
// (100 / ncats) * (ncats / topActualScore); // (100 / ncats) * (ncats / topActualScore);
var maxWidth = 100 / topActualScore; var maxWidth = 100 / topActualScore;
for (var i in winners) { for (var i in winners) {
@ -105,12 +455,74 @@ function scoreboard(element, continuous) {
element.appendChild(row); element.appendChild(row);
} }
} }
if(mode == "total") {
var colorScale = d3.schemeCategory20;
var numCats = 0;
for(entry in allQuestions) {
numCats++;
}
var maxWidth = Math.floor(100 / (0.0 + numCats));
//console.log(maxWidth);
for (var i in winners) {
var team = winners[i];
var row = document.createElement("div");
var ncat = 0;
for (var category in allQuestions) {
var catHigh = highscore[category];
var catTeam = team[category] || 0;
var catPct = 0;
if (catHigh > 30000) {
catPct = (0.0 + Math.log(1+catTeam)) / (0.0 + Math.log(1+catHigh));
} else {
catPct = (0.0 + catTeam) / (0.0 + catHigh);
}
var width = maxWidth * catPct;
var bar = document.createElement("span");
var numLeft = catHigh - catTeam;
//bar.classList.add("cat" + ncat);
bar.style.backgroundColor = colorScale[ncat % 20];
bar.style.color = "white";
bar.style.width = width + "%";
bar.textContent = category + ": " + catTeam;
bar.title = bar.textContent;
row.appendChild(bar);
ncat++;
width = maxWidth * (1 - catPct);
if(width > 0) {
var noBar = document.createElement("span");
//noBar.classList.add("cat" + ncat);
noBar.style.backgroundColor = colorScale[ncat % 20];
noBar.style.width = width + "%";
noBar.textContent = numLeft;
noBar.title = bar.textContent;
row.appendChild(noBar);
}
ncat += 1;
}
var te = document.createElement("span");
te.classList.add("teamname");
te.textContent = teamnames[team.__hash__];
row.appendChild(te);
element.appendChild(row);
}
}
}
function once() { function once() {
loadJSON("points.json", update); loadJSON("points.json", update);
} }
if (continuous) { if (continuous) {
setInterval(once, 60000); updateInterval = setInterval(once, interval);
} }
once(); once();
} }