SearchResearch Challenge (4/19/17): Can you build (or find) an interactive widget for the island viewing problem?

I found myself trying to explain... 

... the "how high you have to be above the shore to see the Farallons" SRS Challenge to a friend.  

You remember the original Challenge about seeing the Farallons.  The question there was "can you see the Farallon Islands from the western shoreline of San Francisco?"  

There was an interesting observation in that post.  It turns out that you can see them from the bluff over the shore, but not when you're standing on the shore itself.  

We figured out that the explanation (ignoring atmospheric refraction effects) was that you have to be some distance above the sand in order to see the islands.  The question was really how high do you need to be to see the base of the islands?  

I told my friend about the math involved, waved my hands a lot, and drew a few diagrams on a piece of paper.  But sometimes, that's a bit, well... handwavy.  What I really wanted was a simple interactive graphic.  You know, the kind where you move the slider up and down, and it shows you how far out to sea you can see.  

An example of such a widget can be seen at the Physics Classroom Interactive Lens web page.  Here's an example: 

Side-by-side images from Physics Classroom, an interactive lens tool.
If you slide the focus slider (f) and the height slider (H), the image above changes in real-time
to show the relationships between focal length and the height of the original image.  

In this widget, when you slide the f and H sliders to the left or right, the paths of the lines change as you wiggle the variable values around.  

The Challenge this week is to figure out how to make such a thing to interactively show the relationship between height and visible distance.  

1.  Can you make an interactive widget that illustrates "how far out to sea can you see" without going into full-developer mode and writing a bunch of HTML, CSS, and Javascript?  

This Challenge is really for the teachers out there, who might like to make such a widget to help illustrate and teach a particular point.  But I suspect that having the ability to make these little instructive interactables would be a handy sensemaking tool in general.  

The REAL Challenge is to find a tool that will help you make such a thing. Once you find that tool, use it to make a simple interactive widget that illustrates this height-over-the-sand to visible-distance relationship.  



To get you started, here's a side-by-side sketch of what such a widget might look like.  In the first image, the observer's eye is 1.7 meters above the beach, which lets the observer see 4.7 km out to the visible horizon.  

The interaction is simple:  As you drag the red dot up, the value of the "height above the beach" changes.  In this image, it's 100m.  You can drag it down to 0, or up to a much higher number.   As you drag, the widget updates the "visible distance" number as you drag, and redraws the red line to touch a point on the circle (in this case, one that is 36 km out). 

In this next image, I've dragged it down a bit.  Here it's just 1.7 meters above the beach, and the red dotted line only goes out 4.7 km. As I drag the dot, the numbers should update, the line to the dot should move up and down, and the line to the point on the circumference of the circle should slide along to show the distance.  

NOTE:  These are sketches of what the widget might look like. They're NOT images from a working widget.  

The formula connecting these two variables look like this: 

     distance = 3.7 * (height ^ 0.5)  

where height is in meters, and distance is in kilometers.  (In the top example, since the height is 100m, the  square root of 100 is 10. Hence,  10 * 3.7 = 37 km.)  

To start off, see if you can find a toolkit that will let you make a simple widget--that is, one that lets you slide a slider.  (Don't worry about drawing the diagram on your first pass.)  Then, once you get that working, try to add in the diagram. 

Fair warning:  I don't know how hard this Challenge will be--I haven't solved it yet (or really started it).  On the other hand, this is much more like the SearchResearch Challenges analysts solve in their day-to-day work.  

I'll be fascinated to see what we can come up with.  

When you get something working, put it into a web page and post your URL to the comments section.  I'll collect them (along with your comments about how to answer the Challenge) next week. 

If it's going slowly, I'll give some hints over the next few days (and maybe extend the Challenge for a second week).  

As always, let us know what you're thinking about as you search.  What queries did you do?  What were your experiences in finding a tool to help build this thing?  How did you figure it all out? 


Search on!