Hello D3 goodbye Highcharts

GFK

Lead Developer: Dominik Stodolny
Product Manager: Stephen Blaylock
Design Systems & Ops: Maxime Amoudruz
Data Visualisation Principal: James Sinclair

My Role

Create new chart designs
Oversee the quality and standards
Provide consultancy around build

Background

GFK’s Newron platform provides clients with panel, retail, and point-of-sale data about their brands and competitors. The platform had been developed quickly using Highcharts for data visualization, which led to inconsistencies across different product team implementations. Highcharts also provided poor integration into the design system and became a barrier to customization. Upon recommendation, the engineering team agreed to move from Highcharts to D3.js, giving GFK control over visualization, and allowing for complete customization and design consistency.

Challenges

The platform couldn’t be crawled or audited automatically.
No chart-level data analytics.
The development team had no D3.js experience.

Approach

Audit the platform to understand:

Range and frequency of chart types
Document inconsistencies, usability, and accessibility issues.
Prioritize high-impact charts and derive a common standard.

Deconstruct charts into base elements, scales, axes, gridlines, data encodings, transitions, and legends. This provided the following benefits:

Clearer and more focused communication
No redundancy
Guaranteed consistency
Combination charts out of the box through a Lego-like approach.

Create transitional designs for continuity and improvements:

Consistency, accessibility, and usability
Integration into the design system using appropriate colours and fonts
Improved visual design

Build the designs in D3.js version 7:

Aid communication with the development team by giving working examples and a code base to digest.
Make explicit all the interactions and data transitions
Test and refine design ideas with real datasets
Hard-wire in the design system

Document all the designs in Figma:

Annotations for all use cases
D3 code elements that generate the visual or behaviour
All design system styles applied

Outcome

Initially, more effort and work are involved, but the benefits outweigh this.
Adding new charts becomes easier as base elements are in place.
Clean, consistent designs and more accessible charts are easy to update.
A flexible model allows for combination charts to be created via composition rather than code, both stable and cheap.