Intro to Charts in UI

The X and Y axes are the two reference lines on a graph or chart. The X-axis runs horizontally (left to right) and usually represents time or categories, showing the progression of data points. The Y-axis runs vertically (up and down) and typically measures the value or frequency of what's being studied, showing how much, how high, or how fast.

Together, these axes form a grid where data points can be plotted, allowing us to see patterns, trends, or relationships within the data. They are fundamental in understanding how one variable may affect another and in making comparisons clear and easy to analyze.

A legend in a chart is a guide that explains the symbols, colors, or patterns used in the chart. It's typically a small box or area on the side or bottom of a chart that contains a list of the symbols or colors and what they represent. For instance, in a line graph, the legend will tell you what each line stands for, like different categories or time periods. In a pie chart, it might explain what each color slice represents.

Gridlines in charts are light lines that run along the X and Y axes, crossing the chart to create a grid. They extend across the plot area to make it easier to read and interpret the data by providing a reference point for the viewer's eyes.

While not always necessary, gridlines can significantly enhance a chart's readability, especially when dealing with large sets of numbers or complex data.

Bubble charts are a unique type of data visualization that look like clusters of bubbles. Each bubble represents a data point with 3 dimensions: its position on the X and Y axes shows two dimensions, and its size represents the third. Sometimes, color or animation adds more dimensions.

These charts are great for visualizing complex relationships between numerical variables. For example, you might use a bubble chart to compare movies by showing their worldwide grosses through bubble size, with the year of release on the X-axis and production budget on the Y-axis.

However, bubble charts can become cluttered and confusing when there is too much data or when the data doesn't fit well into 3 dimensions.

Radar charts, aka spider charts or web charts, are used to outline one or more groups of values over multiple variables. For example, radar charts can help compare different health metrics of different people in a group or visualize the performance data of each person in a team. 

While radar charts are a good choice for comparing multiple variables, they may be hard to interpret if you use too many or too distinctive variables or have multiple color-filled polygons in one radar chart.

A candlestick chart is a type of financial chart used to describe the price movements of a security, derivative, or currency over time.

The main part of the candlestick is the "body," which represents the range between the opening and closing prices. If the closing price is higher than the opening price, the body is often white or unfilled, indicating a price rise. Conversely, if the closing price is lower, the body is usually black or filled, indicating a price drop. Thin lines called "wicks" or "shadows" extend from the body's top and bottom to show the period's high and low prices. These provide additional information about price variability within the trading period.^[1]

Candlestick charts are highly valued for their ability to provide a quick, clear picture of market trends and potential reversals, making them a favorite among traders.

A pie chart is a circular graphic divided into slices to show numerical proportions. Each slice represents a different category, with the entire circle representing the total data set. The size of each slice is proportional to its quantity.

Pie charts are especially useful for showing the relative sizes of parts to the whole. They are ideal for displaying the distribution or composition of a data set in a simple and clear manner. For example, a pie chart makes sense when illustrating the percentage of market share held by different companies in an industry.

A donut chart is similar to a pie chart but has a blank center, creating a ring shape rather than a solid circle. This central space can be used for additional information or simply to make the chart more visually appealing. The main difference from a pie chart is aesthetic, but this hole in the middle can sometimes make it easier to read, especially when comparing multiple charts or dealing with small segments.

When choosing between a donut and a pie chart, consider the complexity of your data. Donut charts can be more effective when you have a large number of categories or when the differences between them are subtle.

Bar charts represent data using rectangular bars, where the length or height of each bar is proportional to the data value it represents. They are one of the most common types of charts used in various fields due to their simplicity and ease of interpretation.

Bar charts are particularly useful for comparing discrete categories or groups. For instance, they can be used to compare the sales of different products, the population of different cities, or the scores of different groups. They can also show changes over time if the categories are different time periods.

They can be displayed horizontally or vertically. Horizontal bar charts are a good option when you have long labels — for example, feature names or task descriptions.

A line chart is used to display information as a series of data points, known as markers, connected by straight line segments. It's one of the most basic and commonly used chart types, typically used to show trends over time or continuous data.

In a line chart, the X-axis often represents a time interval or a sequence of values, while the Y-axis represents the scale of the values being measured. Each data point on the chart corresponds to a specific value on each axis. When the points are connected by lines, they show the rate of change between the data points, making it easy to see increases and decreases, patterns, or trends.

In contrast to bar charts, line charts shouldn't start at a zero-value baseline. Remember, we need to observe the behavior of a metric over a value (e.g., time) rather than its magnitude.^[2]

If you take a line chart and color the white space underneath it, you'll get an area chart.^[3] Like line charts, single area charts are also good at representing how things change over time — for example, students' performance throughout the year. 

Generally, when we say "area chart," we imply the stacked area chart, where each region illustrates its contribution to the total. For example, you can use stacked area charts to display the number of active users who have a free plan, a basic plan, and a premium plan. Overlapping area charts allow us to compare the values between groups. They can be quite confusing to read if you have more than two areas.

To help users read area charts with less pain, it's a good idea to select the right order of areas. Usually, the most stable and large ones should lay the foundation, while the most variable or smallest groups should go on top.

A scatter plot uses dots to represent the values obtained for two different variables — one plotted along the x-axis and the other plotted along the y-axis. Each point on the scatter plot represents an individual data point.

The main purpose of a scatter plot is to show how much one variable is affected by another, or to show the distribution trends. It's a valuable analytical tool in statistics and data analysis for identifying correlations between variables, spotting outliers, clusters, and trends. For example, in a scatter plot comparing the relationship between exercise and weight loss, each point would represent a different person, with their amount of daily exercise on the x-axis and their weight loss on the y-axis.

Patterns in the scatter plot might reveal correlations, such as whether more exercise generally leads to more weight loss. Keep in mind that plotting too many data points can result in overlapping, making it hard or even impossible to identify relationships between variables.^[4]