SVG Cartesian Viewport

When dealing with the presentation of graphs, a cartesian coordinate system (y-axis up) is more advantageous than SVG's (y-axis down). I show you a simple way to establish a cartesian viewport inside your SVG document, based on group transforms.

Let

x0,y0 .. upper left corner of cartesian viewport in SVG user coordinates
w, h .. width and height of viewport (SVG user units).
xmin, xmax .. minimum and maximum of x-values (cartesian coordinates).
ymin, ymax .. minimum and maximum of y-values (cartesian coordinates).

To achieve the desired transform (from cartesian to SVG coords), we need to consider the single steps:

move the upper left corner of the viewport into the origin (cartesian coords).
reflect at the x-axis to get y-axis down.
scale from our cartesian coords to SVG coords.
move viewport to upper left corner (x0,y0) (SVG coords).

This reads in matrix notation (read from right to left)

   [ 1 0 x₀]   [ s_x 0 0]   [ 1  0 0 ]   [ 1  0 -x_min ]   [ s_x  0  -s_x*x_min + x₀ ]
   [ 0 1 y₀] * [ 0 s_y 0] * [ 0 -1 0 ] * [ 0  1 -y_max ] = [ 0  -s_y  s_y*y_max + y₀ ]
   [ 0 0 1]   [ 0 0 1]   [ 0  0 1 ]   [ 0  0  1 ]   [ 0   0         1    ]

   with

   s_x = w/(x_max-x_min)
   s_y = h/(y_max-y_min)

We implement this via an ECMAScript function

   function CartesianViewport(group, x0, y0, width, height, xmin, xmax, ymin, ymax)
   {
      if (group)
         group.setAttribute("transform", "matrix(" +  width/(xmax-xmin)               + "," +
                                                      0                               + "," +
                                                      0                               + "," +
                                                     (-height/(ymax-ymin))            + "," +
                                                     (-width/(xmax-xmin) * xmin + x0) + "," +
                                                     (height/(ymax-ymin) * ymax + y0) + ")"  );
   }

Take care of the side effect when using text in this cartesian viewport, that it is (unequally) scaled and reflected.

Here is the example

Now we understand transformations one more bit better.