Medical Computing > Scalable Vector Graphics

Introduction to Presenting Scientific and Medical Data on the Web using Scalable Vector Graphics (Continued)

Supporting User Interaction

The SVG document that we have been leading up to is shown below and given at action_potential.svg.

Action Potential in a Neuron

The new code introduced in this example is given below.


1  <svg width="100%" height="100%"
2       xmlns="http://www.w3.org/2000/svg">
...
9   <!-- *** JavaScript *** -->
10  <script type="text/ecmascript">
11  <![CDATA[
12    // start demonstration sequence
13    var state = 0;
14    function next(event) {
...
119 ]]> </script>
120  
121   <!-- Text for button -->
122   <text id="cue" x="20" y ="20" style="font-family:Arial; font-size:10pt">Click Start to begin.</text>
123   <rect id="button_rect" x="20" y="40" width="50" height="30" fill="#00CC00" stroke="black" onclick="next(evt)"/>
124   <text id="button_text" x="25" y ="60" style="font-family:Arial; font-size:12pt" onclick="next(evt)">Start</text>
...

Line 10 defines a JavaScript fragment that responds to user clicks on the start button. The SVG DOM is changed in respond to the user's clicks in a similar way to that described in Getting Started Developing Interactive Web Interfaces for Scientific and Medical Applications. The link between the click event and the JavaScript function next is the onclick="next(evt)" attribute defined on both the button rectangle and text. Eah subsequent click on the button highlights a different section of the curve until returning to the start.

Summary

This tutorial has just touched on the possibilities with SVG. Please see the references for links to many more features and links to libraries and tools for building charts, graphs, and other documents from.

Previous Next Contents
References

Please send me ideas and
opinions by email at webmaster@medicalcomputing.net or add comments to my blog. The content may become part of the web site.

© Alex Amies 2006