Styling a graph visualization

Node, link and chart style options

When choosing a graph visualization solution, you need one that you can customize for your users, your data and the questions you need to answer. A custom-designed interface feels familiar and intuitive, and helps your users start uncovering insight sooner.

Here are just some of the visual styling options available in our products.

Custom styles for your visualization

Nodes – These usually represent the main entities in your data. With our toolkits, you can adjust almost every attribute of a node.

node styling

Links – These are the connections between your data entities. Use attributes like weight, color and style to communicate different kinds and strengths of connection.

Link Styles

Halos – These are ‘halo-effect’ rings that draw attention to nodes. They’re a great way to highlight key events, alerts or warnings. A node can have up to ten halos, each with a customized radius, width, and color. They’re also very simple to animate.

Ping Features Customisation

Glyphs – These small icons communicate interesting characteristics of a node or link. You can add as many glyphs as you like, define their position, alignment, color or icon, and animate them for greater impact.

Labels – Node and link labels are the most obvious way to identify different elements in your chart and adapt to changing positions in-line with your chart elements. Customize them with different font sizes and colors, control their position and truncate them.

Label Styling

Charts – Customize the entire chart to meet the requirements of your application – the background color, watermark text or image, chart logo and navigation controls can all be modified.

Use watermarks to customize the chart

Donuts – These are a great way to convey numeric proportions of data quickly. Select how many segments you want, their size and color, then get creative with animation.

Use

Self-links – If you’re analyzing an IT network or cyber threat, it’s not unusual to find nodes that send network traffic to themselves. Self-links reflect this neatly.

Self Link Styling

Fine-grained control – Take control of other visual attributes, from arrow-head size, to label height, to link behavior when it approaches a node.

Control Dark Mode

Selection – Adjust the effect used to highlight selected entities, and define the behavior around selected nodes and links.


glyphs as switches



Custom user experience

Design and build the best experience for your users with interactions customized to their workflows, revealing insight faster.

Snap to grid or snap to circle – These maintain precise alignment even when you move the nodes around. Create the right snap behaviour even as the node moves position.

Annotations – Use annotations to display relevant and specific information. Annotations follow the position of a node as you move it around so your charts don’t lose context.

using annotations

Drag behavior – Easily control which elements of a chart you want to drag without ruining the overall display. These are great for maintaining the relative order of nodes especially in a sequential layout.

Control Drag Behaviour

Touch devices – Draw and manipulate nodes and links by hand using touch devices, track-pads and keyboard interactions.

Use touch devices

Ready to learn more?

Our blog contains loads of resources about graph visualization design and best practice. Or if you’re ready to get started, request a trial of one of our products.


Request a trial

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2023.
Read our Privacy Policy.