Teaching Bar Charts through Data Visualization

showing the raw data

Data enables us to better understand the world around us.

Take this list of a few characters from the TV show, The Simpsons. It includes their names, genders, and their ages.

Let’s start with just the 5 main Simpson family characters.

We can represent each character with an icon, a small and uniform image.

Using these icons, we can now imagine how to move our data around in useful ways.

visually sorting the data

Let’s first sort each of the Simpsons characters by gender, where females get sorted on the left and males on the right.

See how each character icon moves into the respective groups?

Now we have a visual representation of gender from our original data table.

This visual order allows us to compare how many girls and boys we have.

For example, we have 3 girls on the left and 2 boys on the right.

Visually, we see that the difference between these two stacks is 1 character. This tells us that there are more girls than boys and how many more!

building a bar chart

One method for helping us count icons is to use tick marks, where we place small horizontal lines to align with our icons, with labels to mark individual numbers, like the number of girls and boys.

To connect these tick marks, we draw a vertical line to organize and structure these tick marks and labels into a vertical axis.

Now let’s replace our icons with a single rectangle shape around them.

This bar shows us the number of characters of each gender in a simpler way.

And the vertical axis tells us the number of characters without a need for individual icons.

Again, we can compare boys and girls using the tick marks on our vertical axis.

We see that with 3 girls and 2 boys, our difference is again 1 character between the two, and the taller bar for girls indicates they are greater in number.

scaling to larger datasets

Now we have a simple visual representation of our data using these bars.

An added benefit to the bar is that we can add a LOT more data without cluttering our screen.

Adding in hundreds of icons would get messy and hard to read and compare, but we can instead show our bars growing and update our labels and axis for a much larger dataset.

pivoting to a new bar chart

What if we want to see our data grouped by something else… like age?

Let’s take our bar chart and color each bar or gender by their age: child or adult.

Now we can compare the number of children to the number of adults for each gender.

We can move these colors together and update our axis to create a new bar chart for age.

Now, we are comparing the number of children to adults in the Simpsons TV show.

As before, we can compare values easily in this new bar chart and easily tell which group is greater in number.