DAG demo using Dagre

[Jonathan Mace]

Hi all,

I'd like to point you to some interactive visualization work I'm doing using D3 and Dagre.  It's a visualization part of a project I'm working on to do with tracing event causality across machine, process and thread boundaries in large-scale distributed systems.  Basically, the work produces big DAGs :P.

Check it out here - it only works in Chrome right now... http://cs.brown.edu/people/jcmace/d3/graph.html?id=small.json

You can also replace 'small.json' with 'medium.json' or 'large.json' for examples of differing sizes.

A couple of features to make note of:

- Nodes can be selected by clicking on them.  Ctrl and Shift allow for multi select.  Pressing the delete key will remove them from the graph and redraw the graph.

- Hovering a node isolates that node's path in the DAG.

I am so glad I didn't have to implement a graph layout algorithm of my own (or resort to graphviz!).  Lovely stuff.

Cheers,

Jon

[Chris Pettitt]

Jon,

This is amazing! There are many very cool features with this, but the transitions, the highlighting of paths between two nodes, and the ability to add / remove subgraphs really stand out.

If you're open to the idea, I'd love to add a link to this (or something similar) from the Dagre README. Also, have you thought at all about open sourcing this? I could see using this for some of my projects.

Thanks for sharing!

Chris

[Jonathan Mace]

Hey Chris,

I'm glad you like it!  It's open source, the source code is just in a slightly obscure location.  It's in the following folder of the brownsys repo.  https://github.com/brownsys/X-Trace/tree/master/src/webui/html/interactive

The source code is a little bit messy, having gradually accumulated over time, but you're welcome to link to it and reuse components to your heart's content.  I should be thanking you for the awesomeness that is dagre! :P

Cheers,

Jon

--
You received this message because you are subscribed to the Google Groups "dagre" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dagre+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Ryan O'Grady]

Hi Jon,

I love the code you put together, but that link is no longer working. Did you move this source code to somewhere else?

[Jonathan Mace]

Ah yes, here you go:

https://github.com/brownsys/X-Trace/tree/master/src/main/resources/webui/html/interactive

--
You received this message because you are subscribed to a topic in the Google Groups "dagre" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/dagre/A18W8UoplUI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to dagre+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ryan O'Grady]

Great, thank you so much for the quick response.

[Istvan Malyar]

Hy, Jon,

Just have to say this is amazing and of course dagre also just amazing stuff.. thank you guys

[David Ma]

Hi Jon,

This tool is fantastic! This tool is very useful but seems to be a little bit sluggish/buggy on firefox (e.g. hiding nodes doesn't show up correctly and clicking on where the reset button would be generates the nodes back, but without paths). It seems a bit slow in general. Any thoughts/ideas on how to specifically fix this problem?

Thanks again,
David