Git Visualization

Visualize age and number of commits of code artifacts on a canvas

by Patrick Hund

HTML

<div id="frame"></div>

CSS

canvas: {
    border: 1px solid black;
    
}

JavaScript

$(document).ready(function () {
    var data = {
        "mobile-public-search-germany-webapp": [
            { commits: 12, age: 63115200000 }, // last commit 2 years ago
            { commits: 6, age: 259200000 }, // last commit 3 days ago
            { commits: 1, age: 1123200000 }, // last commit 13 days ago
            { commits: 6, age: 18408600000 }, // last commit 7 months ago
            { commits: 4, age: 8121600000 }, // last commit 94 days ago
            { commits: 16, age: 36817200000 }, // last commit 14 months ago
            { commits: 3, age: 4579200000 }, // last commit 53 days ago
            { commits: 9, age: 71004600000 }, // last commit 27 months ago
            { commits: 15, age: 10519200000 }, // last commit 4 monthas ago
            { commits: 8, age: 126230400000 }, // last commit 4 years ago
        ]
     };
            
     $.each(data, function(name, artifact) {
        console.log(name);
        var numberOfFiles = artifact.length;
        var width = Math.ceil(Math.sqrt(numberOfFiles));
        var height = width;
        console.log("numberOfFiles:", numberOfFiles);
        console.log("width:", width);
        console.log("height:", height);
        var canvas = $("#frame").append("<canvas id=\"" + name + "\" width=\"" + width + "\" height=\"" + height + "\"></canvas>");
        var context = canvas.getContext("2d");
        
            
     });
});