I'm trying to draw a graph layout where the y-axis coordinate is based on time - is there any known algorithm that achieves this? I've looked into dagre, but it seems like the ranking system is purely based on the edges in the network.
Multiple nodes could have the same or similar Y coordinate, so the idea would be to space the nodes horizontally to avoid nodes overlapping, while maintaining a balanced layout. Somewhat like the attached image (not all edges shown). As per the Reingold & Tilford or Sugiyama algorithms, it would be preferable to minimise overlapping edges. Any ideas? I've tried using the D3 force-directed layout with the y-coord fixed, and it does work (albeit jumpy), but this method doesn't scale beyond a few hundred nodes. I need to handle max 5000 nodes & 5000 edges, meaning the actual rendering will most likely need to use html canvas rather than svg.
Update: the below should give a better idea of what I'm trying to achieve (in reality some edge crossings would be required but this is the general idea).
The above can be generated from the following JSON:
nodes: [
{id:1, date: 1531600000, duration: 3600, preds: []},
{id:2, date: 1531603600, duration: 0, preds: [1]},
{id:3, date: 1531603600, duration: 0, preds: [2]},
{id:4, date: 1531603600, duration: 7200, preds: [3]},
{id:5, date: 1531610800, duration: 7200, preds: [4]},
{id:6, date: 1531618000, duration: 0, preds: [5,8]},
{id:7, date: 1531603600, duration: 3600, preds: [1]},
{id:8, date: 1531607200, duration: 3600, preds: [7]},
{id:9, date: 1531600000, duration: 0, preds: []},
{id:10, date: 1531600000, duration: 0, preds: [9]},
{id:11, date: 1531610800, duration: 0, preds: [10,8]},
{id:12, date: 1531610800, duration: 0, preds: [12]}
]