How to use Viva.Graph.centrality?

[unikitty37]

I'm trying to use betweenness centrality to arrange a force-directed graph so that nodes with highest centrality are placed more centrally, but I can't work out quite how to call Viva.Graph.centrality.

Is there an example somewhere I can crib from? If so, could it be added to the demos folder?

[anvaka]

Interesting idea... Currently centrality is used only by Amazon products visualization to sort products by betweenness centrality. I call it "Diversity" there, because I could not come up with a better name.

Here is how you can calculate centralities of a graph:

// Let's say you have graph = Viva.Graph.graph();
var calculator = Viva.Graph.centrality();
var betweenness = calculator.betweennessCentrality(graph);
// betweenness is an array of objects {key: , value: }, where key is a node id 
// in the graph and value is actual betweenness centrality value for this node.
// The array is sorted in descending order of betweenness centrality.

var degree = calculator.degreeCentrality(graph);
// degree will be an array of the same structure as betweenness, but
// value represents degree centrality of the node.

Can you please elaborate on how do you want to place nodes more centrally according to centrality?

[unikitty37]

Thanks — I'd worked out how to actually get the array from Viva.Graph.centrality(), but I can't see how to make the renderer do anything with that information. Basically, what we're trying to do is have a force-directed graph where nodes with a higher centrality gravitate towards the centre, and nodes with a lower centrality are pushed towards the outer regions — all subject to the effects of their connections, of course.

It looks like that's what you're doing with Amazon, but I can't quite work out how :)

[sy-tang]

@tinyclanger I'm dealing exactly the same problem, if you have come up with any solution, please let me know. It would be great helpful. By the way, I'm working on visualizing a person's social network online.

[anvaka]

Amazon visualization does not use centrality information for rendering. It pins the root node to prevent the entire graph from flying away. Here is a demo: How to pin node in vivagraph. Force-based layout also uses number of edges to determine a weight of each node. So the more connection a node has the higher is its mass.

[xdiscovery]

Hello! I've looked at example, I was not aware of possibility of pinning a node. I created an example using force-directed layout; when I add and update neighbors to a node, the new ones appears in the center of the canvas rather than around the parent node. This cause the whole cluster to be pulled towards the center, and with highly densed networks, the center of the canvas because pretty soon over-crowded. Which is the part that calculate the positions of the new nodes respect to a parent? As effect I would like the neighbors to pop up around the parent.

[arikan]

Hey Andrei,

I've been trying the centrality functions, calling it after adding links, but it returns empty arrays both for degree and betweenness centrality. What might be wrong here?

[anvaka]

Hi @arikan do you have a code sample?