Teacher's Choice

Building a Graphing App (Teacher's Choice)

Blue Button feedback:

Plotting a single point, given its two coordinates, should feel this simple:
PlotPoint block using go to x y, pendown, move 1, penup

Then you could graph a whole list of data points by inventing a block like Graph datapoints (pointlist) that uses for each to apply PlotPoint to each point in the list. Depending on the kind of graph you want, you could even connect the dots.

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?
percentage of births named Derek by year

The x-values can't be plotted because they are completely off of Snap!'s stage. And the y-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 huge increase in popularity between 1960 and 1980 at all.

A good graphing app needs to let the user set the scale of the screen, to specify where to focus attention—where to zoom in.
  1. Load this Snap! project. It contains several blocks already built for your convenience.
    1. Click the set window 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.
    2. Experiment with inputs to these two blocks to get them to report 0.
      stage coord for x stage coord for y
      How do your input numbers relate to the window scale?
    3. Use go-to-x-(stage-coord-for-x)-y-(stage-coord-for-y) with those same input numbers. Where does it put the sprite?
    4. Without changing the sprite's position, click x-value-at-stage-coord(x-position) and explain the result you get.
    5. For this graph, a sprite at the bottom right corner of the stage should say (4, 30), not (240, -180).
      Now create a script that tells the sprite to say its correct graph coordinates (not its stage coordinates).
    6. Use the When I am dropped block with your new script so that when you move the sprite around, it says its graph coordinates wherever it is dropped.
    7. I made some changes here including changing "(0,0)" to "around." I wasn't sure what was intended before though. Is this ok? -MF
      Now, change the inputs of set window scale to (1927, 2014, 0, 0.5) and click it to reset the scale of the screen. Check to see if your sprite says what you expect when you move it around the stage.
      set-window-scale-xmin-(1927)-xmax-(2014)-ymin-(0)-ymax-(0.5)
  2. I made several changes here too— both for clarity and to set the student up for the next step. Please review as I'm not 100% sure I interpreted your intentions correctly. --MF
    Experiment with various inputs to set window scale to see where it puts the axes and how it represents the "substitutes" for the axes, when the axes can't be shown. Then, change the inputs of set window scale back to (1927, 2014, 0, 0.5).
  3. Build go to scaled point.

    On the baby name graph for Derek, the point (1971, 0.25) is roughly in the middle of the screen. Check to see if go-to-scaled-point-x(1971)-y(0.25) is working as you expect it to.

    percentage of births named Derek by year
  4. Then, build PlotPoint so that it uses go to scaled point instead of plain go to. Check it to make sure it works as you expect it to.
  5. Finally, build Graph datapoints (pointlist) to make a dot at every datapoint, but not to connect the points (for now). Apply it to DerekData1927to2015. Your graph won't be connected and won't have labels, and it will fill the whole stage, but it should otherwise look like the graph above.
    graph of DerekData1927to2015 Now Is a Good Time to Save
  1. Invent a way to tell your graphing app, for each graph you make, whether to connect the points or not.