Data visualization
At Halstack, we believe that effective data visualization is crucial for transforming complex data into clear, actionable insights. Our principles focus on clarity, accuracy, accessibility, and interactivity. By adhering to these guidelines, you can create visual representations that are not only aesthetically pleasing, but also highly functional, ensuring that users can easily understand and interact with the data presented.
As we consider data visualization a tremendously dense and complex design pattern, we have decided to rely on another design system for this task. Our choice is Cloudscape.
Cloudscape offers high-quality, adaptable, and user-friendly tools for creating clear and comprehensive data visualizations. This helps our users understand and analyze data effectively, facilitating informed decision-making.
The Cloudscape design system provides a wide range of chart types, including:
All the information presented below complements the Cloudscape data visualization pattern. We strongly recommend reading it in parallel.
A bar chart is a graphical representation that displays and compares discrete data categories using rectangular bars. Each bar's length or height is proportional to the frequency or value of its corresponding category, allowing users to identify which groups are the highest or most common and compare them with others.
- Ensure both the X and Y axes are labeled with appropriate units and descriptions.
- Always plot bars against a zero-value baseline. It simplifies bar length comparison and ensures accurate data visualization. A non-zero baseline can distort the comparison as it disrupts the ratio between bar lengths and actual values.
- When constructing a bar chart, consider the order in which you will plot the bars. A common convention is to sort the bars from longest to shortest. While comparisons can be made regardless of the order, this approach can ease the reader's task. However, if the category labels have an inherent order, this should typically take precedence.
| Variant | Description | Use case |
|---|---|---|
| Vertical | Bars are oriented vertically with the X-axis representing categories and the Y-axis representing values. | Comparing quantities across different categories. |
| Stacked | Bars are stacked on top of each other. Each stack segment represents a different sub-category. | Showing the composition of each category, as well as comparing total values across categories. |
| Grouped | In a grouped bar chart, bars representing different sub-categories are placed next to each other, rather than stacked, for each main category. | More direct comparison of sub-category values across different main categories. |
| Horizontal | Bars are oriented horizontally with the Y-axis representing categories and the X-axis representing values. | Comparing quantities across different categories, especially when category names are long. |
We have carefully selected various shades from our color palette to be used in data visualization. Accessibility has been a key consideration in this selection, ensuring that these colors are distinguishable for all users.
| Categorical color | Core token | Value |
|---|---|---|
| color-categorical-01 | color-purple-500 | #A46EDE |
| color-categorical-02 | color-blue-600 | #0095FF |
| color-categorical-03 | color-green-700 | #24A148 |
| color-categorical-04 | color-red-500 | #FE344F |
| color-categorical-05 | color-yellow-800 | #947705 |
| color-categorical-06 | color-orange-700 | #C26C0A |
| color-categorical-07 | color-purple-600 | #7D2FD0 |
| color-categorical-08 | color-blue-800 | #0067B3 |
| color-categorical-09 | color-green-900 | #135325 |
| color-categorical-10 | color-red-700 | #D0011B |
| color-categorical-11 | color-yellow-900 | #624F04 |
| color-categorical-12 | color-orange-800 | #915108 |
Here is an example of how to apply our design tokens to a bar chart using the Cloudscape theming strategy.
For a more detailed explanation of how Cloudscape components are styled, please refer to their theming documentation. The complete list of data visualization color design tokens can be found here.