Search code examples
javascripthtmlkineticjspaperjsscenegraph

Which HTML5 Canvas library should I use for this purpose?

I am a newbie on HTML5 and Javascript, but I need to do a visualisation using them.

Here is my domain / problem:

  1. I need to visualise a large set of graph nodes, visually a node can be a cycle with colors and transparence.

  2. There are two relationships: include and interact.

  3. include means one node include other different types of node, visually, users can see a big node with smaller nodes inside itself.

  4. interact simply means a line connect different nodes. The line should have arrow, label (text), and thickness.

  5. For effects, I need animations, such as nodes are not static, but some of them should have the animation of floating around (small amount of regular floating movement around a center place); or some nodes should have the pulse effect like breathing.

  6. User can drag some nodes, if dragging a node, all connected nodes / graph should move accordingly as they are connected.

  7. Auto detecting collision should in place. Also, if a collision occurs, all nodes should follow some algorithms to distribute away nicely.

Here are my questions:

  1. Which Canvas library should I use? Since I am a newbie anyway, a nice simple one which fits my needs is the best.

  2. What algorithm should I seek for to do the floating and pulse (breathing) animations?

  3. What algorithm should I use for dragging a node and all connected nodes follow like a snake?

  4. What algorithm should I use for collision and distributing?

Thanks

Solution

  • d3js

    See elastic node demo here and here, collision demo here. This page contains tons of d3js demos

    For easing effects, you could look into d3 transition.

    Good luck!