-
Notifications
You must be signed in to change notification settings - Fork 4
/
slopegraph.js
executable file
·64 lines (58 loc) · 2.33 KB
/
slopegraph.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
$(document).ready(function(){
// Grab the data
var labels = [],
data = [];
$("#data thead td").each(function () {
labels.push($(this).html());
});
$("#data tbody tr").each(function () {
row=[];
$(this).children("td").each(function() {
row.push($(this).html());
});
data.push(row);
});
// hide the raw data
$("#data").css({
position: "absolute",
left: "-9999em",
top: "-9999em"
});
var seenBoundingBoxes = [];
function collides(box) {
for (var i = 0, il = seenBoundingBoxes.length; i < il; i++) {
seen = seenBoundingBoxes[i];
if (!(box.x > seen.x + seen.w || box.y > seen.y + seen.h || box.x + box.w < seen.x || box.y + box.h < seen.y)) return true;
}
seenBoundingBoxes.push(box);
return false;
}
// Draw
var width = 500, // make dynamic
height = 950, // make dynamic
r = Raphael("holder", width, height),
txtL = { 'text-anchor':'end', font: '12px Hoefler Text, Palatino, Georgia, Serif', fill: "#000"},
txtR = { 'text-anchor':'start', font: '12px Hoefler Text, Palatino, Georgia, Serif', fill: "#000"},
labelwidth = 90, // TODO calculate this
numberwidth = 25, //TODO calculate this too
max = 60.0, // TODO Math.max.apply(Math, data),
min = 20.0, // calc too
scale = height/(max-min),
t = r.text(labelwidth + numberwidth,10,labels[1]).attr(txtL);
t = r.text(width-labelwidth - numberwidth,10,labels[2]).attr(txtR);
for (var i = 0, il = data.length; i < il; i++) {
var country = data[i] [0],
startVal= data[i] [1],
endVal = data[i] [2],
startY = height-scale*(startVal-min);
endY = height-scale*(endVal-min);
while (collides({x:0,y:startY,w:labelwidth,h:12})) startY++;
while (collides({x:width-labelwidth,y:endY,w:labelwidth,h:12})) endY++;
t = r.text(labelwidth,startY,country).attr(txtL);
t = r.text(labelwidth + numberwidth,startY,startVal).attr(txtL);
t = r.text(width-labelwidth,endY,country).attr(txtR);
t = r.text(width-labelwidth - numberwidth,endY,endVal).attr(txtR);
var line = ["M",labelwidth+numberwidth," ",startY,"L",width-labelwidth - numberwidth," ", endY].join("");
var p = r.path(line);
}
});