Life Days Viz

by paulftw

HTML

<script src="http://datejs.googlecode.com/files/date.js"></script>
<canvas id="myCanvas" width="320" height="400"></canvas>

CSS

#myCanvas {
    margin: 0;
    padding: 0;
    width: 320px;
    height: 400px;
    //border: 1px solid #333;
}
body {
    margin: 0px;
    padding: 0px;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var ctx = context;

var bdayCol = '#ffd700';
var yong = '#2c2';
var twfive = '#cfc';
var future = '#fff';
var past = '#ccc';
var endCol = '#111';
var spec = '#e44';

var age = 29.2 * 365;
var yOfs = 0;

var edge = 2;
var row = 320 / edge;
var step = {days: 1};


var bdYear = 1982;
var bdDay = 'Oct 1 ';

var start = new Date(bdDay + bdYear);

var bday = function(y) {
    var x = new Date(bdDay + (y+bdYear));
    return x;
}

var maxAge = 76.4;
var end = bday(maxAge);

var drawDay = function(i, color) {
    if (!!color) {
        ctx.fillStyle = color;
    }
    var x = i % row;
    var y = i / row;

    ctx.fillRect(x*edge, y*edge + yOfs, edge, edge);
};

var cur = new Date(start);
var today = new Date();

for (var i=0, cur = new Date(start); cur < bday(maxAge + 50); i++, cur.add(step)) {
    if (cur < today) {
        drawDay(i, past);
    } else if (cur < end){
        drawDay(i, future);
    } else {
        drawDay(i, endCol);
    }
}
    
for (var i = 0; i < maxAge; i++) {
    var b = bday(i);
    //drawDay((b-start)/3600/24/1000/7, bdayCol);
}

for (var i = 10; i < maxAge+10; i+=10) {
    var b = bday(i);
    drawDay((b-start)/3600/24/1000, spec);
}