SVGcalc Manual

A Scientific Graphing Calculator for Web Browsers

2008-2010, by Chris Sabatke (Version 1.2)

Contents


Background

There are many scientific/graphing calculators available. Many offer more numerous and advanced features than this one. That having been said, the aim of SVGcalc is to provide the set of calculation and graphing tools commonly needed by high school math and science students in an elegant, browser-based, open-source fashion. This project attempts to capitalize on the cross-platform nature of web-based languages (HTML, JavaScript and SVG) to create a calculator that can be conveniently stored on a hard drive, accessed over a local or wide area network, or made available via an internet webpage. The intent is for any W3C-compliant web browser to run the program natively (without the use of third-party plug-ins). The specific functions chosen for the calculator, ranging from an expanded screen for long formulas, to least-squares regression of data sets, to function and inequality graphing, has been informed by my own 15 years of experience as a high school science/math/computer instructor. Finally, free distribution of the product is offered in the hope of serving other teachers who, like myself, have struggled to find simple, user-friendly, inexpensive, and yet comprehensive solutions to the computational and graphing needs of the high school science/math classroom.


Basic Calculation

Basic calculations in SVGcalc are accomplished by pushing the buttons on the face of the calculator or by typing a formula into the calculator screen. Implied multiplication is supported as much as possible. So, for instance, the formula 3*pi/4 can be entered as 3pi/4. For the most part, SVGcalc uses the function notation of JavaScript. √7 is entered as sqrt(7), for instance. Other operations that make use of function notation are logarithms -- log() and ln(), absolute value -- abs(), trigonometric functions -- sin(), asin(), cos(), acos(), tan() and atan() and exponentials -- exp(). For raising a base to the power of an exponent, SVGcalc supports both pow() and the more common caret (^) syntax. Thus xy can be calculated using either x^y or pow(x,y). Factorials can also be entered using function fact() or using the more common exclamation operator (!). The modulo operator (%) returns the remainder in a division operation, and should not be confused with a percentage calculation.

Once a formula has been typed or keyed into the calculator screen, it is executed by hitting the = button, by using the TAB key to move the cursor to the answer field on the face of the calculator, or by clicking into the answer field with the mouse.

The calculator has two angle modes -- degree and radian. To toggle between modes, click the Angle selector on the face of the calculator. The current mode is designated as deg or rad. All trigonometric function inputs and outputs are interpreted in accordance with the active angle mode.


The Advanced Calculation Module

The advanced function screen of SVGcalc is opened and closed by clicking the more/less selector on the face of the calculator. When first opened, the advanced function screen displays the advanced calculation module. Other modules are selected using the MODULE dropdown menu.

The calculator screen in the advanced calculation module is somewhat larger than the screen on the calculator's face, but operates the same way. After executing a calculation, the calculated formula and its answer can be stored for future recall by clicking the Store button. This will add the calculated formula to the CALCULATIONS menu and its answer to the ANSWERS menu. When an answer is later selected from the ANSWERS menu, a reference to its value in the form ans[i] is added to the calculator screen. Any previously-stored answer can be referenced in this way. For instance, ans[1] would refer to the first stored answer in the ANSWERS menu, and ans[25] would refer to the 25th. There is no limit (other than available computer RAM) to the number of calculations that can be stored in this way. If the Store all checkbox is selected, every calculation and answer will be stored.

When a previously-stored formula is selected in the CALCULATIONS menu, the formula is returned to the calculator screen for editing. This allows previous calculations to be modified. Note that the calculation number currently being executed is displayed above the calculator screen. When a previously-stored calculation is edited, its stored answer is also changed. If other calculations have been performed that rely on this stored answer, they will be changed as well. In one sense, this allows the calculator to behave like a spreadsheet -- a large number of interconnected calculations can be created, and then simultaneously modified by changing only one initial expression or value. If a previously-stored calculation is deleted completely (i.e. cleared) during editing, the calculation and its answer are removed from the menus.

When referring to previously-stored answers in the ANSWER menu, recursive notation can be used in which the index i refers to the current calculation number, i-1 refers to the previous, i-2 to the answer of two calculations ago, and so forth. This notation allows recursive values to be calculated quickly. For example, to calculate the factorials between 1 and 30, the following two formulas could be entered and stored:

1: 1!
2: i*ans[i-1]

After the second calculation, the Store all checkbox could be selected, and the = button pressed 28 times to quickly complete the calculation. Results (shown at right) are visible in the ANSWERS menu.

The VARIABLES menu allows new variables to be created, edited or deleted. Variable names are case-sensitive, but restricted to alphabetic characters. Once a variable has been stored in the VARIABLES menu it can be referred to by name in formulas. For example, if three variables named A, B and C were created and assigned, the following formula (to calculate the first of two quadratic equation roots) could be executed in the calculator screen:

(-B+sqrt(B^2-4*A*C))/(2*A)

As well as numerical values, variables can contain formulas. For instance, if a variable named m were created, then the expression m*c^2 might be stored with variable name E (since E=mc2). Further calculations could then refer to the variable E, which would itself be modified if variable m were modified. The Var+ button can be used to quickly assign a variable name to the value or formula displayed on the calculator screen.

Defined variables can be used in function expressions plotted on the graph. Changes made to variable values will automatically induce changes in plotted functions once the Draw graph button in the function graphing module is pushed, or the graph window is otherwise refreshed.

The CONSTANTS menu contains important constants from physics and chemistry. Two supplementary sets of constants can be activated using the menu -- the most common metric prefixes and the chemical atomic masses. After adding the metric prefix constants, for example, a distance of 5 kilometers could be rendered to meters using the expression 5kilo. After adding the atomic masses, the molar mass of glucose could be calculated using the formula:

C*6+H*12+O*6

The Reset button erases all stored calculations, answers and variables. The save link provides a way to save calculator data and settings. When save now is chosen from the save popup box, a new window opens to which the calculator data and settings are output in an XML (extensible markup language) text format. This window should be saved as plain text (or copied to an application from which it can be). Later, the XML text can be pasted back into the calculator by choosing open data from the save popup box.


The Function Graphing Module

The graphing features of SVGcalc require a web browser with full, native SVG (Scalable Vector Graphics) support. Recent versions of at least Firefox, Opera, Navigator, Safari, Camino and Chrome provide sufficient support for SVG. Internet Explorer, thus far, does not.

In the function graphing module, functions and inequalities can be plotted. Enter a function in the f(x)= field and push the Add button to add it to the FUNCTIONS menu. Click on the equal sign (=) to toggle between equality and inequality (> or <) modes. The domain (x) and range (y) intervals of the graph are specified using the Xmin, Xmax, Ymin and Ymax fields. Gridlines are drawn on the graph at intervals specified using the X interval and Y interval fields. These gridlines can be toggled on or off using the Show grid checkbox. Likewise, the graph axes can be toggled on or off using the Show axes checkbox. The Draw graph button creates the graph, which is opened in a separate browser window. It also refreshes the graph when changes are made to any of the graph specifications. Once a function has been added to the FUNCTIONS menu, its display status on the graph can be toggled between hidden and displayed by choosing the function in the menu. A checkmark (✓) next to a function equation designates that the function is currently displayed on the graph. The FUNCTIONS menu also allows function equations to be edited or deleted.

The DATA SETS menu allows sets of data points to be created, edited and deleted. Points are entered in ordered pair (x,y) format on a data entry screen, as shown at right. If more than 20 data points exist in a data set, scroll through the set as necessary using the forward (>>) and backward (<<) buttons. The Insert button allows a new data point to be inserted between existing points. To delete a data point, simply clear its x and y values. Use the Done button to save a set of data points and return to the main graph module screen. There is no limit (other than available computer RAM) to the number of data sets that can be created. Like functions, data sets are plotted on the graph, and can be toggled between hidden and displayed status using the DATA SETS menu.

Once a data set has been created, various types of curves can be fit to the data set using a least-squares algorithm to determine the curve of best fit. Available curve types are listed in the REGRESSION menu, and include linear, parabolic, square root, inverse, inverse square, exponential and logarithmic. When fitting a set of data points with a curve, each curve parameter can be constrained to a specific value, or else calculated by the least-squares regression algorithm. Generally, a parameter constraint is applied when the logic of a particular experiment requires that the best-fitting trendline pass through a particular point or have a particular asymptote. For instance, shown at left is a small set of data that seem to lie along a parabola, y=a(x-b)2+c. The first curve is a parabolic regression using no constraints. The second curve invokes the constraints of both b=0 and c=0, so that the parabola is confined to have its vertex at the origin. If the data had been measured for a ball rolling down an inclined plane, for which the known position of the ball was y=0 meters at a time of x=0 seconds, then only the second of these two curves would make logical sense.

Some types of best-fitting curves are more difficult to calculate than others. In simple cases, SVGcalc can determine a best-fitting curve analytically, but in other cases it must use methods of numerical approximation. The numerical approach, unfortunately, contains the potential pitfall that the regression algorithm can occasionally find the wrong solution to the regression formulas! Such cases are fairly self-evident, because the best-fit curve returned by the algorithm makes no sense. In these situations, the regression algorithm requires some intelligent help regarding the domain vicinity in which the fit parameter solution (always parameter b) will be found. Providing an intelligent starting point is called "seeding" the algorithm. For this purpose, the parameter constraint dialog box accepts a variable called bseed which instructs the regression algorithm where to start in its numerical search for parameter b. Shown at left is a small set of data that might describe repeated vertical bounces of a ball, for instance. Each has been fit with an exponential curve, y=a*ebx+c, with constraints of a=100 and c=0. In the first case, which was conducted without seeding, the algorithm returned a senseless function that nearly aligns with the x and y axes. In the second case, in which bseed=-0.2 was provided to the algorithm, the proper best-fit curve was returned.

SVGcalc graphs are interactive. Clicking on a plotted function reveals a menu of options. Functions can be traced, revealing their (x,y) ordered pair values, or the color or line style of a function can be changed. Likewise, clicking on a data point allows changes to the color or symbol of the data set. Double clicking the graph background displays options for creating text labels, changing background color or resizing the graph window (zoom in by a factor of 2, zoom out by a factor of 2, zoom in or out by a variable factor, and zoom to a new selected window). Once a text label has been added to a graph, clicking on it allows changes to its location, color or size. Text labels can also be unattached to the graph (they will not be affected by changes to the graph window) or attached to the graph (they will remain at fixed coordinate locations, moving as the graph window changes). Clicking on the outer graph boundary displays graph and axis title options. When changing the color of a graph element, colors can be specified using color names (SVG supports 147 color names) or RGB triplet notation (red, green and blue hues numerically specified in the range of 0-255).

The Make table button allows functions to be explored in table format. On the table screen, enter a function in the f(x)= field, an initial domain value in the Start field, and a domain increment size in the Increment field. Push the Tabulate button to calculate or refresh the function table. Table values can be scrolled up and down or zoomed in and out using the arrow and increment buttons on the left side of the table. Functions previously added to the FUNCTIONS menu can be quickly tabulated by choosing them from the menu. A larger table in a new window can be generated using the big button. The Draw graph button adds the function in the table to the FUNCTIONS menu and opens or refreshes the graph window.

The Reset button erases all stored functions and data sets, restoring the graph and table to their default settings.


The Triangle Solving Module

The sides and angles of a triangle are related to each other by two laws of trigonometry, the law of sines and the law of cosines:


law of sines


law of cosines


The triangle solving module provides a tool for triangle calculations. Enter in the Known values column whatever side and/or angle data is known about a triangle, and push the = button. The remaining sides and/or angles will be calculated, if possible, and returned in the Solution column. In general, three triangle values must be known in order to determine a triangle solution, but all three may not be angles. (Knowing all three angles of a triangle results in a fixed triangle shape, but of indeterminate size.) Some triangle data triplets are insufficient to produce a unique solution, but rather result in two possible solutions (example: A=3, α=30, C=4). In such circumstances, both possible solutions are returned, with each ambiguous value reported as either X or Y. If more information than necessary for a triangle solution is supplied in the Known values column, then the unnecessary information is deleted, and the triangle solution is calculated using the remaining information. If the information supplied in the Known values column does not result in any solution, then "no solution" is returned.

Note that both the angles in the Known values column and the angles returned in the Solution column, are evaluated according to the angle mode (degree or radian) displayed on the face of the calculator. The Reset button clears both columns of the triangle solving module.


The Differentiation/Integration Module

Differentiation is the mathematical process by which the slope of a function is determined. As shown at right, the slope of a function is the same as the slope of a line segment that is tangent to the function, or that parallels the function and touches it at only one point. Numerical differentiation proceeds by finding the slope of a line segment that joins two nearby points on the function, and then bringing these two points closer and closer together until they converge at the single point of interest. To differentiate a function, enter the function equation in the f(x)= field, enter the domain value for which the slope is desired in the x= field, and push the = button. If the function equation contains trigonometric expressions, they will be evaluated according to the angle mode (degree or radian) displayed on the face of the calculator.

Integration is the mathematical process by which the area under a function is determined. As shown at right, numerical integration proceeds by breaking a total area under the curve of a function into small increments, approximating the area of each increment using a geometric figure, and adding these together. In the midpoint method of numerical integration, rectangles are constructed at regular intervals along the function domain. In the trapezoid method, trapezoid-shaped increments are used rather than rectangles. In all types of numerical integration, the greater the number of increments used, the more closely the result will approximate the exact value of an integral (that is, the exact area underneath the function curve). To integrate a function, enter the function equation in the f(x)= field, enter the extremities of the domain region in the Lower bound and Upper bound fields, enter the number of calculation intervals to be used in the Increments field, and push the = button.

The result of a function differentiation or integration can be plotted on the graph using the Draw Graph button. The result of a differentiation is plotted as a line tangent to the graph at the specified point. Both the function and its tangent line are plotted on the graph. Equations for both are added to the FUNCTIONS menu on the function graphing module. The result of an integration is an area underneath the curve of a function. Both the function and its integrated area are plotted on the graph, and equations for both are added to the FUNCTIONS menu on the function graphing module. Thereafter, they can be hidden, edited or deleted in the same way as other functions.

The Reset button clears the fields of the differentiation/integration module. It does not delete differentiation or integration results from the graph.


The Programming Module

The programming module allows users to create their own executable programs using the JavaScript language. Use of this module requires a basic familiarity with the vocabulary and syntax of JavaScript. Enter a program name in the Name field. Like variable names, program names are case-sensitive and restricted to alphabetic characters. Names must be unique -- the same name cannot be used for both a variable and a program. Enter the JavaScript code of the program in the Program code field. The Store button will create the program and add its name to the PROGRAMS menu. A program can be edited by selecting its name in the PROGRAMS menu and pressing the Store button once editing is complete. Stored programs can also be deleted using the PROGRAMS menu.

Programs can define input variables that are assigned at the point of execution. Input variables are declared in a comma-separated list within parentheses after the name of the program. So, for instance, a program named my_program which expects two input values named a and b would be designated my_program(a,b) in the Name field.

Once a program has been stored in the PROGRAMS menu, it can be executed alone or incorporated into other calculations. Input variable values to be assigned at execution are listed in parentheses after the program name. For instance, my_program could be executed with the statement my_program(100,200), which would make variable assignments a=100 and b=200. Note that parentheses are used in ALL program references, even if the program does not expect input values. Thus a program that expects no input values is still executed with a reference like prog_name().

The Reset button clears the fields of the programming module. It does not delete stored programs.

A few notes and hints for program writing: A few program examples can serve to illustrate the flexibility and usefulness of user-defined programs.

Example 1: The following two programs receive two input variables (n and r) from which they calculate the number of possible permutations and combinations of a random subset of r items chosen from a larger set of n distinct items.

Name: nPr(n,r)

Program code:
return fact(n)/fact(n-r);		 Name: nCr(n,r)

Program code:
return fact(n)/(fact(n-r)*fact(r));

Example 2: The following program receives three input variables (A, B and C) from which it calculates the two roots of the quadratic equation Ax2+Bx+C=0. Both solutions are reported in a dialog box, and the first solution is returned to the calculator screen.

Name: quadRoot(A,B,C)

Program code:
var rootPos=(-B+sqrt(B*B-4*A*C))/(2*A);
var rootNeg=(-B-sqrt(B*B-4*A*C))/(2*A);
alert("The quadratic equation has solutions x="+rootPos+" and x="+rootNeg);
return rootPos;

Example 2: The following program calculates the average (mean) of an arbitrary number of user-specified values.

Name: mean()

Program code:
var sum=0, n=0, done=false, next_val;
while(!done){
  next_val=prompt("Enter value ('d' when done):");
  if(next_val=="d"){done=true}
  else{n++; sum+=parseFloat(next_val)}};
return sum/n;

Known Bugs and Limitations