title: D3 Multi-Layer Timeline
body: <p>This gets a little complicated, but I'm trying to create a timeline graph, similar to the one shown here: </p>
  
  <p><a href="http://bl.ocks.org/bunkat/2338034" rel="nofollow noreferrer">http://bl.ocks.org/bunkat/2338034</a></p>
  
  <p>The hiccup comes in with my data. I've got 3 different feeds that take data from 7 different sensors. Some sensors may send a response at the same time as other sensors, so the overlaps are causing some issues with my current code. </p>
  
  <p>essentially, I want to show something like this: 
  <a href="https://i.stack.imgur.com/IbvqO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbvqO.png" alt="enter image description here"></a></p>
  
  <p>my data looks something like this: </p>
  
  <pre><code>[
    {
      "ID": "run0001",
      "data": [
          {"Time": 760 , "EndTime": 780,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorA", "lane":0},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorD", "lane":0},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-1" , "FeedName": "SensorB", "lane":0},
          {"Time": 760 , "EndTime": 780 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-2" , "FeedName": "SensorB", "lane":1},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-2" , "FeedName": "SensorA", "lane":1},
          {"Time": 760 , "EndTime": 780 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
          {"Time": 780 , "EndTime": 800 ,  "Feed": "Feed-3" , "FeedName": "SensorC", "lane":2},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
          {"Time": 800 , "EndTime": 820 ,  "Feed": "Feed-3" , "FeedName": "SensorF", "lane":2},
          {"Time": 820 , "EndTime": 840 ,  "Feed": "Feed-3" , "FeedName": "SensorG", "lane":2}
  
      ]
    }
  ]
  </code></pre>
  
  <p>Any thoughts on how I would handle this? </p>