Data Visualization
Data helps us make informed decisions. Therefore, data should be clear; it should not be overly decorative and it should be presented in a meaningful way. Below are a few standards that we’ve set for telling visual data stories.
Charts
Stylistically, our charts and graphs draw inspiration from a more grown-up, editorial style.
Line Charts
Notes
Use solid lines to indicate actual trends in data. Use dotted lines for showing a general trait like an average or projection.
Lines should be 2pts in weight and straight, never curved.
Use dots on a line to highlight a selected data point.
Bar Charts
Notes
Don’t apply rounded corners.
The space between bars should always be 50% of the width of the bars.
Generally, categories in stacked bar charts should use one of our pre-configured categorical color combos. Avoid using the same hue to represent categories. If subcategories need to be made, use our hatch pattern if applicable.
Scatter Plot Charts
Notes
Use the color combos to determine the color of the points. Points should be 8px by 8px.
When using multiple sets or categories, cycle through multiple shapes so that the data can be more easily differentiated. Generally, the order is: circle, square, triangle, diamond, upside-down triangle.
Meter Charts
Notes
Data in these charts always add up to 100%. If there is more than one category represented, always use of the categorical color combos.
The layout can be unique from chart to chart but the bars themselves always have a height (or width if vertical) that’s a multiple of eight (or four but that is the exception).
Limit representation to fewer than six categories. If you must represent more than six categories, consider truncating data to include the top four categories and then include smaller data sets in an 'other' category.
Pie Charts Not recommended
Notes
Avoid using pie charts, as research shows this is not the most effective way of displaying and relating data. Instead, use a percent bar graph. If you must use a pie chart, always use a categorical color combo.
Palette
Categorical Color Combos
The colors for our complex charts come from our predefined categorical combos. Generally, we try to vary value, saturation, and hue between categories. When building a data story, choose from one of the established combos for visual harmony and accessibility optimization. Feel free to use more than one combo when creating multiple charts on a page.
Proto-palette
These colors are the building blocks we use to craft pre-defined combinations and sub-palettes within data visualization. We do not use these directly in charts and graphs. Using pre-defined groupings will help foster consistency, predictability, and accessibility. See the guides in each section to learn how to choose colors for specified usage.
Creating Categorical Color Combos
When choosing colors to create a new categorical combo, try to pick colors across the spectrum to make use of different hues, tints, and tones.
For accessibility, avoid a sequence that uses adjacent hues and be sure to pick a variety of lightnesses.
Simple Data
When you need to use color to enhance a singular data point (like in a meter) use one of the pre-defined accent colors in this section.
If more than one color may be used to represent data, use one of the pre-defined categorical color combos.
When pairing our accent colors for accessibility, make sure the visual presentation has a contrast ratio of at least 3:1 against adjacent colors.
Apple
For the most part, Apple is used to convey ‘positive’ values or success.
It should not be used for conveying a progression. This includes things like representing completion of account setup, percentage of available sends or seats, etc.
Plum
Plum represents itself as neutral. As such, use it for things that do not convey strong positive or negative values.
Apricot
Apricot also represents itself as neutral. As such, use it for things that do not convey strong positive or negative values.
Keep in mind that a similar color, Squash, often represents a 'warning' state. When using Apricot, ensure the association with a warning state isn't too strong.
Pumpkin
Pumpkin can carry a negative connotation. Use pumpkin sparingly, and as an accent to help when at-a-glance comparisons are needed.
Avoid using Pumpkin as the primary color when surfacing negative values in graphs and charts.
Parsnip
Parsnip is used as the background color to indicate 'unfilled' space. Use it to indicate the possible breadth of a value.
Grids
X-Axis Baseline
The baseline (when applicable) is a 2pt, Peppercorn line.
The points are represented with ticks. Avoid getting too crowded with the x-axis labels. If need be, skip a few labels but keep the ticks so that the labels are legible.
If there is no ‘y’ dimension, it is appropriate to use a 1pt y-axis line (similar to a typical x-axis grid line).
Typical x-axis
X-axis without baseline
Compressed x-axis
X-axis without y-axis
Y-Axis
The y-axis is usually represented with a label and a 1pt Peppercorn-a15 grid line.
Always label the lowest value, even if it’s 0. This will make clear whether the chart is truncating the y-axis data.
Sample Spacing
Fly-over
Overview
The fly-over should not only activate on hover. It should present itself when a highlightable portion of a chart is selectable. On mobile, a user should be able to tap on a portion of the graph to make it appear.
The fly-over is not always necessary but is recommended unless there’s another piece of the UI that highlights the selected data and ties those two things together.
Flag
The flag is Peppercorn at 90% opacity. It should be centered at the data it points to and pinned to the highest reasonable point of a chart.
Pole
The pole is Peppercorn at 100% opacity and should be centered to the flag. In cases where the fly-over is near the edge of a chart, you may adjust the positioning of the flag on the pole.
If the chart has fewer than two items to call out, you may eliminate the pole and just use the flag.