This demo shows how badge nodes adapt to different zoom levels to always show the right level of detail. Badge nodes are a popular node design that features rectangular nodes with multiple labels inside.

To create rectangular nodes, set the dimensions of your nodes in the w and h properties.

Multiple node labels and custom label styling are currently in beta. KeyLines lets you pass an array of label objects in the t property, where each object is a separate label with a possibility of custom styling.

Adaptive styling in KeyLines is on by default. During zooming, KeyLines automatically fades or reveals labels based on their size and styling, so that each zoom level shows the optimal level of information in terms of readability and information density.

Key functions used:

• Node labels
• adaptiveStyling