FIDDLE WITH D3 and Plottable

by karolinka

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://rawgithub.com/palantir/plottable/develop/plottable.js"></script>
<svg id="example" width="400" height="300"></svg>

CSS

</style> <link rel="stylesheet" type="text/css" href="http://rawgithub.com/palantir/plottable/develop/plottable.css"> <style type="text/css"> html, body {
    width:100%;
    height:50%;
    margin-top:25%;
    padding: 0;
    font-family:'Tahoma'
}

JavaScript

function datePeriod(d1, d2, d3, d4) {

    var data = [{
        "start": d1,
        "end": d2,
        "task": "Benchmarking"
    }, {
        "start": d2,
        "end": d3,
        "task": "Implementation"
    }, {
        "start": d3,
        "end": d4,
        "task": "Evaluation"
    }];

    var currentPos = new Date();
    var arrowPosition = [{
        "x": currentPos,
        "y": 2
    }];

    var currentTime = new Date();

    if (new Date() < d1) {
        data[0].start = currentTime;
    } else if (new Date() > d4) {
        arrowPosition[0].x = d4;
    } else {
        arrowPosition[0].x = currentTime;
    }
    var domain = [new Date() < new Date(d1) ? new Date() : new Date(d1), new Date(d4)];
    var dur = domain[1].getTime() - domain[0].getTime();

    domain[0] = new Date(domain[0].getTime() - dur * 0.1);
    domain[1] = new Date(domain[1].getTime() + dur * 0.1);
    var colorScale = new Plottable.Scales.Color();
    var yScale = new Plottable.Scales.Category();
    var xScale = new Plottable.Scales.Time()
        .domain(domain);
    var xScaleArrow = new Plottable.Scales.Time();
    var yScaleArrow = new Plottable.Scales.Category();

    var xAxis = new Plottable.Axes.Time(xScale, "bottom")

    var yAxis = new Plottable.Axes.Category(yScale, "left");

    var plot = new Plottable.Plots.Rectangle()
        .x(function (d) {
        return new Date(d.start);
    }, xScale)
        .x2(function (d) {
        return new Date(d.end);
    }, xScale)
        .y(function (d) {
        return 1
    }, yScale)
        .attr("fill", function (d) {
        return d.task;
    }, colorScale)
        .labelsEnabled(true)
        .label(function (d) {
        return d.task
    })
        .addDataset(new Plottable.Dataset(data));

    var arrow = new Plottable.Plots.Scatter()
        .x(function (d) {
        return d.x;
    }, xScale)
        .y(function (d) {
        return d.y;
    }, yScaleArrow)
        .symbol(function (d) {
        return new...