<head>
    <!-- Plotly.js -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  </head>
  
  <body>
    
    <!-- Binary track -->
    <div id="btc">
      <div id="bt_past"></div>
      <div id="bt_future"></div>
      
    </div>
  </body>
#btc {
  margin-top: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  //grid-template-rows: 1fr;
  grid-template-areas:
    "p p p f";
}

#bt_past {
  grid-area: p;
}

#bt_future {
  grid-area: f;
}




var time = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
var futureSplitPoint = 0.75;

var data = {
    points: [0, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1],
    future: [0,0,1,1,1]
 }; 

function makeTraces(time, points, isFuture) {
  traces = [];
  for(var i = 0; i < points.length; i++ ) {
    var tempTrace = { 
        x: [], 
        y:[],
        mode: 'lines+markers',
        marker: {
            color: 'hsl(33, 100, 50)',
            size: 20
        },
        line: {
            width: 20,
            color: 'hsl(33, 100, 50)'
        }
    }
    if(isFuture) {
        tempTrace.marker.color = 'hsl(33, 100, 70)';
        tempTrace.line.color = 'hsl(33, 100, 70)';
        //tempTrace.xaxis = 'x4';
    }
    

    if((points[i] && points[i+1]) === 1) {
      tempTrace.x.push(time[i]);
      tempTrace.y.push(points[i]);
      var j = i+1;
      while(points[j] === 1) {
        tempTrace.x.push(time[j]);
        tempTrace.y.push(points[j]);
        j++;
      }
      i = j;
      traces.push(tempTrace);
    } else {//if (data.y[i] === 1) {
        tempTrace.x.push(time[i]);
        tempTrace.y.push(points[i]);
        traces.push(tempTrace);
    }
      
  }
  return traces;
}

  
  var layout_past = {
    //title: 'Binary Track Chart',
    showlegend: false,
    height: 25,
    margin: {
        l: 0,
        r: 0,
        b: 0,
        t: 0,
        pad: 4
      },
    xaxis: {
        showgrid: true,
        //fixedrange: true,
        zeroline: true,
        showticklabels: false,
        domain: [0, 1]
    },
    yaxis: {
        showline: false,
        //fixedrange: true,
        showgrid: false,
        zeroline: false,
        showticklabels: false,
        //type: 'log',
        range: [0.99,1.01]
    }
  };

var past_traces = makeTraces(time, data.points, false);
Plotly.newPlot('bt_past', past_traces, layout_past);

var future_traces = makeTraces(time, data.future, true);
Plotly.newPlot('bt_future', future_traces, layout_past);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.