At Adverai we design and build custom data visualisations for our products, since we believe that the most effective means to convey data-driven insights to our users is the visual. As Colin Ware said in his book, “Information Visualisation: Perception For Design”:
“Visual displays provide the highest bandwidth channel from the computer to the human. We acquire more information through vision than through all of the other senses combined…”
There are two options available when embedding charts, plots and custom data visualisations in your digital user interface; either pick a charting library or build your own custom data visualisations.
Charting libraries have limitations
Using charting libraries and frameworks can lead to faster results but, in the long run, they have significant limitations, primarily because most of these frameworks were not built in a modular fashion.
Perhaps you need a simple bar chart in your application that also has a layer of annotations and a hover interaction. With a charting library you can choose the visualisation and integrate it within your app, but at the cost of having to take on board capability for all of the other types of charts that you will never use (including that “nice” 3D pie chart).
Other limitations with charting libraries and frameworks then start to emerge. For example, you may wish to change the style of your axis labels to match your brand guidelines, or customise the behaviour of a plot if the user hovers over a certain area. But often you cannot make these changes and, if you do, then it is only with some hacky workaround that will lead to future complications. And the excessive size and poor customisation features of these libraries results in loading indicators and poor user experience.
Designing custom data visualisations
Designing and building custom data visualisations for your product from scratch can seem daunting.
Which framework should I use?
Should I use D3.js for everything?
Should I use D3.js strictly as a data transformation layer and use React / Angular / Vue for manipulating the DOM?
These are all valid questions, but before you start building your visualisations, you need a conceptual model to break down the problem into separate parts and tackle them individually. This is where the concept of the Anatomy of Custom Data Visualisation can help.
Anatomy of Custom Data Visualisation
Anatomy is the study of the structure and internal workings of something, most commonly the human body, but is equally applicable to data visualisations, and studying the structure and layers of data visualisations helps us to make better design decisions. At Adverai, a conceptual model with a set of rules, naming conventions, layers and fundamental components was essential in helping us design a uniform system for data visualisation.
Abstract layers are used to group conceptually similar parts of the visualisation together. At Adverai we describe our visualisations with the following five layers:
Each layer consists of numerous low-level, reusable components. Creating a new visualisation by this approach means constructing a new entity by constructing layers with their components using custom logic.
*Illustration: layers on top of each other
The core layer describes the dimensions and behaviour of a visualisation. Each visualisation has a container and a stage. The size and spacing properties of these elements follow a naming convention to create a uniform system. The core layer also contains the custom logic that describes how each layer should work together (e.g. interactions, annotations, etc.)
*Illustration: Core layer with container and stage, spacing (padding and margin)
This layer is a proxy between the previous and the next layer. An axis of a visualisation describes the relationship between the core layer’s dimensions and the visual encoding of the data. For those familiar with D3 scales, then the axis is essentially a visual representation of a scale (e.g. linear scale). If you are not familiar with that concept, then think of the axis as a visual representation of your data’s domain range (e.g. height of students with a range of 0 – 250cm). The axis layer consists of different types of axes based on its placement, orientation and behaviour.
*Illustration: Axis components and the stage of the visualisation
Visualising data requires encoding its dimensions with appropriate visual shapes and properties. The layer consists of numerous visual encoding components for shapes (e.g areas, circles, lines, symbols, etc.) and their properties (e.g. angle, size, position, hue, saturation, pattern, weight, etc.).
*Illustration: Data table of common visual properties for encodings
The heart of each and every interactive visualisation. This layer ensures smooth experience for all types of interactions with your visualisation. Some components of the layer use well known or custom partitioning methods (e.g. Voronoi diagram) to improve the interactive experience and improve performance, and others enable direct manipulation techniques (e.g. brushing, zooming, linking, hovering, and selecting items) for users.
*Illustration: Voronoi diagram for partitioning the state
The most important layer in explanatory data visualisations. Annotation types, such as markers, floating labels, area highlighters set the context and assist users in recognising anomalies, patterns and unique insights about the data.
*Illustration: Labels and highlighted areas on top of the encodings layer
In upcoming blog posts, we will show how this conceptual system helped us building an army of visualisations with a number of reusable, low-level components. We will also discuss the technical choices of using D3.js for the data transformation layer and Angular for rendering the visualisations and manipulating the DOM.
Related articles and data visualization libraries that served as an inspiration:
D3.js margin convention
Uber React visualisation
Choose appropriate visual encodings