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

1  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
2
3    <!-- Title and summary are not displayed -->
4    <title>Simple XY Graph</title>
5    <desc>An XY Graph for demonstrating a simple SVG drawing</desc>
6
7    <!-- The bounds of the graph -->
8    <g transform="translate(200,20)">
9
10     <rect x="0" y="0" width="600" height="200" fill="none" stroke="black"/>
11
12     <!-- Tick Marks for the y-axis-->
13     <line x1="0" y1="50" x2="10" y2="50" style="stroke: black;"/>
14     <line x1="0" y1="100" x2="10" y2="100" style="stroke: black;"/>
15     <line x1="0" y1="150" x2="10" y2="150" style="stroke: black;"/>
16
17     <!-- units for the y-axis -->
18     <text x="-25" y ="55" style="font-family:Arial; font-size:10pt">50</text>
19     <text x="-25" y ="105" style="font-family:Arial; font-size:10pt">0</text>
20     <text x="-25" y ="155" style="font-family:Arial; font-size:10pt">-50</text>
21  
22     <!-- y-axis label -->
23     <text x="-90" y ="90" style="font-family:Arial; font-size:10pt">Electric</text>
24     <text x="-90" y ="110" style="font-family:Arial; font-size:10pt">Potential</text>
25     <text x="-90" y ="130" style="font-family:Arial; font-size:10pt">(mV)</text>
26
27     <!-- The line being plotted.   -->
28     <!-- Transform to middle left side of y-axis axes so y-axis runs from -100 mV to +100 mV and -->
29     <!-- x-axis will run from 0 msec to 6 msec -->
30     <g transform="translate(0,100)">
31       <!-- Scale so that 1 msec = 100 pixels (x), 1 mV = 1 pixel, running up (y) -->
32       <g transform="scale(1, -1)" style="stroke: blue;">
33         <line id="step1Line" x1="0" y1="-70" x2="240" y2="-70" stroke-width="2"/>
34         <path id="step2Line" d="M240,-70 C250,-70 250,-50 252,-50" 
35               stroke-width="2" fill="none"/>
36         <path id="step3Line" d="M252,-50 C252,-50 250,-50 260,40" 
37               stroke-width="2" fill="none"/>
38         <path id="step4Line" d="M260,40 C260,40 265,50 270,40"
39               stroke-width="2" fill="none"/>
40         <path d="M270,40 C270,40 275,-80 290,-80 C300,-80 300,-70 310,-70" 
41               stroke-width="2" fill="none"/>
42         <line x1="310" y1="-70" x2="500" y2="-70" stroke-width="2"/>
43       </g>
44     </g>
45
47     <!-- The title for the x-axis -->
48     <text x="250" y ="220" style="font-family:Arial; font-size:10pt">time (ms)</text>
48
49   </g>
50 </svg>

The svg tag is the same as the last example.  The title and description tags, used on lines 4 and 5, are not displayed unless the browser has some other problem displaying the document. 

The group element, g, groups child elements on an imaginary separate canvas.  This introduces several new concepts, highlighted in bold here.  The g element on line 8 translates all child elements to use x=200, y=20 as the origin, defining a new user coordinate system.  The term SVG canvas  describes an infinite area for each dimension of the space.  Rendering of the SVG drawing on the canvas is on a finite rectangular region of the canvas, called the viewport, which is the area where users sees the SVG content. 

The rectangle element is used on line 10 to paint a rectangle 600 pixels wide, 200 pixels high starting at the (newly translated) origin (0, 0).  This is a box for our x-y graph. 

Lines 13 through 15 draw lines for tick marks along the y-axis.  Here the style is written as style="stroke: black;".  This uses the same syntax as CSS.  However, it could also have been written as stroke="black".  Lines 18 through 20 draw text to label the tickmarks drawn on lines 13 through 15.

On line 30 group is introduced to group the elements of the line for the electric potential together and translate the graph axis to the middle of the y-axis (0 mV).  On line 32 another group is introduced to scale the graph so y runs upwards.  We can now use the actual coordinates in electric potential in mV and time in msec to plot the points (except that msec are multiplied by 100), instead of thinking in terms of pixels.  For example, on line 33 a line is drawn from t = 0, E = -70 mV to t = 2.4 msec, E = -70 mV.  I avoided doing the transformation to actual physical user coordinates before this point because of the effect on the text labels (they would be printed upside down).

The graph curve is defined by lines and paths.  Paths are lines or outlines and are defined by the commands

• moveto - sets a new current point
• lineto - draw a straight line
• curveto - draw a curve using a cubic Bézier
• arc - elliptical or circular arc
• closepath - closes the current shape by drawing a line to the last moveto

The path command has the form <path d="...">, where d is the path data.  The 'M' (moveto) command moves the current point to the point following it to start drawing the curve.  For example, on line 34 the current point is set to (240, -70).

The 'C' (curveto) command has the form C x1,y1 x2,y2 x,y.  It draws a cubic Bézier curve from the current point to (x,y) using (x1,y1) as the control point at the beginning of the curve and (x2,y2) as the control point at the end of the curve.  The points (x1,y1) and (x2,y2) pull the curve towards them.  The entire graph could have been drawn with a single path element.  However, I broke it up for demonstration of the relation with ion channels and pumps, which leads into the next example.