Creating a React Library for Consistent Data Visualization

At Shopify, we tell a lot of stories through data visualization. This is the driving force behind business decisions—not only for our merchants, but also for teams within Shopify. With more than 10,000 Shopify employees, though, it is only natural that different teams started using different tools to display data.

Shopify logo
Shopify
•
Krystal Campioni
•7 min read•beginner•
--
•View Original
React

Overview

This article discusses the creation of the Polaris Viz library at Shopify, aimed at standardizing data visualization across various teams. It highlights the challenges of visual inconsistencies and outlines the implementation of themes and a centralized provider to enhance accessibility and maintain a cohesive visual identity.

What You'll Learn

1

How to implement a centralized theme provider in a React library

2

Why consistent data visualization is crucial for business decisions

3

How to create and manage multiple themes for data visualization

4

When to apply accessibility standards in data visualization

Prerequisites & Requirements

  • Basic understanding of React and theming concepts(optional)
  • Familiarity with TypeScript and JavaScript

Key Questions Answered

What are the main reasons for visual inconsistencies in data visualization at Shopify?
Visual inconsistencies arose from different teams using various tools and libraries for data visualization, leading to discrepancies in styles, accessibility, and printability. This highlighted the need for a unified approach to ensure consistency across the organization.
How does the PolarisVizProvider enhance theme management in the library?
The PolarisVizProvider allows consumers to define their visual identity in a centralized manner, enabling all charts to inherit consistent styles. It accepts a themes prop, which can overwrite default themes or add new ones, ensuring that visual discrepancies are minimized.
What features does the createTheme function provide?
The createTheme function allows developers to create a complete theme from a partial one by filling in missing properties with default values. This ensures that all necessary configurations are present for rendering charts correctly, thus avoiding visual inconsistencies.
How can series colors change according to data in Polaris Viz?
In Polaris Viz, the DataSeries type can accept an optional color property that overrides the series color defined in the theme. This allows for dynamic color changes based on data values, enhancing the visual representation of data trends.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React
Used to build the Polaris Viz library for data visualization.
Tools
Typescript
Utilized for type safety and defining themes in the library.

Key Actionable Insights

1
Implement a centralized theme provider to streamline theme management across your React applications.
This approach reduces visual inconsistencies and simplifies the process of applying themes, making it easier for teams to maintain a cohesive visual identity.
2
Utilize the createTheme function to ensure all necessary properties are defined for your charts.
By leveraging this function, you can avoid rendering issues that arise from missing theme properties, leading to a more reliable and visually appealing data visualization.
3
Consider accessibility standards when designing your data visualizations.
Ensuring that your visualizations are accessible not only broadens your audience but also aligns with best practices in design, making your data more impactful.

Common Pitfalls

1
Failing to define all necessary properties in a custom theme can lead to rendering issues.
This often occurs when developers overwrite default themes without providing all required attributes, resulting in incomplete or incorrect visualizations.

Related Concepts

Data Visualization Best Practices
Accessibility In Design
Theming In React