Explore the different views in the menu below to see how customisable KeyLines
charts can be.
A minimalist view can often be more effective as it reduces the amount of information
users are subjected to, producing a clean, clear chart.
Although KeyLines has many features that can be useful, it's never a good idea to include
all of them in one view, as this causes sensory overload.
Having a simpler feel to your chart can be useful when highlighting certain items. A
bright colour stands out more against a less vibrant background.
You can also create custom controls for your charts and time bars. Here we've used
overlaid page elements with the
and font icons for toggling the
time bar and fitting the time range into the view respectively.
Simple views can be visually striking when done well. Using a dark background with
contrasting lighter items reduces the strain on users' eyes and can increase readability.
You can also let users toggle the visibilty of components. Try clicking the button in the
top right to hide and show the time bar.
You can also link the chart and time bars to respond to
user interaction
simultaneously. Try clicking on the chart and scrolling in on the time bar to see how
they interact with each other.
Although chart items are designed for specific purposes, their flexibility enables you to
use them in almost limitless ways.
This view shows
glyphs
being used as a label and
halos
creating a 3-dimensional effect through adding shadows to nodes. The nodes are connected
smoothly with links following a
curve.
The styling of items can also be easily updated when they are selected. In this view node
borders and links are highlighted in red and given a dashed line style. The styling of
selected items can be set using
chart options.
Making sure that data is displayed intuitively means that you can give more value in a
single view. By using
donuts
you can easily convey large amounts of metadata for each node in a clean,
easy-to-understand format.
You can also use a variety of different
layouts
that come built into KeyLines. This view uses the sequential layout (with links following a
curve) to
intuitively imply a hierarchy.
With KeyLines you can easily configure the chart to respond to user actions.
Using the
selectedNode
styling option is a good way to draw attention to items.
You can also set item styles individually, giving intuitive visuals to items so users
understand the data quicker and easier.
This view uses relevant
font icons
on nodes to show if they are a movie or an actor, and the movie nodes are also
enlarged
to make them stand out.
KeyLines supports all font families as well as
custom images.
It's important to make it easy to navigate charts. KeyLines has an
overview window
that shows where the view window is in relation to the whole network, giving users a
sense of where they are.
Try clicking the box in the bottom right of the chart.
Other controls such as a 'home' button can also help users to return to a comfortable
starting point. Try zooming into the chart and then clicking the
icon in the top left to
zoom to fit
the network back into view.