Force-direct node-link graph for adjacency matrix

by jianing Visitor ‎09-29-2015 11:14 PM - edited ‎09-29-2015 11:34 PM

This is a force-direct node-link graph for adjacency matrix of a graph.

facebook.png 

 

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.

lesmiserable.png

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

Comments
by Doggie New Member
on ‎09-30-2015 02:27 PM
Like it!!!!
by fox New Member
on ‎10-01-2015 11:31 AM
Like it!
by hnakanishi Visitor
on ‎10-23-2015 01:55 AM

Great!!

 

Where can i get informations about the programming features for Power BI Visuals?

by maninweb Visitor
on ‎10-24-2015 03:43 AM

Hi hnakanishi,

 

there is an account on GitHub for the Power BI visuals here https://github.com/Microsoft/PowerBI-visuals where you can also fins links to the API documentation, samples and more.

 

Best regards :-)

by Sohail Regular Visitor
on ‎05-01-2016 11:19 AM

Hi Jianing,

 

Where can i get this Visulization for Power BI, this looks great and moreover i want to try this.

Your Visualization is so good you should have own the contest.

Please can i get ".pbiviz" of your Visuals please thank you Smiley Happy

 

Regards

Sohail

by minoz88 Frequent Visitor
on ‎07-21-2017 12:58 AM

How to get this visual? Thank you~

by surfersamu Regular Visitor
on ‎10-03-2017 06:41 AM

Does anyone have this visual working?