Development of the Justice Innovation Lab Data Visualization Guide

Introduction

Justice Innovation Lab (JIL) utilizes a data-informed approach to build innovative solutions to criminal justice issues. This work relies on an iterative and collaborative process with local jurisdictions to gain a deep understanding of legal system data. Our data team standardizes, analyzes, and visualizes this data to effectively communicate findings and facilitate change.

As JIL’s Data Visualization Engineer, I focus on distilling complex data and analyses into charts that clearly convey key findings. While the data visualizations we produce may seem simple and straightforward, a lot of work goes into designing and refining them to ensure that they are easily understandable and coherently express important results.

I’ve done extensive research on best practices for data visualization in support of these goals, and I have compiled my knowledge into the Justice Innovation Lab Data Visualization Guide. This document provides instructions for selecting data colors, choosing appropriate chart types, and designing accessible and inclusive data visualizations. While each individual data visualization must be thoughtfully constructed with attention to unique aspects of the data being presented, these guidelines will shape design decisions and establish a consistent style for JIL data visualizations.

This post provides an overview of considerations that went into creating the Justice Innovation Lab Data Visualization Guide.

Color selection

The JIL brand colors are dark blue, light blue, light gray, and orange. While vibrant versions of these colors are used throughout JIL’s website, social media, logos, presentations, and other communication materials, colors used for data visualization should be more subdued.

Before approaching the task of adjusting the JIL brand colors for use in data visualizations, I read several helpful articles on color selection, such as “How to pick more beautiful colors for your data visualizations” by Lisa Charlotte Muth at Datawrapper and “Color in UI Design: A (Practical) Framework” by Erik D. Kennedy at Learn UI Design. Then, I set about creating variations of the JIL brand colors using a color picker tool to make adjustments based on the hue, saturation, and lightness (HSL) color system.

I went through several rounds of altering saturation and lightness, along with minor tweaks to hue in some cases, to achieve the JIL data colors. In addition to variations of the JIL brand colors, I selected teal and purple data colors for situations where additional options are needed. For each data color, I ensured sufficient contrast with a white background based on Web Accessibility In Mind (WebAIM) requirements for graphical objects.

Each data color can be used on its own, but more testing needed to go into determining which colors can be used together. I used the Viz Palette and DataViz Palettes tools to ensure that the color combinations provided in the JIL Data Visualization Guide are distinguishable for those with various types of color vision deficiency. I limited the categorical data color combinations to a maximum of three, since having too many colors on a chart makes it harder to understand.

Finally, to create ordinal and continuous data color palettes, I used the Chroma.js Color Palette Helper. This tool assists with selecting sequential and diverging palettes. For the ordinal and continuous JIL data color palettes, there was a lot of trial and error in testing different variations based on the data colors. For the diverging palettes, extra care was taken to ensure that the two hues within a palette (orange/blue or purple/teal) have similar lightness at their corresponding points along the scale. The finalized colors are shown below.

Chart selection

There are several factors to consider when deciding which type of chart to use for a data visualization. One of the most important is the type of data to be displayed. The image below demonstrates different types of charts that may be appropriate based on the number of categorical variables (variables with a finite number of discrete groups) and quantitative variables (variables measured on a continuous, numerical scale) to display.

The JIL Data Visualization Guide includes sections on each type of chart shown: bar charts, scatter charts, line charts, part-to-whole charts, distribution charts, and heat maps. It also includes guidance on combining multiple chart types into a single data visualization and using groups of repeated charts (aka “small multiples”).

Each of these sections includes direction on when to use specific chart types, along with design tips related to topics such as color selection, axis ranges and labels, use of annotations, legend positioning, displaying overlapping data, showing uncertainty, ordering and spacing graphical elements, and avoiding over-plotting.

The JIL Data Visualization Guide includes chart selection and design direction for many common chart types, but it is not exhaustive. Updates and additions to the guide will be made as appropriate.

Chart details

The JIL Data Visualization Guide also provides design specifications for typography and other chart elements, as presented below. JIL uses the Matter sans-serif typeface for all chart text.

The JIL data team uses Vega-Altair, a visualization library for Python, for most data visualization work. To help ensure consistency among visualizations, I created a theme file in a Python script that is used to automatically apply the JIL chart specifications to any visualization created using Vega-Altair.

Accessibility and inclusivity

While the entire JIL Data Visualization Guide was created with accessibility and inclusivity in mind, there are some concepts not explicitly addressed elsewhere that are discussed in this section. These concepts focus on how audiences perceive and understand data visualizations, which should always be a top consideration for designers.

In terms of accessibility, it is important to recognize that there are a wide variety of conditions that can impact someone’s ability to understand data visualizations, such as blindness or low vision, color vision deficiency, cognitive or neurological issues, and motor or dexterity issues. Creating data visualizations that are universally accessible is extremely difficult, but designers should strive to reach as wide an audience as possible. Some examples of best practices for accessible data visualization include:

• Ensure that colors used on the same chart are distinguishable to those with a color vision deficiency. Do not use color alone to distinguish data series on the same chart or to indicate a state change for interactive elements.
• Use font colors, sizes, and weights sufficient for meeting WebAIM contrast requirements.
• Keep charts simple and uncluttered by removing elements not required for chart comprehension, such as borders, gridlines, and excess axis ticks and labels.
• Label data series directly instead of using a separate legend to reduce the mental processing required for comprehension. Add data values and annotations to highlight important trends and add context.
• Use text to help the audience understand the data visualization. Write descriptive chart titles and include accompanying text explaining the data visualization. Always provide alt text descriptions for web charts.
• Make important chart elements, including interactive features and tooltips, accessible using keyboard navigation and assistive technologies, such as screen readers.

It is also important to create charts with empathy for those being represented by the data. There are several ways to approach this:

• Use inclusive, people-first language.
• Accurately portray communities represented by the data. Describe how demographic data were collected and any potential accuracy issues (e.g., did individuals self-identify, or is their assigned demographic based on assumption?).
• Identify any groups excluded from the data.
• Avoid using data colors that reinforce racial, gender, or political stereotypes.
• Carefully consider the best way to order demographic groups within a data visualization. Do not lead with a dominant group by default.
• Show variability in data when comparing demographic groups to provide appropriate context and prevent broad generalizations.

Conclusion

JIL will follow the guidelines discussed here going forward as we strive to create consistent, accessible, and impactful data visualizations. Our team will work to stay up-to-date on evolving best practices related to inclusive language, accessibility standards, and other data visualization topics. We will update and improve the JIL Data Visualization Guide as we continue to learn.

By: Jess Sorensen, Justice Innovation Lab Data Visualization Engineer

For more information about Justice Innovation Lab, visit www.JusticeInnovationLab.org.