An area chart is similar to a bar chart. It visualizes a sequence of values. Each value determines the height of the area at a particular point. The values are represented at evenly spaced points along the x-axis.

Interface

In this activity we will develop the following function to create an area chart:

def area_chart(
  values: list[float], y_min: float, y_max: float, width: float, height: float
) -> Graphic:

The parameters have the following meaning:

• values -- the list of values to represent
• y_min -- the value at the bottom end of the y-axis
• y_max -- the value at the top end of the y-axis
• width -- the width of the chart
• height -- the height of the chart

We can call the function as follows:

save_graphic("example-chart.png", area_chart([5, 10, 5, 20, 15], 0, 30, 200, 100))

This produces the following chart:

Decomposition

We can decompose an area chart into vertical slices. Horizontally, each slice goes from one data point to the next data point. Vertically, each slice consists of a right triangle sitting above a rectangle.

The height of the rectangle is the minimum of the two data points. The height of the triangle corresponds to the distance between the two data points.

Implementation

What You Learned

You learned how to compose an area chart from rectangles and right triangles.