Search code examples
javascriptsvgd3.jsinfovis

Flow Charts and State Machines

Specifically I am looking at the JavaScript libraries; JavaScript InfoVis Toolkit, and D3 to draw flow charts and state machines.

Both of these offer plenty of ways to visualize data. However none of the examples seem to meet the requirements below (especially for flow chart).

To be clear I mean these.

Flow chart

Flow Chart

(Sourced from: http://philosophy.hku.hk/think/strategy/chart.php)

  • Have branches with a single start and end point.
  • Labels on nodes and branches.
  • Have a logical flow layout (e.g. not nodes randomly positioned).
  • Shapes aren't really important.

State Machine

Finite State Machine

(Sourced from: http://www.oracle.com/technetwork/systems/fsm-156381.html)

  • Labels on nodes and branches.
  • Shapes aren't really important.

Would either of these libraries be able to meet my requirements?

Are my requirements even an appropriate use of those libraries?

Cheers,

Solution

  • In the end went with dagre-d3 which is able to do everything I needed.