All versions of this manual
X
 

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 belongs 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 ans Captions as Default

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): property 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)

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 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)

Additionaly 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:

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

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", "equilateral", "square" or "star".

"style": {
  "shape": "star" // "circle", "cross", "diamond", "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

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"
  }
} 

Note that you can host your custom images in Linkurious Enterprise itself by storing them in the folder located at linkurious/data/server/customFiles/. For example you can create a folder at customFiles/my-icons/ and store your images there (e.g. company.png and city.png). Then, your style rules would look like:

"style": {
  "image": {
    "url": "/my-icons/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.