Lasso -- jp_doodle demo

jp_doodle makes implementing special purpose interactive visualizations easy.

Lasso

Dual canvasses provide a lasso feature which allows the user to select a group of named elements by encircling them with a polygonal "lasso".

In this figure the user may mouse down to draw a polygon and mouse up to close the polygon. Selected circles in the lassoed area will turn from green to pink.

Code

var element = $('#target_div');
// configure the canvas
var config = {
    width: 400,
    height: 400,
    y_up: true,
}
element.dual_canvas_helper(config);

var lasso_callback = function(names_mapping) {
    // change lassoed elements to pink
    for (var name in names_mapping) {
        element.change(name, {color: "pink"});
    }
};

// Provide a name for the lasso polygon for reference.
var lasso_name = "my_lasso_polygon"

var reset_lasso = function () {
    // delete the lasso polygon if it exists
    element.forget_objects([lasso_name]);
    // make or replace the circles.
    make_circles();
    // Don't delete the lasso polygon automatically so we can admire it for a while.
    var delete_it=false;
    element.do_lasso(lasso_callback, {name: lasso_name}, delete_it);
};

// set up the lasso the first time.
reset_lasso();

$("<div>Please lasso some circles once to turn them pink.</div>").appendTo(element);

var reset_button = $("<button>Reset</button>").appendTo(element);

reset_button.click(reset_lasso);

Discussion

To surround some of the circles with a lasso selection polygon hold the mouse down in the figure and move the mouse around the circles of the selection. Release the mouse to close the polygon and trigger the lasso selection action.

When the lasso selection fires the callback function receives a mapping of selected object names to object properties. Objects that have not been named will not be selected by the lasso.

Click the reset button to change all the circles back to green and set up another lasso interaction.