ST EK List:
1.2.3B Computation facilitates the creation and modification of computational artifacts with enhanced detail and precision.
Building a Graphing App
On this page, you will learn how to scale values so that you can graph any data set on the Snap! stage. Blocks to do the calculations are already written for you but you can, if you like, examine them to see how they work.
Plotting a single point, given its two coordinates, should feel this basic:
Then you could graph a list of data points by inventing a block like just like your work in Unit 2 Lab 2. Depending on the kind of graph you want, you can connect the dots or not.
That seems like all you should need. But what if the scale of your data does not fit on the Snap! stage (between -240 and 240 in the x direction and between -180 and 180 in the y direction)? For example, what if you want to plot the popularity of a baby name over time, like this?
The years can't be plotted on the horizontal because those values are completely off Snap!'s stage. And the percent values 0, 0.1, 0.2, 0.3, etc., are so close to each other that they would all look the same. We wouldn't see the increase in popularity between 1960 and 1980 at all.
We need a way to convert between Snap! stage coordinates and the values—we'll call them the graph coordinates—for a given set of data points.
A good grapher needs to let the user set the scale of the screen, to specify where to focus attention—where to zoom in.
-
It contains several blocks already built for your convenience.
- Click the
set graph scale
block with the inputs it already has (-2, 4, 30, 300) to see what it does. In addition to drawing on the screen, it sets several variables that your other blocks will need so that they know the intended screen dimensions.
-
The following two blocks report the Snap! stage coordinates given the graph coordinates of a point. Experiment with inputs to these two blocks to get them to report 0.
How do your input numbers relate to the graph scale?
- Use with those same input numbers. Where does it put the sprite?
- Without changing the sprite's position, click and explain the result you get.
- Use the block to create a script that tells the sprite to say its correct graph coordinates (not its stage coordinates) wherever it is dropped. Move the sprite to a few places on the stage to test your script.
For this graph, a sprite at the bottom right corner of the stage should say (4, 30), not (240, -180).
To see the full display of coordinates use
block (in the Operators palette, built for this project) to round the coordinates reported to the decimal places you want to see.
A display of
makes more sense than
in this context.
- Experiment with various inputs to
set graph scale
to see where it puts the axes and how it represents the substitutes for the axes, when the point (0, 0) would not appear on the stage. Drag the sprite a few places to see if the sprite says what you expect. Then change the inputs of set graph scale
to fit the range of years and percents in name data and click it to reset the scale of the screen. Again, check to see if your sprite says what you expect when you move it around the stage.
-
Build the following block which takes the graph coordinates of a data point and have the sprite go to the corresponding stage coordinates.
.
On the baby name graph for Derek, the point (1971, 0.25) is roughly in the middle of the screen. Check to see if is working as you expect it to.
- Then, build so that it uses instead of plain . Check it to make sure it works as you expect it to.
-
Finally, build to make a dot at every datapoint. (For this graph, you will want the points connected. For the data on the next page you will want them separate. Make sure you design this block in a way that makes that feature easy to change.) Apply it to
DerekData1927to2015
. The points of your graph may or may not be connected and the axes won't have labels, but it should otherwise look like the graph above.
- Save your work as "U3L4-GraphingApp".
-
Invent a way to tell your grapher, for each graph you make, whether to connect the points or not. You will want to have a Boolean input type for indicating if points are connected.