Creating Customized Layouts of Graphs with X and Y Properties

If the default graph layouts, hierarchical, organic or circular, don’t suit your analysis you can start creating your own customized layout. Each node has the view properties X and Y, which describe its position in the graph in pixels. If you reference these attributes to a node’s data attribute and calculate this attribute with an algorithm you already managed creating a customized layout. Take into account that as soon as you click on a layout option in the graph the X and Y property will be overwritten. To circumvent this you can pin the nodes. But let’s walk through this step by step.

How to Create a Customized Layout

  1. We need two numerical data properties for the node class(es) you want to layout. These attributes are defined in the metamodel and need to be of the type double. If you do not already have a fitting attribute you can create two new attributes xposition and yposition.
  2. Create code that creates the calculates xposition and yposition. The example below shows how to calculate the properties for a layout with constant distances between each node.
    procedure layout{
    def var xpos:double = 0; //Initiating variables
    def var ypos:double = 0;
    def var counter:int = 0;
    for(n:Node in nodes(Node)){
    n.xposition = xpos; //Defining the XPosition for the Node
    n.yposition = ypos; //Defining the YPosition for the Node
    xpos = xpos + 200; //Setting the next XPosition + 50
    counter = counter + 1; //Increasing the counter
    if(counter == 10){ //After 10 nodes in a row
    ypos = ypos + 200; //Start a new row at new y position
    counter = 0; //Reset the counter

    This code will define X and Y properties so that nodes will appear next to each other in a row of 10 nodes with a distance of 200px in between and also with a distance of 200p in the vertical direction.
  3. Create or adapt a graph view with the View Manager. For the relevant node classes set the X and Y view properties in reference to the xposition and yposition data properties, as shown in the screenshots below.Alternatively, you can also use the Converters to adapt the layout. For example, with the mapping converter, you can define a layout in which all nodes with the same value of a defined attribute are plotted at the same X position. Or use the Math Converter to realize computations for your customized layout. Finally, don’t forget to extract the view as a View Template with the button on the top of the View Manager tool.

Was this article helpful?

Related Articles