topical media & game development
graphic-javascript-vector-impact.js / js
var data = {
"jonasi":[0,0,0,0,98,45,0,0,3,0,28,273,202,9,0,4,0,0,7,336,97,89,5,730,317,127,121,626,195],
"chisag":[0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
"jessie":[75,13,163,183,86,105,84,367,0,0,5,0,140,68,202,42,224,338,385,225,166,204,554,0,0,0,0,0,0],
"nlashi":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,208,441,0,0],
"simeje":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,107,45,350,438,0,0,0,0,0,0],
"biggyla":[7,0,38,132,0,0,69,72,0,0,86,0,0,0,0,0,0,0,0,0,0,128,0,0,0,1,0,0,0],
"asimenye":[0,425,171,331,9,332,135,6,0,100,0,0,0,422,0,77,195,277,204,0,82,6,0,0,0,0,0,0,0],
"kumayani":[135,67,403,178,229,122,307,136,711,452,544,346,0,20,194,87,0,0,51,0,163,0,0,0,0,0,0,0,0],
"Administrators":[0,0,0,0,0,0,0,0,0,0,0,3,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
"ndecha":[372,827,868,724,605,864,724,597,698,477,764,596,569,540,471,495,413,661,351,427,560,62,147,694,756,742,615,649,459],
"Administrator":[0,25,88,209,53,21,36,36,40,9,128,6,37,4,33,0,22,9,0,12,0,111,0,0,0,0,0,0,0],
"margret":[194,63,0,6,237,0,169,145,79,48,325,26,0,0,0,0,0,71,0,0,0,0,136,12,490,410,0,191,347],
"benard":[0,248,28,91,1,330,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
"oligad":[0,0,0,91,0,5,0,0,0,63,0,0,12,0,0,0,0,0,0,0,0,74,0,0,0,0,0,0,0],
"mikmck":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0]
};
var daylabels = ["18 OCT 2008", "19 OCT 2008", "20 OCT 2008", "21 OCT 2008", "22 OCT 2008", "23 OCT 2008", "24 OCT 2008", "25 OCT 2008", "26 OCT 2008", "27 OCT 2008", "28 OCT 2008", "29 OCT 2008", "30 OCT 2008", "31 OCT 2008", "1 NOV 2008", "2 NOV 2008", "3 NOV 2008", "4 NOV 2008", "5 NOV 2008", "6 NOV 2008", "7 NOV 2008", "8 NOV 2008", "9 NOV 2008", "10 NOV 2008", "11 NOV 2008", "12 NOV 2008", "13 NOV 2008", "14 NOV 2008", "15 NOV 2008"];
function DrawImpact(data, daylabels, id, userid) {
var len = 0, users = {}, user_element = userid && document.getElementById(userid);
for (var user in data) {
len = data[user].length;
break;
}
var r = Raphael(id, 100 * len - 50, 600);
for (var i = 0; i < len; i++) {
var day = [];
for (user in data) {
if (!users[user] && data[user][i]) {
users[user] = {start: i, ltr: [], rtl: [], values: []};
}
if (users[user]) {
if (users[user].start + 1 && !(users[user].finish + 1)) {
day.push({name: user, value: data[user][i]});
}
if (!("finish" in users[user]) && !eval(data[user].slice(i + 1).join("+"))) {
users[user].finish = i;
}
}
}
day.sort(function (a, b) {
return b.value - a.value;
});
var y = 2;
for (var j = 0, jj = day.length; j < jj; j++) {
users[day[j].name].values.push(day[j].value);
users[day[j].name].ltr.push(y);
y += Math.max(Math.round(Math.sqrt(day[j].value * 5)), 1);
users[day[j].name].rtl.unshift(y);
y += 2;
}
r.text(i * 100 + 25, y + 10, daylabels[i]).attr({font: '9px "Arial"', "stroke-width": 0, fill: "#666"});
}
// draw
var all_labels = {}, current;
for (user in users) {
(function (user) {
var step = users[user].start,
color = Raphael.getColor(.75),
textattr = {font: '10px "Arial"', "stroke-width": 0, fill: "#fff"},
p = r.path({fill: color}).moveTo(users[user].start * 100, users[user].ltr[0]).lineTo(users[user].start * 100 + 50, users[user].ltr[0]),
th = (users[user].rtl[users[user].rtl.length - 1] - users[user].ltr[0]) / 2;
all_labels[user] = [];
if (th > 4) {
all_labels[user].push(r.text((users[user].start) * 100 + 25, users[user].ltr[0] + th + 3, users[user].values[0]).attr(textattr));
}
for (var i = 1, ii = users[user].ltr.length; i < ii; i++) {
p.cplineTo((users[user].start + i) * 100, users[user].ltr[i], 25)
.lineTo((users[user].start + i) * 100 + 50, users[user].ltr[i]);
th = (users[user].rtl[ii - i - 1] - users[user].ltr[i]) / 2;
if (th > 4) {
all_labels[user].push(r.text((users[user].start + i) * 100 + 25, users[user].ltr[i] + th + 3, users[user].values[i]).attr(textattr));
}
}
p.lineTo(users[user].finish * 100 + 50, users[user].rtl[0]).lineTo(users[user].finish * 100, users[user].rtl[0]);
for (var i = 1, ii = users[user].rtl.length; i < ii; i++) {
p.cplineTo((users[user].finish - i) * 100 + 50, users[user].rtl[i], -25)
.lineTo((users[user].finish - i) * 100, users[user].rtl[i]);
}
p.andClose();
for (var i = 0, ii = all_labels[user].length; i < ii; i++) {
all_labels[user][i].toBack();
}
p[0].onmouseover = function () {
if (all_labels[current]) {
for (var i = 0, ii = all_labels[current].length; i < ii; i++) {
all_labels[current][i].toBack();
}
}
p.toFront();
for (var i = 0, ii = all_labels[user].length; i < ii; i++) {
all_labels[user][i].toFront();
}
current = user;
if (user_element) {
user_element.style.color = color;
user_element.innerHTML = user;
}
};
})(user);
}
}
window.onload = function () {
DrawImpact(data, daylabels, "holder", "user");
};
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.