22.6 Graph Visualization Settings

You can click the Settings gear icon to open the Graph Visualization settings window.

The Visualization settings window comprises the General, Graph Exploration, and Styles tab.

Configuring General Settings

You can add vertex and edge captions, set the graph layout and page size in the General of the Graph Visualization settings:

Figure 22-21 General Tab Configuration



  • Vertex Caption Orientation: Determines where the selected vertex property will be displayed.
  • Vertex Caption: Determines the property to be displayed for a vertex.

    Click + Add more to add a vertex caption and select the required vertex Label and vertex Property.

  • Edge Caption: Determines the property to be displayed for an edge.

    Click + Add more to add an edge caption and select the required edge Label and edge Property.

  • Maximum Visible Caption Length: Maximum caption length before truncating.
  • Layout: Computes the position of the nodes and determines the visual structure of the graph.

    Supported layouts are: Circle, Concentric, Force (default), Grid, Hierarchical, Preset, Radial, Random, and Geographical.

    The Force layout also supports a clustering option, which allows you to visualize a graph with clustered vertices. See Enabling Cluster Option in Graph Visualization for more information.

  • Display Size: Determines the number of graph elements to be visualized on a page from the result set.
  • Visibility Toggle Mode: Enables you to customize the visibility toggle behaviour of the legend items through settings:
    • Enable hide when any unchecked: Vertex and edge elements will be hidden when one of the legend items that affect them has its visibility turned off.
    • Enable hide when all unchecked: Vertex and edge elements will only be hidden when all the legend items that affect them have their visibility turned off.

Configuring Graph Exploration Settings

You can enable and configure Network Evolution in the Graph Exploration tab of the Graph Visualization settings. See Using Network Evolution in Graph Visualization for more information.

Figure 22-22 Graph Exploration Tab Configuration



Configuring Vertex and Edge Styles

You can configure and manage vertex and edge styles to customize the appearance of vertices and edges in the graph. The Styles tab of the Graph Visualization settings displays both the default and custom vertex and edge styles.

You can perform the following actions in this tab:

  • Add a new custom vertex style.
  • Add a new custom edge style.
  • Edit the default styling of a vertex or an edge element.
  • Edit or delete the custom styling of a vertex or an edge element.
  • Restore the default style settings.

Figure 22-23 Vertex and Edge Styles Configuration



To add a new vertex or edge style, click New vertex style or New edge style as appropriate and configure the following values:

  • Name: Name of the style
  • Conditions: Click + to add a condition for an element (vertex or edge) and provide the following values:
    • Property of the vertex or edge element.
    • Operator to be applied. The following operators are supported:
      • = (equal to)
      • < (less than)
      • <= (less than or equal to)
      • > (greater than)
      • >= (greater than or equal to)
      • != (not equal to)
      • ~ (filter is a regular expression)
      • * (any: like a wildcard, can match to anything)
    • Value that needs to be fulfilled for the property and the operator

    You can add as many conditions as required. For all elements that meet the conditions, you can configure any of the following styling highlights:

    • Size: Size of the vertex or edge
    • Color: Color of the vertex or edge
    • Caption: Caption for the vertex or edge
    • Animations: Animation (Pulsating or Flashing) and duration of the animation cycle
    • Icon: Image for the vertex (does not apply for edges)

The following example shows a sample vertex style configuration.

Figure 22-24 Adding a Vertex Style



22.6.1 Enabling Cluster Option in Graph Visualization

You can enable the cluster option with Force layout to group vertices by labels or by any specific vertex property in your graph visualization.

This is very useful when you are visualizing a graph with a lot of interconnected vertices.

Perform the following steps to apply clustering of vertices in your graph visualization:

  1. Click the Settings gear icon to open the graph Visualization settings dialog.
  2. Click the General tab.
  3. Select Force Layout in the Layout section.
  4. Click the Enable Cluster Layout checkbox.
  5. Select the Cluster By option.
    You can choose to cluster the vertices by labels (default) or by any specific vertex property.

    If you choose to cluster by a vertex property, then note that the clusters are created around property values that are identical. For instance, when querying a graph after running a community detection algorithm, you can use the vertex property containing the community ID value as a Cluster By option. This will create clusters that contain vertices with the same community ID.

  6. Optionally, adjust Distance Between Clusters to set the distance between the clusters.
  7. Optionally, adjust Spacing to set the distance between vertices inside clusters.
  8. Close the Visualization settings dialog.
    The vertices in the graph are clustered together based on the selected clustering option. For example, the following figure shows clustering of vertices based on labels:

    Figure 22-25 Cluster-Based Layout



22.6.2 Using the Geographical Layout

You can use the Geographical layout to show the graph (vertices and edges) on a global map in the Graph Visualization application.

In order to view your vertices on a map, they must include a geographical location, in the form of a pair of properties that contain the longitude and latitude coordinates for that vertex. You can use any name for the longitude and latitude properties (such as X and Y, or long and lat). For example:

US_CITY                CITY_LAT   CITY_LON
-------------------- ---------- ----------
Binghamton              42.1014   -75.9093
Utica                   43.0961    -75.226
New Rochelle            40.9305   -73.7836
Saratoga Springs        43.0674   -73.7775
New York                40.6943   -73.9249

However, you must ensure that the longitude and latitude pair are in the WGS84 system (GPS coordinates), and the coordinates are expressed in decimal degrees.

Perform the following steps to apply geographical layout:

  1. Click the Settings gear icon to open the graph Visualization settings dialog.
  2. Click the General tab.
  3. Select Geographical Layout in the Layout section.
  4. Select the Latitude and Longitude properties.
  5. Click Update properties.
  6. Close the Visualization settings dialog.
    The following shows an example graph rendered on a geographical layout in the Graph Visualization application.

    Figure 22-26 Geographical Layout



22.6.3 Using Network Evolution in Graph Visualization

You can visualize the evolution of a graph over time using the Network Evolution feature in the Graph Visualization application.

In order to visualize a dynamic graph, it is important that the graph contains date or time properties. It can either be a vertex or an edge property.

Perform the following steps for configuring network evolution:

  1. Click Settings in the graph visualization panel to open the graph Visualization settings.
  2. Click the Graph Exploration tab.
  3. Switch on the Enable Network Evolution toggle.
  4. Select a graph element from the Based On drop-down list.

    You can configure the network evolution to be based on vertices, or edges, or both.

    Depending on your selection, you must select one or more of the following properties:
    • Vertex Start Property: Select the name of the property to use for the vertex filtering.

      The time frame for the graph will be after the Vertex Start Property.

    • Vertex End Property: Optionally, select the name of the property to use for the vertex filtering.

      The time frame for the graph will be before the Vertex End Property.

    • Edge Start Property: Select the name of the property to use for the edge filtering.

      The time frame for the graph will be after the Edge Start Property.

    • Edge End Property: Optionally, select the name of the property to use for the edge filtering.

      The time frame for the graph will be before the Edge End Property.

  5. Select the data type from the Property Type drop-down list.

    Supported property type values are Integer and Date.

  6. Optionally, select the Unit of time for the increment and the Date Format if the Property Type is Date.
  7. Optionally, enable Advanced Settings if you want to explore advanced network evolution features and select one or more of the following options:
    • Height: Select a value to specify the height of the network evolution chart.
    • Chart Type: Select the type of the chart to be used to show the network evolution.
    • Granularity: Specify the aggregation granularity for the input unit.
    • Exclude Values: Specify one or more values to be excluded.
    • Playback Step: Specify a value to determine how often does the playback advance in ms.
    • Playback Timeout: Specify a value to determine how many steps are taken per time out during playback.
  8. Close the Settings dialog.
    The chart displaying the evolution of the graph data gets displayed at the bottom of the graph visualization. You can view the graph animation by clicking the Play Network Evolution button. The animation shows the changes in the graph network over time.
    The following figure shows an example for network evolution of graph data using line chart in the graph visualization panel:

    Figure 22-27 Dynamic Graph Visualization



    Also, you can activate and deactivate network evolution by clicking the Activate Network Evolution icon which is show highlighted in the preceding figure.

22.6.4 Importing and Exporting Graph Visualization Settings

You can import and export the graph visualization settings as a JSON file.

The options to import and export the settings are available on the right of the graph visualization panel:

Figure 22-28 Importing and Exporting Settings



  • To import the graph visualization settings, perform the following steps:
    1. Click import_setting Import settings.
      The Import settings dialog opens.
    2. Choose the JSON file to be imported from your local system either by selecting the file or through drag and drop action.
      Ensure that the settings in the JSON file to be imported matches the graph used in the visualization query. Also, the file must not be larger than five MB.
    3. Click Import to import the file.
  • To export the graph visualization settings, click export_setting Export settings.
    The settings get exported as a JSON file in your local system.