Creating an Array of Plot Points

Imagine that we have a formula that we want to implement in JavaScript. Where we just want to determine the value the formula gives for a given input value then we can simply set up that formula in a function that accepts the input value in a parameter and returns the result. For example if our formula is X squared minus X then we can create the following function:

formula = function(x) {return x * x - x;};

We can then call that for any given value of x in order to return the result of applying the formula.

A more complex situation arises if we want to generate an array of points that satisfy the formula rather than simply getting the result for a single value. Effectively what we need to do is to decide how many values we want and the gap we want to apply between our X values and then call the function for each of those vales of X.

Array.prototype.intervals = function(first,count,gap) {
if (gap === undefined) gap = 1;
return Array.apply(null, Array(count)).map(function (z,i) {return first+(i*gap)});
var plot = function(formula,first,count,gap) {
return [].intervals(first,count,gap).map(function(x) {return {'x':x, 'y':formula(x)};})
var p = plot(function(x) {return x * x - x;},1,10);

The above code creates a plot() function that takes four parameters. The first parameter is the function containing the formula we want to apply and the remaining three parameters are used to generate an array of the X coordinates we want to use for the array. The second parameter defines our starting point (which is 1 in the example code), the third parameter defines the number of entries we want (10 in the example) and in this instance we have left out the fourth parameter and so the code defaults to using 1 as the gap between the values. This gives us an array of our X coordinates as [1,2,3,4,5,6,7,8,9,10] as the result from the intervals() call that the plot function does first. The plot() function then applies the map() method to that array to convert each entry in the array into an object with two properties 'x' and 'y'. The x property is set to the value initially in that position in the array while the formula supplied as the function in the first parameter passed to plot() is run using that value in order to set the 'y' property.

The result of the plot() function call shown is [{x:1,y:0},{x:2,y:2},{x:3,y:6},{x:4,y:12},{x:5,y:20},{x:6,y:30},{x:7,y:42},{x:8,y:56},{x:9,y:72},{x:10,y:90}] which is an array of ten x and y values that satisfy the formula.

If we were to increase the count from 10 to 19 and add a gap value of 0.5 then we would receive back the same ten pairs of values as before but we would also have an additional plot point between each of these providing further value pairs. Changing the count to 37 and the gap to 0.25 gives further points between each of those. So simply by selecting an appropriate number of points as the count and a small enough gap between them we can get as many plot points as we want.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow