Create chart style guidelines

[ebugden]

Creating chart style guidelines would encourage the use of best practices for clear, effective graphs and help standardize the visuals produced.

• Starting with a short, concrete checklist is one way to quickly cultivate good data visualisation reflexes.
• Guidelines can be adapted and improved as the project evolves and expertise is honed.

Content

Style guidelines could be structured as:

• Checklist: Start with a short checklist of some basics (~10 items). Concise, well structured, quick to refer to. The main working tool for people who are familiar with the guidelines.
• Accompanying document: Example pictures and more detailed explanation of some checklist items (context, theoretical background, etc). Read by those new to the guidelines or for reference as needed.

Include pictures of good (and bad) examples to illustrate the guidelines (and make them easier to remember). These could be images of the specific graph component discussed and/or more general annotated examples of graphs:

Image source: Data Visualisation Checklist, Stephanie Evergreen, Ann Emery

Inspiration

The chart guidelines could be a subset of a more complete graph checklist:

• Data Visualisation Checklist, Stephanie Evergreen, Ann Emery (website, pdf)

Example checklist items:

• Text is horizontal
• Data are labeled directly
• Axis labels are equidistant
• Color is used to highlight key patterns
• Gridlines, if present, are muted

Introduction to good dataviz practice:

• The Wall Street Journal Guide to Information Graphics, Donna M. Wong (BAnQ Montréal) - Great book of quick tips
• Before and After: Refining three charts about fuel economy, Erica Bugden (blog post) - Some mostly basic tips, examples

[bhufmann]

@ebugden, thank you very much for the suggestion. Having the guidelines will be beneficial for the tool.

I'd like to bring up on item here, graphs under the same X-axis (e.g. time axis) need to be aligned and horizontal resizing, all graph need to follow. This implies that the vertical marker, cursors are need to follow and be aligned. Having this it will be possible to correlate the different graphs. I wonder if this should be part of the guideline documents as well.

[ebugden]

A guideline about how graphs should correspond across panels seems more closely related to data visualisation than general UX so I would leave this guideline here for now.

[ebugden]

I'll likely focusing on other things for a while, but I'm saving this work in progress here for safekeeping so it doesn't go missing. The content is heavily inspired by Stephanie Evergreen and Ann K. Emery's data visualisation checklist.

• TODO: Add good/bad annotated examples to illustrate the principles

---

Chart guidelines

1. Text is horizontal
2. Data are labeled directly
3. Redundant labels are avoided
4. Data is ordered from most to least important
5. Saturated color is used to highlight important elements
6. Gridlines, if present, are muted
7. Graph highlights its raison d'être
8. Graph scales have appropriate level of precision

Text

1. Text is horizontal Titles, subtitles, annotations, and data labels are horizontal (not vertical or diagonal). Consider switching graph orientation (e.g. from column to bar chart) to make text horizontal.

2. Data are labeled directly Position data labels near the data rather than in a separate legend (e.g. on top of or next to bars and next to lines). Eliminate/embed legends when possible because eye movement back and forth between the legend and the data can interrupt the brain’s attempts to interpret the graph.

3. Redundant labels are avoided Focus attention by removing the redundancy. For example, in line charts, label every other year on an axis. Do not add numeric labels and use a y-axis scale, since this is redundant.

Arrangement

4. Data is ordered from most to least important Data should be displayed in an order that makes logical sense to the viewer. Data may be ordered by frequency counts (e.g., from greatest to least for nominal categories), by groupings or bins (e.g. histograms), by time period (e.g., line charts), alphabetically, etc. Use an order that supports interpretation of the data.

Color

5. Saturated color is used to highlight important elements Action colors should guide the viewer to key parts of the display. Less important, supporting, or comparison data should be a muted color, like gray.

Lines

Excessive lines—gridlines, borders, tick marks, and axes—can add clutter or noise to a graph, so eliminate them whenever they aren’t useful for interpreting the data.

6. Gridlines, if present, are muted Color should be faint gray, not black. Full points if no gridlines are used. Gridlines, even muted, should not be used when the graph includes numeric labels on each data point.

Overall

Graphs will catch a viewer’s attention so only visualize the data that needs attention. Too many graphics of unimportant information dilute the power of visualization.

7. Graph highlights it raison d'être Graphs should have a purpose, a "so what?" – either a practical or statistical significance (or both) to warrant their presence. The visual should tailored for this purpose. For example, adding a point of reference can contextualize and help the viewer understand the significance of the data giving the graph more interpretive power. Ask yourself: Why would I want to look at this data? Then design the visual so it's easy to do/see those things.

What actions are you trying to perform?

What targets are you looking for?

8. Graph scales have appropriate level of precision Use a level of precision that meets your audiences’ needs. Few numeric labels need decimal places, unless you are speaking with academic peers.

[ebugden]

Comment from @ssmagula: Instead of "Gridlines, if present, are muted" why not generalize to "Everything that is not data is muted (axes, tick marks, labels, gridlines)"?

[ebugden]

From @ssmagula's report "Making sense of trace visualizations":

Tufte is fond of saying that any worthwhile data display will answer two key questions:

1. “Compared to what?”
2. “So what?”

Compared to what? Asks us to place data in a meaningful context. For example: “How does the latency here compare to the mean or average latency?” And “Is this data more or less volatile than my previous trace sessions?” Some statistical analyses bake-in the context, such as a z-score.

So what? Refers to helping users understand the implications, utility, or meaning of the data. A good data visualization does not simply display everything possible, but will attempt to highlight what’s notable or important.