Be IBM, with data.
Scientific, with personality
Charts and graphs are scientific representations of data, but that doesn’t mean that they shouldn’t be expressive and visually intriguing. Convey uniqueness and distinction, without affecting readability and accessibility.
- What do you need to communicate?
- What organizational strategies will suit your message?
- Which elements are primary and secondary?
- How much data will you show at once?
Connect to the past
Analyze IBM’s design heritage to inform the future and extract a shared vocabulary of stylistic choices, visual patterns, color combinations, and composition principles.
Focus on details
Choosing a specific color, shape, or movement is never a only matter of style; every element represents something. Consider all the variables you can play with (visual, animation, and interaction layers) to help elements feel recognizable and unified.
Stylize classics, design new customs
In some cases, simply adding a minor stylistic feature to a standard chart creates the personal touch: changing a color, adding a pattern, or editing the background might be enough. In other cases, designing a custom visual model will be the best solution. Don’t be afraid to experiment, always balancing familiar elements and novelty.
Inspired by the arts
To expand your style inspiration for data visualization, look back at hundreds of years of visual information. Consider the evolution of music notation, from the medieval times to contemporary music. Dive into experiments with geometric shapes that characterized the abstract, avant-garde artists of the last century.
These visual languages clearly pursue different goals, but have a lot have in common with data visualization. They draw on common perception principles and use simple shapes, selected symbols, and a definite range of colors. Draw ideas from them to create visual compositions that deliver a message and please the eye.
IBM Radial Flower Chart
Add new layers of discovery to the traditional bubble chart with the IBM Radial Flower Chart. In this chart, animated lines grow and spin to reveal a bloom of relevant data to an existing object on the chart.
Use the chart when you want to create an overview indicating subdivisions in categories. Apply different styles (e.g. fill versus stroke) to create a strong visual separations between two partitions of the same value (e.g. filled lines: revenues among products categories, stroke lines: revenues among stores).
Since the radial representation creates a sort of glyph, it works well in a small multiples layout where you can graphically highlight differences. The single glyph can lead to a further detailed exploration of the values that it shows.
Do not use this chart if you are trying to make highly detailed comparisons between categories. Its radial shape makes it hard for a user to see differences in the lengths.
IBM Geometric Granular View
Taking inspiration from the printed punch card, the Geometric Granular View promotes deep analysis of a data visualization. This example shows how users can drill down further into a basic visualization, like a tree map, into a more sophisticated view. In this example, color, shape, and value are used to bring specific information into the foreground and give users fine grained control over the data.
IBM Alluvial Diagram
The IBM Alluvial Diagram communicates patterns and trends over time. It overlaps different layers of information represented in bold hues as graphic shapes.
Multiple flows can show how different categories evolve over time. Circles can be a second indicator which add another layer of information. Reduce the layers overlapping to fewer than five when possible, aiming to remain clear and readable.
Apply the style
Use color to tell stories
Use color contrast to attract the eye towards a main element. Augment color with other strong visual features, like shape, line, or pattern to make the focal point immediately recognizable.
Details on black
Detail on color
Customers by office over time
Develop a palette
As one of the most powerful sensory cues, color is a highly influential visual property. Color can be used to label and categorize elements, to measure quantities, to show intervals and to highlight key elements. Don’t use different colors to represent the same kind of data. Instead, use contrasting colors to show contrasting data, complementary colors for complementary data, and similar colors for groups of data.
Two color contrast
Three color palette
Analysis of stores
In info vis, color paired with overlapping shapes, for example, communicates a message of relationship, mutual existence or co-incidence, adding a rich layer of meaning to your visualization. In situations like a venn diagram, it can be used to enhance attributes and properties of a data set.
Intersection of parameters
Sold out time slots
Enhance with texture
Patterns are one of the most distinctive visual variables: One example, the IBM logo, is based on a pattern of 8 horizontal lines. Patterns are not just a decoration but become a way to convey information. Use lines with different weights and play with the density of elements.
Increasing values and density
Population density per county (people per km2)
Create a custom pattern
Use the IBM 8 lines structure to create a grid. The same module should be used as a basis for a custom pattern that can be used as shown before to represent data.
Pursue geometric purity
The design heritage at IBM maintains its strength due to its visual simplicity and effectiveness. Pursue the same graphic purity when designing an information visualization. Use classic geometric shapes and rules.
Population density per country (people per km2)
Build spatial harmony with math
Bring science and mathematics into your design through the construction of grids and rules to communicate solidity, accuracy and reliability.
Analysis of stores
Select basic, essential shapes
Shapes are a critical visible variable that can be used in a scatter plot, placed on a map, filled on a matrix or simply used with different sizes to compare values. Avoid decorative features, and use elementary shapes.
Have a sharp touch
In case of trendlines, and in other linear representations, polygonal shapes are preferable to curvy lines. Avoid misleading curvatures in favor of a more technical, scientific feel.
Create hierarchy and highlight key messages
Use details to identify the focus of the chart. Create a sharp contrast between colorful elements and wireframe ones (solid and outline) to gain the user’s attention. Use visual differences to tell stories and convey messages.
Amount of European students by university
Frame with a signature background
Even if grids are in the background, they greatly support readability of a chart. IBM grids are rich with color applied and generous spacing. Avoid gray backgrounds, let the grid breathe, and explore with colors and contrast—instead of trying to make the grid disappear. Use these techniques to develop something bold that serves as the base layer of the visualization.