For visualizing DAGs in browser canvas.
Clone the repo and build it:
npm install
npm run build
DAGs are defined using
- Nodes (the vertices) which have a type and a name
- Links (the edges) between nodes which are either primary or secondary (rendered differently)
- Groups which contain subset of graph nodes that are logically related (for rendering them with matching colors etc)
Here's an example showing all the features:
// initialize Visualizer with the id of the canvas- HTML element
let graph = new Visualizer('myCanvas')
// nodes are organized in a group for collective rendering
let group = graph.group()
let otherGroup = graph.group()
// renderer can choose a different rendering based on node-data, and each group can
// have separate renderers
let renderer = (node) => {
switch (node.type) {
case 'A':
return { bg: '#880000', fg: '#ff0000', shape: 'square' }
case 'B':
return { bg: '#008800', fg: '#00ff00', shape: 'circle' }
}
}
group.render(renderer)
otherGroup.render(renderer)
// nodes are created via a group, by passing a type and a name, and an optional
// primary link
let first = group.node('A', '1st')
let second = group.node('B', '2nd', first)
let third = otherGroup.node('A', '3rd')
let fourth = otherGroup.node('B', '4th', third)
// secondary links are added separately
third.link(first)
// graph can handle click events
graph.onClick(node => {
// highlight the DAG which contains all the predecessors of the node
graph.highlightDAG(node)
})
// finally render the DAG onto canvas '#myCanvas'
graph.render()Here's how it will look like in browser:
Try clicking the nodes!
examples/example1.html- the tutorial exampleexamples/ambients.html- (unfinished) draft of the Ambients protocol execution model DAG, representing the causal order of algebraic reductions
DAG Visualizer builds on great work of others:
- CSS-based styling
- More control over rendering
- Interactions with the graph
- Pluggable layout algorithms