D3 Examples - simpleTimeLine

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.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 */
    }
    
    .timelineSeriesItem-label {
      font-size: 12px;
      vertical-align: middle;
        
    }
    
      .outside{
    position:relative;
}
.inside{
    position:absolute;
    top:50%;
    bottom:50%;
    transform:transition(-50%,-%50);
}
    
    .coloredDiv {
      height:20px; width:10px; float:left;
    }
  </style>
  
  <script src="timelineData.json"></script>
  <script src="d3.timeline.js"></script>
  <script>
    
      window.onload = function() {
        
        /* To convert a Javscript Date into a Timestamp...
        var myDate="15-12-2012";
myDate=myDate.split("-");
var newDate=myDate[1]+"/"+myDate[0]+"/"+myDate[2];
console.log(new Date(newDate).getTime());
*/
        
            var testData2 = [
        {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
                {class: "treaty a",label: "treaty a", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty b", label: "treaty b",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty c",label: "treaty c",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty d",label: "treaty d", times: [{"color":"green", label: "seq1: CMR $50, APN $1.3, UW Cases: 45, LG Hits: 23k", "starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty e", label: "treaty e",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]},
        {class: "treaty f",label: "treaty f",times: [{label: "seq1","starting_time": 1323907200000, "ending_time": 1338937200000}, {label: "seq2","starting_time": 1341097200000, "ending_time": 1355774400000}]}
        
      ];
        
        var margin = {top: 10, right: 10, bottom: 10, left: 50},
    width = 900 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
        
      var width = 800;
      function timelineRect() {
        var chart = d3.timeline()
        .tickFormat( //
            {format: d3.time.format("%d%b%Y"),
            tickTime: d3.time.months,
            tickInterval: 2,
            tickSize: 20})
        .width(1200)
        .height(1200)
        .stack() // toggles graph stacking;
        var svg = d3.select("#timeline1").append("svg")
            .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
          .datum(testData2).call(chart);
      }
      
      function timelineRectNoAxis() {
        var chart = d3.timeline().showTimeAxis();
        var svg = d3.select("#timeline1_noaxis").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }
      function timelineCircle() {
        var chart = d3.timeline()
          .tickFormat( //
            {format: d3.time.format("%I %p"),
            tickTime: d3.time.hours,
            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.timeline();
        var svg = d3.select("#timeline2_combine").append("svg").attr("width", width)
          .datum(rectAndCircleTestData).call(chart);
      }
      function timelineHover() {
        var chart = d3.timeline()
          .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.timeline()
          .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.timeline()
          .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.timeline()
          .rotateTicks(45);
        var svg = d3.select("#timeline7").append("svg").attr("width", width)
          .datum(testData).call(chart);
      }
      function timelineRectColors() {
        var colorScale = d3.scale.ordinal().range(['#6b0000','#ef9b0f','#ffee00'])
            .domain(['apple','orange','lemon']);
        var chart = d3.timeline()
            .colors( colorScale )
            .colorProperty('fruit');
        var svg = d3.select("#timelineColors").append("svg").attr("width", width)
          .datum(testDataWithColor).call(chart);
      }
      function timelineRectColorsPerTime() {
        var colorScale = d3.scale.ordinal().range(['#6b0000','#ef9b0f','#ffee00'])
          .domain(['apple','orange','lemon']);
        var chart = d3.timeline()
          .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
        //https://stackoverflow.com/questions/11286872/how-do-i-make-a-custom-axis-formatter-for-hours-minutes-in-d3-js
        var chart = d3.timeline()
          .relativeTime()
          .tickFormat({
            format: function(d) { return d3.time.format("%H:%M")(d) },
            tickTime: d3.time.minutes,
            tickInterval: 30,
            tickSize: 15,
          });
        var svg = d3.select("#timelineRelativeTime").append("svg").attr("width", width)
          .datum(testDataRelative).call(chart);
          console.log(testDataRelative);
      }
      function timelineAxisTop() {
        var chart = d3.timeline().showAxisTop().stack();
        var svg = d3.select("#timelineAxisTop").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }
      function timelineBgndTick() {
        var chart = d3.timeline().stack().showTimeAxisTick().background('grey');
        var svg = d3.select("#timelineBgndTick").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }
      function timelineBgnd() {
        var chart = d3.timeline().stack().background('grey');
        var svg = d3.select("#timelineBgnd").append("svg").attr("width", width)
            .datum(testData).call(chart);
      }
   function timelineComplex() {
        var chart = d3.timeline();
     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 class="outside">
    <h3>Business XYZ:</h3>
    <div id="timeline1" class="inside"></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>
​
    