Visual encoding is the process of translating data into visual form. Unique graphical attributes can be applied to both quantitative data (such as temperature, price, or speed) and qualitative data (such as categories, flavors, or expressions).

These attributes include:

- Shape
- Color
- Size
- Area
- Volume
- Length
- Angle
- Position
- Direction
- Density

Styling Different Types of Data

Multiple visual treatments can be applied to more than one aspect of a data point. 
- For example, a bar color can represent a category
- Bar’s length can express a value (like population size)

Expressing Multiple Attributes in Data

Charts can use shapes to display data in a range of ways.
-  A shape can be styled as playful and curvilinear, or precise and high-fidelity, among other ways in between.

Shape in Data


Color can be used to differentiate chart data in four primary ways:

- Distinguishing categories from one another
- Representing quantity
- Highlighting specific data
- Expressing meaning

Color in Data 

Text can be used to label different chart elements, including:

- Chart titles
- Data labels
- Axis labels
- Legend
- The text with the highest level of the hierarchy is usually the chart title, with axis labels and the legend having the lowest level of hierarchy.

Typography in Data

Iconography can represent different types of data in a chart and improve a chart’s overall usability.

Iconography can be used for:

- Categorical data to different groups or categories
- UI controls and actions, such as filter, zoom, save, and download
- States, such as errors, no data, completed states, and danger
- When placing icons in a chart, it’s recommended to use universally recognizable symbols, particularly when representing actions or states, such as: save, download, completed, error, and danger.

Iconography in Data

Chart lines can express qualities about data, such as hierarchy, highlights, and comparisons but line styles can be styled in different ways, such as using dashes or varied opacities.

Lines can be applied to specific elements, including:

- Annotations
- Forecasting elements
- Comparative tools
- Confidence intervals
- Anomalies

Line and Chart Lines in Data 

Legends and annotations describe a chart’s information. 

Annotations should highlight:
- Data points
- Data outliers
- Noteworthy content

Legends and Annotation

Charts displayed on wearables (or other small screens) should be a simplified version of the mobile or desktop chart. Careful to not make it scrollable.

Small Displays in Charts 

A labeled axis, or multiple axes, indicates the scale and scope of the data displayed.
 - For example, line charts display a range of values along both horizontal and vertical labelled axes.

Labelled Axis or Multiple Axes 

Data Visualization References 

Data visualizations use custom styles and shapes to make data easier to understand at a glance, in ways that suit the user’s needs and context.

Charts can benefit from customizing the following:

- Graphical elements
- Typography
- Iconography
- Axes and labels
- Legends and annotations

Arizona State University

University of Michigan - Ann Arbor

- Data visualization can be expressed in different forms.
- Charts are a common way of expressing data, as they depict different data varieties and allow data comparison.
- The type of chart you use depends primarily on two things:
- The data you want to communicate
- What you want to convey about that data
- These guidelines provide descriptions of various different types of charts and their use cases

Types of Data Visualization 

Style in Data Visualization 


- Change over time
- Category comparison
- Ranking
- Part-to-whole
- Correlation
- Distribution
- Flow
- Relationship

Learn Before

Related

Learn After