Data Visualization Library D3

Overview

Charts: everybody loves them, but not so many know how to properly used them. This project is an extension of the Ericsson Design System (EDS) intended to provide a library with the most common charts to be used alongside with the rest of the design system.

The project started as a request from a data visualization heavy product such as Ericsson Expert Analytics (EEA), where they deal with large quantities of data. Soon we realized that the demand for a consistent and coherent chart library aligned to the design language of the company's new brand didn't stop there, and decided to work on such a project that could be used by any product.

Example of a combined chart. Top: general statistics such as minimum or maximum values for the displayed data-set. Left: line chart with highlighted line. Right: extended concept of legend as a table.

Why another data visualization library?

In occasions, this questions raised up from different development teams. "Why should we invest time and money in yet another chart library, when there are so many out there?". It is very true that there a numerous solutions free or with almost no cost. Limitations associated with this approach comes down to:

• Licensing: Owning a data visualization library implies no license issues.
• Features: Third party libraries are subject to change and limited to what they provide. Cost associated to development and maintenance of these modifications on a 3PP is comparable to performing them on a company owned library, while enabling complete control over it.
• Alignment: The fact that there are so many, implies that different teams will use different libraries with different behaviors and appealing, making it almost impossible to have a consistent experience.
• Reusability: Improvements and contributions done by different teams can everyone.

A robust, branded and company owned data visualization library provides a winning strategy in the long term. Moreover the cost on doing so will payout since all teams can contribute to it instead of adding features to their own particular solutions.

I need a dashboard for my project...

The main purpose of these charts was to cover the different needs existing in dashboards from web applications. Even though this was the case, it soon became as a reference for other purposes given the great reception within the company.

Having such a wide range of operation it was important to address the most commonly used set of charts first, while at the same time making sure that they where used correctly. This required some previous research on what type of charts were necessary to cover user's needs and requirements.

Most dashboards have a common set of values:

• Monitor or track performance
• Provide new insights
• Facilitate decision making
• Manage large volumes of information

These values influenced the way dashboards, and in consequence data visualizations, in their behaviour, interaction, etc. Not only their user experience was paramount, but it was important to push the company's brand further to make it a differentiator against the competitors by also being visually appealing.

What chart to pick?

There are many types of analysis possible. Below is a diagram that shows multiple charts and grouped by identified needed types of analysis.

Notice, that all groups derive from a common question: What kind of analysis are you targeting? This is the first and most important question when deciding what chart you need. One can think of a dashboard as a tool that solves a specific problem. It is very important to know what kind of problem are you trying to solve before choosing which tool you need.

The second question to make, before choosing a chart is: What type data do you have? In multiple occasions, users run directly to pick a donut chart and a map without even considering what information they have available.

Result of the research I did showing the groups of potential charts to be covered answering the question: "What kind of analysis are you targeting?".

Keeping it simple

To encourage users to ask themselves these questions before choosing a specific chart, there was an Overview page that resembles the previous diagram in an interactive way. In this page, users can filter the charts shown by selecting 1) the type of analysis and 2) the type of data. By default all the charts are shown, which make this page at the same time to also works as a gallery. Each chart is represented by a card with a visual reference, grouped by type of analysis and tagged with the type of data required. Below is a small sample of these cards.

As with any other pattern, each chart is documented meticulously following the principles described in the Ericsson Design System page. It might be interesting to point out some features in the development and design of the data visualization library.

Example sub-set of 6 different cards shown in the Ericsson Design System chart overview page. Cards are grouped in categories corresponding to analysis type and tagged with the data type they use.

Key principles I followed when developing the library