01 - micro:bit and Data

visualizing data on the micro:bit

In this first activity, we are using the micro:bit to collect and visualize data. The micro:bit only has 25 LEDs, but don't let that discourage you. With a little bit of imagination, you can visualize even large data sets.

Requirements

Use the micro:bit buttons A and B to collect and display data.

Limitation

The data collected can not exceed 10 votes per case.

Data Collection Button A will gather information for what we'll call caseA and Button B will gather information for what we'll call caseB. caseA and caseB can be anything you want or need. Some examples are:

1. Student spoken languages

   • caseA. Students that speak 2 or more languages.

   • caseB. Students that speak one language.

2. Bedtime

   • caseA. Students that go to bed before 10 pm.

   • caseB. Students that go to bed after 10 pm.

Data Visualization

Each time button A or B is pressed, one LED on the micro:bit display lights up, keeping count and representing the number of caseA and caseB selections.

Read the requirements and try to code the activity. Once you are done or you give it your best, take a look at the way we solved it, below.

Create Variables to Store caseA and caseB

We need to collect and store information for each one of the cases we want to visualize. We are creating two variables, one called caseA and another called caseB. We want these variables to start at zero when the application starts.

Nothing to test yes, but we are set for the next step.

Increase caseA Count by Pressing Button A

We learned about this process when we explore Our Tools. C- Counting section. We add a change block that increases the value of caseA every time we press the A button.

You can test what we have done by adding a show number block with the caseA variable in it if you like, but we'll be adding our visualization in the next step.

Light Up One LED to Represent caseA's Count

To light up individual LEDs on the micro:bit, we use the plot block. This block uses the coordinates of an LED on the micro:bit to turn it on.

When you test these blocks on the emulator or the micro:bit, you'll see that the LED that we are lighting up is not at position x = 0, y = 0, but at x = 1, y = 0. We are solving this problem by subtracting one from caseA each time.

This is the code with that correction:

Note: The micro:bit coordinates start at x = 0, y = 0 at the top left corner of the LED matrix. You can see the coordinates for each LED by hovering the mouse pointer over each LED on the MakeCode Emulator.

Add Logic to Restrict caseA to 10 points

Our A button works and can keep track of up to 5 counts. We could leave it there, but we are adding code to help us add a second line, increasing our count to 10 and also displaying an X when the user presses the button more than 10 times.

Our A button is fully functional. It triggers an action to store data and provides a visual representation of the data for caseA.

Code Button B to represent caseB

The steps for button B are exactly the same as for button A! There are a few minor changes related to:

• The button we are coding is B, not A.

• The variable we are changing is caseB, not caseA.

• The x locations we are plotting, are not 0 and 1, but 4 and 3 to display the information on the right side of the micro:bit screen.

Great work! Test the appllication on the Emulator or the actual micro:bit.

You can see our solved version here

In the next section, we are utilizing the sensors on the micro:bit to collect and continuously display data using a Servo Motor. See you in Servo Motor and Data.