examples/example.html

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  <script src="../dist/d3-timelines.js"></script>

  <style type="text/css">
    .axis path,
    .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
    }

    .axis text {
      font-family: sans-serif;
      font-size: 10px;
    }

    .timeline-label {
      font-family: sans-serif;
      font-size: 12px;
    }

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

    .coloredDiv {
      height:20px; width:20px; float:left;
    }
  </style>
  <script type="text/javascript">
    window.onload = function() {
      var testData = [
        {times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
        {times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
      ];

      var rectAndCircleTestData = [
        {times: [{"starting_time": 1355752800000,
                 "display": "circle"}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {times: [{"starting_time": 1355759910000,
        "display":"circle"}, ]},
        {times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
      ];

      var labelTestData = [
        {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}]}
      ];

      var iconTestData = [
        {class:"jackie", icon: "jackie.png", times: [
          {"starting_time": 1355752800000, "ending_time": 1355759900000},
          {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {class:"troll", icon: "troll.png", times: [
          {"starting_time": 1355759910000, "ending_time": 1355761900000,
          "display":"circle"}, ]},
        {class:"wat", icon: "wat.png", times: [
          {"starting_time": 1355761910000, "ending_time": 1355763910000}]}
      ];

      var labelColorTestData = [
        {label: "person a", times: [{"color":"green", "label":"Weeee", "starting_time": 1355752800000, "ending_time": 1355759900000}, {"color":"blue", "label":"Weeee", "starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {label: "person b", times: [{"color":"pink", "label":"Weeee", "starting_time": 1355759910000, "ending_time": 1355761900000}, ]},
        {label: "person c", times: [{"color":"yellow", "label":"Weeee", "starting_time": 1355761910000, "ending_time": 1355763910000}]}
      ];

      var testDataWithColor = [
        {label: "fruit 1", fruit: "orange", times: [
          {"starting_time": 1355759910000, "ending_time": 1355761900000}]},
        {label: "fruit 2", fruit: "apple", times: [
          {"starting_time": 1355752800000, "ending_time": 1355759900000},
          {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {label: "fruit3", fruit: "lemon", times: [
          {"starting_time": 1355761910000, "ending_time": 1355763910000}]}
        ];

      var testDataWithColorPerTime = [
        {label: "fruit 2", fruit: "apple", times: [
          {fruit: "orange", "starting_time": 1355752800000, "ending_time": 1355759900000},
          {"starting_time": 1355767900000, "ending_time": 1355774400000},
          {fruit: "lemon", "starting_time": 1355774400000, "ending_time": 1355775500000}]}
        ];

      var testDataRelative = [
        {times: [{"starting_time": 1355752800000, "ending_time": 1355759900000}, {"starting_time": 1355767900000, "ending_time": 1355774400000}]},
        {times: [{"starting_time": 1355759910000, "ending_time": 1355761900000}]},
        {times: [{"starting_time": 1355761910000, "ending_time": 1355763910000}]}
      ];

      var width = 500;
      function timelineRect() {
        var chart = d3.timelines();

        var svg = d3.select("#timeline1").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }

      function timelineRectNoAxis() {
        var chart = d3.timelines().showTimeAxis();

        var svg = d3.select("#timeline1_noaxis").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }

      function timelineCircle() {
        var chart = d3.timelines()
          .tickFormat( //
            {format: d3.timeFormat("%I %p"),
            tickTime: d3.timeHours,
            tickInterval: 1,
            tickSize: 30})
          .display("circle"); // toggle between rectangles and circles

        var svg = d3.select("#timeline2").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }

      function timelineRectAndCircle() {
        var chart = d3.timelines();

        var svg = d3.select("#timeline2_combine").append("svg").attr("width", width)
          .datum(rectAndCircleTestData).call(chart);
      }

      // the stacked, hover, scrollable
      function timelineHover() {
        var chart = d3.timelines()
          .width(width*4)
          .stack()
          .margin({left:70, right:30, top:0, bottom:0})
          .hover(function (d, i, datum) {
          // d is the current rendering object
          // i is the index during d3 rendering
          // datum is the id object
            var div = $('#hoverRes');
            var colors = chart.colors();
            div.find('.coloredDiv').css('background-color', colors(i))
            div.find('#name').text(datum.label);
          })
          .click(function (d, i, datum) {
            alert(datum.label);
          })
          .scroll(function (x, scale) {
            $("#scrolled_date").text(scale.invert(x) + " to " + scale.invert(x+width));
          });

        var svg = d3.select("#timeline3").append("svg").attr("width", width)
          .datum(labelTestData).call(chart);
      }

      function timelineStackedIcons() {
        var chart = d3.timelines()
          .beginning(1355752800000) // we can optionally add beginning and ending times to speed up rendering a little
          .ending(1355774400000)
          .showTimeAxisTick() // toggles tick marks
          .stack() // toggles graph stacking
          .margin({left:70, right:30, top:0, bottom:0})
          ;
        var svg = d3.select("#timeline5").append("svg").attr("width", width)
          .datum(iconTestData).call(chart);
      }

      function timelineLabelColor() {
        var chart = d3.timelines()
          .beginning(1355752800000) // we can optionally add beginning and ending times to speed up rendering a little
          .ending(1355774400000)
          .stack() // toggles graph stacking
          .margin({left:70, right:30, top:0, bottom:0})
          ;
        var svg = d3.select("#timeline6").append("svg").attr("width", width)
          .datum(labelColorTestData).call(chart);
      }

      function timelineRotatedTicks() {
        var chart = d3.timelines()
          .rotateTicks(45);

        var svg = d3.select("#timeline7").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }

      function timelineRectColors() {
        var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
            .domain(['apple','orange','lemon']);

        var chart = d3.timelines()
            .colors( colorScale )
            .colorProperty('fruit');

        var svg = d3.select("#timelineColors").append("svg").attr("width", width)
          .datum(testDataWithColor).call(chart);
      }

      function timelineRectColorsPerTime() {
        var colorScale = d3.scaleOrdinal().range(['#6b0000','#ef9b0f','#ffee00'])
          .domain(['apple','orange','lemon']);
        var chart = d3.timelines()
          .colors( colorScale )
          .colorProperty('fruit');
        var svg = d3.select("#timelineColorsPerTime").append("svg").attr("width", width)
          .datum(testDataWithColorPerTime).call(chart);
      }

      function timelineRelativeTime() {
        //This solution is for relative time is from
        //http://stackoverflow.com/questions/11286872/how-do-i-make-a-custom-axis-formatter-for-hours-minutes-in-d3-js
        var chart = d3.timelines()
          .relativeTime()
          .tickFormat({
            format: function(d) { return d3.timeFormat("%H:%M")(d) },
            tickTime: d3.timeMinutes,
            tickInterval: 30,
            tickSize: 15,
          });

        var svg = d3.select("#timelineRelativeTime").append("svg").attr("width", width)
          .datum(testDataRelative).call(chart);
      }

      function timelineAxisTop() {
        var chart = d3.timelines().showAxisTop().stack();

        var svg = d3.select("#timelineAxisTop").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }

      function timelineBgndTick() {
        var chart = d3.timelines().stack().showTimeAxisTick().background('grey');

        var svg = d3.select("#timelineBgndTick").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }

      function timelineBgnd() {
        var chart = d3.timelines().stack().background('grey');

        var svg = d3.select("#timelineBgnd").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }

   function timelineComplex() {
        var chart = d3.timelines();
     chart.stack();
     chart.showTimeAxisTick();
//     chart.showAxisTop();
//     chart.showToday();
//     chart.itemHeight(50);
     chart.margin({left: 250, right: 0, top: 20, bottom: 0});
     chart.itemMargin(0);
     chart.labelMargin(25);

     var backgroundColor = "#FCFCFD";
     var altBackgroundColor = "red";
     chart.background(function (datum, i) {
       var odd = (i % 2) === 0;
       return odd ? altBackgroundColor : backgroundColor;
     });
     chart.fullLengthBackgrounds();
        var svg = d3.select("#timelineComplex").append("svg").attr("width", width)
            .datum(labelTestData).call(chart);
      }

      timelineRect();
      timelineRectNoAxis();
      timelineCircle();
      timelineRectAndCircle();
      timelineHover();
      timelineStackedIcons();
      timelineLabelColor();
      timelineRotatedTicks();
      timelineRectColors();
      timelineRectColorsPerTime();
      timelineRelativeTime();
      timelineAxisTop();
      timelineBgndTick();
      timelineBgnd();
      timelineComplex();
    }
  </script>
</head>
<body>
  <div>
    <h3>A simple timeline</h3>
    <div id="timeline1"></div>
  </div>
  <div>
    <h3>A simple timeline without Axis</h3>
    <div id="timeline1_noaxis"></div>
  </div>
  <div>
    <h3>It works with circles too</h3>
    <div id="timeline2"></div>
  </div>
  <div>
    <h3>Combine circles and rectangles</h3>
    <div id="timeline2_combine"></div>
  </div>
  <div>
    <h3>A stacked timeline with hover, click, and scroll events</h3>
    <div id="timeline3"></div>
    <div id="hoverRes">
      <div class="coloredDiv"></div>
      <div id="name"></div>
      <div id="scrolled_date"></div>
    </div>
  </div>
  <div>
    <h3>We can also use icons</h3>
    <div id="timeline5"></div>
  </div>

  <div>
    <h3>We can change colors and put labels</h3>
    <div id="timeline6"></div>
  </div>

  <div>
    <h3>We can also rotate tick mark labels</h3>
    <div id="timeline7"></div>
  </div>

  <div>
    <h3>A timeline with colors mapped from the data</h3>
    <div id="timelineColors"></div>
  </div>

  <div>
    <h3>A timeline with colors mapped from the data for individual time objects</h3>
    <div id="timelineColorsPerTime"></div>
  </div>

  <div>
    <h3>A timeline with relative timepoints</h3>
    <div width="100%" id="timelineRelativeTime"></div>
  </div>

  <div>
    <h3>A stacked timeline with axis on top</h3>
    <div width="100%" id="timelineAxisTop"></div>
  </div>

  <div>
    <h3>A stacked timeline with backgrounds</h3>
    <div width="100%" id="timelineBgnd"></div>
  </div>

  <div>
    <h3>A stacked timeline with backgrounds and ticks</h3>
    <div width="100%" id="timelineBgndTick"></div>
  </div>

  <div>
    <h3>A complex timeline</h3>
    <div width="100%" id="timelineComplex"></div>
  </div>

</body>
</html>