We want to compose bar charts with colored bars and axis labels, like the following:

In this activity we want to develop a bar_chart function that produces the above bar chart when called like this:

bar_chart(
    [0.5, 1.0, 0.9, 1.0, 1.5, 0.1],
    [red, yellow, green, cyan, blue, magenta],
    ["red", "yellow", "green", "cyan", "blue", "magenta"],
    200, 100, 20
)

Problem Decomposition

The resulting bar chart is quite complex. Let's decompose it! This way we can create a bunch of smaller functions that create the different parts of the chart.

The chart_area is very similar to the bar chart from the simpler bar chart activity. The only difference is that the bars also have different colors.

The y_axis is rather simple: it has the same height as the chart_area, and it has a text at its top and a text aligned at its bottom.

The x_axis consists of rotated texts, centered below each bar.

There is a horizontal gap between the y_axis and the chart_area, and a vertical gap between the x_axis and the chart_area.

Gaps

We need gaps between the different parts of the chart (and between bars).

Implement two functions to create gaps: hgap to create a horizontal gap of a given width, and vgap to create a vertical gap with a given height. To crete a horizontal gap, we can create a rectangle with that width and with a height of 0 (vice versa for a vertical gap). While we have to specify the color of the rectangle, the color we pick does not really matter, because the rectangle has an area of 0 and thus is invisible.

A Single Bar

A bar chart consists of bars that are placed next to each other. Different bars in the same chart have different heights and different colors. To determine the height of a bar, we need to take into account:

• the amount of space we have for the complete chart (specifically, the chart_height)
• the value represented by this specific bar (value)
• the maximum value to be shown in the chart (max_value), which will be represented by the tallest bar, which will take up the entire chart_height

Compute the bar_height, and then construct a rectangle with the necessary dimensions and the given color.

Chart Area

Implement a method to draw the chart area. This should show all the bars required to visualize the given lists of values and colors. The bars should be bottom-aligned, and separated by a gap. The gap should be computed based on the given width of the area, and the number of bars to represent, and the gap_width_fraction (gap width as a fraction of bar width).

Use the bar and hgap functions you created above.

Use compose and pin to compose the bars so they are bottom-aligned.

To ensure that you have gaps between bars, but not before or after bars, you may want to use a loop with an index and an if statement to avoid adding the (first or) last gap.

X-Axis

Implement a method to draw the x_axis.

Constructing the x_axis is similar to constructing the chart_area: you have to compose a sequence of graphics, separated by gaps. In this case the graphics are the individual labels.

Implement x_axis_label to produce a label. Each label is a text that is rotated by 90 degrees centered on top of a rectangle that has the same width as a bar.

Use the given font size for the texts, and use a font like "Roboto".

Y-Axis

Implement a method to draw the y_axis.

The y-axis consists of a label at the top (a text) with the maximum data value, and a label at the bottom, with the value 0.0. You may want to place the two texts on a rectangle (or vgap) that is as tall as the chart area, aligning one at the top right, and the other at the bottom right. Use the given font size for the texts.

A Complete Bar Chart

Given the chart_area, x_axis, and y_axis functions, we are now ready to create a complete bar chart.

Our bar_chart function receives a list of values, colors, and labels, the desired overall width and height of the chart, and the desired font size.

Lugano's Neighborhoods

Now that we have a working bar_chart function, we want to use it to visualize some real data!

Here is data about the nighborhoods of the city of Lugano. We first design a dataclass to represent a neighborhood. Then we create a list of all neighborhoods.

Visualizing a List of Objects

Using dataclasses, like the Neighborhood class above, is a nice way to organize data. If we want to use bar_chart to visualize a list of dataclass instances (objects, table rows), we first have to extract a list of numbers, a list of colors, and a list of labels.

Let's create a function that does this extraction (mapping) for us. This way, all we need to specify is how to extract a number, a color, and a label from one object of the dataclass, and the rest is taken care of.

We already wrote the code for that for you: Run the cell below to define the bar_chart_from_objects function.

Neighborhood Populations

Let's show the population of each neigbhorhood, sorting the neighborhoods in ascending order by population.

Implement the three lambdas to extract, given a Neighborhood n, the number (to use for the bar height), the color (to use as bar color), and the string (to use as bar label). Let's make all bars red. Thus, the second lambda will return red, no matter to which neighborhood it is applied.

Population Density

Show the neighborhoods by population density, with the bar height corresponding to population density, and the bar color saturation corresponding to population.

Use hsv_color, with a hue of 0, a brightness value of 0.8, and a saturation given by the population (population of that neighborhood divided by maximum population).

More...

Explore the dataset further, for example by visualizing the elevation differences for each neigborhood.