microsoft / powerbi-visuals-forcegraph

Repo for Power BI Force Graph custom visual

PowerBI-visuals-ForceGraph

The new version of Force Graph based on the new DevTools/API

Overview

The ability to visualize the relationship between items, the weightage of the relationship and the flow often brings out the untold insights into limelight, which are otherwise not very evident. Simple numbers and basic charts won’t be enough to discover and tell such data stories. We need new visualization techniques for the complex world of relationship and Force-Directed Graph thrives to the forefront for such scenarios.

This custom visual implements a D3 force layout diagram with curved paths. The thickness of the path represents the weight of the relationship between the nodes.

Since the relationship and interconnection between large set of entities could be very complex, the visual positions the nodes in such a way that there are few crossings as possible, making the exploration experience easy, fun. The visual also produces the layout which is overall pleasing to the eyes for large data sets. Users can also adjust the layout manually by simply dragging the nodes around.

Ideally you would need two dimensions and one measure (for the weightage) to use with this visual. But this also works just with a single column.

See also Force-Directed Graph at Microsoft Office store

powerbi-visuals-forcegraph's Issues

Edges with the same source and target

When filtering the source or target nodes, the nodes and the edges are hidden as expected, but there are two issues:

• The heads of the arrows are still drawn. As a workaround I patched the getPathWithArrow to return a regular path if the length is 0 (arcadiogarcia@7084fac).

• The weights of the hidden edged are still considered when ranging all other weights between 1 and 10, so if some hidden edge has a very high value the widths and colors of the edges are indistinguishable.

Unfortunately I am not familiar enough with the PBI API to find where the information about the filter is sent, if someone gives me a pointer in the right direction I could try to fix these issues and send a PR :)

Edit: My bad, seems like the glitches I was seeing was not because of the filtering, but because edges with the same source and target, which are not rendered (since they have length 0), but the head of their arrows is still drawn and they still are considered for comparing the weights.

node_modules folder recreation

Is it possible to have a recreation of node_modules? Since it is ignored by .gitignore?!
I understand that I probably need to install all the necessary dependencies, but there are some files that I'm not sure if I can copy and paste from another project.

Add simple way of choosing the size range for the nodes

As far as I understand, currently, the node sizes are determined automatically. It would be very (!) useful to specify some sort of range (like in Gephi) to control the sizes of the largest and smallest nodes.

This repo is missing important files

There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.

Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.

Merge this pull request

Labels truncated to 10 characters

The node labels are truncated to 10 characters. Obviously it cant be infinit number of characters, but please add the possibility to specify the maximum number of characters in the settings menu.
I guess doing the same for the links label would be a logical thing to do

add an option to filter 1 node and keep all related nodes

I have a big network in a form of predecessor and successor, it will nice to have an option to select one node, and it will filter only all the path that belong to that node.

thanks

Invalid API version

 info   Building visual...
 error  UNKNOWN TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at VisualPackage.join (path.js:503:7)
    at VisualPackage.buildPath (C:\Users\degeestl\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\lib\VisualPackage.js:115:26)
    at Promise (C:\Users\degeestl\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\lib\LessCompiler.js:53:42)
    at new Promise (<anonymous>)
    at Function.build (C:\Users\degeestl\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\lib\LessCompiler.js:52:16)
    at _validateApiVersion.then (C:\Users\degeestl\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\lib\VisualBuilder.js:100:38)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)

When first running the project, we get an error:

λ pbiviz start
 info   Building visual...
 error  VALIDATION   Invalid API Version v2.1.0

After doing a pbiviz update 2.1.0:

λ pbiviz update 2.1.0
 info   Visual api 2.1.0 updated

After running again:

λ pbiviz start
 info   Building visual...
 error  VALIDATION   The PowerBI-visuals.d.ts in your tsconfig.json must match the api version in pbiviz.json (expected: .api/v2.1.0/PowerBI-visuals.d.ts)

Then we update the tsconfig.json files as follows:

  "files": [
    ".api/v2.1.0/PowerBI-visuals.d.ts",
    "./src/visual.ts"
  ]

Finally we get the above mentioned error. This seems to be generated when building the package.

Visual Settings for the graph

Can anyone please tell me how can I fix the position of a node or two.
Like: Node named "Start" at the top of the view
Node named "End" at the bottom of the screen
Rest of the node in the centre space

And what is the meaning of these configurations:

private static ImagePosition: number = -12;
private static MinNodeWeight: number = 5;
private static MinCharge: number = -100;
private static MaxCharge: number = -0.1;
private static MinDecimalPlaces: number = 0;
private static MaxDecimalPlaces: number = 5;
private static GravityFactor: number = 100;
private static LinkDistance: number = 200;
private static HoverOpacity: number = 0.3;
private static DefaultOpacity: number = 1;
private static DefaultLinkColor: string = "#bbb";
private static DefaultLinkHighlightColor: string = "#f00";
private static DefaultLinkThickness: string = "1.5px";
private static LabelsFontFamily: string = "sans-serif";
private static MinRangeValue: number = 1;
private static MaxRangeValue: number = 10;
private static DefaultValueOfExistingLink: number = 1;
private static DefaultLinkType: string = "";
private static MinWeight: number = 0;
private static MaxWeight: number = 0;
private static DefaultSourceType: string = "";
private static DefaultTargetType: string = "";
private static StartOffset: string = "10%";
private static DefaultLinkFillColor: string = "#000";
private static LinkTextAnchor: string = "middle";
private static DefaultLabelX: number = 12;
private static DefaultLabelDy: string = ".35em";
private static DefaultLabelText: string = "";
private static ResolutionFactor: number = 20;
private static ResolutionFactorBoundByBox: number = 0.9;
private static LinkSelector: ClassAndSelector = createClassAndSelector("link");
private static LinkLabelHolderSelector: ClassAndSelector = createClassAndSelector("linklabelholder");
private static LinkLabelSelector: ClassAndSelector = createClassAndSelector("linklabel");
private static NodeSelector: ClassAndSelector = createClassAndSelector("node");
private static NoAnimationLimit: number = 200;

Allow panning and zoom

I would love to able to pan and zoom the force graph.
I often have data that goes outside of the graph even when it's full screen.
This makes it very hard to get a full overview of the graph.

Is it possible to implement this?

Allow adjust layout manually

Current capability of adjusting layout manually by dragging the nodes around is quite limited by tendency of the nodes to rearrange themselves.
In some cases the position of the notes is important (e.g. based on a physical location of objects) and it doesn't seem possible to drag the nodes to stay in fixed locations selected by the user.
Maybe if we set Animations to false that would eliminate the physical laws that move the nodes and completely let the user rearrange their location
The chart is fantastic but without this capability is meaningless for my application.

Add colorization based on some user-specified categories

As the title says, it would be helpful to be able to colorize the graph.

Node label from another field than Source/Target

I have a dataset where the field I'm using to connect the nodes is a GUID, but I have another string field that is more display friendly so I would like to use that instead on the nodes.

Is it already possible and have I missed it, or would it be possible to add a feature to controls these node labels.