var paper = Raphael(10, 50, 320, 200);
paper.circle(320, 240, 60).animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);Raphael(function () {
var img = document.getElementById("photo");
img.style.display = "none";
var r = Raphael("holder", 600, 540);
r.image(img.src, 140, 140, 320, 240);
r.image(img.src, 140, 380, 320, 240).attr({
transform: "s1-1",
opacity: .5
});
r.rect(0, 380, 600, 160).attr({
fill: "90-#333-#333",
stroke: "none",
opacity: .5
});
});window.onload = function () {
var src = document.getElementById("bee").src,
angle = 0;
document.getElementById("holder").innerHTML = "";
var R = Raphael("holder", 640, 480);
R.circle(320, 240, 200).attr({fill: "#000", "fill-opacity": .5, "stroke-width": 5});
var img = R.image(src, 160, 120, 320, 240);
var butt1 = R.set(),
butt2 = R.set();
butt1.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt2.push(R.circle(24.833, 26.917, 26.667).attr({stroke: "#ccc", fill: "#fff", "fill-opacity": .4, "stroke-width": 2}),
R.path("M37.566,9.551c9.331,6.686,11.661,19.471,5.502,29.014l2.36,1.689l-4.893,2.262l-4.893,2.262l0.568-5.36l0.567-5.359l2.365,1.694c4.657-7.375,2.83-17.185-4.352-22.33c-7.451-5.338-17.817-3.625-23.156,3.824C6.3,24.695,8.012,35.06,15.458,40.398l-2.857,3.988C2.983,37.494,0.773,24.109,7.666,14.49C14.558,4.87,27.944,2.658,37.566,9.551z").attr({stroke: "none", fill: "#000"}),
R.circle(24.833, 26.917, 26.667).attr({fill: "#fff", opacity: 0}));
butt1.translate(10, 181);
butt2.translate(10, 245);
butt1[2].click(function () {
angle -= 90;
img.stop().animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt1[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt1[1].stop().attr({fill: "#000"});
});
butt2[2].click(function () {
angle += 90;
img.animate({transform: "r" + angle}, 1000, "<>");
}).mouseover(function () {
butt2[1].animate({fill: "#fc0"}, 300);
}).mouseout(function () {
butt2[1].stop().attr({fill: "#000"});
});
// setTimeout(function () {R.safari();});
};
</script>4. text rotation:
Raphael(function () {
var hldr = document.getElementById("holder"),
text = hldr.innerHTML.replace(/^\s+|\s+$|<[^>]+>/g, "");
hldr.innerHTML = "";
var R = Raphael("holder", 640, 480),
txt = [],
attr = {font: "50px Helvetica", opacity: 0.5};
txt[0] = R.text(320, 240, text).attr(attr).attr({fill: "#0f0"});
txt[1] = R.text(320, 240, text).attr(attr).attr({fill: "#f00"});
txt[2] = R.text(320, 240, text).attr(attr).attr({fill: "#00f"});
var mouse = null, rot = 0;
document.onmousemove = function (e) {
e = e || window.event;
if (mouse == null) {
mouse = e.clientX;
return;
}
rot += e.clientX - mouse;
txt[0].attr({transform: "r" + rot});
txt[1].attr({transform: "r" + rot / 1.5});
txt[2].attr({transform: "r" + rot / 2});
mouse = e.pageX;
R.safari();
};
});5 GitHub:
var process = function (json) {
var x = 0,
r = Raphael("chart", 2350, 550),
labels = {},
textattr = {"font": '9px "Arial"', stroke: "none", fill: "#fff"},
pathes = {},
nmhldr = $("#name")[0],
nmhldr2 = $("#name2")[0],
lgnd = $("#legend")[0],
usrnm = $("#username")[0],
lgnd2 = $("#legend2")[0],
usrnm2 = $("#username2")[0],
plchldr = $("#placeholder")[0];
function finishes() {
for (var i in json.authors) {
var start, end;
for (var j = json.buckets.length - 1; j >= 0; j--) {
var isin = false;
for (var k = 0, kk = json.buckets[j].i.length; k < kk; k++) {
isin = isin || (json.buckets[j].i[k][0] == i);
}
if (isin) {
end = j;
break;
}
}
for (var j = 0, jj = json.buckets.length; j < jj; j++) {
var isin = false;
for (var k = 0, kk = json.buckets[j].i.length; k < kk; k++) {
isin = isin || (json.buckets[j].i[k][0] == i);
};
if (isin) {
start = j;
break;
}
}
for (var j = start, jj = end; j < jj; j++) {
var isin = false;
for (var k = 0, kk = json.buckets[j].i.length; k < kk; k++) {
isin = isin || (json.buckets[j].i[k][0] == i);
}
if (!isin) {
json.buckets[j].i.push([i, 0]);
}
}
}
}
function block() {
var p, h;
finishes();
for (var j = 0, jj = json.buckets.length; j < jj; j++) {
var users = json.buckets[j].i;
h = 0;
for (var i = 0, ii = users.length; i < ii; i++) {
p = pathes[users[i][0]];
if (!p) {
p = pathes[users[i][0]] = {f:[], b:[]};
}
p.f.push([x, h, users[i][1]]);
p.b.unshift([x, h += Math.max(Math.round(Math.log(users[i][1]) * 5), 1)]);
h += 2;
}
var dt = new Date(json.buckets[j].d * 1000);
var dtext = dt.getDate() + " " + ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"][dt.getMonth()] + " " + dt.getFullYear();
r.text(x + 25, h + 10, dtext).attr({"font": '9px "Arial"', stroke: "none", fill: "#aaa"});
x += 100;
}
var c = 0;
for (var i in pathes) {
labels[i] = r.set();
var clr = Raphael.getColor();
pathes[i].p = r.path().attr({fill: clr, stroke: clr});
var path = "M".concat(pathes[i].f[0][0], ",", pathes[i].f[0][1], "L", pathes[i].f[0][0] + 50, ",", pathes[i].f[0][1]);
var th = Math.round(pathes[i].f[0][1] + (pathes[i].b[pathes[i].b.length - 1][1] - pathes[i].f[0][1]) / 2 + 3);
labels[i].push(r.text(pathes[i].f[0][0] + 25, th, pathes[i].f[0][2]).attr(textattr));
var X = pathes[i].f[0][0] + 50,
Y = pathes[i].f[0][1];
for (var j = 1, jj = pathes[i].f.length; j < jj; j++) {
path = path.concat("C", X + 20, ",", Y, ",");
X = pathes[i].f[j][0];
Y = pathes[i].f[j][1];
path = path.concat(X - 20, ",", Y, ",", X, ",", Y, "L", X += 50, ",", Y);
th = Math.round(Y + (pathes[i].b[pathes[i].b.length - 1 - j][1] - Y) / 2 + 3);
if (th - 9 > Y) {
labels[i].push(r.text(X - 25, th, pathes[i].f[j][2]).attr(textattr));
}
}
path = path.concat("L", pathes[i].b[0][0] + 50, ",", pathes[i].b[0][1], ",", pathes[i].b[0][0], ",", pathes[i].b[0][1]);
for (var j = 1, jj = pathes[i].b.length; j < jj; j++) {
path = path.concat("C", pathes[i].b[j][0] + 70, ",", pathes[i].b[j - 1][1], ",", pathes[i].b[j][0] + 70, ",", pathes[i].b[j][1], ",", pathes[i].b[j][0] + 50, ",", pathes[i].b[j][1], "L", pathes[i].b[j][0], ",", pathes[i].b[j][1]);
}
pathes[i].p.attr({path: path + "z"});
labels[i].hide();
var current = null;
(function (i) {
pathes[i].p.mouseover(function () {
if (current != null) {
labels[current].hide();
}
current = i;
labels[i].show();
pathes[i].p.toFront();
labels[i].toFront();
usrnm2.innerHTML = json.authors[i].n + " <em>(" + json.authors[i].c + " commits, " + json.authors[i].a + " additions, " + json.authors[i].d + " deletions)</em>";
lgnd2.style.backgroundColor = pathes[i].p.attr("fill");
nmhldr2.className = "";
plchldr.className = "hidden";
});
})(i);
}
}
if (json.error) {
alert("Project not found. Try again.");
} else {
block();
}
};
$(function () {
process(json);
});useful links: