Data visualization
Data visualizations tell a story through data. They are visual, often interactive representations of information to help people make sense of complex phenomena. Charts can improve people’s ability to identify average values and patterns over grids of numbers.
Concept for a sample dashboard.
Overview
Data visualizations tell a story through data. They are visual, often interactive representations of information to help people make sense of complex phenomena. Charts can improve people’s ability to identify average values and patterns over grids of numbers.
Learn more about different types of visualizations and when to use them at Material Design: Data visualization.
Use the following steps to approach data visualizations.
1. Determine the "why."
- If, after seeing this chart, a user could walk away with one piece of information, what would that be?
- Talk to users and get their insight in order to answer these questions.
2. Consider the larger context.
- Think about how the chart you are building fits into the entire ecosystem: the page that the user is on, the flow through the system they are in.
3. Emphasize the story you've defined.
- Say everything you want to say—no more, no less—and don’t mislead.
- Use or create the best method available to show your data.
4. Edit your data visualization.
- Remove unnecessary text, flourishes, or lines within the graph in order to highlight the data itself.
5. Test with users.
- Determine actionable success factors for visualizations – faster, more insights, better decisions, increased accuracy, more confidence, etc. – and use these factors to test and compare with users.
6. Refine your data visualization.
- Use elements such as a legend or axis labels to lend meaning to chart visuals.
- Think about key differences in the visualization that might draw the eye first (outliers, clusters, bright colors), and ensure these differences support the idea conveyed.
- Be careful to ensure that outliers are still represented, either by breaking up datasets or calling them out explicitly. In general, smaller datasets are better at drawing attention to outliers, individual data points, and other more subtle patterns.
Parts
Forge does not provide a component for charts, but we recommend using one of the following libraries.
Although apps may choose different charting libraries to meet different needs, charts can be given a cohesive look and feel by using consistent color palettes and typography. Check out our Data Viz theming guidance in Figma or reach out to Eric Wayne or Mariah Kim for more information around theming charts.
| Tool | Framework | Description | Use when | Contact |
|---|---|---|---|---|
| ChartsJS | Javascript | Simple yet flexible JavaScript charting for designers & developers | Overall recommended | Coming soon |
| D3 JS | Javascript | Robust libray with a steep learning curve | When custom, complex visualizations are needed | Coming soon |
| High Charts | Javascript | Robust libray with a steep learning curve | When custom, complex visualizations are needed | Coming soon |
Best practices
Structure
Include a title and axis labels.
Use the full axis.
Use consistent intervals and avoid scale distortion on your axes.
Use direct labeling on elements where possible. Legends can be used as an alternative, if need be.
Don’t use a legend when you have only one data category.
Avoid stacked charts as they make it difficult to compare data.
Data
Sort your data for easier comparisons.
Adjust for inflation in long-time series.
Ensure that comparisons occur across like categories.
Be careful about how “no data” or “missing data” is treated. Ensure that it doesn’t skew the overall data.
Style
Keep charts clean. Minimize the amount of non-essential labels, gridlines, and extras — so that users can focus on the core content.
Use clear language and avoid acronyms.
Tell the “why” and “how” of your data.
Highlight what’s important. Try to tell one story if you can.
Don't use more than 5 - 7 colors.
Don't use 3D effectsas the cognitive effort for interpretation outweighs any added value.
Avoid pie and donut charts in general. See Cleveland & McGill's research.
Resources
- People make unpredictable decisions... But we should design for their best interests anyway. (Medium)
- How William Cleveland Turned Data Visualization Into a Science (Priceonomics.com)
- Data Visualization Presentation (Tyler UX Summit, 2017, presented by Kaila Manca)
- [My process for designing dashboards and data visualizations] (https://blog.prototypr.io/how-to-design-data-visualizations-that-people-understand-d93624144c31) (Prototyper.io)