Data Visualization Style Guide

Guidelines for creating effective and consistent data visualizations

Overview

We use data visualizations to help tell stories that are meaningful and easy to understand. These guidelines are designed to help create cohesive, clear, and effective visualizations for all audiences and devices.

Prepare Ahead of Time

Before you start working on creating a visualization, consider the following:

  1. Who is this for? There might be more than one group.
  2. What do you want people to learn or take away from this visualization?
  3. What context (definitions, background, etc) might people need to understand the information?
  4. Will this visualization meet the City's requirements?

General Guidelines

These guidelines apply to all visualization types.

Be sure to also review our writing for the web guidelines.

Keep it Simple and Focused

It's tempting to try to pack as much related information and data in as possible, but in practice this often overwhelms people and makes it harder for them to understand the main point. For those people who want to dig in deeper, offer more data as a download or API endpoint.

Do:

  1. Keep focused on one central theme with two or three concepts.
  2. Show only information relevant to telling your story.
  3. Keep the number of variables to a minimum (consider collapsing some into an "other" or similar if there are a lot).

Do Not:

  1. Rely on complicated data manipulation controls (use defaults, only include controls if really needed, hide complicated controls by default if you must include them).
  2. Include information not immediately serving the purpose of telling the story.

Make it Easy to Understand

The overall structure and the purpose of each section should be immediately clear at a glance. If you find yourself feeling like you need to add instructions for using what you have built, go back to the drawing board.

Do:

  1. Include headings and text summaries for each section, in a clear hierarchy.
  2. Guide people from top to bottom and left to right, like reading.
  3. Format data (format dates, use titles/names instead of codes, etc).
  4. Lead with the major takeaways (totals, etc).
  5. Use well-known and simple visualization types.
  6. Use consistent formatting and design patterns.
  7. Ensure adequate spacing between sections so that each is in its own discernable area.
  8. Follow best practices for writing for the web.

Do Not:

  1. Use only color to differentiate between variables (consider textures, patterns, and symbols).
  2. Use internal jargon that the average user would not use.
  3. Use iconography that is not immediately relatable to your variables at a glance.
  4. Skip heading levels or use only style to represent heading levels.

Make it Flexible and Resilient

People have many options for consuming web content, and we want our data to tell the same story for everyone. Things to consider:

  1. Device size (phones to laptops to desktops to TVs).
  2. Connectivity (spotty 3G to fiber, data caps to no limits).
  3. Device performance (old/cheap computers to the latest and greatest).
  4. Input methods (touch, mouse, keyboard, gestures).
  5. Output methods (visible screens, screen readers).
  6. Future devices (VR/AR, etc).

This may seem overwhelming, but by following standards and best practices most things will just work, and they will be more likely to continue working as technology changes over time.

Do:

  1. Use semantic HTML elements and don't reinvent the wheel. HTML has all (well, most) of those tags and attributes for a reason.
  2. Comply with all WCAG 2.1 AA guidelines.
  3. Use text for text (do not put text in images, for example).
  4. Provide data tables with proper headings  (and/or data downloads) that reflect the data from things like charts and maps for people who have trouble seeing or understanding them.
  5. Limit external libraries and datasets to the minimum needed.
  6. Test on different screen sizes to make sure it is usable and legible for all of them. You may need to use layout settings for multiple screen sizes.
  7. Navigate your visualization with your keyboard instead of a mouse to make sure it's usable for other input types.
  8. Make sure that all items/controls are accessible and usable by keyboard.
  9. Use colors with adequate contrast. Here’s a contrast checker.

Do Not:

  1. Rely solely on color or images/icons to describe or differentiate things.
  2. Use tables for layout.
  3. Use libraries or 3rd party tools without confirming that they meet the above.

Keep Branding and Style Consistent

Typography

  • Do not use more than two fonts, and ideally use the fonts from the place where it will be embedded.
  • The title level hierarchy should have distinct sizes that are easy to discern at a glance.
  • Links and buttons should be obviously clickable at a glance (color, underline, shape, etc).

Header, Logo, and Footer

For dashboards that are meant to be embedded on stlouis-mo.gov, do not include a logo and header/footer.

Provide Data Access

Provide the data from your charts and graphs in text form as well for people who can't read the chart and/or want to work with the data.

Do: 

  1. Provide a text version of the story your chart or map is telling through your visualization. 
  2. Use clear and understandable language for things like headings, titles, and descriptions.

Do Not:

  1. Only provide a raw data dump that the vizualization was derived from.
  2. Use short-hand or codes.

Using Charts and Graphs

Charts should be easy to read, clear, and focused. 

Do:

  1. Use chart types that are common and recognizable to most people. 
  2. Keep each chart simple and focused. 
  3. Use labels, titles, and other attributes that are easy to read and understand.

Do Not:

  1. Use pie and donut charts in most situations, especially for comparing more than two numbers.
  2. Use only color to differentiate variables. Consider patterns and symbols as well.
  3. Use multiple colors, patterns, or symbols for the same variable.

Using Maps

Maps should be easy to read, clear, and focused. Along with the above considerations, think about the following:

Do: 

  1. Use symbols, colors, and patterns that have enough contrast to stand apart from each other and the underlying base map. 
  2. Keep the information shown at one time to the minimum required to tell your story. 
  3. Provide a list of the data shown in the map as text.

Do Not: 

  1. Use symbols of varying size.
  2. Use a base map that makes your map information hard to see or discern.

Application-Specific Guidance

Was this page helpful?      



Comments are helpful!
500 character limit

Feedback is anonymous.