Charts can represent data at varying levels of precision. Data intended for close exploration should be represented by shapes that are suitable for interaction (in terms of touch target size and related affordances). Whereas data that’s intended to express a general idea or trend can use shapes with less detail.

Level of shape detail

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.

Arizona State University

University of Michigan - Ann Arbor

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

Style in Data Visualization 


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

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 

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 

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 

Data Visualization References 

Labeled axes in a chart indicate the scale and scope of the displayed data. For example, line charts display a range of values along both horizontal and vertical labeled axes to provide context for the data points.

Labeled Axes in Data Visualization

In data visualization, typography is used to label various chart elements, including chart titles, data labels, axis labels, and legends. Text styling establishes a visual hierarchy; typically, the chart title holds the highest level of hierarchy, while axis labels and legends have the lowest.

Typography in Data Visualization

Legends and annotations add explanatory context to a chart. Legends display labels for chart elements, which is especially useful in dense charts where direct labeling isn't practical. Annotations highlight: - Data points - Data outliers - Noteworthy content

Legends and Annotations

Iconography in data visualization serves three main roles: encoding categorical groups, representing interface controls such as filter, zoom, save, and download, and communicating states such as errors, no data, completion, or danger. Use recognizable symbols for actions and states so viewers can interpret them quickly.

Learn Before

Related

Learn After