Community Feedback
Along with the Folwell component criteria, the best practice and accessibility information included with each component was considered in the design and development phase. To provide feedback and suggest changes to the design below, please see this component request on the feedback page. The feedback period is open through February 14. Feedback will be taken into account before moving forward with this component.
-->
About Data Visualization
Data visualization allows you to present your data in a graphical or pictorial format. Visualizations are intended to capture your visitors attention and help them comprehend information quickly.
Example
Bar chart
Area chart
Spline chart
Bar chart
3D
Usage
Usage information will be added when this component is available in Drupal 8.
Best Practice
- Choose the right visualization for your data:
- Tables uses rows and columns to provide information in a structured, formal format
- Line charts compares changes over the same period of time between two or more variables.
- Area charts are similar to line charts except the area below the line is shaded in
- Bar charts compares quantities of different categories.
- Scatterplots show the relationship between two variables.
- Bubble charts are similar to scatterplots but show the variation between three data sets. Pie charts divides your data into distinct sections that represents a proportion of the whole
- Treemaps are used to structure your hierarchical data with nested rectangles
- Heatmaps uses a color-coded system to graphically show data
- Avoid creating data visualizations that require interaction in order to get your message across
- Label data points instead of referring to a legend
Accessibility
- All data visualizations include ARIA labels by default
- Directly label visualizations for quick comprehension
- Ensure the text and color passes the accessibility color contrast test
- Avoid relying on color as your only visual cue
- It is recommended to also include a table of information that can be easily read by screen readers
- Give context to each data visualization with a brief summary of your data results