We visualize data because the human brain can perceive particular quantitative features and perform particular quantitative tasks most effectively when the data is expressed graphically.
- Stephen Few, Why Do We Visualize Quantitative Data?
I’ve loved charts since I was in elementary school. The idea of encoding meaning into art always seemed super interesting to me.
When I started building applications with Skuid, I fell in love again with the charts and dashboard displays the product makes possible. It was so easy to produce visually satisfying pages that made data effortless to interpret.
Along the way I’ve learned some things about the brain science behind visualizations, and I’ve developed practices in my Skuid building for making more effective and more honest displays. I thought I’d share a few with you.
First, let’s start with some science about visualization.
One of my heroes is Stephen Few, who wrote a highly recommended book Now You See It: An Introduction to Visual Data Sensemaking. In this blog post, he discusses how visual data processing provides optimal support for:
1. Seeing the big picture.
2. Easily and rapidly comparing values.
3. Seeing patterns among values.
Our brains are wired so that we can more quickly compare two columns of a bar chart than two numbers in a table to evaluate how they relate, and draw conclusions from the difference.
Best practices for creating visualizations using Skuid
With that idea in mind, here are some tips on improving the display of information using charts and dashboard elements in Skuid. A lot of these ideas are shown in a sample Order Dashboard found on our website. You might want to check it out while reading along.
Here we go.
Let the visual data lead
As you design a Skuid page, let data be the protagonist. If your brain quickly interprets the visualized data, don’t put anything in its way. Here’s how you can achieve that with Skuid.
Make sure there’s plenty of space around your charts by adding ample margin. One way to do this is to create a wrapper with consistent vertical height and margin and then clone this wrapper as a container for each one of your charts.
Some Skuid chart features are critical when needed, so we turn them on by default. But, I find that when they aren’t needed, they add visual clutter that’s distracting. So, I turn these off:
- Exporting options (in the Advanced tab of Chart configuration)
- Legends (especially if you have Data Labels turned on)
Finally, adjust your data axis so that you have only a few grid lines and they make sense. Maybe force the minimum to be 0 if negative numbers won’t appear in the chart.
Don’t make the picture say more than it should
Since our brains so quickly interpret visual data, don’t let the picture provide meaning that the data doesn’t offer. For instance, a tiny difference in numbers can look huge if the chart is not set at 0.
Clarify with color, but be attentive to accessibility
Skuid Design System Studio can help you create compelling color palettes for Chart values, but make sure you’re using the right color contrast.
About 300 million people worldwide are colorblind and there are resources for choosing effective contrasting color palettes that will convey meaning to them, too. Learn more about the importance of accessibility and 508-compliance.
Use formulas to simplify labels, categories, and values
Sometimes your data returns in murky forms. Use UI-Only formulas to clarify the data and make it more appealing in presentation. Here are a few examples.
Month labels: When you aggregate data by month, the month value is usually just a number. But in the chart you’d rather have “Jan, Feb, March” instead of “1, 2, 3.” To fix this:
- Add a UI-only formula field to the aggregate model (in the Aggregations section of the model configuration).
- Use the MonthNameShort function to derive the month name out of a constructed date that uses the month number you got as your grouping. For instance:
MONTH_NAME_Short({{monthNumberGroupingAlias}}+“/01/2000") - Then use the UI-Only field as your Category Axis in the chart definition.
Simplified KPI displays: Similarly, KPI displays are most effective when you have abbreviated numbers and use extensions (K, M, B) to indicate when a calculation has a truncated display. Again, use a formula field to create this type of summary number.
IF({{Number}}>1000000000,(JOIN_TEXT("",((ROUND({{Number}}/10000000))/100)," B")),
IF({{Number}}>1000000,(JOIN_TEXT("",((ROUND({{Number}}/10000))/100)," M")),
IF({{Number}}>1000,(JOIN_TEXT("",((ROUND({{Number}}/10))/100)," K")),
{{Number}}
)
)
)
The results will display as follows:
- 500 will be 500
- 345,029 will be 345.03 K
- 3,920,333 will be 3.92 M
Use all these tips to make your data immediately intelligible. In this way, your pages will facilitate insights, comparison, and pattern recognition—all of which help your organization make better decisions and better serve customers.
Go build better dashboards in Skuid!
