Timeline Example 1

_.md

[ Launch: Timeline Example 1 ] 10700253 by dmann99

config.json

{"description":"Timeline Example 1","endpoint":"","display":"svg","public":true,"require":[{"name":"d3-timeline","url":"https://raw.githubusercontent.com/jiahuang/d3-timeline/master/src/d3-timeline.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},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"testdata.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/QTSziEP.png"}

inlet.js

var testData = tributary.testdata;

var chart = d3.timeline()
          .tickFormat( // 
            {format: d3.time.format("%I %p"), 
            tickTime: d3.time.hours, 
            tickInterval: 1, 
            tickSize: 3})
          .display("circle"); // toggle between rectangles and circles



var svg = d3.select("svg").attr("width", 500)
  .datum(testData).call(chart);


// Todo:
// Set interval
// Animate along interval

style.css

.axis {
      transform: translate(0px,30px);
      -ms-transform: translate(0px,30px); /* IE 9 */
      -webkit-transform: translate(0px,27px); /* Safari and Chrome */
      -o-transform: translate(0px,30px); /* Opera */
      -moz-transform: translate(0px,30px); /* Firefox */
    }

testdata.json

[
  {"label": "person a", "times": [
    {"starting_time": 1355752800000, "ending_time": 1355759900000}, 
    {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
  
  {"label": "person b", "times": [
    {"starting_time": 1355759910000, "ending_time": 1355761900000}]},
  
  {"label": "person c", "times": [
    {"starting_time": 1355761910000, "ending_time": 1355763910000}]}
  
  ]