timeline.js

// not quite a dc.js chart, writing it simply in order to
// relearn the basics. i'll probably regret this and dc-ize it later
// why is it not a grouped bar chart with a time x axis?
// because i am not sure that would work even if i had time to merge the PR
// ok i'm rationalizing. it's for the fun. all the more reason to regret later.
function timeline(parent) {
    const _chart = {};
    let _x = null, _y = null;
    let _width, _height;
    let _root = null, _svg = null, _g = null;
    let _tickWidth = 1, _tickOpacity = 0.5;
    let _region;
    let _minHeight = 20;
    const _dispatch = d3.dispatch('jump');
    // input data is just an array of {key: Date, value: {} or {adds: number, dels: number}}
    let _events = null;
    // play head
    let _current = null;
    // time display
    let _timewid = 65;
    const _timefmt = d3.time.format('%-m/%-d %H:%M:%S');

    _chart.x = function(scale) {
        if (!arguments.length)
            return _x;
        _x = scale;
        return _chart;
    };

    _chart.y = function(scale) {
        if (!arguments.length)
            return _y;
        _y = scale;
        return _chart;
    };

    _chart.events = function(events) {
        if (!arguments.length)
            return _events;
        _events = events.map(e => {
            let value;
            if (e.value.adds !== undefined) {
                value = [
                    {key: 'adds', height: e.value.adds, fill: 'green'},
                    {key: 'dels', height: e.value.dels, fill: 'red'},
                ];
            } else {
                value = [
                    {key: 'place', height: NaN, fill: 'grey'},
                ];
            }
            return {key: e.key, value};
        });
        return _chart;
    };

    // a region {x1, x2, color, opacity} to highlight
    _chart.region = function(region) {
        if (!arguments.length)
            return _region;
        _region = region;
        return _chart;
    };

    _chart.current = function(t) {
        if (!arguments.length)
            return _current;
        _current = t;
        return _chart;
    };

    function baseline() {
        return _height/2;
    }

    function y(height) {
        return isNaN(height) ? 3 : _y(0)-_y(height);
    }

    _chart.minHeight = function(h) {
        if (!arguments.length)
            return _minHeight;
        _minHeight = h;
        return _chart;
    };

    _chart.tickOpacity = function(o) {
        if (!arguments.length)
            return _tickOpacity;
        _tickOpacity = o;
        return _chart;
    };

    _chart.tickWidth = function(o) {
        if (!arguments.length)
            return _tickWidth;
        _tickWidth = o;
        return _chart;
    };

    function height(tick) {
        switch (tick.key) {
            case 'place':
                return 3;
            case 'marker':
                return baseline();
            default:
                return y(tick.height);
        }
    }

    function y0(tick) {
        switch (tick.key) {
            case 'place':
                return baseline()-1;
            case 'adds':
                return baseline()-y(tick.height);
            case 'dels':
                return baseline();
            default:
                throw new Error(`unknown tick type ${tick.key}`);
        }
    }

    _chart.redraw = function() {
        const bl = baseline();
        if (!_x) _x = d3.time.scale();
        if (!_y) _y = d3.scale.linear();
        _x.domain(d3.extent(_events, e => e.key))
            .range([_timewid, _width-_tickWidth]);
        const max = Math.max(
            _minHeight,
            d3.max(_events, e =>
                e.value[0].key === 'adds'
                    ? Math.max(e.value[0].height, e.value[1].height)
                    : 0),
        );
        _y.domain([max, -max]).range([0, _height]);

        const axis = _g.selectAll('rect.timeline').data([0]);
        axis.enter().append('rect').attr('class', 'timeline');
        axis.attr({
            width: _width-_timewid,
            height: 1,
            x: _timewid,
            y: bl,
            fill: '#ccc',
        });

        const region = _g.selectAll('rect.region')
            .data(_region ? [_region] : []);
        region.enter().append('rect')
            .attr('class', 'region');
        region.attr({
            x(d) {
                return _x(d.x1);
            },
            y: 0,
            width(d) {
                return _x(d.x2)-_x(d.x1)+_tickWidth;
            },
            height: _height,
            fill: _region && _region.color || 'blue',
            opacity: _region && _region.opacity || 0.5,
        });
        region.exit().remove();

        const ticks = _g.selectAll('g.timetick')
            .data(_events, e => e.key);
        ticks.enter().append('g').attr('class', 'timetick');
        ticks.attr('transform', d => `translate(${Math.floor(_x(d.key))},0)`);
        ticks.exit().remove();
        const tick = ticks.selectAll('rect')
            .data(d => d.value, t => t.key);
        tick.enter().append('rect');
        tick.attr({
            width: _tickWidth,
            height: height,
            x: 0,
            y: y0,
            fill: function(t) {
                return t.fill;
            },
            opacity: _tickOpacity,
        });
        tick.exit().remove();

        if (_current) {
            var text = _g.selectAll('text.currtime')
                .data([0]);
            text.enter().append('text').attr('class', 'currtime');
            text.text(_timefmt(_current)).attr({
                'font-family': 'sans-serif',
                'font-size': '10px',
                x: 0,
                y: bl,
            });
            var head = _g.selectAll('g.playhead')
                .data([0]);
            head.enter().append('g').attr('class', 'playhead');
            var playbox = head.selectAll('rect')
                .data([0]);
            playbox.enter().append('rect');
            playbox.attr({
                width: 4,
                height: _height,
                x: Math.floor(_x(_current))-1,
                y: 0,
                fill: 'none',
                stroke: 'darkblue',
                'stroke-width': 1,
                opacity: 0.5,
            });
        }
        return _chart;
    };

    _chart.render = function() {
        resetSvg();
        _g = _svg
            .append('g');

        _svg.on('click', function() {
            if (_x)
                _dispatch.jump(_x.invert(d3.mouse(this)[0]));
        });
        _chart.redraw();
        return _chart;
    };

    _chart.on = function(event, callback) {
        _dispatch.on(event, callback);
        return _chart;
    };

    _chart.width = function(w) {
        if (!arguments.length)
            return _width;
        _width = w;
        return _chart;
    };

    _chart.height = function(h) {
        if (!arguments.length)
            return _height;
        _height = h;
        return _chart;
    };

    _chart.select = function(s) {
        return _root.select(s);
    };

    _chart.selectAll = function(s) {
        return _root.selectAll(s);
    };

    function resetSvg() {
        _chart.select('svg').remove();
        generateSvg();
    }

    function generateSvg() {
        _svg = _root.append('svg')
            .attr({width: _chart.width(), height: _chart.height()});
    }

    _root = d3.select(parent);
    return _chart;
}