Concentric graph model - programming implementation idea

[hLamoureux]

Hi everyone,

I'm looking for a way to make a graph with concentric circles.

I want it to be easy to understand the distance between 'm' and 'n', where 'm' is the middle node and 'n' is a neighbor of 'm'.
(In the exemple below, there's 4 possible distances from 0 to 3 included.)

Here's a screenshot of the prototype :

I haven't found an optimal solution yet.

Important informations

• For my project, all nodes are locked and must not move.
• The user must be able to pan and zoom on the graph.

Implementation ideas

As cytoscape doesn't support circle parent nodes, I've tried 2 types of implementations.

• Make an image in the background that moves exactly like the graph moves.
       => Implementation with image in a div and pure javascript functions caused performance issues.
           Consider using an html canvas?
• Make big nodes with cytoscape in the background
       => The user can't use pan if he clicks on thoses nodes.
           Consider editing cytoscape to remove all click listeners on the background nodes?

What are your thoughts? Am I missing something?

Thanks for the help!

Hugo

[hLamoureux]

I ended up using an html canvas in the background of cytoscape. It took a few adjustments, but the result is clean and there's no perfomance issues.