SVG Function Plotter

If we want to get the x coordinate of the intersection point, we set y in equation (1) to −yMin and solve for x:

The negative of yMin must be used in order to obtain a positive x value.

The two situations ($\mathrm{O\; P1\; P1A}$ and $\mathrm{O\; P2}$) are illustrated more detailed in the figure below:

If the line intersects with the right viewbox border, we get the point P1A with the x-coordinate x1 — which is outside of the viewbox. So we must limit the x-value to find P1:

In case 2, the line intersects with the upper viewbox border at P2. In this case, the solution is

x2 is less than xMax, so we can accept that.

Now lets find the y coordinate for a line in quadrant 1. Again, we have two situations:

1. The line intersects with the right viewbox border at P1
2. The line intersects with the upper viewbox border at P2

In detail:

We set x = −xMax in equation (1) and solve for y. We need a negative xMax to obtain a negative y-coordinate in this quadrant.

If the line crosses the right viewbox border at P1, we obtain y1, which is greater than yMin, so we can accept the result:

In the second case, the line intersects with the upper viewbox border, we get P2A with the coordinate y2 — which is outside of the viewbox area. So the result must be limited:

The figure below shows the situation in the second quadrant. Here, both x and y coordinates are negative:

To keep things familiar, we will work with the complimentary angle β:

If the line intersects the left viewbox border, we get the x-coordinates xMin and y1:

If the line crosses the upper border of the viewbox, we get the following coordinates:

This is the situation in the third quadrant:

Again, we work with the complimentary angle β:

If the line intersects the left viewbox border, we get the x-coordinates xMin and y1:

If the line crosses the upper border of the viewbox, we get the following coordinates:

Similar to quarant 1, we have to use negative values to obtain the correctly signed results.

This is the situation in the third quadrant:

In this quadrant, all coordinate values are positive.

Again, we work with the complimentary angle β:

If the line intersects the left viewbox border, we get the x-coordinates xMin and y1:

If the line crosses the upper border of the viewbox, we get the following coordinates:

After drowning in the details, it's good to regain an overview. Below are the eight equations used to calculate the coordinates:

The first quadrant:

The second quadrant:

The third quadrant:

The fourth quadrant:

A closer look at these equations reveals that the combinations are all slightly different for each quadrant. So, we cannot combine them.

Note that an axis lines has two legs at opposite quadrants, and each leg has to be calculated separately!

The following figure illustrates an axis line with the specified angle α through the reference point R:

If we assume the reference as new origin (0, 0), we get a transformed coordinate system:

The range values for the transformed coordinate system are obtained from these equations:

With these new values used in equations (2) to (12), we can calculate the axis end point coordinates as before.

The SVG image projects a real-world data range (rwMin to rwMax) on the SVG viewbox range (vbMin to vbMax).

This is a simple projection without offset between origins, due to the fact that the ratio $\frac{O-\mathrm{rwMin}}{\mathrm{rwMax}-O}$ is equal to $\frac{O-\mathrm{vbMin}}{\mathrm{vbMax}-O}$ .

A more general projection is shown below, with real-world space above the axis line, and the SVG viewbox space below:

The real-world origin (0) is not projected on the viewbox origin (0) but at some offset (40). This shift is a consequence of the projection of the real-world data range on the viewbox data range.

The formula for the transformation from real-word to viewbox coordinates uses a scaling factor (SF) and an offset (vbOff):

Similarly, the transformation from SVG viewbox coordinates to real-world coordinates is done by

The second tranformation project the 1D axis space on the 2D viewbox space.

The orientation of an axis can be arbitrary and is defined by the angle (α), measured counterclockwise, value range is from 0 to 360 degrees. Zero degree corresponds to a horizontal axis, pointing to the right.

The black axes represent the viewbox axes of the SVG image. A circle at their intersection indicates the viewbox coordinate system origin (0,0). Note that the orientation of the y axis is down, not up as you might expect.

The green arrow, the z axis, represents a section of a function space dimension, with its origin (0) somewhat offset from the viewbox origin. Start and end points of this axis are projected on the viewbox axes, their viewbox coordinates are defined by the length of the axis (len) and the axis orientation angle (α).

Normally, the axis should extend to the image border, but for clarity, the z axis has been shortened a little bit.

The viewbox coordinate system defines some fundamental values for the entire SVG image:

vbXMin

X axis minimum (left) value. Defined in the SVG element's viewBox x attribute.

vbYLen

X axis length. Defined in the SVG element's viewBox w attribute.

vbXMax

Length of the x axis. Computed.

$\mathrm{vbXLen}=\mathrm{vbXMax}+\mathrm{vbXMin}$

vbYMin

Y axis minimum (top) value. Defined in the SVG element's viewBox y attribute.

vbYLen

Y axis length. Defined in the SVG element's viewBox h attribute.

vbYMax

Length of the y axis. Computed.

$\mathrm{vbYLen}=\mathrm{vbYMax}+\mathrm{vbYMin}$

The viewbox coordinate system origin is always at (0,0).

An axis line intersects the viewbox borders at two points. We need to find their coordinates in order to calculate their properties. Depending on which of the four viewbox sides an intersection point is located, one of four different formula sets has to be applied to find its coordinates.

But we are not yet there. Currently, we only know the axis orientation angle α1, supplied by the caller, and the viewbox properties, xMin, xMax, yMin and yMax:

To use the axis angle as selection criterium, we divide the viewbox into four areas, defined by the corners and the viewbox origin:

Then we can calculate the four angles φ1 to φ4:

Now we have the criteria to locate the intersection points in one of the four areas and calculate their coordinates:

function calculateIntersectionPoint( α ) {
	let x, y;
	α = α % 360 ;
	if ( α between φ1 and φ2 ) {
		y = yMin;
		x = −yMin tan α ;
		}
	else if ( α between φ2 and φ3 ) {
		x = xMin;
		y = −xMin tan α ;
		}
	else if ( α between φ3 and φ4 ) {
		y = yMax;
		x = −yMax tan α ;
		}
	else {
		x = xMax;
		y = −xMax tan α ;
		}
	return { x : x , y : y };
	}

	// Calculate the intersection points
const p1 = calculateIntersectionPoint( α1 + 180 );
const p2 = calculateIntersectionPoint( α1 );

NOTE that α2 can be calculated as α1 + 180 deg.

With the axis line coodinates at hand, we can calculate the axis length in viewbox units:

An axis has the following properties to support tranformations:

axAngle α

Axis orientation angle relative to the viewbox x axis, measured counter-clockwise. Range: 0 … 360 degree

Input, discarded after computations.

axMin

Minimum axis coordinate value. Computed.

If axAngle between 90 and 180 degree then

$\mathrm{axMin}=\mathrm{vbYMax}\cdot sin\alpha$

Len

Axis length, computed.

SFX

Scaling factor for the projection of axis values on the viewbox x axis. vbFTX = cos α

SFY

Scaling factor for the projection of axis values on the viewbox y axis. vbFTY = sin α

vbMin

viewbox range minimum (left) value

Input

vbLen

viewbox range length, vbMax - vbLen

Input

vbMax

viewbox range maxium (right) value

Computed

vbOff

viewbox value for real-word zero

Computed

rwMin

real-word range minimum (left) value

Input or computed

rwMax

real-word range maximum (right) value

Input or computed

rwOff

real-world offset value for viewbox zero.

Input or computed

SF

Scaling factor, used to scale real-world coordinates to viewbox coordinates

Computed

Depending on the two variables supplied by the user, one of the following calculation methods is used:

1. rwMax and Offs_rw given,
   SF and Offs_vb are calculated, rwMin is defined implicitly
2. rwMin and Offs_rwgiven,
   SF and Offs_vb are calculated, rwMax is defined implicitly
3. rwMin and rwMaxgiven,
   SF, Offs_rw and Offs_vb are calculated. Offs_rw will most probably not be a non-integer number.

Method 1 has the disadvantage that the viewbox origin might not map to a "clean" rwOffset, which is required if tickmarks should have "regular" values like 0.1, 0.2, 0.3 etc. Methods 2 and 3 avoid that, because the rwOffset can be chosen freely.

The scaling factor can be computed in three ways, which are equivalent:

Depending on what's available, a suitable variant can be chosen.

We will use the following projection for the calculation examples:

The following table outlines example 1 with input option 1:

The following table outlines example 1 with input option 2:

The following table outlines example 1 with input option 3: