Animal Leg Chart

In this exercise you will visualize an aspect of the "animals dataset" of the "Bootstrap:DataScience" Curriculum.

The "Animals Dataset" is a table (here the Google Sheet provided by the Bootstrap team) that contains a row for each pet in a school class. It contains 32 animals in total; cats, dogs, and even a snake.

Tables as CSV Files

This activity comes with a table as a CSV-File (Comma-Separated Values), animals.csv. This is a text file. Each line in the table is stored as a line of text, and the different columns are separated with a comma.

Here is the header-row (which contains the column names, "Name", "Species", ...) and the three first rows of data of the table in CSV-format:

Name,Species,Sex,Age (years),Fixed,Legs,Weight (lbs),Time to Adoption (weeks)
Sasha,cat,female,1,FALSE,4,6.5,3
Snuffles,rabbit,female,3,TRUE,4,3.5,8
Mittens,cat,female,2,TRUE,4,7.4,1

Read CSV Files

In Python we could read such a text file into a string, then split the string into lines (at the "newline" characters), and the lines into cells (at the commas).

However, doing this correctly is not trivial. Fortunately, Python's csv library already does this for us. It includes, amongst other things, a "reader" (DictReader), that reads the file and turns each line (every animal) into a "dictionary" (dict). The dictionary contains for each column (for each attribute of the animal) an entry, which one can access with line["Column Name"].

Create the Chart

Now let's create a chart to represent the name, the sex, and the number of legs of each animal.

Here are our requirements:

• One animal per row
• On the right side, show the number of legs in the form of a bar (or more specifically, a number of circles, one circle per leg)
• On the right side, label the bar with the animal's name
• All rows have the same height
• All labels are right-aligned
• All bars are left-aligned
• Between label and bar, there is a gap, so that the label text doesn't directly touch the bar's first circle
• The label text and the bar circles are colored according to the sex of the animal: red for female, magenta for neutral, and blue for male

Map Animal to Color

Let's first implement a function that, given an animal, produces the color (according to the sex of the animal). Remember that the animal is a dictioary, and you can use animal[...] to access an entry. We are interested about the "Sex" entry of the animal.

But what are the possible sexes of an animal? We could open the CSV file in an editor and read it all to find out. Or we could write a short program to produce the set of all values of the Sex entries. Let's write that program!

Now let's implement our function! Let's color females red, males blue, and hermaphrodites magenta.

Now let's test your function. For this we create three test "animals" by creating three dictionaries. We only put the relevant entry--the sex--in each dictionary.

Then we print that sex entry and the computed color of each test animal. Our sex_color function returns a value of type Color; we can print such values and will see some internal information about them.

Compose a Horizontal Leg Bar

Now let's implement a bar function that takes an animal, extracts its leg count, and produces a Graphic that consists of as many circles beside each other as the animal has legs. The circles should be colored according to the animal's sex (use your color function to determine the color). The diameter of the circles should correspond to the height of a bar.

You should see three leg bars, one with three blue legs, one with five red legs, and one with two magenta legs.

Create a Colored Label

Now let's write a function that produces the label. The text should have a font size of 75% the bar height. Use "Roboto" as the font. The text should have the color corresponding to the animal's sex.

You should see the word "pumpkin" in red.

Compose the Animal Leg Chart

Now let's put everything together.

The animal_leg_chart function receives the name of a file and the height of one bar. It needs to open the file, create a DictReader, then iterate through the rows.

Note that the labels need to be right-aligned and the leg bars need to be left-aligned. There are several ways to make this possible.

One way is to pad each label and each leg bar by placing it on a background rectangle that has the width of the widest label or leg bar. For this, first produce all the labels and all the leg bars, and store them in lists. Then compute the maximum width of all labels, and the maximum width of all leg bars. Finally, iterate over the lists, and create padded versions of the labels and of the leg bars: create transparent (or white) rectangles with the maximum width, pin them to the right or left center, and compose them with the label or the leg bar, also pinned to the right or left center. Then place the padded label and the padded leg bar beside each other (and place a small gap between them). Do all of this in a loop, which accumulates the overall graphic, starting with an empty graphic, and adding one bar in each iteration.

Another way is by stacking all the labels in a right-aligned fashion, and stacking all the leg bars in a left-aligned fashion, and then placing them beside to each other (and place a small gap between them).

What You Learned

In this activity you learned how to read a CSV file, how to retrieve specific entries from each row, and how to turn this information into a visualization.