5

Here is my requirement:

I need to create a visualization of links between different representations of a person. The image below I think indicates that fairly clearly.

enter image description here

Additionally, those rectangles would also contain some data about that representation of a person (such as demographics and the place). I also need to be able to handle events when clicking on the boxes or the links between them, as a sort of management tool (so, for example, double clicking a link to delete it, or something along those lines). Just as importantly, since the number of people and links will varies, I need it to be displayed by spacing out the people in a roughly equidistant fashion like the image shows.

What would be a javascript library that could accomplish this? I have done some research and have yet not found something that can cleanly do this but I'm hardly an expert in those libraries.

Here are the ones I've looked at:

Arbor js: Can dynamically create the spacing and links of the graph but I'm responsible for rendering all the visuals and there's really no hooks for things like clicking the links.

jsPlumb: Easily create connections between elements and draws them nicely enough but doesn't seem to address any layout issues. Since I don't know how many people will be on the screen, I have to be able to space them out equidistant and that doesn't seem to be a concern of jsPlumb.

D3.js: This creates a good visualization with the spacing I need but I don't see how I can show the data inside each node or do things like like mouse events on the links or box.

I'm feeling a bit lost so I'm hoping someone could point me to something that could help me or maybe point me to an example from one of these libraries that shows me that what I want is possible.

Benny Bottema
  • 11,111
  • 10
  • 71
  • 96
AHungerArtist
  • 9,332
  • 17
  • 73
  • 109
  • Perhaps the solution is to use multiple libraries... I'll have to see how well some of these can work together. – AHungerArtist Sep 12 '12 at 17:28
  • you could draw everything with D3 and make the inside of the boxes as normal jquery divs...to accomodate them it would take some time...but in theory it could work – paxRoman Sep 12 '12 at 20:22
  • @paxRoman What do you mean to accommodate them it would take some time? – AHungerArtist Sep 12 '12 at 20:25
  • I guess the easiest solution would be to just draw the inside of the box (the words) as a div put it inside another div and draw the lines and do the rest with d3 - that's what I'm saying that it might be doable... nobody has tried tough...:( - so there's no hint if it will work... – paxRoman Sep 12 '12 at 20:29
  • what you want sounds a lot like UML diagramming...maybe you should look how this is implemented with GWT UML diagramming: http://code.google.com/p/gwtuml/ and try to replicate with D3 + jQuery – paxRoman Sep 12 '12 at 20:38
  • You could try using a d3.js force layout (https://github.com/mbostock/d3/wiki/Force-Layout). The layout doesn't require that each node be an svg object. It could just be a plain
    whose position updates.
     – Alex Sep 13 '12 at 13:29

2 Answers2

1

I ended up using Arbor with Raphael as my rendering library and it's worked out very well.

AHungerArtist
  • 9,332
  • 17
  • 73
  • 109
  • Would you mind posting some sample code on how you did this or a github repo? Im looking to do the same thing. – JoshL Oct 25 '12 at 11:37
  • @JoshL Give me a few days and I'll find some of the sample code I made to test things out. – AHungerArtist Oct 25 '12 at 13:11
  • It seems to me that [Arbor](http://arborjs.org/) can be used completely independent of a drawing library. So you could use Arbor together with [Raphael](http://raphaeljs.com/) as you have, or with [jsPlumb](http://jsplumbtoolkit.com/jquery/demo.html), [meemoo](http://meemoo.org/dataflow/) or absolutely positions DIVs. – Benny Bottema Jun 18 '13 at 13:55
  • You said one requirement was to be able to interact with the nodes and their content. How did you solve this with Raphael? MouseEvents and all are trivial, but because Raphael renders using SVG/Canvas, aren't you limited to whatever you draw inside the nodes manually? With plumbjs you can actually keep using HTML as node content, because plumbjs only replaces the borders. Seems like the superior solution to me... – Benny Bottema Jun 18 '13 at 14:53
1

Take a look at Dracula Graph Library. It's a simple library that seems to do both layout as well as rendering graphs (using Raphael under the hood). It's a bit underdeveloped however.

Benny Bottema
  • 11,111
  • 10
  • 71
  • 96