gistfile1.js

var colors = Array();
var max_column = 7;
var min_size_limit = 9999;

function do_graphs() {
    fill_colors();

    var graphs = Array();

    graphs.push( render_canvas('graph_sha1') );
    graphs.push( render_canvas('graph_sha2') );
    graphs.push( render_canvas('graph_sha3') );

    var graph_index = 3;
    while (graph_index--) {
        var graph = graphs[graph_index];
        var color_index = max_column + 1;
        while (color_index--) {
            draw_expects(graph, color_index);
            draw_commit(graph, color_index);
            draw_merge_point(graph, color_index);
            draw_branch_point(graph, color_index);
        }
    }
}

function draw_expects(r, x) {
    var cell = get_graph_cell(r, x);

    var path = r.path("M0 0L0 {0}", r.height);
    transform_to_cell(path, cell);

    return;
}

function draw_commit(r, x) {
    var cell = get_graph_cell(r, x);

    var circle = r.circle(0, r.height / 2, min_size_limit / 2 * .7);
    transform_to_cell(circle, cell);

    return;
}

function draw_merge_point(r, x) {
    var cell = get_graph_cell(r, x);

    var center_offset = min_size_limit / 2;
    var merge_point = r.path(
        "M{0} {1}L{2} {3}L{4} {5}L{6} {7}", //
        -1 * cell.width / 2,r.height / 2, //
        -1 * center_offset, r.height / 2, //
        0,                  r.height / 2 + center_offset, //
        0,                  r.height //
    );
    transform_to_cell(merge_point, cell);

    return;
}

function draw_branch_point(r, x) {
    var cell = get_graph_cell(r, x);

    var center_offset = min_size_limit / 2;
    var branch_point = r.path(
        "M{0} {1}L{2} {3}L{4} {5}L{6} {7}", //
        0,                  0, //
        0,                  r.height / 2 - center_offset, //
        -1 * center_offset, r.height / 2, //
        -1 * cell.width / 2,r.height / 2 //
    );
    transform_to_cell(branch_point, cell);

    return;
}

function transform_to_cell(vector_obj, cell) {
    vector_obj.translate(cell.width / 2, 0);
    vector_obj.translate(cell.offset, 0);
    vector_obj.attr({
        stroke: colors[cell.x % 8]
    });

    return;
}

function get_graph_cell(r, x) {
    var width = r.width / (max_column + 1);
    var offset = width * x;
    var size_limit = width;
    if ( r.height < size_limit ) size_limit = r.height;
    return {
        size_limit: size_limit,
        width: width,
        offset: offset,
        x: x
    };
}

function fill_colors() {
    colors[0] = "#000000";
    var color_index = 7;
    while (color_index--) {
        Raphael.getColor();
        colors[color_index + 1] = Raphael.getColor();
    }
    return;
}

function render_canvas(id) {
    var target = $('#' + id);
    var x = target.offset().left;
    var y = target.offset().top;
    var width = target.innerWidth();
    var height = target.innerHeight();

    target.css('padding', '0');
    target.css('line-height', '0');

    var r = Raphael(id, width, height);

    if ( r.height < min_size_limit ) min_size_limit = r.height;
    if ( r.width / max_column + 1 < min_size_limit ) min_size_limit = r.width / max_column + 1;

    return r;
}