Interactive 2D Graph Slice Tool

In order to interactively demonstrate certain geometric concepts such as y-at-x, x-at-y, or parameter value at a particular point on a curve, it is necessary to quickly scan lines of constant-x or constant-y value on a 2D graph.

I demonstrated this tool to someone and he said it looked like you were slicing the graph into two planes, which is actually an accurate statement.  So, for lack of a better term, I decided to call this a graph slice tool.  It is oriented horizontally or vertically in order to select or identify lines of constant-y value or constant-x value, respectively.  Two triangular markers are rendered that serve as dragging handles.  It is allowable to make the width and height of these handles zero and simply use a thick line as the slice tool.

As the slice tool is dragged, the new x- or y-value is computed (in user-coordinates, not pixels) and sent as an argument to a callback function.

This demo illustrates a vertical slice tool on a fixed, 2D graph.  Move the triangular handle back and forth to identify lines of constant x-value.  Colors and line thickness may be varied in the slice tool create() method and the tool is written on top of EaselJS.  As such, it is not formally a part of the CompGeoJS library, but it will be used in many of the demos that illustrate CompGeoJS features.  Source code is documented and not minified of obfuscated in any way so that you may study and improve upon the tool’s implementation.

Enjoy!

 


Comments are closed.