Layouts

Layouts¶

GVT supports many graph layouts. Each layout has its own algorithm which computes the positions of the nodes and affects the visual structure of the graph. These layouts are configurable through the options passed via settings.

Settings:
{
  ...
  layout: <'circle', 'concentric', 'force', 'grid', 'hierarchical', 'preset', 'radial', 'random', 'geographical'>
  ...
}

Layouts can be further customized by passing the layout specific options using the settings format below:

Settings:
{
  ...
  layout: {
    type: 'grid',
    spacing: 5
  }
  ...
}

Random Layout¶

The random layout puts nodes in random positions within the viewport.

Grid Layout¶

The grid layout puts vertices in a well-spaced grid. It supports the following configurable properties:

spacing: Sets the space between elements in the grid.

Circle Layout¶

The circle layout positions vertices in a circle. It supports the following configurable properties:

spacing: Sets the radius of the circle.

Concentric Layout¶

The concentric layout positions vertices in concentric circles. It supports the following configurable properties:

spacing: Sets the minimum spacing in between vertices. It is used for radius adjustment.

Force Layout¶

The force layout tries to create an aesthetically-pleasing graph based on the structure of the graph with the idea to position the vertices in the viewport so that all the edges are of more or less equal length and there are as few crossing edges as possible. It has the following configurable properties:

edgeDistance: The simulation tries to set every edge to the specified length. This can affect the padding between vertices.
vertexCharge: Influences the underlying forces (e.g. to remain within the viewport, to push vertices away from each other).
velocityDecay: Decides how fast a simulation ends.
spacing: Determines how close different vertices are rendered next to each other.

Geographical Layout¶

The geographical layout allows the user to overlay the graph on a map, given that latitude and longitude coordinates exist as graph properties on the graph's vertices.

It has the following configurable properties:

appId: Accepts app id used to fetch maps from http://maps.oracle.com/elocation. When value isn't provided, a generic appId will be used.
latitude: The vertex property to use for determining the latitude of a vertex.
longitude: The vertex property to use for determining the longitude of a vertex.
mapType: You can select map type in map visualization or graph visualization settings or provide your own sources and layers.

Available types are:

world_map_mb ("oracle-elocation").
osm_positron (default)
osm_bright
osm_darkmatter
custom_type: Custom type has two additional fields which are:

sources: Provide your own sources in JSON format which will be used in map. Note: attribute property can be only added only as separate part from visualization because of security issues.
Example:

{ "oracle-elocation":
  {
    "type": "raster",
    "tiles": ["https://elocation.oracle.com/mapviewer/mcserver/ELOCATION_MERCATOR/world_map_mb/{z}/{y}/{x}.png"],
    "tileSize": 256,
    "minzoom": 0,
    "maxzoom": 18
  }
}

layers: Provide layers in array of JSON elements format which you want to display on map.
Example:

[{
  "id": "elocation-tiles",
  "type": "raster",
  "source": "oracle-elocation"
}]

showInfo: Displays an info box in the visualizer (see image above) that shows the 'Latitude' and 'Longitude' of the mouse position and the 'Zoom Level' of the map. Possible values are true or false.
showNavigation: Shows the navigation controls towards the top right region of the map (see image above).
markers: Used to display location markers on the map. Accepts an array of objects in the below format.

interface MapMarker {
  longitude: number;
  latitude: number;
  content?: string;
}

Hierarchical Layout¶

The hierarchical layout organizes the graph using a DAG (directed acyclic graph) system. It is especially suitable for DAGs and trees. It supports the following configurable properties:

ranker: Specifies the type of algorithm used to rank the vertices. Possible values: 'network-simplex', 'tight-tree', 'longest-path'.
Network Simplex: The network simplex algorithm assigns ranks to each vertex in the input graph and iteratively improves the ranking to reduce the length of edges.
Tight Tree: Constructs a spanning tree with tight edges and adjust the ranks of the input vertex to achieve this. A tight edge is one that is has a length that matches its minlen attribute.
Longest Path: Vertices are pushed to the lowest layer possible, leaving the bottom ranks wide and leaving edges longer than necessary.
rankDirection: Alignment of the ranked vertices. Possible values: 'UL' | 'UR' | 'DL' | 'DR' | 'TB' | 'BT' | 'LR' | 'RL' (where UL stands for Up-Left direction)
vertexSeparation: Sets the horizontal separation between the vertices.
edgeSeparation: Sets the horizontal separation between the edges.
rankSeparation: Sets the separation between two ranks(levels) in the graph.

Radial Layout¶

The radial layout displays the dependency chain of a graph by using an outwards expanding tree structure. It can be especially useful if the graph data has a has a hierarchical structure and contains many children for each parent vertex. It has the following configurable properties:-

spacing: Separation gap between neighboring vertices if they share the same parent vertex. If set to 0, no spacing will be applied.