Visualization Best Practices - University Data, Analytics, and Institutional Research // University Data, Analytics, and Institutional Research

Brand Guidelines Chart Best Practices Sharing Your Work

Purpose of This Guide

The MU Data Visualization Best Practices guide brings together the university’s recommended standards for building clear, consistent, and impactful visualizations. This page combines MU’s design-forward visualization principles with practical chart-building guidance to help analysts, developers, and communicators present data with accuracy, clarity, and confidence.

These best practices support MU’s goals by ensuring that visualizations:

Communicate insights clearly
Follow consistent layout and design principles
Reduce cognitive load
Align with MU’s visual identity
Meet accessibility expectations
Support data-driven storytelling

Line Chart

Use for continuous time trends.
Highlights the shape or pattern of change.
Ideal when understanding movement over time is the primary goal.

Column or Bar Chart

Use for discrete periods such as semesters, fiscal quarters, or academic years.
Emphasizes comparisons between time periods.

Avoid

Pie charts or donut charts for time.
Any chart type without a natural sequence.

Bar Chart

Best choice for comparing values across groups.
Works with large or small numbers of categories.
Use horizontal bars when labels are long.

Table

Use when users need exact values.
Ideal for precise comparison and lookup tasks.

Avoid

Pie or donut charts for category comparison.
Any chart that reduces precision between values.

Scatterplot

Use to show relationships between two numeric variables.
Reveals clusters, trends, and outliers.

Bubble Chart

Use to show three numeric dimensions at once.
X, Y, and bubble size each encode a variable.

Avoid

Line charts, which imply sequence or time.

Treemap

Use when showing proportions within a whole.
Works well with many categories or hierarchical structures.

Stacked Bar Chart or One Hundred Percent Stacked Bar Chart

Use when labels must remain readable.
Helps show both total and composition.

Avoid

Treemaps when precise comparison is required.
Pie and donut charts in most situations.

A. Continuous or Numeric Distributions

Histogram

Shows the shape of numeric distributions.
Uses numeric bins instead of categories.
Best for understanding spread and density.

Box Plot

Shows quartiles, median, spread, and outliers.
Efficient for comparing distributions across groups.

Heatmap Based on Numeric Bins

Shows intensity or density across two numeric dimensions.
Useful for identifying concentration patterns.

Avoid

Bar or bubble charts, which do not show shape of distribution.

B. Categorical Distributions

Bar Chart

Best for frequency comparisons of categorical values.
Correct choice for distributions of groups or labels.

Table

Use for precise counts or many categories.

Avoid

Histograms, which require numeric bins.
Pie charts unless categories are extremely few.

Heatmap

Represents magnitude using color intensity.
Useful for identifying patterns across two dimensions.

Avoid

Heatmaps for precise numeric comparisons.

Treemap

Best for nested part-to-whole relationships.
Handles many categories at once.

Avoid

Use caution when precise values are required.

Point Map or Bubble Map

Use when individual locations matter.
Bubble size can represent magnitude.

Choropleth Map or Geographic Heat Map

Use when values relate to geographic boundaries.
Color intensity communicates magnitude.

Critical Note About Using Maps

Use maps only when geography is the insight.
Larger geographic regions draw attention even without larger values.
A bar chart often communicates rankings more clearly.

Avoid

Choropleth maps for raw counts. Normalize first.
Bubble maps when bubbles overlap heavily.

Start the numerical axis at zero so bar length remains an honest indicator of magnitude.
Use horizontal bars when category names are long or when there are many categories.
Sort bars intentionally, usually from highest to lowest, unless a natural order exists.
Use a single color for bars when possible and use an accent color only to highlight a specific value.
Reduce gridlines and avoid cluttered backgrounds to improve readability.
Use data labels when they help reduce reliance on axes or improve clarity.
Keep category labels short and readable. Wrap text instead of rotating labels.
Limit grouped or stacked bars to only essential comparisons to avoid overload.

Use consistent time intervals on the x-axis. Ensure the order reflects true time progression.
Limit to five or six lines to maintain clarity and prevent visual overload.
Use distinct colors only when necessary to differentiate series.
Use markers sparingly. Too many markers clutter the chart.
Keep gridlines light and minimal. Avoid heavy axis lines.
Annotate important changes directly on the chart when needed.
Ensure the y-axis scale supports truthful interpretation. Annotate if you don’t start at zero or change scale.

Use a donut chart rather than a pie chart when possible. The center whitespace improves readability.
Limit to 3-5 slices for optimal readability. Never use more than 6 categories.
Label slices directly rather than relying on a legend.
Use consistent color logic across related donut charts. Match colors by category.
Avoid decorative effects such as 3D, shadows, or exploded slices.
Ensure all slices add up to one hundred percent. Avoid pie and donut charts for non-totaling or complex data.

Use tables when users need exact numbers or fine detail.
Align numbers to the right and text to the left for readability.
Use consistent number formatting such as decimals, commas, and currency symbols.
Highlight key cells, rows, or columns with subtle shading.
Use freeze panes or sticky headers on long tables to maintain context.
Ensure column names are concise and meaningful.

Use consistent scales on both axes to ensure meaningful comparisons.
Add a trendline when it helps reinforce a visible relationship.
Use color or shape to differentiate categories, but avoid using both at once unless necessary.
Use transparency to handle overlapping points.
Label notable outliers or clusters to guide interpretation.
Reduce gridlines and keep axis lines light.

Use bubble size to encode the third variable, but ensure sizes differ enough to be interpretable.
Avoid overly large bubbles that obscure surrounding data.
Add a clear legend explaining what bubble size represents.
Use transparency to reduce overlap and improve readability.
Label only important bubbles to avoid clutter.

Use a sequential color palette for intensity or concentration. Use a diverging palette only when a meaningful midpoint exists.
Ensure the color legend is visible and easy to understand.
Sort rows and columns intentionally to surface patterns.
Include numeric labels when they support clarity.
Avoid heavy cell borders or overly high color contrast between adjacent cells.

Use treemaps to show general proportions, not precise comparisons.
Use subtle borders and consistent spacing for readability.
Limit subdivisions to maintain legibility of labels.
Use consistent colors to represent categories or hierarchies.
Add tooltips to provide additional detail when space is limited.

Use clear legends that connect color or size to meaning.
Use normalized values (rates or percentages) on choropleth maps rather than raw counts.
Choose a simple, intuitive color palette to avoid misinterpretation.
Reduce overlap on point or bubble maps through transparency or clustering.
Use labels sparingly. Rely on tooltips for additional detail.
Use consistent geographic boundaries, projections, and scales across related visuals.

These interactive examples demonstrate common mistakes in data visualization and how to correct them using MU’s data visualization standards. Each example includes a “poor” and “improved” version of the same chart.

Poor Example

This truncated y-axis exaggerates differences and uses inconsistent spacing. Bars are different colors for no clear reason.

Improved Example

The y-axis begins at zero, spacing is proportional, and consistent MU colors improve readability.

Poor Example

Heavy gridlines, non-MU colors, a misleading y-axis, and no consistent formatting make this line chart difficult to read.

Improved Example

Minimal gridlines, MU Gold line, clean axis labels, and consistent yearly markers create a clear and accurate trend.

Poor Example

Exploded slices, rainbow colors, 3D effects, and unlabeled values distort comparisons and make interpretation difficult.

Improved Example

Clear labeling, MU-branded colors, and clean proportional arcs make this donut chart accurate and easy to interpret.

Poor Example

A diverging palette, but the colors are too similar, lack contrast, and are not colorblind safe, making values hard to interpret.

Improved Example

A clear diverging MU palette highlights low, neutral, and high values with strong contrast and colorblind-safe hues.

Sometimes a chart adds unnecessary complexity, especially when there are only one or two values to compare. In such cases, a simple table is clearer, faster to read, and avoids visual clutter.

Poor Example

This bar chart compares only two values. The chart adds no value, wastes space, and introduces unnecessary formatting.

Improved Example

A clean, accessible table communicates these two values far more clearly than a chart.

Category	Value
Group A	200
Group B	160

Chart Layout

Use consistent spacing around charts.
Avoid clutter and reduce unnecessary chart elements.
Remove heavy or distracting gridlines.

Title and Subtitle Design

Ensure the title communicates the main insight, not just the metric.
Use subtitles to provide necessary context including date ranges, filters, or definitions.

Lines, Borders and Dividers

Use light gray lines when separation is necessary.
Avoid thick borders and heavy outlines that draw attention away from the data.
Add dividers sparingly and only when they support interpretation.

Whitespace and Balance

Use whitespace intentionally to group related elements and separate unrelated ones.
Avoid overcrowding charts or placing too many visuals on a single page.
Ensure legends, labels and titles have enough breathing room to remain readable.

Consistency Across Pages

Align elements across multiple visuals for a cohesive layout.
Use consistent axis formats, number formats and text sizes.
Keep similar charts styled the same to reduce cognitive switching for users.

Typography and Readability

Use the approved MU type family to maintain a consistent visual identity.
Maintain a clear type hierarchy including titles, subtitles, labels and notes.
Avoid using all capital letters except for short labels where clarity is not impacted.
Use consistent font sizes across similar elements within a dashboard or report.

Labeling Data Clearly

Label axes, units and categories clearly so users do not have to infer meaning.
Place labels close to the data they describe to reduce eye movement.
Use formatting for numeric labels that is appropriate for the level of precision.
Limit the number of tick marks and labels to reduce visual noise.

Legends and Category Identification

Place legends near the data to keep context visible.
Use direct labeling whenever possible to reduce dependence on legends.
Do not rely on color alone to encode meaning. Reinforce with labels or patterns when necessary.
Keep category names concise and meaningful.

Narrative Framing

Lead with the primary insight the visual is intended to communicate.
Use descriptive titles that summarize the key message instead of restating the metric name.
Provide concise context through subtitles or annotations when needed.
Ensure that the narrative focus aligns with the underlying data and the user’s needs.

Highlighting Key Insights

Use annotations, callouts or subtle emphasis to draw attention to important values or trends.
Place contextual notes near the visual so users do not need to search for meaning.
Group related visuals together to reinforce the story across multiple charts.

Reducing Cognitive Load

Remove elements that do not add meaning such as decorative shapes or unnecessary color.
Limit the number of categories, colors or chart elements displayed at once.
Use whitespace intentionally to separate ideas and guide the reader’s eye.
Ensure that visuals follow a logical order that supports intuitive understanding.

Preattentive processing refers to the way the human brain interprets visual information in a fraction of a second. These attributes help viewers understand patterns and insights almost instantly. Using them intentionally improves clarity and reduces cognitive effort for your audience.

Color

Use color to draw attention to important values or categories.
Limit accent colors to one or two elements so they stand out clearly.
Use MU Gold as the highlight color when emphasizing the main point.

Position

Place key information where the eye naturally lands, usually in the upper left or near the center.
Order bars or categories intentionally to show patterns and ranking.
Align elements precisely to avoid visual drift or misinterpretation.

Size

Use size to show importance or magnitude but avoid subtle size differences that are hard to interpret.
Ensure that larger values are noticeably larger so users can make comparisons quickly.
Avoid using size alone to encode critical information because perception of area is imprecise.

Length

Use bar length to encode quantitative values because length is one of the easiest attributes for the brain to compare.
Ensure axes start at zero for bar charts so length remains meaningful.

Shape

Use shapes sparingly to differentiate categories or highlight a specific data point.
Avoid using too many shapes within the same visual because it increases cognitive load.

Orientation

Use consistent orientation for lines, markers and icons to avoid unintended emphasis.
Limit rotated text because it slows reading and interpretation.

Enclosure and Grouping

Use soft boxes, subtle shading or spacing to group related elements visually.
Avoid heavy borders that distract from the data.
Use whitespace to show relationships between elements without adding extra graphics.

Movement

In interactive or digital dashboards, movement can draw attention but should be used sparingly.
Avoid animations that are distracting or slow down comprehension.

Effective data visualization requires refinement. Feedback helps identify confusion, clarify meaning and ensure the visual communicates the intended insight. User testing is a natural part of the design process and leads to stronger, more impactful visuals.

Seek Feedback Early

Share rough drafts rather than waiting until the visual is fully polished.
Invite stakeholders to react to the layout, structure and clarity of early versions.
Ask viewers what they notice first to confirm your intended focal point matches their instinctive focus.

Test with the Intended Audience

Validate that the visual works for the people who will use it, not just for designers or analysts.
Ensure that labels, wording and context align with the audience’s knowledge level.
Observe where users hesitate or re-read elements because these moments signal friction.

Use Confusion as a Signal

If multiple people ask the same question, revise the visual to make the answer more intuitive.
Adjust annotation, ordering or chart type when users are unsure how to interpret the data.
Simplify whenever confusion appears because it indicates that cognitive load is too high.

Incorporate Accessibility Feedback

Ask users whether color choices are clear and easy to interpret.
Check whether small text, thin lines or low contrast create difficulty.
Update visuals to improve legibility, even if they meet technical accessibility standards.

Iterate Toward Clarity

Refine your visual until the message is unambiguous and easy to understand without explanation.
Reduce clutter and unnecessary elements in each iteration.
Confirm that the title, annotations and visual elements all support a single narrative.

Contrast Requirements

Normal text must meet a contrast ratio of four point five to one for WCAG AA compliance.
Large text must meet a contrast ratio of three to one.
Key visual elements such as lines or marks must be visually distinguishable from the background.
Use high contrast pairings for small elements such as thin lines or small markers.

Alt Text and Screen Readers

Provide descriptive alt text for each visualization explaining what the chart shows.
Use on-page summaries when the visualization is complex or highly interactive.
Describe trends or insights, not just chart elements, in the alt text.
Ensure that all essential information conveyed in the chart is also available in the text description.

Color Accessibility

Ensure that color is never the only method used to convey meaning.
Choose colors from MU’s approved palette that remain distinguishable under common color-vision deficiencies.
Use simulation tools to preview what charts look like under protanopia, deuteranopia and tritanopia.
Use non-color encodings such as labels, patterns or shapes when clarity requires it.