# 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 :
- Donut border
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.
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
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
Wine nodes would have a donut representing how much their percentage their
price tag is compared to the max value of
Click again on
add rule and in the dialogue click on the
Donut tab. Once done enter the details for this rule :
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.