|
THE SVG SPIRAL : JAVASCRIPT EXAMPLES Applied within the Adobe SVG Viewer(ASV 3.03) and Internet Explorer Environment (IE6/7/8) |
||
|
Last Updated: 02/26/2009 The Spiral is a highly compact graphic means of displaying data. The Spiral can be arranged in a three-dimensional serpentined manner in which symbols, representing data, are attached. Literally hundreds of graphic data reports can be easily viewed within a single pane of a hand-held or standard computer screen. Each data element is a rich graphic symbol that can be programmed to dynamically change as data changes. Because each symbol is an SVG element, it can be seamlessly linked to its companion data element, XML. Therefore, an XML database can directly drive the graphic symbols as the data changes. The inherant zoom & pan, plus tranforms of the SVG image provide clear viewing of the smallest detail of the graphic. SVG SPIRAL BASICS - The spiral is created from an SVG path element with a single "S" command and following points that are located using the spiral equation. This will present variables that can be changed so the spiral will fit an application. Methods on how to create and locate symbols along a spiral are also shown. Choosing an example will 'run' its function, show the related javascript code, and its resultant svg source. DYNAMIC SPIRAL EXAMPLES - The examples demonstrate XML/SVG creating dynamic SVG Spirals. Data Discs populate the Spiral. These Discs provide a visual status display of their spiral community. Selecting an example will 'run' the example function, show the related javascript code, and its resultant svg source. Examples include communication to/from the server, using lean & clean Classic ASP, performing elegant xml file adjustments. MEET THE PLAYERS - To simplify the examples, a few SVG elements have been created and named. Firstly, there's God, otherwise known as the SVG document. Then there is the Universe, the Root SVG element. Located in the Universe, is a Galaxy, in which "Spiral" exists. There is a special area called Heaven, where good stuff happens. |
|
Javascript Functions |
|
SVG Source |
|||
|
|
|||||
|
CLIENT-SIDE vs SERVER : rationale - When compared to a server, client computers are under-employed after the base document is loaded from the web.
Therefore, first loading a lightweight base SVG document, then propagating it via tight XML files, building SVG elements client-side, is preferred over calling them from the server.
QUESTIONS AND COMMENTS - You are invited to post comments, suggest examples, and discuss any related item at the Yahoo group: SVGdiscovery Author's Note: The code herein attempts to concisely present an example or concept, without regard to error trapping, other validation clutter, or wigetry ;). All code in these examples can be used without restrictions. |