Visualizations appearance: Default styles

In Linkurious Enterprise you can customize the default visual aspect of nodes and edges for new visualizations; your users can then jump head first into the exploration of the data.

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

Styles belong to one particular data-source. To set the default styles of a data-source, you have two options:

Configure a style from the workspace and, from the bottom right of the Design panel, press Save Styles and Captions as Default

Edit them manually from the data-source configuration page:

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

Inside Default Styles, the nodes and the edges sections define the default styles for nodes and edges respectively.

A style rule has the following elements:

index: a unique number >= 0 used to define the order in which rules are applied
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): identifier on which the style is computed on
value (optional): a value to be used by the selector (see the Selectors sections for details)
style: the style applied by this rule (see the Styles sections for details)

The input field is an array containing a sequence of strings identifying the path to an item in the JSON representation of a visualization object (node or relationship). Supported paths are:

"properties": is the container of all the properties of a visualization object. 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 a visualization object. Current available statistics are:
- "degree": defined 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",
  "type": "is",
  "input": ["properties", "name"],
  "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,
  "type": "range",
  "itemType": "COMPANY",
  "input": ["statistics", "degree"],
  "value": {
    ">": 20
  },
  "style": {
    "size": "150%"
  }
},
{
  "index": 5,
  "type": "novalue",
  "itemType": "COMPANY",
  "input": ["statistics", "degree"],
  "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:

{
  "type": "is",
  "input": ["properties", "name"],
  "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 color style for nodes and edges has the same format.

Sizes

For nodes, set under the style property key an object with one key, size, e.g:

"style": {
  "size": "220%"
}

For edges it is quite similar: set under the style property key an object with one key, width, e.g:

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

Shapes

Set under the style property key an object with one key, shape.

For nodes, set the shape of the node. Possible values are: "circle" (default), "cross", "diamond", "pentagon", "equilateral", "square" or "star".

"style": {
  "shape": "star" // "circle", "cross", "diamond", "pentagon", "equilateral", "square" or "star" 
}

For edges, set the shape of the edge. 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 at 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 an URL to an image. Available image formats are PNG, JPG, GIF, or 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 
  }
}

Editing the default styles in the data-source page does automatically change captions for existing users for newly created visualizations. Existing visualizations are not touched.

Previous Next