Unit 3 Lab 4: Building Data Visualization Tools, Page 1

Technology has come at the cost of environmental pollution around the world. In collaboration with your partner, examine the data table given on this link.
1. What countries have the highest Carbon Dioxide (CO₂) emissions?
2. What countries have the highest CO₂ emissions per capita (per person)?
3. Which of these measures do you think is a better indicator of a country's contribution to global environmental pollution?

You can gain knowledge and insights by talking to others (in person or online) as you form questions and hypotheses about data.

This file contains
- A constructor of a new ADT (Abstract Data Type) called data-record with two fields label and value.
- Two selectors for the new ADT, to extract specific data from a data-record input.
- A max of list reporter that finds the largest element of a list.
Explore the blocks already written for you and understand how they work.
Develop code for the draw axes block. It should draw the horizontal and vertical axes based on the given stage coordinates of the origin x0, y0 and the given length, height information.

This diagram may help you understand how the given information will determine the horizontal and vertical axes. As you will be graphing only positive values, the axes should meet in the lower left corner as shown in the diagram. There should not be any labels or tick marks at this point. The markings in the diagram are shown for clarity.

In the draw axes block also make sure that the coordinates of the origin is stored in global variables x-origin, y-origin. In the upcoming steps of this project, other blocks will need this information to properly allign the bars and labels .

You can import the basic label block in your new projects via the "Import tools" option of the File menu:
Explore the basic label block included in the starter project. Try changing the location and direction of the drawing sprite.

Note that the label block does not need to have pen down in order to do its writing. Having pen down with the label block may cause some undesired effects.

You're not required to look inside the label block, but if you do, you'll see something unfamiliar.
Show more information.

Snap!, like pretty much everything that runs in a browser, is written in a programming language called JavaScript. The label block is implemented using a Snap! JavaScript function block that allows advanced users to extend Snap! by adding new blocks written in JavaScript.

You don't need to know how the label block works to be able to use it. By hiding its inner complexity from its users, the label block is a perfect example of abstraction.
Use the basic label block to develop code for the more elaborate label block that will place a label with the inputted specifications (text, size and direction.)

Note that the orientation directions should follow Snap! ’s convention for directions (0^o up, 90^o right, 180^o down, 270^o left). Test your new label with the four directions.
Develop code for the draw bar block. It should draw a vertical bar (a line with the given width and height) straight up from the current location with a label placed underneath the bar.

You may wish to review your earlier Brick Wall project to remind yourself how to draw bars with a pen of a given width. You don't need to import set flat line ends to block from that project but make sure that you have "Flat line ends" selected from the Settings menu to draw rectangular bars. You can see below the difference in two types of lines drawn.
Develop code for the draw bars block, which should draw a series of labelled bars of the desired width and an appropriate height that start on the left and continue to the right. In order to properly level the bars and the labels you may need to refer to the global variables x-origin, y-origin.

Note that given a maximum bar height, the heights of all the bars can be computed as a fraction of this maximum bar height. Using the following proportion, you can derive each country's bar height:

\frac{\text{country bar height}}{\text{max bar height}} = \frac{\text{country data value}}{\text{max data value}}

For example, if maximum bar height=240 and you want to find how tall the bar for USA should be, you first find the largest value in the data set which is 8715 (from China) and do the following computation

{\text{USA bar height}} = {\text{max bar height .}}\frac{\text{USA data value}}{\text{max data value}} = {\text{240 .}}\frac{\text{5491}}{\text{8715}}\approx {\text{151}}

While finding the maximum of the data values, first you need to get a list of values and then apply the max of list block. The following block which uses the selector value from data-record will extract a list of values from the given data list.
map(value from data-record()) over (data list)

map(value from data-record()) over (data list)

Develop code for the label vertical axis block so that it labels the vertical axis based on the specified inputs. For simplicity, you can assume that the labels will always split the vertical axis into 10 equal parts (using 11 tick marks) like this:
Now you are ready to put everything together and develop code for the Bar Graph drawing block for a given data list input. Fill in the blanks.

You are allowed to use any other blocks as you need in the definition of Bar Graph.
When everything is done, the following code, with a few extra labels for the graph title, should produce a bar graph as shown below:

Please note that the lowest value on the vertical axis must be zero for this bar graph to be a legitimate data visualization. If, for example, you had started the vertical axis at 5000, it would look like China is a vastly worse polluter than the USA.

In general, be very skeptical of graphs presented to you that do not start at zero.
Your coding should be general enough to accommodate a new set of data (also included in your starter file):

Note: "per capita" means "per person". So, for example for China, the total CO₂ emissions was divided by the population:

\frac{\text{8715 Million metric tons}}{\text{1.337 Billion persons}} = {\text{6.52 metric tons per person}}

These values are already given to you in the starter file as CO₂Emissions per capita Data.

In collaboration with your partner, compare the two bar graphs. What insights does each graph provide about CO₂ emissions? Is one better than the other?

Creating Bar Graphs