# CL Newsletter, September 2020 - Our Favorite Layouts, Ep. 2

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:

 Screenshot 2024-03-26 at 1.21.15 PM.png2146×1296 172 KB 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! Screenshot 2024-03-26 at 1.21.23 PM.png2146×1280 218 KB Manipulate two graphs and press a button to compare the results. Great for comparisons between two objects.
Full activity here

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. Screenshot 2024-03-26 at 1.21.45 PM.jpg1250×890 49.9 KB Screenshot 2024-03-26 at 1.21.52 PM.jpg1256×842 53.5 KB

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.

For a video tutorial, click here