# Visualisation Styling

Hume offers a vast palette for styling nodes and links in visualisations.

Stylings apply to Classes of nodes or to Types of relationships and can be dynamic based on the attribute values of those.

We will start from an example using the Wines Knowledge Graph.

# Node Styling

The following styles can be applied to nodes :

  • Caption
  • Color/Icon
  • Size
  • Donut border
  • Badge

Styles are defined as conditional rules evaluated on the nodes present on the canvas and are applied per class.

Rules are based on :

  • attribute value of a node
  • attribute existence of a node
  • degree of a node

To style nodes, select a node of a class you want style and open the Styles tab in the side panel :

# Styling the node caption

In order for nodes to display automatically the value of an attribute it contains, you can choose a different caption in the styling.

Click in the caption input field and the list of attributes + the class name will appear in a dropdown.

We can for example choose to always display the name and the price tag of a Wine node :

As you can see, the price of a Wine appears no in the node caption ( if the node contain the value ).


# Styling the color and icon

Let's say that we want to have a different icon and color for the Wine nodes where the price tag is above 30.

Click the add new rule button and define such a rule in the node styling dialogue that appears :

Select the correct configuration in the dialogue form in order to reflect your rule and click on save.

The result is automatically displayed on the screen :


# Styling node donut borders

A numerical information can be represented as a colored filled circle (donut) around a node. Generally such information represents a percentage value.

In our example, we can assume a value of 80 that represents 100%, then Wine nodes would have a donut representing how much their percentage their price tag is compared to the max value of 100%/80.

Click again on add rule and in the dialogue click on the Donut tab. Once done enter the details for this rule :

Click on create rule and you can see the Donuts appearing around the Wine nodes :


# Adding badges to nodes

Badges are useful for showing critical information. Imagine a scenario where a flashing red ball should appear next to a wine if the points of the wine is more than 50.

To do so, click on add rule, select the badge tab in the dialogue and configure the rule to match the needs :

Click then on create rule and see the effects in your visualisation :


# Styling nodes size

When viewing a graph visualisation from a certain distance, important nodes are often better showcased as bigger than the other ones.

Let's do it based on the price and evaluate the effect.

As usual, click add rule, select the size tab and apply the configuration needed :

You can now see the result and have an immediate idea on which nodes are the most important :


# Saving styles

Once styles are configured, they still need to be saved.

Click on the save style button and just give it a name, it will then be available in the visualisations.