I am putting together a little project that tracks the chain of API dependencies across an organization.
In this instance, there can be multiple roots as some APIs are not called by other APIs.
I can do this in a force directed graph using Springy.js, however I like the advanced features of D3 better.
In D3 i have tried a force directed as well but don't like the drag and pull functionality, I have tried an Orgchart (multiple root problem), I have tried a tree map (multiple root problem). Just looking for a static chart with clickable nodes.
I can't seem to narrow down which implementation would best fit this use use case.
Is there such an implementation for this?
Related
I have a rather large graph in DOT, which I render using neato
and I'm more or less able to distinguish its main clusters using a lot of len=... attributes.
I wanted to experiment with twopi, because I like a lot the way it renders, but I see that it doesnt support len.
There are alternatives? My need is to manually keep some portions of the graph rather isolated from others, to enhance readability. I tried with clusters but apparently the results are not so good.
With twopi, you specify a root then the number of edges away from root will dictate which ring of the circle it belongs on. Another alternative you might also consider is circo which is yet another graphing tool from graphviz.
I created with NodeXL this graph
Graph
Just in case the link will stop work in the future, the graph is a directed, grouped in clusters in different boxes.
I want to create a similar (or the same graph) and upload it in a website with D3. I haven't used before the D3 and it will be the first time, so if you want to suggest anything else, you are welcome.
I tried to find an example that will fit with my graph in the official gallery, but without a success.
Do you know any example or a tutorial that will fit to this graph?
P.S. The specific graph is a frequent one, that's why I ask a question here.
I'm fairly new to D3 and have been tasked with developing a force directed graph, however this diagram is unlike any examples I have found and I seem to have encountered quite a few issues.
I'm trying to develop something like this:
http://www.huzzahstudios.com/images/profile_page_simple.jpg
The biggest problem I am having so far is that the nodes containing text tend to overlap quite considerably and collision detection on the shape they form does not seem to be functioning as expected.
Basically I need:
- Nodes to never overlap in resolved state
- Nodes to resolve in similar locations (as per diagram above)
- Graph to be able to adapt acceptably depending on amount of data
This is what I have so far: http://jsfiddle.net/lucidlyle/SwV9s/4/
As you can see it's very messy at the moment, any help with this matter would be most appreciated.
Thanks
I am currently using Graphviz for visualizing control flow graphs. Basically, a (reducible) control flow graph is a DAG plus some edges which point back to nodes in the previous layers. The latter edges should not affect node placement.
Currently, dot draws the graphs pretty neatly, but it lacks an easy way to add interactivity (e.g. folding, scrolling, zooming), which is priceless for analysis of very large graphs. Therefore, I selected d3.js as the most mature and feature-rich graphing library.
I'm pretty sure that there is an easy way to draw layered graphs (as does dot) in d3.js, but I don't seem to recognize it. How do I do that? If this helps, I already perform dominator analysis on my CFG.
The Dagre library for directed graph drawing is rendering-agnostic, but integrates well with d3.js: https://github.com/cpettitt/dagre
Here's a demo rendered using D3: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html
Can anyone please tell me that once I've created a graph using Boost Graph library, how can I display that graph?
My biggest concern is that the edge weights are coming from an exernal data source over the network. And I need to be able to display the edgeweights live as they get updated.
Displaying graphs is a little bit harder then you seem to imagine. Your best bet is to use GraphViz through write_graphviz to create a visual representation of your graph.
Updating that graph "live" is a lot harder and you won't get anywhere with GraphViz but would need some real-time-graphics API and graph layouting algorithms that work continously.