CODEWITHSUNDEEP
javascriptd3.js
KateJean
KateJean

Reputation: 428

D3 Multi-Layer Timeline

This gets a little complicated, but I'm trying to create a timeline graph, similar to the one shown here:

http://bl.ocks.org/bunkat/2338034

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.

essentially, I want to show something like this: enter image description here

my data looks something like this: 

[
  {
    "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}

    ]
  }
]

Any thoughts on how I would handle this?

Upvotes: 2

Views: 6910

Answers (1)

KateJean
KateJean

Reputation: 428

Just so this is marked as answered -- all the credit goes to @SteveR for finding the npm module npmjs.com/package/timelines-chart which does exactly what I need. Thank you!

github - timelines-chart

Upvotes: 2

Related Questions