Time Lines

_.md

[ Launch: test ] 11129617 by philderbeast
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"Time Lines","endpoint":"","display":"svg","public":true,"require":[{"name":"underscore","url":"http://underscorejs.org/underscore-min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"timezones.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var data = tributary.timezones;
var depTz = data.whole.depTz;
var w = 1283;
var h = 95;
var leftOffset = 0;
var bottomOffset = 48;
var flightBandsRange = [46, (h - bottomOffset) * 0.370427904];

var format = d3.time.format("%Y-%m-%dT%H:%M:%S");
var mFormat = d3.time.format("%H:%M");

var depTz = _.map(data.parts, function (d) { return (d.fly || d.lay).depTz; });
var arrTz = _.map(data.parts, function (d) { return (d.fly || d.lay).arrTz; });

var departureOf = function (d) { return d.dep; }
var arrivalOf = function (d) { return d.arr; }
var toTime = function (x) { return format.parse(x); };

var depTzDeps = _.map(depTz, departureOf);
var tsDepTz = depTzDeps.concat([arrivalOf(_.last(depTz))]);
var ysDepTz = _.map(tsDepTz, toTime);

var arrTzDeps = _.map(arrTz, departureOf);
var tsArrTz = arrTzDeps.concat([arrivalOf(_.last(arrTz))]);
var ysArrTz = _.map(tsArrTz, toTime);

var depTimeScale = d3.time.scale()
.domain(d3.extent(ysDepTz))
.range([leftOffset, (w - leftOffset) * 0.653184])

var arrTimeScale = d3.time.scale()
.domain(d3.extent(ysArrTz))
.range([leftOffset, (w - leftOffset) * 0.653184])

var flightScale = d3.scale.ordinal()
.domain(["a", "b"])
.rangePoints(flightBandsRange)
.rangeBands(flightBandsRange)

var a_h = flightScale("a");
var b_h = flightScale("b");

var svg = d3.select("svg")
.attr("class", "chart")
.attr({ width: w, height: h });

var g = svg.append("g")
.attr("transform", "translate(27, 64)");

var rects = g.selectAll("rect")
.data(ysDepTz);

rects.enter().append("rect");
rects.attr({
  "class": function (d, i) { return i % 2 === 0 ? "fly" : "lay"; },
  width: function (d, i) { return depTimeScale(ysDepTz[i + 1]) - depTimeScale(ysDepTz[i]); },
  height: a_h,
  x: function (d, i)  { return depTimeScale(ysDepTz[i]); },
  y: -a_h
});

var depTzAxis = d3.svg.axis()
.scale(depTimeScale)
.tickValues(ysDepTz)
.tickFormat(mFormat)
.orient("top")

var arrTzAxis = d3.svg.axis()
.scale(arrTimeScale)
.tickValues(ysArrTz)
.tickFormat(mFormat)
.orient("bottom")

g.append("g")
.attr("transform", "translate(0, -32)")
.attr("class", "axis")
.call(depTzAxis);

g.append("g")
.attr("transform", "translate(0, 0)")
.attr("class", "axis")
.call(arrTzAxis);

style.css

.axis {
  stroke: #000;
  fill: none;
  shape-rendering: crisp-edges
}
.chart {
  background-color: #c2ffbc;
}
.fly {
  fill: #f00;
}
.lay {
  fill: transparent;
}
text {
  stroke: none;
  fill: #000;
}

timezones.json

{
  "parts": [
    {
      "fly": {
        "arrTz": {
          "arr": "2014-04-27T09:50:00",
          "dep": "2014-04-27T08:30:00"
        },
        "depTz": {
          "arr": "2014-04-27T12:20:00",
          "dep": "2014-04-27T11:00:00"
        },
        "span": "01:20"
      }
    },
    {
      "lay": {
        "arrTz": {
          "arr": "2014-04-27T13:30:00",
          "dep": "2014-04-27T09:50:00"
        },
        "depTz": {
          "arr": "2014-04-27T16:00:00",
          "dep": "2014-04-27T12:20:00"
        },
        "span": "03:40"
      }
    },
    {
      "fly": {
        "arrTz": {
          "arr": "2014-04-27T17:00:00",
          "dep": "2014-04-27T13:30:00"
        },
        "depTz": {
          "arr": "2014-04-27T19:30:00",
          "dep": "2014-04-27T16:00:00"
        },
        "span": "03:30"
      }
    },
    {
      "lay": {
        "arrTz": {
          "arr": "2014-04-27T19:40:00",
          "dep": "2014-04-27T17:00:00"
        },
        "depTz": {
          "arr": "2014-04-27T22:10:00",
          "dep": "2014-04-27T19:30:00"
        },
        "span": "02:40"
      }
    },
    {
      "fly": {
        "arrTz": {
          "arr": "2014-04-27T21:55:00",
          "dep": "2014-04-27T19:40:00"
        },
        "depTz": {
          "arr": "2014-04-28T00:25:00",
          "dep": "2014-04-27T22:10:00"
        },
        "span": "02:15"
      }
    }
  ],
  "whole": {
    "arrTz": {
      "arr": "2014-04-27T21:55:00",
      "dep": "2014-04-27T08:30:00"
    },
    "depTz": {
      "arr": "2014-04-28T00:25:00",
      "dep": "2014-04-27T11:00:00"
    },
    "span": "13:25"
  }
}