Plotly timeline

Plotly timeline

by Hannah LeBlanc

HTML

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body" id="panel-body">
          <ul class="nav nav-tabs">
            <li class="active"><a href="#a" data-toggle="tab">A</a></li>
            <li><a href="#b" data-toggle="tab">B</a></li>
            <li><a href="#c" data-toggle="tab">C</a></li>
          </ul>
          <div class="tab-content">
            <div id="a" class="tab-pane fade active" style="z-index:-1;">
            </div>
            <div id="b" class="tab-pane fade">
            </div>
            <div id="c" class="tab-pane fade">
            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
  <!-- /.row -->

</div>
<!-- /.container-fluid -->

JavaScript

var trace1 = {
  x: [0, 15],
  y: [10, 10],
  type: 'lines+markers+text',
  text: 'main track'
};
var trace2 = {
  x: [2, 2, 3, 4],
  y: [10, 9.5, 9.5, 9.5],
  type: 'scatter'
};

var trace3 = {
  x: [5, 5, 6, 6, 7, 8],
  y: [10, 9, 9, 8.5, 8.5],
  type: 'scatter'
}

var trace4 = {
  x: [10, 10, 11, 12, 13, 14, 15, 16],
  y: [10, 9.5, 9.5, 9.5, 9.5, 9.5, 9.5],
  type: 'scatter'
}

year_2017 = {
  x: [10, 10],
  y: [8, 11],
  mode: 'lines',
  name: 'dashdot',
  line: {
    dash: 'dashdot',
    width: 4
  }
}

var layout = {
  showlegend: false,
  //xaxis: {
  //type:'date'
  // },

  annotations: [{
      x: 9,
      y: 11,
      xref: 'x',
      yref: 'y',
      text: '2017',
      showarrow: true,
      arrowhead: 7,
      ax: 60, //this is angle
      ay: -40
    }, {
      x: 11,
      y: 9.5,
      xref: 'x',
      yref: 'y',
      text: 'R1A',
      showarrow: true,
      arrowhead: 7,
      ax: -45, //this is angle
      ay: -40
    }, {
      x: 5,
      y: 9,
      xref: 'x',
      yref: 'y',
      text: 'annotation',
      showarrow: true,
      font: {
        family: 'Courier New, monospace',
        size: 16,
        color: '#ffffff'
      },
      align: 'center',
      arrowhead: 2,
      arrowsize: 1,
      arrowwidth: 2,
      arrowcolor: '#636363',
      ax: 20,
      ay: -30,
      bordercolor: '#c7c7c7',
      borderwidth: 2,
      borderpad: 4,
      bgcolor: '#ff7f0e',
      opacity: 0.8
    }, {
      x: 1,
      y: 10,
      xref: 'x',
      yref: 'y',
      text: 'MAIN',
      showarrow: true,
      font: {
        family: 'Courier New, monospace',
        size: 16,
        color: '#ffffff'
      },
      align: 'center',
      arrowhead: 2,
      arrowsize: 1,
      arrowwidth: 2,
      arrowcolor: '#636363',
      ax: 20,
      ay: -30,
      bordercolor: '#c7c7c7',
      borderwidth: 2,
      borderpad: 4,
      bgcolor: '#0000ff',
      opacity: 0.8
    }

  ]
};
var data = [trace1, trace2, trace3, trace4, year_2017];

var d3 =...