Visualizations appearance: Default styles

In Linkurious Enterprise you can customize the default visual aspect of nodes, edges, and edge-groups for new visualizations.

Your users can then jump head-first into the exploration of their data.

Styles can be configured individually by each user using the Design panel. Default values can be configured for all users by an administrator.

Default styles are set on a per data-source basis. To set the default styles of a data-source, you have two options:

1. Configure styles in a visualization, then from the bottom right of the Design panel, press Save Styles and Captions as Default

   ⚠️ Visualizations can contain their own styles or user preferences, which can differ from the current default styles. Because of that, using Save styles and captions as default can cause existing default style-rules to be lost. To avoid losing existing rules, we recommend resetting the styles of the current visualization before defining and saving new default styles.

2. (Recommended) Edit them manually from the data-source configuration page:

By default, every node-category has a pre-assigned color.

Inside Default Styles, the nodes, edges, and edgeGroup sections define the default styles for nodes, edges, and edge-groups respectively. To define default styles for the graph, you need to add style-rules in each of these sections.

Style-rules

A style-rule defines style to apply to a subset of the graph. For example:

• "All nodes of category COMPANY must be blue"
• "All edges of type TRANSFERS with amount larger than 1000 must be dotted and red"

A style-rule is made of two parts:

• A selector, which defines what the rule applies to (using the itemType, input, type, and value fields. See selectors section for details)
• A style, which defines what style to apply (using the style field, see styles section for details)

The fields of a style-rule are:

• index: a unique number (>= 0) used to influence the order in which rules are applied (see style-rule priorities section for details)
• itemType: node-category or edge-type the style-rule applies to (optional if type is any)
• type: a value among "any", "novalue", "nan", "range", "is"
• input (optional): identify on which the style is computed on
• value (optional): a value to be used by the selector (see selectors section for details)
• style: the style applied by this rule (see styles section for details)

The input field is an array of strings identifying the path to a value within a node (or edge). Supported paths are:

• "properties": is the container for all properties of a node (or edge). For example, to identify the property called name, the input value should be ["properties", "name"].
• "statisics": is the container of the internal statistics computed by Linkurious Enterprise on a visualization object. Current available statistics are:
  • "degree": defines a node, represents the number of nodes connected through any type of relationship (in case of supernode, the value is not defined). To access this attribute, the input value should be ["statisics", "degree"].

For example:

{
  "index": 3,
  "itemType": "COMPANY",
  "input": ["properties", "name"],
  "type": "is",
  "value": "linkurious",
  "style": {
    "color": "blue"
  }
}

The above rule will apply the style {"color": "blue"} to all nodes with category "COMPANY" where the name is "linkurious".

{
  "index": 4,
  "itemType": "COMPANY",
  "input": ["statistics", "degree"],
  "type": "range",
  "value": {
    ">": 20
  },
  "style": {
    "size": "150%"
  }
},
{
  "index": 5,
  "itemType": "COMPANY",
  "input": ["statistics", "degree"],
  "type": "novalue",
  "style": {
    "size": "200%"
  }
}

The above rule will apply the style {"size": "150%"} to all nodes with category "COMPANY" that are connected to more that 20 other nodes and the style {"size": "200%"} to all supernodes with category "COMPANY".

index has to be unique. It is currently required for technical reasons. This will be made more user-friendly in future releases.

Selectors

The selector is used to specify to which items the style is applied to. For example, you can configure all the "COMPANY" founded more than 12 years ago to have a particular style. To do so, we use a style-rule with a range type and with value:

{
  ">": 12
}

The overall style-rule will look like the following (assuming we want to color the nodes in red):

{
  "index": 3,
  "type": "range",
  "itemType": "COMPANY",
  "input": ["properties", "age"],
  "value": {
    ">": 12
  },
  "style": {
    "color": "red"
  }
}

For range queries, you can use one or more among the following operators: >, <, >=, <=.

Supported selectors

• range: matches numerical values that are contained in the range defined in the value parameter, e.g.
  • {"<=": 12} means "smaller or equal to 12"
  • {">": 0, "<": 10} means "between 0 and 10 excluded"
• any: matches any value
• is: matches all values that are equal to the value parameter, e.g.:

  {
    "input": ["properties", "name"],
    "type": "is",
    "value": "linkurious",
    // ..
  }
  

• novalue: matches values that are null, missing or contain an empty string
• nan: matches values that do not contain a numerical value (Not A Number)

In addition to type, input, and value, you must always specify itemType to filter by node-category or edge-type except if type is any.

Styles

Colors

Set under the style property key an object with one key, color, e.g.:

• if you want to manually assign a color:

  "style": {
    "color": "blue" // or "#0000FF", "rgba(0, 0, 255, 1)"
  }
  

• if you want to automatically assign a color based on a property value (propertyName in our case):

  "style": {
    "color": {
      "type": "auto", 
      "input": ["properties", "propertyName"]
    }
  }
  

The syntax is the same to define the color for node, edges, and edge-groups.

Sizes

For nodes, under style, use the size key to define a percentage of a regular node's size, e.g.:

"style": {
  "size": "200%" // twice as large as a regular node
}

For edges, under style, use the width key to define a percentage of a regular edge's width, e.g.:

"style": {
  "width": "220%"
}

Dynamic sizing

Just like you can set the size (for nodes) or width (for edged) using a fixed value, you can also set the size dynamically, based on a numerical property of the node (or edge) e.g.:

For nodes:

"style": {
  "size": {
    "type": "autoRange",
    "input": ["properties", "age"],
    "scale": "linear"
  }
}

For edges:

"style": {
  "width": {
    "type": "autoRange",
    "input": ["properties", "age"],
    "scale": "linear"
  }
}
The `scale` attribute can take two values:
- `linear`: Edges and nodes are sized using a linear scale function based on their property values.
- `logarithmic`: Edges and nodes are sized using a logarithmic scale function based on their property values.

If `scale` is not defined, linear is applied by default.

In the example above, all selected nodes and edges are scaled linearly based on the property `age`.

> Nodes will be sized between the range of **50% (the smallest)** and **500% (the largest)**.

> Edges will be sized between the range of **50% (the smallest)** and **200% (the largest)**.

### Shapes

Under the `style`, use the `shape` key to define the shape of the selected node (or edge).
- For nodes, possible values are: `"circle"` (default), `"cross"`, `"diamond"`, `"pentagon"`, `"equilateral"`, `"square"` or `"star"`.
  ```js
  "style": {
    "shape": "star" // "circle", "cross", "diamond", "pentagon", "equilateral", "square" or "star"
  }

• For edges (and edge-groups), possible values are: "arrow" (default), "dashed", "dotted", "line" or "tapered".

  "style": {
    "shape": "dotted" // "arrow", "dashed", "dotted", "line" or "tapered"
  }
  

  

Custom node icons

You can host your custom icons in Linkurious Enterprise itself by storing them in the folder located in linkurious/data/server/customFiles/icons.

Users will find them in the Design panel:

If you want to edit style-rules manually, the style-rules to access these images would look like:

"style": {
  "image": {
    "url": "/icons/company.png"
  }
}

Advanced custom node icons

Nodes can be filled with an image if one of their property is a URL to an image. Available image formats are PNG, JPG, GIF, and TIFF.

The following style will set an image:

Example:

"style": {
  "image": {
    "url": "http://example.com/img/company.png"
  }
}

To assign dynamically an image to a node, for example if the logo is stored in a node property called "logo_url", you just need to set the following style:

"style": {
  "image": {
    "url": {
      "type": "data",
      "path": [
       "properties",
       "logo_url" // change it to the property key where your image urls are stored
      ]
    }
  }
}

If you want to resize your images in a node you can you use the additional properties scale, fit and tile, e.g.:

"style": {
  "image": {
    "url": ... // one of the above
    "scale": 0.8, // scale the image in the node
    "fit": false, // if true, fill the node with the image
    "tile": false // if true, repeat the image to fill the node
  }
}

Style edge-groups

Within the edgeGroup property key, we can directly set the color, shape, and width that will apply to all grouped edges of a data-source.

"edgeGroup": {
  "color": "red",
  "shape": "dashed", // "arrow", "dashed", "dotted", "line" or "tapered"
  "width": "320%"
 }

Editing the default styles in the data-source page automatically changes captions for existing users for newly created visualizations. These changes are not applied to existing visualizations.

Style-rule priorities

When style-rules are applied, an implicit priority is used to define in which order they are applied. The idea behind the order is that "the last applied rule wins" (like in CSS).

Style-rules are sorted by:

• Specificity (how specific their selector is):

  • 4: When both itemType and input are defined (i.e., the rule applies to a specific property of a given node-category, or edge-type)
  • 3: When only input is defined (i.e., the rule applies to a specific property for all nodes, or edges)
  • 2: When only itemType is defined (i.e., the rule applies to all nodes with that node-category, or edge with that edge-type)
  • 1: When neither itemType nor input are defined (i.e., the rule applies to all nodes or edges)

• ItemType (the name of the node-category or edge-type they apply to):

  • Rules with the same specificity are sorted by itemType alphanumerically

• Index:

  • Rules with the same specificity and itemType are sorted by index.
  • If index is not defined for a given rule, we consider rules in the order they are defined in the style-rules array and define index as the largest previous value + 1.

As a consequence, this would be the sorting order of these rules: