-1

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

Jackson Tale
  • 25,428
  • 34
  • 149
  • 271
  • 3
    Bo you're not new to SO. Just to remember you that questions like "Suggest me a Library" are getting closed. – Roko C. Buljan Sep 28 '14 at 20:57
  • [d3js.org](http://d3js.org/) – gongzhitaao Sep 28 '14 at 20:57
  • @gongzhitaao it is for visualisation? – Jackson Tale Sep 28 '14 at 20:59
  • Absolutely! And see [this](http://bl.ocks.org/mbostock/1153292) and [that](http://bl.ocks.org/mbostock/4062045). And you could find [more demo](http://bl.ocks.org/mbostock). – gongzhitaao Sep 28 '14 at 21:01
  • @gongzhitaao damn, your comment almost answer my questions. Can you suggest some algorithms for floatting, pulse, breath, collisions? – Jackson Tale Sep 28 '14 at 21:03
  • So far as I know, all you want is implemented in d3js. If you don't want to write those yourself, you may want to dive into the d3js docs like [transition](https://github.com/mbostock/d3/wiki/Transitions) and etc. – gongzhitaao Sep 28 '14 at 21:08
  • floating, pulsing, breathing and etc are some form of [easing effects](http://gizma.com/easing/#cub2). This could be found in d3js transition. Collision demo in d3js is [here](http://bl.ocks.org/mbostock/3231298). Good luck. – gongzhitaao Sep 28 '14 at 21:12
  • @gongzhitaao please write all your comments as answer and I will mark yours – Jackson Tale Sep 28 '14 at 21:19

1 Answers1

3

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!

gongzhitaao
  • 6,566
  • 3
  • 36
  • 44