Design Encyclopedia: Visualizations

Activity Gauge

Used to show progress toward multiple, recurring goals.

Area

Used when data points are highly variable over time. If data points have little variance, consider using a line chart instead.

Area Range

Used to show the delta or difference between two values.

Area Range + Trendline

Used to show how the delta or difference between two values changes over time.

Bar

Use to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent. Most commonly used when sorted by descending value.

Bell Curve

Used to illustrate the distribution of values across a population.

Bubble

Used when data has three dimensions, each containing a set of values. The first dimension represents the y-axis value, the second value represents the x-axis value, and the third dimension represents the size of the bubble.

Bullet Graph

Used for comparing the performance of a primary measure to one or more other measures. A bullet graph can be useful replacement for a gauge or meter.

Butterfly

Used to represent and compare two data series side-by-side.

Candlestick Chart

Used by stock traders to determine possible price movement based on past patterns. A candlestick chart displays four price points – open, close, high, and low – across a specified period of time.

Chord Dependency Wheel

Used to show relationships between items.

Choropleth Map

Used to represent an aggregate summary of a geographic characteristic within an area.

Column

Used to present categorical data with rectangular bars with heights or lengths proportional to the values that they represent.

Column Range

Used to show the range of a particular value in a category.

Comparative Bar

Used to compare two sets of data on the same axis.

Directed Graph

Used to represent asymmetrical, directional relationships between objects (called nodes).

Donut

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents. The area in the center can be used to show additional information.

Euler Diagram

Used to illustrate the relationships between sets or groups, like explaining complex hierarchies and overlapping definitions.

Funnel Chart

Used to represent values at successive stages of a process.

Gantt

Used for displaying overlapping tasks over time.

Gauge

Used for comparing values between a small number of variables, either with multiple needles on the same gauge, or multiple gauges.

Grouped Bar

Used for showing multi-category change over time.

Grouped Column

Used to compare multiple sets of data.

Heat Map

Used to show the magnitude of a phenomenon as color in two dimensions.

Hierarchy

Used to portray the elements of a system, organization, or concept from its highest position to the lowest. Connecting lines explain the relationship between different objects.

Histogram

Used to represent an approximate representation of the distribution of numerical data.

Honeycomb / Hexbin

Used in place of a choropleth map to avoid area bias, since each region is represented by a hexagon of equal size.

Interactive Map

Used to enable the exploration of a geographic area.

Line

Used to track changes over short and long periods of time. When smaller changes exist, line graphs are better to use than bar graphs. Line graphs can also be used to compare changes over the same period of time for more than one group.

Multi-Area

Used to display multiple categories when their data points are highly variable over time.

Multi-Line

Used to track changes over time for two or more categories.

Packed Bubble

Used to compare values of multivariate data. The positioning of the bubbles carries no meaning; the chart is optimized for compactness.

Percentage Area

Used to display the proportions of various categories over time, and how each contributes to the cumulative total.

Percentage Bar

Used to represent percentages instead of values.

Percentage Column

Used to represent percentages instead of values.

Pie

Used to illustrate numerical percentage, where the arc length of each slice is proportional to the quantity it represents.

Radar Chart

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

Sankey Diagram

Used to display flows and their quantities in proportion to one another, using the width of arrows or lines to show their magnitudes.

Scatter Plot

Used to display values in a large set of data with two variables. Scatter plots are useful for visualizing clustering, trending, and movement over time.

Semicircle Donut

Used to more concisely display donut chart data.

Sparkline

Used to present the general shape of the variation in some measurement when space is limited.

Spiderweb

Used to display multivariate data in the form of a two-dimensional chart of three or more quantitative variables, represented on axes starting from the same point.

Split Packed Bubble

Used to compare values of multivariate data. Bubbles are packed and organized into their respective categories.

Stacked Area

Used to display cumulative totals of multiple categories over time.

Stacked Bar

Used to show the parts of multiple totals.

Stacked Column

Used to show the parts of multiple totals, and how they change over time.

Streamgraph

Used to display high-volume datasets and discover trends and patterns over time across a wide range of categories.

Synchronized

Used to compare multiple data points over time.

Timeline

Used to visualize time lapses between events, durations), and the simultaneity or overlap of spans and events.

Tree Map

Used to display hierarchical data using nested rectangles.

Upset Plot

Used to visualize intersections of multiple sets of data, as in a Venn diagram.

Venn Diagram

Used to see the relationships between two or three sets of items.

Waterfall Chart

Used for displaying sequential activities over time, like loading objects on a page.

Windrose

Used by meteorologists to give a succinct view of how wind speed and direction are distributed at a particular location.

Word Cloud

Used to illustrate the importance, weight, or occurrence of various words.

The Design Encyclopedia is a passion project by Jon Moore to learn how to use Figma, and was designed and built in Webflow (this is an affiliate link). If you would like to reference the encyclopedia in a separate project, partner on a collaboration, or have a general inquiry, send me an email.

© 2021 Design Encyclopedia. All rights reserved.

A square collage of design components from the design encyclopedia.