This is a force-direct node-link graph for adjacency matrix of a graph.
The data I used is a matrix. For each cell of the matrix, it contains multiple values, such as the weight of the link, the group of the source node and target node. Note that due to limitation of matrix metadata, we can only specify the visual encodings by using specific names of variables.
The visual properties of nodes are encoded by multiple values in the data. For example, the node size represents the degree of a node. The color and shape of the node encode the group which the node belongs to.
The node can also be presented by images using urls from online websites.
In the meantime, the links also visualize the weight using the opacity and link width.
Users can also set the force directed graph parameters such as link length charge force of each nodes using the formatting panel.
Here are several examples:
The first image shows the relationships of friends of my facebook account. I use the photos to represent some friends of mine and the links to show our relationships. The size of each image mean the degree of each people. The opacity and the width of a link show whether the relationship is strong or weak.
The second images shows the character co-occurence in Les Miserables. (Please see http://bl.ocks.org/mbostock/4062045 for more details). The shape, color and size encode the group of each character here. The width of links represent the weight of links.
We can also use other visualization tools to help filtering the graph when there are lots of nodes.
For a video demo please see here: https://www.youtube.com/watch?v=FwxuUT5KsgU
The source code is here: https://github.com/jianingyan/PowerBI-visuals/blob/master/src/Clients/Visuals/visuals/graph.ts
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.