Vital Capacity Data Visualization | Learn Python with Graphical Programming for Beginners 12

Meimei May 06.2023

1 1646 Hard

In the previous lesson, we learned how to store lung capacity data through SIoT. And in this one, we will learn how to analyze the collected data. To this end, we recruited 10 participants to use the spirometer, then downloaded all the measured data from the SIoT server for analysis. The table below presents the collected data:

What does the table above tell us? Do you think there is a relationship between gender and lung capacity? Let's explore these questions together!

Goal

Display the lung capacity data in a line chart format on UNIHIKER, and show the average lung capacity values of males and females separately with a bar chart.

Get to Know

1. The concept of functions

2. The loop statement in Python

3. The map statement in programming

4. How to plot statistical charts using lines and shapes to visualize data

Preparations

Hardware:

HARDWARE LIST

1 UNIHIKER

Link

1 Type-C&Micro 2-in-1 USB Cable

Link

Software: Mind+

Download address: https://mindplus.cc/

Hands-on Practice

This lesson mainly focuses on how to use line and bar charts to visualize vital capacity data. We will divide it into the following two tasks:

Task 1: Plot a line chart

After processing the lung capacity data, we need to plot the data points on the coordinates system of UNIHIKER and connect them with line segments to create a line chart.

Task 2: Plot a bar chart

Based on Task 1, we will calculate the average lung capacity values for males and females separately, and then plot a bar chart to visualize these average values.

Task 1: Plot a line chart

1. Hardware Connection

Connect UNIHIKER to the computer via a USB cable.

2. Software Preparation

Open Mind+, and complete the software preparation according to the figure below.

3. Write a Program

To display lung capacity data as points on a line chart, we need to follow a few steps. Firstly, we need to create a Cartesian coordinate system with a horizontal axis that represents the sequence numbers of the data and a vertical axis that represents the lung capacity data. Next, we will list the data values and plot the data points on the coordinate system correspondingly. Finally, we connect the data points with line segments.

(1) Cartesian coordinate system

The Cartesian coordinate system is a pre-made image, so we just need to load it from the file resources into the File in the project.

We can set the coordinates image to display at the point (0, 0) on the UNIHIKER screen using the block Object name shows image at X0Y0.

(2) Plot data points

We need to put the measured lung capacity data in a list first, then create a variable named Lung capacity data to store the list, and finally use block set Lung capacity data to initialization list[] to initialize the list. The data in the initialization list are shown in the table below.

How can we plot data points on the coordinates system when the data is stored in the list? Well, we can use a for loop command to take out lung capacity data in the list, and then create a variable lung capacity value to store them.

Note: For relevant information on the "for loop command", please refer to the Knowledge Base.

Next, we need to plot the data points on the coordinate image on the UNIHIKER screen using the "object name shows fill circle at XY radius fill color" command. How to determine the X and Y coordinates of the filled circle? Let's take the first data 1675 as an example and make an analysis combining it with the image below:

To determine the x-coordinate of the first plotted point for the lung capacity data, we can use the tick marks on the x-axis. Since the distance between each tick mark is 20 and the x-coordinate of the first point is 39(19+20), we can create a variable X and initialize it to 19. The y-coordinate represents the lung capacity data, but we can't use the lung capacity value directly as the y-coordinate values. That's because the range of lung capacity values far exceeds the range of coordinates that can be displayed on the screen, and the data values are inversely proportional to y-coordinate values (the origin of the UNIHIKER coordinates system is at the top left corner of the screen). To solve these issues, we can use the map from command to map the lung capacity value to the y-axis of the UNIHIKER coordinate system. Now we can create a new variable Y to store the mapped lung capacity data. And the Y coordinate in the "fill circle" command is the mapped variable "Y".

Note: For more information about "map" command, please refer to the Knowledge Base.

(3) Connect points with line segments

After plotting the data points, we'll connect them with line segments using the object name display line segment end point line width color command. First, we need to confirm the XY coordinates of the start point and the end point of the line segment. When displaying the first point, there is no need for a line connection. When displaying the second point, we need to connect it to the first point with a line. If X>39, we'll create a new variable Y1 to obtain the Y value of the first point. Therefore, the start point's XY coordinates of the line segment are: (X-20, Y1), and the end point's XY coordinates are: (X, Y).

(4) Create a Plot a line chart block

In the program, the functions of plotting data points and connecting them with lines are both implemented under the Python main program start. But there are so many blocks under it. To

make the program organized, we can only reserve some initialization blocks under the main program and put others somewhere else while keeping the whole functions unchanged, now let’s see how to achieve that.

Click "My Blocks", then click "Make a Block", and name the block "Plot a line chart". Click "OK" then the Plot a line chart block is created.

Note: For an introduction to "My Blocks", see the Knowledge Base.

After creating the block, a new define Plot a line chart block will appear in the script area.

Then, drag out the programs responsible for plotting data points and connecting them with lines from the Python main program start and place them inside the define Plot a line chart block, and call the Plot a line chart block in the main program to make the whole program clear and concise. However, keep in mind that the variables used in Plot a line chart need to be defined as global variables there. The complete program is as follows:

4. Run the Program

Click Run and the lung capacity line chart will be displayed on the UNIHIKER screen after the program runs successfully.

Task 2: Plot a bar chart

1. Write a Program

Do you know why we use a bar chart to show the average lung capacity of males and females? Because bar charts allow us to easily compare the magnitude of data values and the differences in proportions between them. Next, let's use a bar chart to see if there is a relationship between gender and lung capacity data.

Before writing the program, let’s figure out what functions should be implemented to achieve our goal. First, we need to calculate the average lung capacity of males and females, then map the values to a coordinate graph, and finally label the values on the bar chart correspondingly.

(1) Create a block Plot a bar chart and call it under Python main program start. All programs for plotting the bar chart will be written in the block Plot a bar chart.

(2) Calculate the average lung capacity data of females.

From the data table above, it is easy to see that the lung capacity of females corresponds to numbers 2, 4, 6, 8, and 10, and the rest are the data of males. Now with all the data stored in one list, so how can we separate the data of males from those of females?

Well, we can create a list named Girl's lung capacity, put it under Python main program start and initialize it.

And we use a for loop command to extract the data from the lung capacity data list by index 1, 3, 5, 7, 9, and store them in the Girl's lung capacity list.

After extracting the female lung capacity data, we can calculate the average value using average in list command in the Number category. Put the Girl's lung capacity list in the command to calculate the average value.

(3) Plot the bar chart

To plot the bar chart, we can use Object name display line segment start point xy end point xy line width color command and set the line width to 20. Now, we need to determine the XY coordinates of the start and end points of the line segment. The X coordinate of the line segment specifies the display position of the bar chart on X-axis, so we can directly set the X coordinates of the line's start and end points to 110.

The end point Y coordinate of the line segment can also be determined to be 300 because the bar line horizontal axis passes through the point(0, 300) on the UNIHKER coordinate and is parallel to its X-axis. Then we use the map command to assign the mapped female average value to the variable Y, so the start point Y coordinate of the line segment becomes Y.

The bar for the average lung capacity of males can be plotted similarly, but it should be noted that the range is 0-9 when extracting data of males from the list using the for loop command.

(4) Display the average values

After successfully plotting the bar chart, we'll use the object name shows text at xy font size color block to label the corresponding average values of males and females in the bar chart.

The complete program is shown below:

2. Run the Program

Click Run, and UNIHIKER will display the plotted line chart of lung capacity data and then show the bar chart for the average values after running the program successfully. The display effect is shown in the figure below:

3. Have a Try

Next, try using the method from Task 2 to plot the average value of total lung capacity data on the bar chart as well, then improve the details of the chart. The reference image is shown below.

Knowledge Base

1. What is data visualization?

Data visualization is a powerful tool that enables us to quickly and effectively extract valuable insights from large amounts of data. The quality of the information obtained is largely dependent on the methodology employed. At its core, data visualization involves transforming complex data into clear and intuitive visual representations using various graphical techniques.

Charts are a common means of data visualization, with line charts and bar charts being the most widely used. Line charts not only show the data values, but also reveal trends in the increase or decrease of data over time. Bar charts can instantly show the magnitude of data and compare the proportional differences between various data points. Of course, there are many other types of charts that can be used to display different characteristics of data. You can search and study them if interested.

2. Functions

What is a function? A function is a sequence of program commands that performs a specific task, packaged as a unit. This unit can then be called in programs multiple times wherever that particular task should be performed, thereby reducing redundant code. In large programs, functions are often used to break down complex logic into multiple blocks of code, each responsible for a particular task.

Consider this scenario: you have written a program to complete a specific task. But what will you do when you need to perform the same task again at a later time? Rewrite the entire code from scratch? This way is too inefficient because it requires duplicating the code every time the task needs to be performed. A more efficient approach is to define the program as a function. Then, whenever the task needs to be performed, you can simply execute (call) it rather than duplicate the code.

Functions are essentially blocks of code written beforehand that can be reused to perform a specific task. You need to name it so that you can simply call it by the name when the same function is needed again in later programs.

3. The for loop

In our project program, we use a for loop command, as shown in the figure below. Why is this command called a for loop?

That's because the generated Python code contains the keyword "for."

This code block utilizes the built-in range() function in Python to generate an integer sequence. You need to set three parameters in the block: the start value, the end value, and the step size.

The code can iterate through a range of values, increasing from the start value by the step size until the end value is reached. Once the end value is reached, the loop immediately exits. The number of loops is controlled by changing the variable "my variable".

What is range() function? Let's analyze it in its Python code. The my variable is a variable, and range() is a function. The range represents a collection of integers arranged at equal intervals within a specified range. For example, if we set the start value to 1, the end value to 9, and step size to 2, then the range() function will create a sequence of integers {1, 3, 5, 7, 9} that are spaced two units apart. The step size (2) represents the my variable increases by 2 from the start value of 1, so in this case, we can extract the female lung capacity values by indexes {1, 3, 5, 7, 9} from the lung capacity list and put them into the Girl's lung capacity list.

You may have noticed that in the block, we set the range to be 1-9 with a step size of 2. However, the generated Python code shows range(1, 10, 2), which may seem incorrect.

Note: This is because the range() function in Python generates a sequence of numbers from the start value up to, but not including, the end value, and then exits the loop. However, the for loop command is to exit the loop when the counter reaches the end value, not before. So the generated Python code adds 1 to the end value specified in the block.

4. Loop statements in Python

In addition to the for loops, there are also while loops in Python. There are five different loop commands under the control category in Mind+. Next, we will get to know their usage through the blocks and the generated Python codes.

It can be observed that the first three loop commands all contain the keyword "for" in their Python code, while the last two contain "while." In Python code, loop structures can be divided into two types: for loops and while loops. The table below gives detailed information:

5. Map

The map command is used to convert data within a certain range to data in another range proportionally. You can think of it as a scale converter. For example, the map command below can convert the number 20 between 0-100 to the number 2 between 0-10.

The map code in Task 1 is used to establish a mapping between lung capacity values and Y-coordinate values on the UNIHIKER, so that the values can be plotted based on Y-coordinate of UNIHIIKER.

6. Command Learning

Challenge

In this lesson, we learned how to plot line and bar charts for lung capacity data using line segments and shapes. Now, try adding two buttons based on the program above to realize more functions. For example, when the "Line chart" button is pressed, the line chart for lung capacity data will be plotted on the UNIHIKER screen; when the "Bar chart" button is pressed, the bar chart for the averages will be displayed on the screen.