8

I have a Markov chain that I would like to represent graphically in javascript. I need to represent the nodes, links, and transition probabilities. Perhaps something like one of these two diagrams:

enter image description here enter image description here

Finding a good image library (like Raphael) is not the problem. The problem, for me, is finding a way to make sure the nodes are laid out nicely, with a minimal amount of lines crossing in front of other nodes or lines. Something like the "Lay out diagram" option in OmniGraffle (I'm sure there's a similar feature in Visio).

Is there a JS library that can do this for me, and if not does anyone have any idea how to approach a problem like this? Note that my markov chains are likely to be a lot more complex then the examples above.

Jeff
  • 12,147
  • 10
  • 51
  • 87
  • how did the project turn out? – Michael Paulukonis Dec 27 '12 at 14:47
  • @MichaelPaulukonis i ended up using graphdracula (see my comment to Femi's answer). It worked, but not quite as nice as I had hoped. There were some issues when a node points to itself, or when two nodes form a loop. The placement of the transition probabilities was sometimes unclear which line it belonged to. Still, I couldn't find anything better, so it made do. – Jeff Dec 27 '12 at 18:49
  • is your code available? I'd be interested in throwing some things at it to see what the chains look like (non-academically related). – Michael Paulukonis Dec 27 '12 at 21:41

3 Answers3

3

You might make out okay with one of the directed graph libraries like D3 or one of the directed graph layers on Raphael.

Femi
  • 64,273
  • 8
  • 118
  • 148
  • +1 on using Raphael. 2.0 is also on the way: https://github.com/DmitryBaranovskiy/raphael/tree/2.0 – Hyangelo Aug 25 '11 at 03:25
  • Thanks! I guess it helps to know the right terminology-- googling "force directed graph" helped me find a few other alternatives as well, and graphdracula.net seems to fit my needs. thejit.org is another for those looking for alternatives. – Jeff Aug 25 '11 at 21:22
  • Hehe. Glad to help provide the right spell to insert into Google. – Femi Aug 25 '11 at 21:36
2

I'm using mxGraph for this currently. It's not free, but it's a case of you get what you pay for.

Geff Attree
  • 183
  • 3
  • 8
0

Viz.js can be used for this, it is a Javascript port of Graphviz.

Abbafei
  • 3,088
  • 3
  • 27
  • 24