Building a Graphing App

PG: This follows from the (much earlier) collect-datapoints project. The next page (improving your graphing app) gives a complex visualization that requires some data processing.

MF: SCRAP. I feel similarly (as with the previous page) here. If a person really wants to do data visualisation, building tools from Scratc (er, Snap) is "the hard way" to explore the data. Why build a tool that already exists? Just to show that you can? It's too much and distracting from the goal of exploring the power of data.

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:
plot point x: (x) y: (y){pen up; go to x:(x) y:(y); pen down; move(1) steps; move(-1) steps}

Then you could graph a list of data points by inventing a block like Graph datapoints: () 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?
Snap Stage Coordinates percentage of births named Derek by year

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.
  1. Click here to load this file. Then save it to your Snap! account.
    It contains several blocks already built for your convenience.
    1. 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.
    2. 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.
      xStage for xGraph: () yStage for yGraph: ()
      How do your input numbers relate to the graph scale?
    3. Use go to x: (xStage for xGraph: ()) y: (yStage for yGraph: ()) with those same input numbers. Where does it put the sprite?
    4. Without changing the sprite's position, click xGraph at xStage: (x position) and explain the result you get.
    5. Use the when I am dropped 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.
    6. 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 round () to (2) decimal places 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 sprite-saying-two-decimal-places makes more sense than sprite-saying-too-many-decimal-places in this context.
  2. 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.
    set graph scale, xMin:(1927) xMax:(2014) yMin:(0) yMax:(0.5)
  3. Build the following block which takes the graph coordinates of a data point and have the sprite go to the corresponding stage coordinates.
    go to xGraph:(x#) yGraph:(y#){go to x:(xStage for xGraph:(x)) y:(yStage for yGraph:(y)) }.

    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 xGraph:(1971) yGraph:(0.25) is working as you expect it to.

    percentage of births named Derek by year
  4. Then, build plot point xGraph:() yGraph:() so that it uses go to xGraph:() yGraph:() instead of plain go to x: () y: (). Check it to make sure it works as you expect it to.
  5. Finally, build Graph datapoints: () 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.
    Scatter Plot of Derek Data unconnectedScatter Plot of Derek Data connected
  6. Save your work as "U3L4-GraphingApp".
  7. Save your work
  1. 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.
    Graph datapoints:(DerekData1927to2015) connected: (true)