We recognize how stressful this time must be for you. We’re here to help, but if time and space is what you need right now, set this email aside for later. When you’re ready, we’ve got another snazzy layout for you to check out.
Two-Graph Screens
We love two-graph screens because they allow students to manipulate two representations side-by-side and learn from the delightful connections between them. Here are a few examples:
| In July, John showed us how to use a sketch component to control an object’s movement across the screen. With two graphs, you can add more precision or even use different types of functions! | |
| Manipulate two graphs and press a button to compare the results. Great for comparisons between two objects. |
Rather than go into detail about each of these examples, let’s take a look at a simplified example that will help us understand the common mechanisms that make each of these screens tick. For this example, let’s say we want to make an interaction where the position of a movable point in the left graph determines the height and radius of a circle in the right graph.
The first step is to create two graphs that do their respective halves of the interaction. Make your two graphs, keeping in mind the information they will be sharing. Pro tip: Give them the same variable name!
| In the left graph, we create a movable point using the sliders x_1 and y_1. | In the right graph, we make a circle that uses y_1 as the vertical position of the center and x_1 as the radius. |
Now the fun part: Connect the graphs by sending relevant information directly from one graph to the other. Because everything we need is created in a graph, there’s no need for any functions to modify the information. You should be able to copy over numbers and lists from one graph to the other, and let the graphs handle the rest. In this case, we only need the second graph to know the values of x_1 and y_1 from the first graph, and we can make that connection using two simple sink/source pairs:
If you want to add buttons for animation or for timing hide/reveal combinations, just apply the same sink source pair (timeSincePress, pressCount, etc.) to both graphs.