This example illustrates how to mix controls in HTML and a plot in SVG. The SVG plot is a lattice plot where each point is labeled with a unique id that identifies its panel and group, e.g. "1-2-3" is the id of the third point in the second group (six cylinder cars) in the first panel. Within the HTML document, we have a choice menu with which the user can select a cylinder (four, six, or eight). When a cylinder is selected, a Javascript function (showChoice) in the HTML document is invoked and that gets a handle to the SVG document and then gets the points via their id attributes and sets their style to make them stand out. Also, the previous selection of points have their style reset to the original value.

The showChoice function gets the SVG document object by

  1. accessing the embeds array of the HTML document
  2. calling getSVGDocument() on the generic emebedded object
    3. to treat it as an SVG document.
At this point, we are back into regular ECMAScript code we would use within an HTML or SVG document.

Choose number of gears:
Last modified: Tue Mar 24 15:54:12 PDT 2009