SVG bar chart with variable resolution

by phloe

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
}

text {
    fill: #FFF;
    font-family: inherit;
    font-size: inherit;
    pointer-events: none;
}
input[type=range] {
    display: block;
}

rect {
    fill: #CCC;
}

rect:hover {
    /*fill: #000;*/
}

JavaScript 1.7

var length = 24 * 60;
var i = 0;
var median = 50;
var variance = 10;
var res = 15;
var width = 600;
var height = 200;
var data = [];

var date = new Date();
date = date.setHours(0, 0, 0, 0).valueOf();

while (i < length) {
    data.push({
        time: new Date(date + i * 60 * 1000), 
        count: Math.round(median + (median - variance) * (1 - Math.cos((i/length)*(Math.PI*2))) + (Math.random() * variance - (variance/2)))
    });
    i++;
}

function resData (data, res) {
    var slice = [];
    var length = data.length / res;
    var i = 0;
    while (i < length) {
        slice.push({
            time: data[i * res].time,
            count: getSum(data.slice(i * res, (i+1) * res))
        });
        i++;
    }
    return slice;
}

function getSum (values) {
    var value = 0;
    var length = values.length;
    var i = 0;
    while (i < length) {
        value += values[i].count;
        i++;
    }
    return value;
}

function getMax (values) {
    var value = 0;
    var length = values.length;
    var i = 0;
    while (i < length) {
        if (value < values[i].count) {
            value = values[i].count;
        }
        i++;
    }
    return value;
}

function formatTime (date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    return hours + ":" + minutes;
}

var Chart = React.createClass({
    getInitialState: function () {
        return {
            hovered: null   
        };
    },
    setResolution: function () {
        var res = this.refs.resolution.getDOMNode().value;
        this.setProps({
            res: res,
            data: resData(data, res)
        });
    },
    showDetails: function (index) {
        this.setState({
            hovered: index
        });
    },
    hideDetails: function () {
        this.setState({
            hovered: null
        });
    },
    render: function() {
    ...