function makeChart(root, data, width, height, max, clicked) {
    var band = (width + 1.5) / data.length - 1.5;
    band = Math.min(band, 6);
    var bandHalf = band / 2;
    var x = d3.time.scale()
        .range([0, width - band])
        .domain([data[0][2], data[data.length - 1][2]]);

    var y = d3.scale.linear()
        .range([height, 0])
        .domain([0, max]);

    var line = root.append('line')
        .style('stroke-width', band)
        .attr('x1', bandHalf)
        .attr('x2', bandHalf)
        .attr('y2', height);

    var group = root.selectAll('.group')
        .data(data)
        .enter().append('g')
        .attr('class', 'group')
        .attr('transform', function (d) {
            return 'translate(' + x(d[2]) + ',0)';
        });

    group.selectAll('rect')
        .data(function (d) {
            return d[4];
        })
        .enter().append('rect')
        .attr('width', band)
        .attr('y', function (d) {
            return y(d.y1);
        })
        .attr('height', function (d) {
            return y(d.y0) - y(d.y1);
        })
        .style('fill', function (d) {
            return d.color;
        });

    root.append('rect')
        .attr('class', 'click')
        .attr('width', width)
        .attr('height', height)
        .style('fill', 'rgba(255,255,255,0)')
        .on('click', function () {
            d3.event.stopPropagation();
            var i = Math.round((d3.mouse(this)[0] / width) * (data.length - 1));
            clicked(i);
        });

    function updateCursor(index) {
        group
            .attr('class', function (d) {
                return data[index] === d ? 'active' : '';
            });

        var p = x(data[index][2]) + bandHalf;

        line.transition()
            .attr('x1', p)
            .attr('x2', p);
    }

    return {
        updateCursor: updateCursor,
        band: band
    };
}