Data Visualization

Always create clear and readable data visualizations.

Colors:

Don’t use color alone to communicate information. Use labels, callouts and captions to clearly explain data.

Labels:

Ensure all data is clearly labeled and contextualized with a legend.

Takeaways:

Provide plain language takeaways of key points.

Clarity:

Know your audience, medium and environment to ensure the design you create allows the data to be properly interpreted. For digital executions, make sure to design and test for a wide range of user environments and interactions that might compromise the visualization.

The most common types of data visualizations that we create fall into four categories. Use the type that best conveys the data you need to share.

Stacked Bar Chart / Long Tail Plot

Don’t use color alone to communicate information. Use labels, callouts and captions to clearly explain data.

Labels

Best used for:

• Comparing different populations

• Categorizing data

• Showing multiple subdivisions

• Stacked bars with fewer than six subdivisions

Pie Chart

Best used for:

• Showing a single time-point

• Categorizing data

• Showing subdivisions of a whole

• Fewer than seven different colored pieces

Line Graph

Best used for:

• Time-based data

• Showing trends over time

• Impact of events on data

Heat Map

Best used for:

• Multi-dimensional data sets

• Showing the magnitude of a phenomenon by plotting color along an x- and y-axis

Long Tail Plots

Long tail plots—or stacked bar charts—provide a way to quickly compare multiple relational data points in groups. This type of visualization is best for categorized data that share the same units of measurement and hierarchy among groups. For example, the graphs on the right show the number of patients harboring at least one alteration (the y-axis) in each of the genes of interest (the x-axis).

A stacked bar chart can be used to further subcategorize data. In the example shown here, the types of alterations within a gene (e.g., point mutation, amp, loss, etc.) are represented by different colors. A color legend should be included to explain what the colors represent, in addition to labeling the axes.

Pie Charts

Pie charts are used to categorize the composition of a data set. The circle represents a closed data set with a fixed size, while individual pieces represent a category within the set. This type of visualization is for data sets that share the same units of measurement. A legend should be included to explain what each color represents. Each piece should be numbered to quantify the presented information.

Line Graphs

Line graphs can be used to show data for a single population over time or to compare data on multiple populations over time. Different colors and labels should be used to differentiate the plotted populations.

Heatmaps

Heatmaps are used to depict the magnitude of a phenomenon using spatial relationships and colors to convey information. It’s a great tool for investigating patterns, clusters and distributions in a large dataset. Shown here are two different types of heatmaps, each conveying their data in the most intuitive way.

Heatmaps should be accompanied by labeled x- and y-axis if appropriate (either in a sidebar or revealed on interaction), and a color legend.

The unique colors used for data visualizations allow for better clarity and more data points to be conveyed. Please see the color section for more information.

When graphing fewer than eight data points at a given interval, please use the Accessible Palette. These colors were chosen both for their variety, as well as their contrast in both color and black and white.

When Using For Print

PRIMARY BRAND COLORS

SECONDARY BRAND COLORS

When Using For Digital

PRIMARY WEB COLORS

SECONDARY WEB COLORS

Secondary brand colors are incorporated throughout the design to provide depth and highlight important pieces of content. Please note that Slate Dark and Slate Light are the same as our brand colors FM Slate Dark and FM Slate Light.

Expanded Palette

The Expanded Palette should be used when a large number of data points need to be shown at a single interval. It is not advised to show more colors than allowed by this palette.

Blending Closely Related Colors

For some visualizations such as heatmaps, it may be helpful to use a gradient between two colors from the palette.