Waffle charts provide a visually engaging way to display a piece of data in relationship to a whole, much like a pie chart. Waffle charts allow users to choose or calculate one value to show in terms or a portion of 100 circles, squares, or person icons.
As a reusable Data Visualization module, these waffle charts can be reused across a site and updated in a single editor.
Note: This initial release provides a technical foundation for waffle charts. Feedback from our users will determine the functionality moving forward.
The picture below is an example featuring the elements of a waffle chart. Go to examples at the bottom of this page to see some of the additional design and configuration options.
- photo iconGo to ExamplesSee examples on this page that illustrate key options.
- tools iconBuilding in WCMSSee key tips and guidelines for building a waffle chart in the WCMS.
- photo iconTP4 UX Best Practices ppt icon[PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
1. Waffle Chart Visual
This visually customizable chart can be displayed as circles, squares, and person icons. This chart reflects the calculated amount of the data selections made in the Visualization Editor. Style and location variations are available.
2. Numerical Result
This number is calculated given the data selections you’ve made in creating the waffle chart. Many types of calculations can be made depending on the data you’ve provided
3. Supporting Text
Also customizable, this supporting text can provide context for the number and chart above.
- When user needs to place emphasis on parts-to-whole contribution.
- To visualize whole number percentages. Waffle charts can show the value of a single percent more clearly than a pie or donut chart.
- If isolating one point of data tells an incomplete perspective.
- If the supporting text needs to be more than three lines.
- If there are many points of data contributing to a whole.
- For visualizing precise percentages with fractions of a percent.
- For values that exceed 100%. (It will completely fill the Waffle Chart)
- Waffle Chart Title: Good titles are invaluable. Your data bite title should be long enough so that your audience can make sense of the relationships between the elements. A glance at the title should clearly convey what the data bite contains.
- Subtext/Citation: The data source makes your graphic more reputable. It also allows those who are interested to dig deeper.
Customizations exist for colors, font, and imagery in the Visualization Editor. If a series of visualizations are presented together, it is recommended to make similar visual selections across the series for coherence.
Most inline styling can be applied to the Title, Message, and Subtext portions of the waffle chart text.
This waffle chart shows the graphic on left calculating the percentage of Federal inputs against total number of inputs.
Average Compared to Max Value
This waffle chart is calculating the average of all inputs and then compares it against the maximum number in the data column. The vertical configuration was selected.
Filtered Minimum Compared to Total Amount
This waffle chart has been filtered within the module editor to reflect only data from California in the year 2019.